티스토리 뷰
1. position 속성 ★★★
-블럭 요소 : 부모 태그 영역의 한 줄 차지.
문서 흐름은 위에서 아래로 쌓임(↓)
-인라인 요소 : 컨텐츠 영역만큼 차지.
같은 줄에 순서대로 배치. 왼쪽에서 오른쪽으로(→)
tag { position : static(기본값) / relative / absolute / fixed;}
| 기준 | 자기 위치 | ||
| static (정적 위치 설정) |
이후에 위치값을 설정해도 위치 이동하지 않음. | ||
| relative (상대 위치 설정) |
static일 때 위치 | static 위치에서 설정값만큼 이동 | static 위치 |
| absolute (절대 위치 설정) |
직계 부모 태그 영역 | 없음 | |
| fixed (고정 위치 설정) |
현재 브라우저 | ex) 페이지 내 고정적으로 위치하는 [ top ] 버튼 같은 것 | |
'수업 > └HTML&CSS' 카테고리의 다른 글
| [CSS]박스_레이아웃 속성 : flex (0) | 2022.01.03 |
|---|---|
| [CSS]박스_레이아웃 속성 : float (0) | 2022.01.03 |
| [CSS]박스(Box Model) (0) | 2022.01.03 |
| [CSS]선택자_조합 선택자 (0) | 2022.01.02 |
| [CSS]선택자_기본 선택자, 가상 선택자 (0) | 2022.01.02 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- initialized
- 스크립태그
- 변수
- improt
- ScriptTag
- selcetor
- html base tag
- html
- 미디어 태그
- html input type
- input type 종류
- empty-cell
- A%B
- JavaScript
- html a tag
- css
- html layout
- BAEKJOON
- Java
- scanner
- typeof
- 입력양식
- 외부구성요소
- html pre
- html atrribute
- border-spacing
- 기본선택자
- text formatting
- caption-side
- CascadingStyleSheet
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
글 보관함