* (요소영역: content + padding + border) + (요소 바깥쪽 영역: magin)
1. content : 내용물
2. padding : content와 border 사이 여백
3. border : 테두리
4. margin : 테두리 바깥 영역(타 요소와의 거리)* 블럭요소 / 인라인요소
https://anjoo.tistory.com/25
display
화면 배치 방법을 변경하는 CSS 스타일
inline, inline-block, block,
flex, grid
display: inline | inline-block | block
사용법 예시) display: inline
display: flex
요소들을 flexbox에 넣어 유동적으로 배치 가능하도록 하는 스타일(가로 한방향)
처음 자리 container 자리 잡을 때 block 으로 잡힘
→ https://anjoo.tistory.com/27
display: grid
요소들을 표처럼 생긴 grid에 넣어 유동적으로 배치 가능하도록 하는 스타일(두방향, 가로-세로 2차원)
→ https://anjoo.tistory.com/27
position
요소 위치 결정하는 방식
1. static position : 기본값
요소를 일반적인 흐름(주로 차례)를 따라 배치,
top, right, bottom, left, z-index 속성들이 값에 영향 줄 수 x
2. position: relative
일반적인 흐름에 따라 배치,
top, right, bottom, left와 같은 속성에 의해 배치 가능,
→ static으로 존재하던 요소의 위치를 기준으로 움직임
다른 요소와 중첩 가능,
문서상으론 원래 위치가 그대로 유지
3. position: absolute
요소를 일반적인 흐름에서 제거,
= 부모 요소 내부에 속박되지 않음.
즉, 독립된 배치 문맥(positioning context)을 가지게 됨.
포토샵에서 새로운 레이어를 추가하는 효과처럼
가장 가까운 위치에 있는 조상(relative)에 상대적 위치로 배치
(조상이 없으면 본문<body> 기준),
조상 요소 위치를 기준으로 top, right, bottom, left와 같은 속성에 의해 배치 가능,
문서상 원래 위치 잃어버림
= HTML 문서 상에서 독립되어 앞뒤의 요소와 상호작용 X
4. position: fixed
absolute 처럼 부모 요소 내부에 속박되지 않음.
화면을 스크롤하더라도 브라우저 특정 부분에 고정되어 움직이지 않음,
속성값의 배치 기준이 브라우저 화면(viewpoint),
viewpoint를 기준으로 top, right, bottom, left와 같은 속성에 의해 배치 가능.
5. position: sticky
스크롤 위치를 기준으로 요소의 위치를 잡음,
스크롤될 때 부모 범위 안에서만 고정,
부모를 기준으로 top, right, bottom, left와 같은 속성을 하나 이상 사용해 배치해야
+
z-index
- 예) z-index: 200;
- 정수값을 넣어 우선순위를 줄 수 있음
- 정수값 클수록 우선순위 높아짐
- position: static 값이 아니어야
- 형제 요소에 선언된 z-index끼리 비교하며, 부모 태그의 z-index가 더 우선
float
- 예) float: right;
- 페이지 내의 요소들을 띄워서 화면으로부터 왼쪽/오른쪽으로 배치
이 속성이 바로 float
'HTML&CSS' 카테고리의 다른 글
| CSS 레이아웃 스타일: flex(flex-direction, justify-content, align-items 등), grid + box-sizing (0) | 2024.03.13 |
|---|---|
| HTML/CSS 블럭요소(div), 인라인요소(span), style선택자 + 선택자 우선순위 (0) | 2024.03.12 |
| HTML 표만들기: <table>, <tr>, <th>, <td> 태그 (0) | 2024.03.12 |
| HTML/CSS : id, class, name, value 속성 차이 정리 (0) | 2024.03.08 |
| HTML 입력 양식 태그 정리 : input 태그, form 태그 (2) | 2024.03.07 |
