메가박스 사이트 따라 만들기 - 헤더영역
기본 셋팅
<nav class="nav"></nav>
링크를 걸 때 많이 씁니다.
Emmit 기능
ul>li*7>a[]
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>float
float을 사용한 상위 박스의 높이값이 0으로 설정됩니다. 즉, 영역이 사라집니다.
해결 방법
1. 똑같이 float를 사용
2. clear:both;를 사용
3. overflow:idden; 사용
4. .clearfix 사용
아래로 갈수록 추천하는 방법
→ reset에 .clearfix 설정
결과
HTML
<body>
<header id="header">
<div class="container">
<div class="row">
<div class="header clearfix">
<h1>
<a href="#">
<em><img src="assets/img/logo.png" alt="MEGABOX"></em>
<strong><img src="assets/img/logo-sub.png" alt="LIFE THEATER"></strong>
</a>
</h1>
<nav class="nav">
<ul class="clearfix">
<li><a href="#">영화</a></li>
<li><a href="#">큐레이션</a></li>
<li><a href="#">영화관</a></li>
<li><a href="#">특별관</a></li>
<li><a href="#">스토어</a></li>
<li><a href="#">이벤트</a></li>
<li><a href="#">로그인</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- //header -->
<!-- 자바스크립트 라이브러리 -->
<script src="assets/js/jquery.min_1.12.4.js"></script>
<script src="assets/js/modernizr-custom.js"></script>
<script src="assets/js/ie-checker.js"></script>
</body>
reset.css
@charset "utr-8";
/* 여백 초기화 */
body,
div,
ul,
li,
dl,
dd,
dt,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
input,
fieldset,
legend,
p,
select,
table,
th,
td,
tr,
textarea,
button,
form,
figure,
figcaption {
margin: 0;
padding: 0;
}
/* a 링크 초기화 */
a {
color: #222;
text-decoration: none;
}
a:hover {
color: #2698cb;
}
/* 폰트 초기화 */
body,
input,
textarea,
select,
button,
table {
font-family: "Noto Sans KR", AppleSDGothicNeo-Regular, "Malgun Gothic",
"맑은 고딕", dotum, "돋움", sans-serif;
color: #222;
font-size: 13px;
line-height: 1.5;
}
/* 폰트 스타일 초기화 */
em,
address {
font-style: normal;
}
/* 블릿기호 초기화 */
ul,
li,
ol {
list-style: none;
}
/* 제목 태그 초기화 */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 13px;
font-weight: normal;
}
/* 테두리 초기화 */
img,
fieldset {
border: 0 none;
}
/* 버튼 초기화 */
button {
border: 0;
}
/* 반응형 */
video,
img {
width: 100%;
}
/* clearfix */
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: block;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
style.css
@charset "utr-8";
/* 레이아웃 */
#header {
width: 100%;
height: 63px;
border-bottom: 1px solid #c6c6c6;
background: rgba(0, 0, 0, 0);
}
/* 가운데 영역 */
.container {
position: relative;
width: 1280px;
margin: 0 auto;
}
/* 로우 영역 */
.row {
padding: 0 24px;
}
/* 헤더 영역 */
.header {}
.header h1 {
float: left;
}
.header h1 em {
padding: 15px 8px 5px 0;
display: inline-block;
}
.header h1 em img {
width: 155px;
}
.header h1 strong {
display: block;
position: absolute;
left: 194px;
top: 22px;
}
.header h1 strong img {
width: 123px;
}
.header .nav {
float: right;
}
.header .nav ul {
border-left: 1px solid #c6c6c6;
}
.header .nav ul li {
float: left;
width: 103px;
text-align: center;
border-right: 1px solid #c6c6c6;
}
.header .nav ul li a {
display: block;
padding: 19px 10px;
font-size: 17px;
font-weight: 700;
color: #444;
}
출력
'공부 > 메가박스 사이트 따라만들기' 카테고리의 다른 글
| 메가박스 사이트 따라 만들기 - swiper 이용 (0) | 2022.02.13 |
|---|---|
| 메가박스 사이트 따라 만들기 - header 반응형 (0) | 2022.02.13 |
| 메가박스 사이트 따라 만들기 - 배너영역 (0) | 2022.02.13 |
| 메가박스 사이트 따라 만들기 - 기본셋팅 (0) | 2022.02.13 |
| 메가박스 사이트 따라 만들기 - 시작 (0) | 2022.02.13 |