$$config title: [HTML/CSS] BMX사이트 구현 (inline-grid, 부모 높이 대비 조절 활용) keywords: - HTML - 사이트구현 $$ # 사이트 구현 순서 (차례대로 하기) 1. 노말라이즈 (a, ul, li, body) 2. 컨테이너 구현 (너비 고정, 중앙 정렬) 3. 로고바 구현 (div로 BMX 글씨) 4. 메뉴바 마크업 (메뉴아이템 : 7개) 5. 메뉴바 기본 CSS 구현 (inline-grid활용, 글씨 폰트, a 크기) 6. 아이템 좌우 border + 각 바에 상단여백 (20) 7. 탑 이미지바 구현 8. 탑 2 이미지바 구현 9. 마무리 작업 (hover) --- ❗ 아래부터 보지 않고 만들어 보기 ❗ # HTML 소스코드 ```html

BMX

``` # CSS 소스코드 ```css /* 노말라이즈 */ body, ul, li { margin:0; padding:0; list-style:none; } a { color:inherit; text-decoration:none; } /* 라이브러리 */ .con { width:1200px; margin-left:auto; margin-right:auto; } .inline-grid { font-size:0; } .inline-grid > * { font-size:1rem; display:inline-block; vertical-align:top; box-sizing:border-box; } /* 커스텀 */ .logo-bar { margin-top:20px; text-align:center; } .logo-bar > a { font-weight:bold; font-size:4rem; letter-spacing:-0.3rem; } .menu-bar { margin-top:20px; } .menu-box-1 > ul > li { width:calc(100% / 7); } .menu-box-1 > ul > li > a { display:block; text-align:center; font-weight:bold; border:0 solid black; border-width:0 1px; } .menu-box-1 > ul > li:hover > a { color:red; text-decoration:underline; } .menu-box-1 > ul > li:first-child > a { border-left-width:2px; } .menu-box-1 > ul > li:last-child > a { border-right-width:2px; } .top-image-bar { margin-top:20px; } .top-image-bar > img { width:100%; } .top-2-image-bar { margin-top:20px; } .top-2-image-bar > img:nth-child(1) { width:50%; } .top-2-image-bar > img:nth-child(2) { width:25%; } .top-2-image-bar > img:nth-child(3) { width:25%; } ``` --- ## 완성본 $$codepen https://codepen.io/hoyeol0513/embed/ZExERrB?default-tab=html%2Cresult $$