[ position : 위치 관련 스타일 ]
1) 기본값(static) : 문서를 요소의 일반적인 흐름에 따라 배치
2) relative : 상대적 배치 → 잘 안씀! 절대적배치 사용할때 기준이 되는 요소로 잡아줄때만 사용함
- static과 같으나 top, bottom, left, right속성을 지정 가능
* 스타일부분 참고 (바디에 span 존재)
<style>
span { position: relative; } → 포지션 먼저 바꿔주고
span:nth-child(1) { top: 12px; }
span:nth-child(2) { right: 12px; }
span:nth-child(3) { bottom: 12px; } → 각 요소들의 위치 설정가능
span:nth-child(4) { left: 12px; }
</style>
3) absolute : 절대적 배치
- 족보상 가장 가까운, static인 아닌 조상 기준 상대적 위치에 배치 << 렐러티브로 설정해줌
- 페이지 내 공간을 차지하지 않음
- static이 아닌 요소들끼리는 z-index값으로 위, 아래(앞쪽, 뒷쪽) 배치
* 바디부분 참고
<body>
<div class="relative">
<div class="absolute _1"></div>
<div class="absolute _2"></div>
</div>
</body>
* 스타일부분 참고
<style>
div {
width: 400px;
height: 400px;
}
.relative {
position: relative; → 일단 부모요소에 relative 포지션 먹이기
background-color: green;
}
.absolute {
position: absolute; → 자식요소에 absolute 포지션 먹이기
}
.absolute._1 { → 각 요소별로 위치 설정(relative 먹인 부모요소 기반으로 움직임)
top: 100px;
left: 25%;
background-color: red;
z-index: 2;
}
.absolute._2 {
top: 200px;
left: 50%;
background-color: blue;
z-index: 1;
</style>
* z-index : 앞으로(밑에 깔리는게 아니고 위로) 가져오는 순서 ⭐
4) fixed : 고정 ⭐
- 부모 요소가 아닌, viewport를 기준으로 배치
- 스크롤에 영향을 받지 않음
- 페이지 내 공간을 차지하지 않음
* 바디부분 참고
<body>
<div class="fixed"></div>
</body>
* 스타일부분 참고
.fixed {
position: fixed;
top: 24px;
left: 80px;
width: 300px;
height: 100px;
background-color: purple;
}
fixed 지정된 요소는 스크롤을 내려도 계속 같은 위치에 떠있다!
[ display : 요소를 보여주는 방법 ]
inline | block | inline-block
/* 기본 세팅 */
<style>
body > div > * {
background-color: yellowgreen;
}
</style>
<body>
<div>
<div>DIV 요소</div>
<span>SPAN 요소</span>
<p>P 요소</p>
</div>
</body>
<style>
body > div > * {
background-color: yellowgreen;
}
</style>
1) inline
<style>
body > div> * { display: inline; }
</style>
- 결과물 : 모든 요소가 인라인요소가 됨(높이, 너비, 외부/내부 여백 등등 설정 불가)
2) block
<style>
body > div> * { display: block; }
</style>
- 결과물 : 모든 요소가 블록요소처럼 전체공간을 차지하게됨
3) inline-block
<style>
body > div> * { display: inline-block; }
</style>
- 결과물 : 모든 요소가 각자 너비와 높이를 가질 수 있게됨(설정하면)
→ 바깥여백 줘보면 어떻게될까?
<style>
body > div> * { display: inline-block; padding: 24px;}
</style>
- 결과물
4) none (보이지 않게하기!)
1) body > div > span { display: none; }
- 요소를 화면에 두지 않음
- 자리를 차지하지 않음
2) body > div > span { visibility: hidden; }
- 요소를 화면에 두되 보이지 않도록 함
- 자리 차지
3) body > div > span { opacity: 0; }
- 요소를 화면에 두고 불투명도를 0으로 함
- 자리 차지
Front-End 개발자