🌵뷰포트 란?
현재 보고 있는 컴퓨터 화면의 영역. (스크롤 상관 x)
🌵position 4가지 속성에 대하여 설명하시오.
static
: 기준이 없다.
relative
: 기준이 자기 자신
absolute
: 기준이 부모 엘리먼트.
fixed
: 기준이 브라우저 창(viewport)
🌵아래를 설명하시오.
- float
float속성을 갖는 요소는 thml문서에서 공간은 차지하되 다른 요소의 배치에 영향을 안주는 요소가 된다. - overflow : hidden
텍스트 혹은 이미지가 넘칠 때 사용한다. (부모요소에 넣음) - clear : both
float으로 일그러진 레이아웃을 clear하는 방법.
🌵position 속성중 absolute 의 기준에 대하여 설명하시오.
기준이 부모 엘리먼트.
요소의 위치는 가장 가까운 부모요소나 조상요소 중 positionrelative인 요소, 기준으로 삼을 부모가 없다면 body가 기준
🌵border-sizing 속성 2개를 설명하시오.
content-box(기본값)
: 개발자가 지정한 크기가 요소(element)만의 크기가 된다.(padding, border, margin제외)
border-box
:
개발자가 지정한 크기가 요소(element) + padding + border 의 크기가 됩니다.(margin 제외)
🌵html_css_13_1_ex3.html 을 구현하시오.
<style>
#con {
width: 800px;
border: 1px solid #cccccc;
text-align: center;
margin: 0 auto;
overflow: hidden;
padding: 5px;
}
#header {
border: 1px solid #cccccc;
text-align: center;
padding: 40px;
}
#nav {
border: 1px solid #cccccc;
text-align: center;
margin-top: 5px;
}
ul:after { content: ""; clear: both; display: block; }
li {
list-style: none;
float: left;
width: 110px;
padding: 15px;
border: 1px solid #ccc;
}
ul {
margin: 10px;
}
#wrap {
border: 1px solid #ccc;
margin-top: 5px;
}
#wrap:after { content: ""; clear: both; display: block; }
#content {
border: 1px solid #cccccc;
text-align: center;
height: 200px;
width: 640px;
margin: 10px;
float: left;
padding: 5px;
box-sizing: border-box; /* width값 안에서 들어감*/
}
#banner {
border: 1px solid #cccccc;
text-align: center;
height: 200px;
width: 115px;
margin: 10px;
float: left;
padding: 5px;
box-sizing: border-box;
}
#footer {
margin-top: 5px;
clear: both;
border: 1px solid #cccccc;
text-align: center;
padding: 40px;
}
</style>
</head>
<body>
<div id="con">
<div id="header">
HEADER
</div>
<div id="nav">
<p>NAVIGATION</p>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
<div id="wrap">
<div id="content"> CONTENT </div>
<div id="banner"> BANNER </div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
🍙