어글리 스웨터 CSS: 에코 베이스

어글리스웨터 데이는 12월 셋째주 금요일입니다. 올해는 12월 20일이다. 국경일 캘린더 페이지에서 Ugly Sweater Day에 대해 알아보세요..

지난 몇 년 동안 저는 LEGO Figure 어글리 스웨터의 CSS 아트 버전을 만들었습니다. 시리즈 링크에서 전년도를 확인하세요. 이 2024 어글리 스웨터에는 제국의 역습에 등장하는 레이아와 에코 기지 전투가 담겨 있습니다.

저는 지난 몇 년 동안 사용했던 스웨터 템플릿으로 시작했습니다. 기본 몸통이 있습니다. 이 스웨터의 주요 캐릭터는 몸통 내부입니다. 캐릭터 div 내부에는 반란군과 제국 전투의 양면이 있습니다. 해당 div 안에는 전투 차량이 있습니다.

<div>





<pre class="brush:php;toolbar:false">.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;
}

적군

반군 측에는 대포가 있습니다. 모양이 진행되는 한 기본적으로 직사각형을 쌓는 것입니다. 포탑에는 대포 뚜껑, 주포, 베이스가 포함되어 있습니다.

<div>





<pre class="brush:php;toolbar:false">.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;
}

제국

이미지의 Empire 쪽은 AT-AT 또는 Imperial Walker입니다. 걸어다니는 탱크입니다. 머리, 몸통, 다리로 구성되어 있습니다.

<div>





<pre class="brush:php;toolbar:false">.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;
}

머리 부분과 몸통 부분이 직사각형으로 조금 움직여졌습니다. 다리는 더 많은 작업을 수행했습니다. 부품을 여러 부분으로 그룹화하고 회전시켜야 했습니다. 먼저 위쪽 다리와 아래쪽 다리로 그룹화되고 앞다리와 뒷다리가 짝을 이루어 작업합니다.

<div>



<p>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.<br>
</p>

<pre class="brush:php;toolbar:false">.legs{
    width: 10px;
    height: 50px;
    background: var(--sweaterblue);
    border: 2px solid white;
}
.bent{
    transform: rotate(45deg);
    height: 40px;
}

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

<div>



<h2>
  
  
  최종 이미지
</h2>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173526811541121.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Ugly Sweater CSS: Echo Base"></p>

<h2>
  
  
  결론
</h2>

<p>이것은 도전이었습니다. 나는 블로그를 하기 전에 의사 코드를 제거해야 한다는 것을 배웠습니다. 이것을 계획할 때 다리를 "다리", "위쪽", "구부러짐"으로 표시했습니다. Lowerbent", "lowerleg" 및 Straight. 저는 그 모든 것에 대해 수업을 만들지 않았습니다. 일부는 이미 부모 수업에서 다루었습니다.</p>

<p>읽어주셔서 감사합니다.  </p>


          </div>