[Css] inline 요소 + block 요소정리 (복기용)

a 태그에 text-align:center 속성이 적용되지 않는다.

코드를 짜다가 갑작스럽게 이게 왜 적용이 안되지? 이유가 뭐였지?

나도 가끔씩 왜 이렇게 작동되는지 각각의 속성에 대해 까먹기도 하고

이유를 명확히 알아야 클린 코드가 가능하기에 복기할 겸 정리해본다.

(안까먹고 싶지만 나도 인간이기에..)

바로 a 태그는 inline 속성이기 때문에 text-align 속성이 먹지 않는다.

inline-block도 아니고 block 속성으로 바꿔줘야 먹힌다.

 

먼저 inline 요소 정의 및 특징을 알아보자.

 

 

inline 요소 정의 및 특징

 

 

- inline 요소는 항상 블럭 요소안에 포함되어 있다.

- 인라인 요소 안에 다른 인라인 요소 포함X.

- 필요한 만큼의 너비만 사용.(임의로 widht, height 값을 줄 수가 없음.) : width:0; height:0;으로 시작

- 크기 지정 불가 (line-height 로 줄의 높낮이를 조절할 수 없음).

- 줄바꿈이 없고 우측으로 이어서 표시됨.

 

 

 

inline 속성에 적용되는 요소

 

white-space: 텍스트의 공백 처리 방법을 설정합니다.

letter-spacing: 글자 사이의 간격을 조절합니다.

word-spacing: 단어 사이의 간격을 조절합니다.

vertical-align: 인라인 요소의 수직 정렬을 설정합니다.

line-height: 텍스트의 줄 간격을 설정합니다.

text-overflow: 텍스트가 요소의 너비를 벗어났을 때 처리 방법을 설정합니다.

text-align: center : 텍스트가 중앙에 올 수 있도록 설정합니다.

text-indent: 텍스트의 들여쓰기를 설정합니다.

text-transform: 텍스트의 대소문자 변환을 설정합니다.

text-shadow: 텍스트에 그림자 효과를 추가합니다.

cursor: 요소 위로 마우스 커서가 위치했을 때의 모양을 설정합니다.

 

 

 

block 요소 정의 및 특징

 

 

- 인라인 요소를 포함 가능+ 다른 블록 요소 포함 가능

- 가로폭 전체의 넓이를 가지는 직사각형 형태 : width: 100%, height:0; 으로 시작.

- width, height, margin, padding 등 레이아웃 수정이 가능함.

- display:inline Css 명령어로 블록 요소를 인라인 요소의 속성으로 변경 가능함.