display
: 요소가 보여지는 방식을 지정
•
display:block: - block element : 항상 새로운 줄에서 시작, 너비 100%
ex) <div>, <h1>, <p>, ,<header>, <section>
width, height, margin, padding 가능
•
display:inline; - inline element : 새로운 줄 시작 안함, 요소의 컨텐츠 크기 만큼만 너비 가짐
ex) <a>, <span>, <img>
width, height, margin-top, margin-bottom 불가능
•
display: inline-block;
width, height, margin-top, margin-bottom 가능
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>지수입니다.</title>
<style>
body {background-color: skyblue;}
#block {
background-color: pink;
width: 200px;
height: 100px;
margin: 20px;
padding: 20px;
display: none;
}
#inline {
background-color: lemonchiffon;
width: 200px;
height: 100px;
margin: 20px;
padding: 20px;
display: inline-block;
}
</style>
</head>
<body>
<div id="main">
<p id="block">
block
</p>
<span id="inline">
inline
</span>
</div>
</body>
</html>
```
HTML
복사
position
: 요소의 위치를 정의
•
position: static; : 기본값, 좌표 프로퍼티를 쓸 수 없음
•
position: relative; : 상대 위치, 기본 위치를 기준으로 좌표를 사용함
•
position: absolute; : 부모나 조상 중 relative, absolute, fixed가 선언된 곳을 기준으로 좌표 프로퍼티 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>지수입니다.</title>
<style>
body {background-color: skyblue; margin: 0;}
#parent {
background-color: pink;
width: 200px;
height: 200px;
position: relative;
top: 50px;
left: 50px;
}
#child {
background-color: lemonchiffon;
width: 100px;
height: 100px;
position: relative;
top: 20px;
left: 20px;
}
#child2 {
background-color: red;
width: 200px;
height: 200px;
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
child
</div>
<div id="child2">
child2
</div>
</div>
</body>
</html>
HTML
복사
•
position: fixed; : fixed는 보이는 화면을 기준으로 좌표 프로퍼티를 이용하여 위치를 고정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>지수입니다.</title>
<style>
body {background-color: skyblue; margin: 0;}
#main {height: 1200px;}
#fixed {
background-color: pink;
height: 60px;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="main">
<div id="fixed">
저는 고정되어 있습니다.
</div>
how are you? I'm fine thank you and you?
how are you? I'm fine thank you and you?
how are you? I'm fine thank you and you?
</div>
</body>
</html>
HTML
복사
•
z-index : 숫자 값이 클수록 전면에 출현함, static 제외한 요소에서 써야 적용됨