박스 모델(Box Model)
- 모든 HTML 요소는 박스모양으로 구성
- 박스모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함
내용(content)
텍스트나 이미지가 들어있는 박스의 실질적이 내용 부분
패딩(padding)
내용과 테두리 사이의 간격
- padding-top, padding-right, padding-bottom, padding-left
- padding: 20px(위아래좌우 다 20px)
- padding: 20px 20px(위아래20px 좌우 다 20px)
- padding: 20px 20px 20px(위20px 좌우20px 아래쪽20px)
- padding: 20px 20px 20px 20px(위20px 오른쪽20px 아래20px 왼쪽20px =시계방향)
테두리(border)
- 내용(content)과 패딩(padding) 주변을 감싸는 테두리
- border-style(테두리 모양), border-color(테두리 색상), border-width(테두리 두께), border(한꺼번에 설정)
마진(margin)
- 테두리(border)와 이웃하는 요소들 사이의 간격
- 마진은 눈에 보이지 않음
- 새로 겹침 현상이 나타남
✔ 세로 겹침 현상
세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 큰 값을 선택하는 현상
20px+10px =20px
박스사이징(box-sizing)
- width, height 값에 padding, border 영역은 포함되지 않음
- 만약 width가 100%로 설정했을 경우 padding이나 border 속성을 추가하면 안됨
- box-sizing 속성값을 border-box로 설정하면 width와 height값에 padding과 border를 포함
- border-box 는 width = border+padding+content
- content-box 는 width = content
CSS display
- 웹 페이지의 레이아웃을 결정하는 속성
- block, inline, inline-block, none
✔ visibility: hidden; (다시되돌리려면 visible)
visibility:hidden 자리를 차지는 하지만 안보임
display:hidden 은 없어짐
CSS 폼
- 폼 요소의 스타일을 설정
CSS Position
요소의 위치를 결정하는 방식을 설정
1.정적(static)위치 지정방식
- 기본값
- HTML 요소의 위치를 결정하는 기본적인 방식
- 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식
2. 상대(relative)위치 지정방식
- HTML 요소의 기본위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식
- top, left, right, bottom 속성값을 사용할 수 있음
- 원래위치를 기준으로 100 이동해라~ 그런느낌
3. 고정(fixed)위치 지정방식
- 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치
- 뷰포트를 기준으로 위치를 설정하는 방식
- top, left, right, bottom 속성값을 사용할 수 있음
4. 부모태그를 이용한 고정(sticky)위치 지정방식
- fixed가 브라우저 화면의 절대 위치를 사용하는 반면 sticky는 부모 태그의 절대위치값을 사용하는 방식
- top, left, right, bottom 속성값을 사용할 수 있음
- 익스플로러에서 작동하지 않음
5. 절대(absolute)위치 지정방식
- 뷰포트를 기준으로 위치를 설정하는 방식
- 조상요소를 기준으로 위치를 지정할 수 있음
- 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 결정
- 조상요소를 기준으로 위치를 지정하려면 조상요소는 반드시 static위치 지정방식이 아니여야 함
- top, left, right, bottom 속성값을 사용할 수 있음
z-index
- HTML 요소의 위치를 설정(상대, 고정, 절대)하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음
- 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용
- 순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래 위치하게 됨.
float
- HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만들기 위해 사용
- float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐
- float를 적용받은 요소의 방향을 결정(left, center, right)
- float을 적용받으면 블록이 됨
- 컨텐츠 크기 만큼만 영역을 설정(블록)
- float를 적용받은 요소는 다른 요소보다 위쪽에 위치
clear
- float 속성이 적용된 이후 나타나는 요소들의 동작을 조절
- float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 어려움
- clear 속성을 이용하여 이후에 등장하는 요소들이 더이상 float속성에 영향을 받지 않도록 설정(left,right,both)
과제
본인의 웹사이트에 로그인, 회원가입 문서를 작성
1.패딩
<!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>
div{
width: 200px;
height: auto;
background-color: deepskyblue;
margin: 20px;
color: white;
}
#padding1 {padding: 10px 30px 10px 30px}
#padding2 {padding: 20px 40px;}
#padding3 {padding: 30px;}
</style>
</head>
<body>
<h2>패딩</h2>
<div id="padding1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis animi illo excepturi eius? Totam cum laborum molestiae beatae ex sunt odit, error assumenda dolorum magni cupiditate aut quisquam recusandae commodi!</div>
<div id="padding2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere praesentium harum, voluptas dolorem, iste optio quibusdam molestias, quam perspiciatis cupiditate ex porro doloribus illum. Illum commodi ipsum quasi sed magni!</div>
<div id="padding3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque ea accusamus dolorem aspernatur tempora aperiam illo facilis dolores veniam quo expedita perspiciatis, eos mollitia placeat cum, et dicta nam dolorum!</div>
</body>
</html>
2.테두리
<!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>
div{
width: 200px;
height: 100px;
margin: 15px;
border-width: 5px;
}
#border1 {border-style:solid;}
#border2 {border-style:dotted;}
#border3 {border-style:dashed;}
#border4 {border-style:double;}
#border5 {
border-color:gold;
border-top-style:solid;
border-right-style:dotted;
border-bottom-style:dashed;
border-left-style:double;
}
</style>
</head>
<body>
<h2>테두리</h2>
<!-- div는 블록태그이고 블록태그의 특징 앞에 내용이 없거나 스타일지정x시 안나옴 -->
<div id="border1"></div>
<div id="border2"></div>
<div id="border3"></div>
<div id="border4"></div>
<div id="border5"></div>
</body>
</html>
3.마진
<!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>
div{
width: 200px;
height: 100px;
background-color: deepskyblue;
}
#margin1{margin:30px 50px 30px 50px;}
#margin2{margin:30px 50px;}
#margin3{margin:50px;}
#margin4{margin:30px 5px 10px;}
#margin5{margin:30px auto;}
</style>
</head>
<body>
<div id="margin1"></div>
<div id="margin2"></div>
<div id="margin3"></div>
<div id="margin4"></div>
<div id="margin5"></div>
</body>
</html>
4.박스사이징
<!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>
div{
width: 300px;
height: 150px;
margin: 10px;
padding: 30px;
border: 3px solid red;
}
#boxsizing1{box-sizing: content-box;}
#boxsizing2{box-sizing: border-box;}
</style>
</head>
<body>
<h2>박스사이징</h2>
<div id="boxsizing1">box-sizing = "content-box"</div>
<div id="boxsizing2">box-sizing = "border-box"</div>
</body>
</html>
5.디스플레이
<!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>
div{
background-color: deepskyblue;
border: 3px solid red;
margin-bottom: 30px;
}
p#none{ display : none;}
p#hidden{visibility: hidden;}
</style>
</head>
<body style="background-color: black;"">
<h2>디스플레이</h2>
<div>
<p>display 속성값을 none으로 설정</p>
<p id="none">dispaly 속성값을 none으로 설정</p>
</div>
<div>
<p>visibility 속성값을 hidden으로 설정</p>
<p id="hidden">visibility 속성값을 hidden으로 설정</p>
</div>
</body>
</html>
6.폼
<!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>
.input{
box-sizing: border-box;
width: 100%;
padding: 10px 20px;
background-color: gold;
margin: 5px 0;
}
#userid {
border-radius: 15px;
}
input[type="text"]:focus{
background-color: greenyellow;
border: 3px dotted black;
}
#userpw{
border: none;
background-color: white;
border-bottom: 3px solid black;
}
#userpw:focus{
background-color: aqua;
border-bottom : 3px dotted black;
}
select{
width:100%;
box-sizing: border-box;
padding: 10px;
border:2px solid deeppink;
background-color: pink;
}
textarea#content{
width: 100%;
box-sizing: border-box;
height: 200px;
font-size: 20px;
resize:none;
}
button.btn{
width: 150px;
background-color: seagreen;
color: white;
padding: 20px 32px;
cursor:pointer;
border: none;
}
p.center{
text-align: center;
}
</style>
</head>
<body>
<h2>폼</h2>
<form action="#">
<p>아이디 <input type="text" id="userid" class="input" maxlength="20" placeholder="아이디를 입력하세요";></p>
<p>비밀번호 <input type="password" id="userpw" class="input" maxlength="20" placeholder="비밀번호를 입력하세요"></p>
<p>
<select name="" id="">
<option value="유튜버">유튜버</option>
<option value="의사">의사</option>
<option value="학생">학생</option>
<option value="교사">교사</option>
<option value="IT">IT</option>
<option value="예체능">예체능</option>
</select></p>
<p><textarea id="content" cols="30" rows="10"></textarea></p>
<p class="center"><button class="btn">회원가입</button></p>
</form>
</body>
</html>
7.상대위치지정방식
<!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>
.relative1{
width: 200px;
background-color: deeppink;
padding: 20px;
}
.relative2{
position: relative;
width: 200px;
background-color: deepskyblue;
padding: 20px;
left: 200px;
top: 100px;
}
.relative3{
width: 200px;
background-color: gold;
padding: 20px;
}
</style>
</head>
<body>
<h2>상대 위치 지정방식</h2>
<div class="relative1">상대 위치 지정방식1</div>
<div class="relative2">상대 위치 지정방식2</div>
<div class="relative3">상대 위치 지정방식2</div>
</body>
</html>
8.고정위치지정방식
<!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>
#fx{
width: 100px;
height: 200px;
background-color: gold;
position: fixed;
right : 10px;
bottom: 10px;
}
</style>
</head>
<body>
<h2>고정 위치 지정방식</h2>
<div id="fx"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis excepturi adipisci, quisquam itaque consectetur ipsam molestiae odio repellendus quia numquam similique at quis pariatur nihil eos rem maiores molestias ut!</p>
</div>
</body>
</html>
9.부모태그이용 고정지정방식
<!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>
html, body{ margin:0; padding:0;}
.header{
height:80px;
background-color: gold;
}
.container{
display: flex;
flex-flow: row nowrap;
}
.content{
box-sizing: border-box;
width: 80%;
height:800px;
background-color: deepskyblue;
}
.sidebar {
position: sticky;
box-sizing: border-box;
width: 20%;
height: 400px;
background-color: deeppink;
top:0; /* top:0 상위 부모 컨테이너의 가장 상단에서 부터 적용 */
}
.footer{
background-color: yellowgreen;
height:200px;
}
</style>
</head>
<body>
<header class="header">헤더</header>
<main class="container">
<section class="content">메인 컨텐츠</section>
<aside class="sidebar">Sticky</aside>
</main>
<footer class="footer">푸터</footer>
</body>
</html>
10.절대위치 지정방식
<!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>
/* 자식을 absolute하려면 부모가 reslative여야한다*/
#wrap{
position: relative;
width: 500px;
height: 500px;
border: 3px solid red;
}
.box{
position: absolute;
width: 50px;
height: 50px;
background-color: deeppink;
}
#ab1{top:0; right:0;}
#ab2{bottom:0; left:0;}
#ab3{bottom:0; right:0;}
#ab4{top:100px; left:150px;}
</style>
</head>
<body>
<h2>절대 위치 지정방식</h2>
<!-- #wrap>div.box#ab$*5 -->
<div id="wrap">
<div class="box" id="ab1"></div>
<div class="box" id="ab2"></div>
<div class="box" id="ab3"></div>
<div class="box" id="ab4"></div>
<div class="box" id="ab5"></div>
</div>
</body>
</html>
11.z-index
<!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>
div#wrapper{position: relative}
div.box{
position: absolute;
width: 200px;
height: 200px;
border: 1px solid black;
font-size : 25px
}
#b1{
left: 50px;
top: 50px;
background-color: deeppink;
z-index:10;
}
#b2{
left: 120px;
top: 70px;
background-color: gold;
z-index:100;
}
#b3{
left: 70px;
top: 110px;
background-color: greenyellow;
z-index:1;
}
</style>
</head>
<body>
<h2>z-index</h2>
<div id="wrapper">
<div id="b1" class="box">첫번째 div</div>
<div id="b2" class="box">두번째 div</div>
<div id="b3" class="box">세번째 div</div>
</div>
</body>
</html>
12.float1
<!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>
img{
float: left;
width: 300px;
}
</style>
</head>
<body>
<img src="./dog.png" alt="강아지">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio ratione ad obcaecati. Sint, earum nobis dignissimos eaque a fuga ad, fugiat vel blanditiis voluptatibus reprehenderit, repudiandae non magni praesentium? Sapiente!
</body>
</html>
13.float2
<!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>
#box1{
padding: 20px;
background-color: gold;
float:left;
margin-right: 20px;
}
#box2{
padding: 20px;
background-color:deeppink;
float: left;
margin-right: 20px;
}
#box3{
padding: 20px;
background-color: deepskyblue;
float: left;
margin-right: 20px;
}
#box4{
padding: 20px;
background-color: greenyellow;
float: right;
}
</style>
</head>
<body>
<div id="box1">박스 -1</div>
<div id="box2">박스 -2</div>
<div id="box3">박스 -3</div>
<div id="box4">박스 -4</div>
</body>
</html>
14.clear
<!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>
body{ margin: 20px 30px; max-width:800px;}
p{
padding: 10px;
text-align: center;
font-size: 18px;
}
#p1{
float: left;
width: 38%;
background-color: gold;
margin-bottom: 20px;
}
#p2{
float: right;
width: 54%;
background-color: deepskyblue;
}
#p3{
clear: both;
background-color: deeppink;
}
</style>
</head>
<body>
<h2>clear</h2>
<div id="p1">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur delectus eius veritatis suscipit, asperiores reprehenderit? Dolores corrupti, distinctio, ullam animi tempora corporis repudiandae nobis recusandae blanditiis veniam temporibus, veritatis eaque.</p>
</div>
<div id="p2">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur delectus eius veritatis suscipit, asperiores reprehenderit? Dolores corrupti, distinctio, ullam animi tempora corporis repudiandae nobis recusandae blanditiis veniam temporibus, veritatis eaque.</p>
</div>
<div id="p3">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur delectus eius veritatis suscipit, asperiores reprehenderit? Dolores corrupti, distinctio, ullam animi tempora corporis repudiandae nobis recusandae blanditiis veniam temporibus, veritatis eaque.</p>
</div>
</body>
</html>반응형
'웹 개발 > 🖥️ HTML&CSS' 카테고리의 다른 글
| HTML&CSS | transform,벤더프리픽스,transition,animation (1) | 2022.11.01 |
|---|---|
| HTML&CSS | 다단레이아웃,flex,미디어쿼리,em,rem (0) | 2022.10.27 |
| HTML&CSS | 선택자,텍스트,배경 (1) | 2022.10.27 |
| HTML&CSS | CSS,스타일,선택자,상속 (0) | 2022.10.27 |
| HTML (0) | 2022.10.27 |
