vertical-align 속성
inline 요소 또는 table-cell box에서의 수직 정렬을 지정하는 속성
inline-block을 포함한 모든 inline 요소의 수직 정렬을 위해 사용된다.
initial value: baseline, inheritance: No.
vertical-align은
특징
- block-level 요소의 수직 정렬에는 영향을 미치지 않는다.
inline 요소엔 baseline이라고 하는 기준선이 존재한다.
따라서 inline 요소는 이 베이스 라인을 기준으로 배치된다.
vertical-align에 baseline 값을 줬을 때,
부모의 기준선에 맞추어 해당 요소의 기준선을 정렬해준다.
속성값 (initial: baseline)
- length: 요소의 길이만큼 올리거나 내린다. 음수값도 사용 가능
(px 값 사용 시엔 baseline을 기준으로 이동한다.) - % : 요소를 line-height 기준으로 이동, 음수값 사용 가능
- top: 요소의 맨 위를 줄에서 가장 큰 요소의 맨 위 위치에 맞춘어 정렬한다.
- middle: 요소를 부모의 중앙지점에 정렬한다.
- bottom: 요소의 맨 아래를 줄에서 가장 낮은 요소에 맟추어 정렬한다.
- 이 외에도, sub, super, text-top, text-bottom 이 있다.
자투리 지식
- letter-spacing 속성은 em단위로 쓰는 것이 좋다.
- letter-spacing에 값을 크게 주게 되면 자간이 넓어 그만큼 글자가 오른쪽으로 쏠리는 현상을 볼 수 있다.
그래서 text-indent (들여쓰기 속성) 값을 똑같이 주게 되면 내가 원하는 모습을 볼 수 있다. - background-image vs img 태그
하다보면 이미지를 배경 이미지로 넣을지, 아니면 이미지 요소로 넣을지 고민하게 되는 순간이 있다.
저번에도 언급했었지만, 이 둘을 구분하는 기준은
내가 넣고자 하는 이미지가 비교적 단순한 데코용이냐, 아니면 정보를 담고있느냐에 따라 달라진다.
단순한 데코용이라면 background-image를 이용해 이미지를 삽입하고
의미있는, 또는 전달이 필요한 정보를 담고 있는 이미지라면 img 마크업으로 넣는 것이
접근성 차원에서 용도에 맞게 사용한다고 볼 수 있다.
느낀 점
오늘 flex 속성에 대해 배우게 되었다.
하지만 오늘 내용으로 담기엔 내가 이해를 제대로 못한 것 같아서,
더 깊게 배우고 나서 글을 포스팅할 것이다!
그래서 오늘은 내용이 역대급으로 짧다..ㅎㅎ
안녕.
나의 개발일지