못생긴 스웨터의 날은 12 월 셋째 금요일입니다. 올해는 12 월 20 일입니다. National Day Calendar 페이지에서 못생긴 스웨터의 날에 대해 알아보십시오.

지난 몇 년 동안 나는 레고 피겨 추악한 스웨터의 CSS 아트 버전을 만들었습니다. 시리즈 링크에서 전년도를 참조하십시오. 이 2024 년 추악한 스웨터는 Leia와 Empire Strike의 Echo Base의 전투를 특징으로합니다.

나는 지난 몇 년 동안 스웨터 템플릿으로 시작했습니다. 기본 몸통이 있습니다. 이 스웨터의 특집 캐릭터의 내부 몸통. 캐릭터 안에는 Div가 전투 반란군과 제국의 양면이 있습니다. 그 div에는 전투의 차량이 있습니다.

.character {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    overflow: visible;
}

.ground{
    width: 100%;
    height: 2px;
    background: white;
}


.rebels {
    width: 550px;
    height: 375px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.empire {
    width: 550px;
    height: 375px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: row;
}





  
  
  적군


 반란군은 대포를 특징으로합니다. 모양이 진행되는 한 기본적으로 쌓는 사각형입니다. 포탑에는 대포, 총 및베이스가 들어 있습니다. 









.turret{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;

    margin-right: 40px;
    margin-bottom: -280px;

}

.cannon_lid{
    width: 80px;
    height: 10px;
    border:4px white solid;
    margin-bottom: 32px;
    margin-left: 11px;
        position: absolute;
        z-index: 1;
        background: var(--sweaterblue);
}

.gun{
    width: 60px;
    height: 5px;
    background: white;
    position: absolute;
    margin-bottom: 32px;
    margin-left: 125px;
}

.turret_base{
    width: 30px;
    height: 40px;
    border: 4px white solid;
    border-top: 4px white dotted;
    position: absolute;
    margin-top: 40px;
}





  
  
  제국


 이미지의 제국은 AT-AT 또는 제국 워커입니다. 걷는 탱크입니다. 그것은 머리, 몸, 다리로 만들어졌습니다. 









.at-at{
    display: grid;
    justify-content: center;
    align-items: center;
    position: relative; 
    background: var(--sweaterblue);
    margin-top: 145px;
}

.at-at_main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; 
    position: absolute;
}




 머리와 신체 부위는 사각형이 약간 움직였다. 다리는 더 많은 작업을 취했습니다. 그들은 부분적으로 그룹화되어 회전해야했습니다. 먼저 그들은 앞쪽과 뒷다리에 의해 짝을 이루는 위와 아래쪽 다리로 그룹화 된 일입니다. 







The legs all start with the leg class and are the same shape. Some of the upper legs get another class called bent. This uses transform: rotate to change the leg shape. If a leg is bent then the lower part of the leg gets the lowerbent class, which just moves that part of the leg forward.



.legs{
    width: 10px;
    height: 50px;
    background: var(--sweaterblue);
    border: 2px solid white;
}
.bent{
    transform: rotate(45deg);
    height: 40px;
}

.lowerbent{
    margin-left: -10px;
}






  
  
  최종 이미지


 
 


  
  
  결론


 이것은 도전이었습니다. 블로그 전에 의사 코드를 제거해야한다는 것을 알게되었습니다. 내가 이것을 계획했을 때 나는 다리가 "다리", "위", "구부러진"입니다. Lowerbent ","Lowerleg "및 직선. 나는 그 모든 것을 위해 수업을 만들지 않았습니다. 일부는 이미 부모 수업에 의해 커버되었습니다. 


 읽어 주셔서 감사합니다.