반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>박스 가로 방향으로 배치하기</title>
<link href="css/ex02.css" rel="stylesheet">
</head>
<body>
<h2>박스 가로 방향으로 배치하기</h2>
<ul id="papa">
<!-- flex를 안주고 엔터치면 박스 주변 공백발생 -->
<li>주메뉴1
<ol>
<li>서브메뉴1</li>
</ol>
</li>
<li>주메뉴2
<ol>
<li>서브메뉴2</li>
</ol>
</li>
<li>주메뉴3
<ol>
<li>서브메뉴3</li>
</ol>
</li>
</ul>
<h2>박스 가로 방향으로 배치하기</h2>
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
/* CSS 초기화 선수작업 */
*{
margin:0;
padding:0;
}
ul,li,ol{
list-style:none;
}
a{
text-decoration:none;
color:black;
}
/* 박스 가로방향으로 배치하기 */
/* 1) float:left */
#papa{
/* float:left; */
}
/* 2) display:inline-block */
#papa li{
/* display:inline-block; */
border:1px solid red;
padding:10px;
}
/* 3) display:inline */
#papa li{
/* display:inline;
background:gold; */
}
/* 4) display:flex */
#papa{
/* display:flex; */
}
#papa li{
/* width:30%; */
}
/* 5) position:absolute를 사용한다 */
/* 세로네비게이션바 구현에 주로 사용한다 */
#papa{
width:200px;
}
#papa li{
position:relative;
}
#papa ol{
position:absolute;
width:100px;
/* 부모크기 기준으로 left를 준다 */
left:100%;
top:0;
background:gold;
display:none;
}
#papa li:hover ol{
display:block;
}
#papa li:hover{
background:pink;
}
3. HTML / CSS 파일
ex02.html
0.00MB
ex02.css
0.00MB
4. 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190616 Basic Study 44(WebSite Layout Basic 2) (0) | 2019.06.16 |
|---|---|
| HTML5 - 190616 Basic Study 43(WebSite Layout Basic 1) (0) | 2019.06.16 |
| HTML5 - 190616 Basic Study 41(Float 해제 방법) (0) | 2019.06.16 |
| HTML5 - 190615 Basic Study 40(Note) (0) | 2019.06.15 |
| HTML5 - 190615 Basic Study 39(우엉조림 메뉴 만들기) (0) | 2019.06.15 |
