<!DOCTYPE html>
<html lang="ko">
<head>
<title>[문제] menu</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="/p240514/css/quiz-float02.css"> -->
</head>
<body>
<div id="wrap">
<div id="header">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus libero nesciunt laborum magni odit, doloremque dicta autem, hic consectetur molestias alias aliquam itaque ut praesentium veniam accusantium voluptatibus blanditiis similique.</div>
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
<li><a href="#">메뉴 5</a></li>
<li><a href="#">메뉴 6</a></li>
</ul>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus libero nesciunt laborum magni odit, doloremque dicta autem, hic consectetur molestias alias aliquam itaque ut praesentium veniam accusantium voluptatibus blanditiis similique.</div>
</div>
</div>
</body>
</html>
스타일 적용 후
@charset "UTF-8";
/* 리셋(초기화) 작업 */
/* 다음 body css 복사 (https://www.daum.net/) */
/* 블릿 제거 된 것 아님, 작업 따로 해야함, 밖 영역으로 빠져나가 제거된 것처럼 보인 것 뿐 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, button {
margin: 0;
padding: 0;
}
ul, ol, li {
list-style: none;
}
a:link {
color: black;
text-decoration: none;
}
/* 스타일 적용 */
/* li 에 flaot(left) 설정했으니 부모인 ul 에 float(left) 해제 */
#header ul::after {
content: "";
clear: left;
display: block;
}
#header ul li {
float: left;
}
#header ul li a {
border: 2px solid black;
padding: 0 30px; /* hover 가 되기 위해서 */
margin: 0 5px; /* 붙어있는 box 를 margin 을 줘서 간격을 줌 */
line-height: 34px; /* 테두리가 커지지 않은 이유 : a 태그라서 (inline 태그) */
display: block;
}
