문제
위 이미지를 그대로 코디해보세요.
독일 국기와 프랑스 국기를 그려보세요.
width-400px
height-300px
포지션은 자유입니다.
백그라운드도 구현해 보세요.
시작 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>그라데이션 퀴즈</title>
<style>
body {
height: 100vh;
background: ;
}
div {
width: 400px;
height: 300px;
margin: 30px;
}
.grad1 {
background: ;
}
.grad2 {
background: ;
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>
제출 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>그라데이션 퀴즈</title>
<style>
body {
height: 100vh;
background: #575757;
background: linear-gradient(145deg, rgba(87, 87, 87, 1) 50%, rgba(181, 181, 181, 1) 50%);
;
}
div {
width: 400px;
height: 300px;
margin: 30px;
}
.grad1 {
background: linear-gradient(black, black 33%, red 33% 66%, yellow 66%);
}
.grad2 {
background: linear-gradient(90deg, blue 33%, white 33% 66%, red 66%);
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>
background: linear-gradient(145deg, rgba(87, 87, 87, 1) 50%, rgba(181, 181, 181, 1) 50%);
https://cssgradient.io/ 에서 뽑아온 색으로 145deg로 각도만 설정함
.grad1 { background: linear-gradient(black, black 33%, red 33% 66%, yellow 66%); }
처음엔 black, black 100px, red 100px 200px, yellow 200px 로 했음
보이는건 비슷하게 보이지만 박스 크기가 변경되면 %로 되어있는게 안정적이라 수정
.grad2 {background: linear-gradient(90deg, blue 33%, white 33% 66%, red 66%); }
위와 비슷한 이유로 px(133-266-399) 하려다가 %로 바꿈
세로로 흘러가야해서 90deg사용
구현 목표 & 결과물 요약 별도의 이미지 파일 없이 순수 CSS의 선형 그라데이션(linear-gradient) 기능만을 활용하여 독일 국기와 프랑스 국기 패턴을 화면에 그린다. 박스의 크기 변화에 유연하게 대응할 수 있도록 반응형 단위인 백분율(%)을 사용하여 패턴의 안정성을 높인다.
핵심 사용 기술 (Key Skills)
- linear-gradient (선형 그라데이션): 색상이 점진적으로 변하는 속성을 응용하여, 여러 개의 색상 면을 가진 국기 형태를 구현한다.
- 색상 중단점 (Color Stops) 겹치기: 색상이 변하는 위치(예: 33%, 66%)를 동일하게 겹쳐서 지정함으로써, 그라데이션이 부드럽게 섞이지 않고 칼같이 나뉘는 선명한 경계선을 만든다.
- 백분율(%) 단위 사용: 고정된 픽셀(px)이 아닌 % 단위로 영역을 분할하여, 박스 크기가 달라져도 국기의 비율이 깨지지 않도록 유지보수성을 극대화한다.
- 방향 제어 (deg): 기본값(위에서 아래) 외에 90deg(가로 방향), 145deg(대각선 방향) 등 각도를 조절하여 빗면 배경과 세로형 국기(프랑스) 패턴을 제어한다.
학습 포인트 (회고) 처음 코드를 짤 때는 black 100px, red 100px 200px처럼 눈에 보이는 픽셀 단위로 영역을 나누었다. 당장 화면에 보이는 결과물은 비슷했지만, 추후 박스 크기가 변할 경우 레이아웃이 완전히 깨질 수 있다는 점을 깨닫고 모든 단위를 비율(%)로 수정하여 코드의 안정성을 높였다. 세로 방향으로 흘러가는 패턴(프랑스 국기)을 만들기 위해 90deg 각도를 활용했으며, 빗면 배경색의 경우 CSS 그라데이션 제너레이터(cssgradient.io)를 활용하여 실무처럼 효율적이고 정확하게 색상 코드를 추출해 낼 수 있었다. 스스로 문제 해결법을 찾아내며 구현한 첫 코딩 테스트
'직업훈련 > 직업훈련 일기' 카테고리의 다른 글
| 나만의 UI/UX 디자인 룰 10 (1) | 2026.03.27 |
|---|---|
| 웹폰트가 훌륭한 레퍼런스 (1) | 2026.03.25 |
| 26-03-05 HTML, 일러스트 테스트 (0) | 2026.03.06 |
| 26-03-05 포토샵, 입코딩, 코딩 (0) | 2026.03.05 |
| 26-03-04 포토샵, 일러스트 테스트 (0) | 2026.03.05 |