float clear -> 핵심속성
position
visibility
z-index
border-collapse
table-layout
vertical-align
9-1. CSS 포지셔닝과 주요속성들
box-sizing:
content-box > width값을 콘텐츠의 너비값으로 사용
border-box > padding + border값을 width로 합산
float
- 박스를 좌측이나 우측으로 붙이고 아래 내용이 그 주변을 흐르게 하는 속성
- float한 박스에 width값을 주어야 함.
clear:both
- float한 박스들의 바로 아래 박스에게 주변을 흐르지 않고 원래대로 배치하도록 하는 속성.
- 이 요소는 블록이어야 한다.
※ float를 해제하지 않으면 float된 박스를 감싸는 박스에 배경이나 테두리 속성이 실행되지 않는다.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
img {float: right;}
div {width: 100px; height: 100px; margin: 10px; float: left;}
.box1 {background: #fd8;}
.box2 {background: #09f;}
.box3 {background: #0f2;}
.box4 {background: #f00;float: right;}
.add {background: #ddd; clear: both;} /* 양쪽에 대한 플로트 해제해주는 것 */
</style>
</head>
<body>
<img src="images/tomato.jpg" alt="토마토">
<h1>토마토</h1>
<p>공무원의 신분과 정치적 중립성은 법률이 정하는 바에 의하여 보장된다. 지방의회의 조직·권한·의원선거와 지방자치단체의 장의 선임방법 기타 지방자치단체의 조직과 운영에 관한 사항은 법률로 정한다. 헌법에 의하여 체결·공포된 조약과 일반적으로 승인된 국제법규는 국내법과 같은 효력을 가진다. 국회의원과 정부는 법률안을 제출할 수 있다. 국가는 국민 모두의 생산 및 생활의 기반이 되는 국토의 효율적이고 균형있는 이용·개발과 보전을 위하여 법률이 정하는 바에 의하여 그에 관한 필요한 제한과 의무를 과할 수 있다. 모든 국민의 재산권은 보장된다. 그 내용과 한계는 법률로 정한다. 대한민국의 영토는 한반도와 그 부속도서로 한다.</p>
<hr>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<h1 class="add">플로트 속성이후에 추가적으로 나오는 제목</h1>
</body>
</html>
2단 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2단 레이아웃</title>
<style>
div {border: 1px solid black;}
#container {width: 960px; padding: 20px; margin: 0 auto;}
#header {padding: 20px; margin-bottom: 20px;}
#contents {width: 620px; padding: 20px; float: left; margin-bottom: 20px;}
#sidebar {width: 200px; padding: 20px; float: right; margin-bottom: 20px;}
#footer {clear: both; padding: 20px;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>사이트 제목</h1>
<p>국가원로자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다. 한 회계연도를 넘어 계속하여 지출할 필요가 있을 때에는 정부는 연한을 정하여 계속비로서 국회의 의결을 얻어야 한다.</p>
</div>
<div id="sidebar">
<h2>사이드바</h2>
<ul>
<li>비상계엄이 선포된 때에는 법률이 정하는 바에 의하여 영장제도, 언론·출판·집회·결사의 자유, 정부나 법원의 권한에 관하여 특별한 조치를 할 수 있다.</li>
<li>대통령은 국무총리·국무위원·행정각부의 장 기타 법률이 정하는 공사의 직을 겸할 수 없다. 국가는 농업 및 어업을 보호·육성하기 위하여 농·어촌종합개발과 그 지원등 필요한 계획을 수립·시행하여야 한다.</li>
</ul>
</div>
<div id="contents">
<h2>본문</h2>
<p>대한민국의 영토는 한반도와 그 부속도서로 한다. 사법권은 법관으로 구성된 법원에 속한다. 위원은 탄핵 또는 금고 이상의 형의 선고에 의하지 아니하고는 파면되지 아니한다.</p>
<p>농업생산성의 제고와 농지의 합리적인 이용을 위하거나 불가피한 사정으로 발생하는 농지의 임대차와 위탁경영은 법률이 정하는 바에 의하여 인정된다.</p>
</div>
<div id="footer">
<h2>푸터</h2>
<p>모든 국민은 건강하고 쾌적한 환경에서 생활할 권리를 가지며, 국가와 국민은 환경보전을 위하여 노력하여야 한다. 교육의 자주성·전문성·정치적 중립성 및 대학의 자율성은 법률이 정하는 바에 의하여 보장된다.</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
body {height: 3000px;}
.box1 {height: 100px; width: 100px; float: left; background: yellow;}
.box1 {left: 30px; top: 50px;} /* position이 있어야 함. */
.box2 {height: 100px; width: 200px; float: left; background: blue;}
.box2 {position: relative; left: -30px; top: 50px;}
.box3 {height: 100px; width: 100px; float: left; background: red;}
.box3 {position: absolute; bottom: 200px; right: 200px; z-index: 5;} /* 강력한 속성이라 함부로 남발하면 안 됨. 레이아웃 배치에 사용 X */
.box4 {height: 100px; width: 100px; float: left; background: purple;}
.box4 {position: absolute; bottom: 150px; right: 150px;} /* 강력한 속성이라 함부로 남발하면 안 됨. 레이아웃 배치에 사용 X */
.box5 {height: 100px; width: 100px; float: left; background: orange;}
.box5 {position: fixed; bottom: 150px; right: 150px;} /* 웹툰 리모컨*/
/* position 배치 방법 display
static(기본값)
relative
absolute
fixed
z-index
*/
</style>
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>
position 배치 방법 display
static(기본값)
relative
absolute
fixed
z-index
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
.outer {width: 500px; height: 500px; border: 1px solid; position: relative;} /* 특정 앱솔루트 범위 제한 */
.outer div {position: absolute;}
.inner1 {width: 100px; height: 100px; background: green; left: 0; top: 0;}
.inner2 {width: 100px; height: 100px; background: red; right: 0; bottom: 0;}
.inner3 {width: 100px; height: 100px; background: blue; right: 0;}
.balloon {width: 200px; height: 100px; border-radius: 8px; background: black;}
.balloon p {text-align: center; color: white;}
.tri {border: 20px solid transparent; width: 0; height: 0; margin: 0; padding: 0; /* border로만 이루어져서.. 크기 40 */
border-top-color: black; border-width: 30px 15px ; position: relative; left: 80px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="inner3"></div>
</div>
<div class="balloon">
<p>말풍선</p>
</div>
<div class="tri"></div>
</body>
</html>
'HTML5' 카테고리의 다른 글
| 21. 02. 03. 10장- HTML5와 시맨틱 태그, 11장- HTML과 멀티미디어 (0) | 2021.02.03 |
|---|---|
| 21. 02. 03. 09장 다단 편집, 표 스타일 (0) | 2021.02.03 |
| 21. 02. 02. 08장- 레이아웃을 위한 스타일 (0) | 2021.02.02 |
| 21. 02. 01. 07장- 색상과 배경을 위한 스타일 (0) | 2021.02.02 |
| 21. 02. 01. 06장- 텍스트·문단·목록 관련 스타일, (0) | 2021.02.01 |
