display 속성
- display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나이다.
- display 속성은 기본값으로 다음 두 가지 값 중 하나의 값을 가진다.
- 블록(block)
- 인라인(inline)
블록(block)
- display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지
<div>,<h1>,<p>,<ul>,<ol>,<form>요소는 대표적인 블록(block) 요소
인라인(inline)
- display 속성값이 인라인(inline)인 요소는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다.
따라서 한 줄에 여러개 인라인 레벨 요소를 표현 가능<span>,<img>,<strong>요소는 대표적인 인라인(inline) 요소
Position
웹 문서 안에 요소값들 (태그) 배치하는 속성
- static : 문서의 흐름에 맞춰 배치, 기본값
- relative : 기본 static부분에서 상대적으로 움직임
- absolute : relative 값을 사용한 상위 요소를 기준으로 위치를 지정해 배치
-sticky : 스크롤 시 화면에 고정됨- fixed: 브라우저 창을 기준으로 위치를 지정해 배치
<!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>
</head>
<style>
.container {
background-color: yellow;
width: 100vh;
height: 100vh;
position: relative;
}
.block {
width: 30px;
height: 30px;
background-color: red;
border: 1px solid black;
font-size: 20px;
margin: 5px;
}
#a {
position: static;
left: 100px;
top: 20px;
}
#b {
position: relative;
}
#c {
position: absolute;
top: 50px;
left: 50px;
}
#d {
position: fixed;
bottom: 0px;
}
#e {
position: sticky;
bottom: 0px;
}
</style>
<body>
<h1>포지션 position</h1>
<ul>
<li>웹 문서 안에 요소값들 (태그) 배치하는 속성 </li>
<li>기본적으로 4가지 </li>
<li>css 설정 할 때 position : 속성값</li>
<li>1.기본설정 static </li>
<li>2.relative 기본 static부분에서 상대적으로 움직인다.</li>
<li>3.absolute 절대위치, 화면기준! 단, 부모한테 relative 그 부모 기준으로 설정이 이루어 진다.</li>
<li>4.sticky: 스크롤 시 화면에 고정됨</li>
<li>5.fiexd: 절대 위치</li>
</ul>
<article class="container">
<div class="block" id="a">abcd</div>
<div class="block" id="b">b</div>
<div class="block" id="c">c</div>
<div class="block" id="d">d</div>
<div class="block" id="e">e</div>
</body>
</html>