2021.06.15
ex23_box.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box, .link {
border: 1px solid black;
}
/* 블럭 태그 */
#box2 {
padding: 50px;
margin: 50px;
}
/* 인라인 태그 */
#link2 {
/* 좌우 padding 적용O, 상하 padding 적용X
- 인라인태그는 주변요소들과 라인을 유지하면서 출력되야하는 성질이 있다.
- 상하padding이 적용이 되면 블럭태그처럼 보여지게 되기때문에 적용 X */
/* 좌우 margin 적용O, 상하 margin 적용X */
padding: 50px;
margin: 50px;
}
</style>
</head>
<body>
<!--
블럭태그 & 인라인태그의 여백 정책
- padding
- margin
블럭태그
- 자신의 영역내에 자신의 내용물만 출력 -> 라인 독점
- 너비(100%), 높이(auto)
- 명시적으로 너비와 높이 지정 가능 -> overflow 주의
- padding, margin 지정 가능
인라인태그
- 자신의 내용과 주변의 내용을 같은 라인에 출력 -> 라인 공유
- 너비(auto), 높이(auto)
- 명시적으로 너비와 높이 지정 불가능(예외: 폼태그, 이미지태그)
- padding, margin -> 좌,우만 지정 가능
-->
<h1>블럭태그</h1>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
<h1>인라인태그</h1>
<a href="#" id="link1" class="link">링크1</a>
<a href="#" id="link2" class="link">링크2</a>
<a href="#" id="link3" class="link">링크3</a>
</body>
</html>
ex24_box.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
}
#box1 {
background-color: tomato;
}
#box2 {
background-color: gold;
/* 상자2의 크기(너비, 높이) */
/* 1. 너비(200px), 높이(200px) */
/*
width, height - 객체의 크기(x)
width, height - 컨텐츠 영역의 크기(O) ****************
*/
/* 2. 테두리 포함 : 너비(220px), 높이(220px) */
border: 10px solid black;
/* 3. padding 포함 : 너비(260px), 높이(260px) */
padding: 20px;
/* 4. 너비(260px), 높이(260px) */
margin: 30px;
}
#box3 {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<h1>박스 모델 크기 정책</h1>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
</body>
</html>
ex25_display.html
display 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
display 속성
- 요소를 화면에 출력하는 방식
- block
- inline
- inline-block
- none
*/
.box {
border: 1px solid black;
/* width: 100px;
height: 100px; */
/* display: block; 기본값 */
display: inline;
}
.link {
border: 1px solid black;
/* display: inline; 기본값 */
display: block;
width: 100px;
height: 100px;
}
/* <ul>, <li> 블럭태그 */
ul, li {
border: 0px solid black;
}
ul {
background-color: yellow;
padding: 0;
}
li {
background-color: cornflowerblue;
/* margin: 0; */
display: inline-block; /* 출력은 inline의 성절이면서 추가로 width, height가 적용 O */
/* width: calc(20% - 2px); 좌우 border지우기. */
width: 20%;
text-align: center;
height: 50px;
}
.cat {
display: block;
/* margin-top을 주면 제목과 객체가 멀어지기 때문에, 객채 간에 간격을 줄 때 margin-bottom을 준다. */
margin-bottom: 100px;
/* margin-top: 100px; */
}
.txt {
display: block;
margin-bottom: 5px;
}
</style>
</head>
<body>
<!-- semantic web : 의미에 부합되는 태그를 사용하자. (메뉴를 만들때 ul, ol을 보통 사용.) -->
<nav>
aa
<ul>
<li>메뉴</li><li>메뉴</li><li>메뉴</li><li>메뉴</li><li>메뉴</li>
</ul>
bb
</nav>
<h1>블럭태그</h1>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
<h1>인라인태그</h1>
<a href="#" id="link1" class="link">링크1</a>
<a href="#" id="link2" class="link">링크2</a>
<a href="#" id="link3" class="link">링크3</a>
<h1>고양이</h1>
<!--
사진을 세로로 출력하기
1. <br> 사용
2. <div> 블럭태그 사용(****) -> 객체간에 공백이 있음
3. display 사용 -> block (*******) -> 객체간에 공백이 없음 (블럭태그는 기본 margin값이 0이기 때문)
-->
<img src="images/cat01.jpg" class="cat">
<img src="images/cat02.jpg" class="cat">
<img src="images/cat03.jpg" class="cat">
<img src="images/cat04.jpg" class="cat">
<img src="images/cat05.jpg" class="cat">
<img src="images/cat01.jpg" class="cat">
<img src="images/cat02.jpg" class="cat">
<img src="images/cat03.jpg" class="cat">
<img src="images/cat04.jpg" class="cat">
<img src="images/cat05.jpg" class="cat">
<h1>업무 일지</h1>
<input type="text" placeholder="입력" class="txt">
<input type="text" placeholder="입력" class="txt">
<input type="text" placeholder="입력" class="txt">
<input type="text" placeholder="입력" class="txt">
<input type="text" placeholder="입력" class="txt">
<input type="text" placeholder="입력" class="txt">
<input type="text" placeholder="입력" class="txt">
<input type="text" placeholder="입력" class="txt">
<input type="text" placeholder="입력" class="txt">
<input type="text" placeholder="입력" class="txt">
<input type="text" placeholder="입력" class="txt">
</body>
</html>ex26_float.html
float 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
float 속성
- 해당 태그의 기존 출력 정책을 따르지 않고, 원래 위치에서 벗어나 라인의 왼쪽/오른쪽 끝으로 이동
- left, right, none(default), (center없음)
- float이 적용되면 block 성질이 된다. + 최상단 배치 -> 드래그하면 영역이 상단에 붙어있음.
*/
#m1 {
color: red;
float: left;
}
img {
float: left; /* 이미지와 텍스트가 잘 어우러지게 한다. */
}
/* 인라인 : 가장 큰 요소의 높이가 라인의 높이가 된다. */
#title {
/* text-align: right; */
border: 1px solid black;
width: 600px;
border-bottom: 1px dashed grey;
}
#title > small {
float: right;
margin-top: 8px;
}
</style>
</head>
<body>
<p>안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. <span id="m1">HTML</span>홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.안녕하세요. 홍길동입니다.</p>
<h1>대표 인사말</h1>
<p id="p1">안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. <img src="images/man_01.png"> 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.안녕하세요. 저는 OO개발의 홍길동입니다. 회사 비전이 블라 블라 블라 블라 입니다.</p>
<h1 id="title">자유게시판<small>Free Board</small></h1>
</body>
</html>ex27_float.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box, .link {
border: 1px solid black;
}
.link {
float: left; /* 코딩 순서대로 왼쪽에 순서대로 붙는다, 객체 사이의 간격이 없다. */
margin-right: 5px;
}
.box {
width: 150px;
height: 150px;
float: right; /* 코딩 순서대로 오른쪽에 역순으로 붙는다.객체 사이의 간격이 없다. */
}
#box1 { background-color: red; }
#box2 { background-color: yellow; }
#box3 { background-color: blue; }
</style>
</head>
<body>
<h1>블럭태그</h1>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
<h1 style="clear: both;">인라인태그</h1> <!-- clear :float 성질을 지운다. both: 양쪽 다 clear -->
<a href="#" id="link1" class="link">링크1</a>
<a href="#" id="link2" class="link">링크2</a>
<a href="#" id="link3" class="link">링크3</a>
</body>
</html>ex28_float.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#main1 {
width: 600px;
}
#main1 .menu {
height: 100px;
background-color: red;
}
#main1 .submenu {
width: 150px;
height: 300px;
background-color: yellow;
}
#main1 .content {
width: 450px;
height: 300px;
background-color: green;
}
#main1 .footer {
height: 100px;
background-color: blue;
}
/* ---------------------------------------------------------------------- 아래 방법이 최신방법 */
#main2 {
width: 600px;
}
#main2 #menu {
background-color: red;
height: 100px;
}
#main2 #submenu {
background-color: yellow;
width: 150px;
height: 300px;
float: left;
}
#main2 #content {
background-color: green;
width: 450px;
height: 300px;
float: left;
}
#main2 #footer {
background-color: blue;
width: 600px;
height: 100px;
clear: both;
}
</style>
</head>
<body>
<!--
페이지 레이아웃
1. 표
2. <div> + CSS
-->
<h1>레이아웃</h1>
<table id="main1">
<tr>
<td colspan="2" class="menu">주메뉴(red)</td>
</tr>
<tr>
<td class="submenu">보조메뉴(yellow)</td>
<td class="content">컨텐츠(green)</td>
</tr>
<tr>
<td colspan="2" class="footer">바닥(blue)</td>
</tr>
</table>
<h1>레이아웃</h1>
<div id="main2">
<div id="menu">주메뉴(red)</div>
<div id="submenu">보조메뉴(yellow)</div>
<div id="content">컨텐츠(green)</div>
<div id="footer">바닥(blue)</div>
</div>
<h1>Sementic Web</h1>
<main>
<header>주메뉴</header>
<nav>보조메뉴</nav>
<section>컨텐츠</section>
<footer>바닥</footer>
</main>
</body>
</html>ex30_ position.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
border: 1px solid black;
width: 150px;
height: 150px;
}
#box1 { background-color: tomato; }
#box2 { background-color: gold;}
#box3 { background-color: cornflowerblue; }
/*
태그의 출력되는 위치를 지정하는 방법
1. 코딩 순서 -> 기본, 세밀한 조정 어려움
2. padding -> 잘 활용X
3. margin -> 잘 활용O
4. position -> FM(CSS1 ~ CSS3 오래된 방식)
5. transform -> FM(CSS3)
6. float
7. display : CSS 추가 속성값
position
- 태그의 출력되는 위치를 지정하는 속성
- 좌표값을 사용해서 요소의 위치를 지정 -> x좌표, y좌표
- 좌표를 지정하는 방식이 여러개 존재(좌표계)
- 원점(0,0)이 다르고, 요소 배치 방식도 다르다.
1. position: static
- 기본값
- 여태까지 우리가 사용했던 방식
- Flowlayout 방식
- 워드 프로세서 방식
- 코딩 순서에 따라 배치 : 위 -> 아래, 왼쪽 -> 오른쪽 순으로 출력
- 좌표값이 없다.
2. position: absolute (**************)
- 절대 좌표 (-> 좌측 상단)
- 원점(0,0)이 절대적이다.(누구나 항상 동일한 장소를 원점으로 삼는다.)
- left, top
- 문서 좌측 상단을 원점으로 하는 좌표계(***) X
- 자신의 직계 조상 중 가장 처음으로 만나는 position이 static이 아닌 조상(transform을 적용한 조상)을 원점으로 하는 좌표계(************)
- 부모의 이동은 자식의 이동도 겸한다.
- 자식의 이동은 부모와 상관이 없다.
- 요소의 내용을 겹쳐서 출력 가능
- 요소의 원래 공간은 사라진다. (display: none과 비슷)
3. position: relative
- 상대 좌표 (나를 기준으로 하는 좌표)
- 원점(0,0)이 상대적이다. 태그의 원래 위치를 원점으로 삼는다.
- left, top -> 좌표 지정
- 원래 자신이 있던 위치를 원점(0,0)으로 하는 좌표계(***)
- 요소의 원래 공간은 그대로 남는다.(visibility: hidden) -> 원래의 공간이 사라지면 원점삼을 위치도 같이 사라지기 때문에..
4. position: fixed
- 고정 좌표
- left, top -> 좌표 지정
- 뷰포트 좌측 상단을 원점으로 하는 좌표계(***)
- 요소의 내용을 겹쳐서 출력 가능
- 요소의 원래 공간은 사라진다. (display: none과 비슷)
*/
/* #box2 {
position: absolute;
left: -152px;
top: -152px;
}
#box1:hover + #box2 {
left: 0px;
top: 0px;
} */
/* 객체의 좌측 상단을 기준으로 위치를 배치한다.(좌표값) */
/* #box2 {
position: fixed;
left: 0px;
top: 0px;
} */
#p1 {
width: 500px;
height: 500px;
background-color: orange;
/* position: absolute;
left: 300px;
top: 100px; */
/* 부모의 이동은 자식의 이동도 겸한다. 자식이 이동하는 건 부모에게 영향이 없다. */
}
#p2 {
width: 300px;
height: 300px;
background-color: red;
position: relative;
left: 400px;
top: 0px;
}
#p3 {
background-color: green;
/* position: absolute;
left: 0px;
top: 0px; */
}
</style>
</head>
<body>
<div class="box" id="p1">
할아버지
<div class="box" id="p2">
아버지
<div class="box" id="p3">
나
</div>
</div>
</div>
<hr>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
<hr>
<p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
<p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
<p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
<p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
<p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
<p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
<p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
<p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
<p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
<p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
<p>안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</p>
</body>
</html>
ex31_zindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
border: 1px solid black;
width: 150px;
height: 150px;
}
#box1 { background-color: tomato; }
#box2 { background-color: gold;}
#box3 { background-color: cornflowerblue; }
#box1 {
/*
position : static
- left, top -> 적용 X
- z-index -> 적용 X
*/
/* z-index: 4; */
}
#box2 {
position: absolute;
left: 100px;
top: 100px;
z-index: 3;
}
#box3 {
position: absolute;
left: 150px;
top: 150px;
z-index: 2; /* z축이 높을 수록 위로 올라온다. */
}
#box4 {
background-color: greenyellow;
position: absolute;
/* left: 0px;
bottom: 0px; */
/* right: 0px;
bottom: 0px; */
}
</style>
</head>
<body>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
<div id="box4" class="box">상자4</div>
</body>
</html>
모르면 괴롭고 알면 즐겁다.