Ugly Sweater CSS: 드로이드

Source: Dev.to

아이콘 교체

첫 번째 CSS 추한 스웨터는 BB‑8을 특징으로 했기 때문에, 구형 드로이드를 다시 가져오기로 했습니다. 몇 개의 특수 문자를 사용해 그를 그렸고, 보통 행 끝에 나타나는 타이‑파이터들을 교체했습니다.

º❍

◦❍

º❍

.stitch p {
    transform: rotate(90deg);
}

스웨터 템플릿

저는 이전 연도의 스웨터 템플릿을 시작점으로 사용했습니다 – 주요 캐릭터들을 담는 기본 몸통(이번에는 드로이드).

<!-- sweater template markup -->

.wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.droids {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

드로이드 레이아웃

스웨터에 드로이드가 세 대 있습니다: BD‑72 유닛 두 대와 Gonk 드로이드 한 대. 레이아웃은 약간 티‑파이터와 비슷합니다.

<!-- droids layout markup -->

BD‑72 드로이드

The Mandalorian에 등장하며 (Peli Motto의 가게에서 일함) 그리고 어드벤트 캘린더의 마이크로 피규어로 포함되었습니다.

BD‑72는 직사각형(수직 및 수평)으로 구성됩니다.

<!-- BD‑72 markup -->

.BD-72 {
    width: 200px;
    height: 300px;
    background-color: var(--sweatergreen);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Head */
.BD-72_head {
    width: 100px;
    height: 25px;
    background-color: var(--sweatergreen);
    border: 4px solid white;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* Neck & Legs */
.BD-72_neck,
.BD-72_leg {
    width: 8px;
    height: 10px;
    background-color: white;
}

/* Antenna */
.antenna {
    width: 6px;
    height: 18px;
    background-color: white;
}

/* Wrappers */
.antenna_wrapper {
    display: flex;
    justify-content: space-between;
}
.BD-72_leg_container,
.BD-72_feet_container {
    display: flex;
    justify-content: space-between;
}
.BD-72_feet_container {
    justify-content: space-evenly;
}

머리는 흰색 테두리가 있는 초록색 직사각형입니다. 대부분의 섹션은 동일한 색 구성표를 공유하지만, 일부 부품(예: “RedLights”)은 빨간색입니다.

곤크 드로이드

스타워즈 우주에서 걷는 배터리. CSS에서는 직사각형이 쌓인 형태입니다.

초기 (컨테이너 없이) 마크업

<!-- initial Gonk markup -->

“이게 서명인가요? 외계어인가요?” – 아니요, 부모 컨테이너를 놓쳤을 때 생기는 현상입니다.

올바른 구조 (부모 컨테이너 포함)

<!-- proper Gonk markup with container -->

.Gonk_Body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

섹션 스타일링

/* Section 1 – top */
.Gonk_section1 {
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-bottom-color: transparent;
    border-radius: 5%;
}

/* Section 2 – middle (contains face) */
.Gonk_section2 {
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-bottom-color: transparent;
}

/* Section 4 – lower middle (contains button) */
.Gonk_section4 {
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-top-color: transparent;
}

/* Section 5 – bottom */
.Gonk_section5 {
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-top-color: transparent;
    margin-top: -5px;   /* 겹쳐서 틈을 숨김 */
}

얼굴과 버튼 추가

.Gonk_face {
    width: 120px;
    height: 40px;
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-radius: 5%;
}

/* Example button */
.Button {
    width: 30px;
    height: 30px;
    background-color: white;
    border: 4px solid var(--sweatergreen);
    border-radius: 50%;
}

일부 테두리를 투명하게 만들고 섹션을 겹치게 함으로써, 드로이드의 실루엣이 명확해집니다.

모두 합쳐 보기

세 대의 드로이드(두 대의 BD‑72 유닛과 한 대의 Gonk)가 스웨터 몸통 안에 자리 잡아, 축제 분위기의 스타 워즈 테마 울리 스웨터를 만들어요. CSS는 단순한 사각형, 테두리, 그리고 flexbox 위치 지정만을 사용합니다 – 이미지가 필요 없어요.

코드를 자유롭게 복사하고, 색상을 조정해 보세요(--sweatergreen 커스텀 속성은 메인 스타일시트의 다른 곳에 정의되어 있습니다). 그리고 여러분만의 드로이드 변형도 추가해 보세요! 즐거운 코딩 되시고, CSS가 여러분과 함께하길 바랍니다.

een);
    border: 4px solid white;
    border-radius: 5%;
    margin-top: -30px;
    position: relative;
}

.Button{
    height: 40px;
    width: 60px;
    background-color: var(--SweaterDarkRed);
    margin-top: 4px;
    margin-left: 5px;
}

Ugly sweater day는 12월의 세 번째 금요일입니다. 올해는 December 19th, 바로 오늘이죠. 저는 이 이유 때문에 오늘 글을 올리려던 건 아니었고, 단지 운이 좋은 타이밍이었습니다. 작년 글을 다시 읽어볼 때까지도 몰랐어요.

National Day Calendar 페이지에서 Ugly Sweater Day에 대해 알아보세요.