Html/Css. Vertical align

kimkim·2025년 1월 25일
0

Vertical ailgn

  • 부모의 엘리먼트에 높이 100px를 주고 자식의 엘리먼트의 높이를 100%를 주면 한 자식의 엘리먼트의 높이는 100px이 된다.
  • 그 안에 자식들이 여러개라면 부모의 영역을 뚫고 부모의 높이를 따라간다.
  • 또한 부모의 넓이와 높이가 유동적으로 변하면 자식들의 크기가 %일때 자식들의 넓이와 높이도 유동적으로 변한다.

부모의 넓이와 높이, 자식의 넓이와 높이


  • 이렇게 유격이 생기는 이유는 줄바꿈을 하면서 유격이 생긴다.
  • <!-----> 주석을 사용해서도 없앨 수 있다.(하지만 정리하면 유격이 사라진다.)
  • inline-block으로는 정교한 디자인이 가능하지 않다. 줄간격과 행단 때문에 여백이 들어간다

유격을 없애는 방법

line-height

  • 감싸고 있는 부모에게 요소를 준다.
  • 줄간격의 여백을 없앤다.
  • 상하의 여백을 없앨 수 있지만 좌우의 여백은 살아있다.

font-size:0;

  • 감싸고 있는 부모에게 요소를 준다.
  • 공백도 글자로 친다.
  • 그래서 font size도 커지면 공백도 커진다.
  • 이를 이용해서 font-size:0; 으로 주면 공백이 사라진다.
  • 단점
    • 하지만 자식요소에 글자를 입력하면 그에 대한 내용이 보이지 않게된다.
    • 자식은 부모요소의 글자크기를 상속받기 때문이다.
    • 자식 태그에만 글자를 키워도 한 태그에 글자가 없어지거나 생기면 유격이 생기게 된다.


Vertical-align

  • 이렇게 유격이 생기는 이유는 태그안에 글자가 생기면서 글자화의 기본속성인 태그의 글자를 baseline에 맞추었기 때문에 유격이 생겼다.
  • Vertical-align은 글자화의 수직정렬 기준점이 되는것이다.
  • 그래서 속성의 기준점을 각 자식태그에 Vertical-align:top을 주면 기준점이 위로 올라가면서 유격이 사라지게 된다.

총정리

  1. inline-block처럼 글자화 되면 inline-block 사이에 유격이 생긴다.
  2. 일차원적으로 없애는 줄바꿈을 없애는 거지만 코드정리만 줄바꿈이 생기니 의미없는 짓이다.
  3. 그래서 유격도 글자화니 부모 엘리먼트에 font-size:0;을 주면 세로로 있던 유격은 사라진다.
  4. 하지만 이렇게 되면 자식들에 태그에 글자도 없어지게 된다.(글자 크기를 상속받기 때문)
  5. 그래서 자식태그의 글자를 속성을 줘서 살리고 글자화인 태그들을 Vertical-align:top 속성을 주면 글자들이 기준점을 다르게 삼아서 정렬이 된다.

0개의 댓글