스타일 적용 전
<!DOCTYPE html>
<html lang="ko">
<head>
<title>[문제] float </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/p240514/css/quiz-float01.css">
</head>
<body>
<div id="wrap">
<div id="navigation">navigation</div>
<div id="main">
<div id="left-menu">left menu</div>
<div id="content">
<div id="contain">contain</div>
<div id="comment">comment</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
스타일 적용 후
@charset "UTF-8";
#wrap {
width: 300px;
margin: 0 auto;
background-color: yellow;
}
#navigation {
width: 300px;
height: 50px;
background-color: red;
}
#main {
height: 150px;
background-color: lightgreen;
}
/* main 자식 element 에 float 를 해줬기 때문에 부모 element 에 플롯 해제 */
#main::after {
/* [방법 1] - 깔끔 */
content: "";
display: block;
clear: both;
/* [방법 2] - 권장 x */
/* overflow: hidden; */
}
#main #left-menu {
float: left;
width: 50px;
height: 150px;
background-color: greenyellow;;
}
#main #content {
background-color: blue;
/* height: 150px; 보통 레이아웃 잡을 때 height 보다는 같이 float 하기 */
float: right;
}
#main #content #contain {
background-color: hotpink;
width: 250px;
height: 100px;
}
#main #content #comment {
background-color: aqua;
width: 250px;
height: 50px;
}
#footer {
height: 50px;
background-color: aliceblue;
}
'Language > HTML & CSS & JavaScript' 카테고리의 다른 글
004. 웹 표준 활용 Web Front 개발 - JavaScript (1) | 2024.05.20 |
---|---|
[HTML/CSS] float 을 활용하여 ul 태그로 메뉴 레이아웃 잡기 (0) | 2024.05.16 |
[HTML/CSS] table 태그로 테이블 만들고 style 적용하기 (0) | 2024.05.16 |
004. 웹 표준 활용 Web Front 개발 - CSS (0) | 2024.05.09 |
004. 웹 표준 활용 Web Front 개발 - HTML (0) | 2024.05.03 |