1. position
| 값 | 의미 |
| static | 기준 없음 (배치 불가능 / 기본값) |
| relative | 요소 자기 자신을 기준으로 배치 > 요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다. |
| absolute | 부모(조상) 요소를 기준으로 배치 가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다.
|
| fixed | 뷰포트를 기준으로 삼고 싶은 경우? absolute를 사용해서 똑같이 구현할 수 있지만, absolute는 조상 요소의 위치를 기준점으로 삼는 개념이므로, 뷰포트를 기준으점으로 삼으려면 fixed를 사용한다. |
| stickey | 스크롤 영역 기준으로 배치 |
2. display
none
요소를 렌더링하지 않도록 설정합니다. visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않습니다.
block
div 태그, p 태그, h 태그#, li 태그 등이 이에 해당됩니다.
기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락입니다.
width, height 속성을 지정 할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링됩니다.
inline
span 태그, b 태그, i 태그, a 태그 등이 이에 해당됩니다.
block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.
inline-block
block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있습니다.
Internet Explorer 7 이하에서는 사용할 수 없습니다.
3. letter-spacing
letter-spacing 속성값
normal 기본값으로 문자에 공백이 들어가지 않음. 0px과 같음
길이값 px, em, % 등으로 지정 (음수값 가능)
4. line-height
line-height는 줄 높이를 정하는 속성입니다.
- 기본값 : normal
- 상속 : Yes
- 애니메이션 : Yes
- 버전 : CSS Level 1
line-height: normal | length | number | percentage | initial | inherit- normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다.
- length : 길이로 줄 높이를 정합니다.
- number : 글자 크기의 몇 배인지로 줄 높이를 정합니다.
- percentage : 글자 크기의 몇 %로 줄 높이로 정합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예를 들어 글자크기가 40px일 때 line-height의 값을 1.5로 하면, 줄 높이는 40의 1.5배인 60px가 됩니다. 줄 높이는 60px인데 글자 크기는 40px이므로, 글자 위와 아래에 각각 10px의 여백이 생깁니다. 줄 높이가 글자 크기보다 작으면 세로 방향으로 글자가 겹치게 됩니다.
출처
https://creamilk88.tistory.com/197
https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1
https://www.codingfactory.net/10639
'PUBLISHING' 카테고리의 다른 글
| [PUB] position (0) | 2022.08.10 |
|---|
