https://codepen.io/phyno118/pen/wBGeYyv
라이나 생명 박스 만들기
...
codepen.io
HTML)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>박스 레이아웃</title>
<!-- 외부 CSS 연결 -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- ============================
가장 바깥 큰 박스 (all-box)
- 화면 전체 1920x950
============================ -->
<div class="all-box">
<!-- ============================
안쪽 박스 (container)
- 가운데 위치, 1000x950
- 실제 콘텐츠 들어가는 영역
============================ -->
<div class="container">
<!-- ============================
상단 구역 (pro-list-box)
- 왼쪽 큰 박스(left-box)
- 오른쪽 박스(right-box)
============================ -->
<section class="pro-list-box">
<div class="left-box"></div>
<div class="right-box"></div>
</section>
<!-- ============================
하단 구역 (pro-list-box)
- 제목 + 리스트 박스 5개
============================ -->
<section class="pro-list-box">
<h2 class="section-title">최근 많이 찾는 보험</h2>
<div class="lists">
<!-- 작은 박스 4개 -->
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<!-- 마지막 넓은 박스 -->
<div class="list wide"></div>
</div>
</section>
</div>
</div>
</body>
</html>
CSS)
/* 기본 설정: 브라우저 기본 margin 제거 */
body { margin: 0; }
/* ============================
바깥 큰 박스 (all-box)
- 폭: 1920px
- 높이: 950px
- 화면 가운데 정렬
- 빨간색 테두리
============================ */
.all-box {
width: 1920px;
height: 950px;
margin: 0 auto; /* 좌우 가운데 정렬 */
border: 1px solid red; /* 테두리 */
background: transparent; /* 투명 배경 */
display: flex; /* 안쪽(container) 배치용 */
justify-content: center; /* 가운데 배치 */
}
/* ============================
안쪽 박스 (container)
- 폭: 1000px
- 높이: 950px
- 상·하단 테두리 겹치기
- 안쪽 박스와 테두리 사이 여백(padding)
============================ */
.container {
width: 1000px;
height: 950px;
margin: -1px auto -1px; /* 상·하단 테두리 겹치기 */
border: 1px solid red; /* 테두리 */
background: transparent;
display: flex;
flex-direction: column; /* 위에서 아래로 정렬 */
justify-content: flex-start;
gap: 20px; /* 구역(pro-list-box) 간 간격 */
padding: 20px; /* 테두리와 내부 박스 사이 여백 */
box-sizing: border-box; /* padding 포함한 크기 계산 */
overflow: hidden; /* 혹시 넘치면 숨김 */
}
/* 구역 공통 스타일 */
.pro-list-box { border: none; }
/* ============================
상단 pro-list-box
→ 왼쪽 박스(left-box), 오른쪽 박스(right-box)
============================ */
.pro-list-box:first-of-type {
display: flex; /* 가로 배치 */
gap: 20px; /* 좌/우 간격 */
}
/* 좌우 박스 공통 */
.left-box, .right-box {
height: 240px;
border: 1px solid red;
border-radius: 12px; /* 모서리 둥글게 */
background: transparent;
box-sizing: border-box; /* 테두리 포함한 크기 계산 */
}
/* 왼쪽 박스 */
.left-box { flex: 0 0 600px; }
/* 오른쪽 박스 */
.right-box { flex: 0 0 316px; }
/* ============================
하단 pro-list-box
→ 제목 + 리스트(list)
============================ */
.section-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 20px; /* 제목과 리스트 간 간격 */
}
/* 리스트 전체 컨테이너 */
.lists {
display: flex; /* 가로 정렬 */
gap: 20px; /* 리스트 간격 */
flex-wrap: nowrap; /* 줄바꿈 금지 (한 줄 유지) */
}
/* 리스트 박스 공통 */
.list, .list.wide {
height: 130px;
border: 1px solid red;
border-radius: 12px; /* 모서리 둥글게 */
background: transparent;
box-sizing: border-box; /* 테두리 포함한 크기 계산 */
}
/* 작은 리스트 박스 (4개) */
.list { flex: 0 0 146px; }
/* 마지막 넓은 박스 (1개) */
.list.wide { flex: 0 0 264px; }
'코딩 > 복습' 카테고리의 다른 글
| 251027 picogram (top-bar) (0) | 2025.10.27 |
|---|---|
| 251017 SPC 모작 (0) | 2025.10.17 |
| 251013 picogram (top-bar, banner) (0) | 2025.10.13 |
| 251002 picogram (banner) (0) | 2025.10.02 |
| 251001 Market kurly (list) (0) | 2025.10.01 |