kakasska1212.log
로그인
kakasska1212.log
로그인
Html/Css. Vertical align
kimkim
·
2025년 1월 25일
팔로우
0
0
Html/Css. 공부내용 정리
목록 보기
30/37
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을 주면 기준점이 위로 올라가면서 유격이 사라지게 된다.
총정리
inline-block처럼 글자화 되면 inline-block 사이에 유격이 생긴다.
일차원적으로 없애는 줄바꿈을 없애는 거지만 코드정리만 줄바꿈이 생기니 의미없는 짓이다.
그래서 유격도 글자화니 부모 엘리먼트에 font-size:0;을 주면 세로로 있던 유격은 사라진다.
하지만 이렇게 되면 자식들에 태그에 글자도 없어지게 된다.(글자 크기를 상속받기 때문)
그래서 자식태그의 글자를 속성을 줘서 살리고 글자화인 태그들을 Vertical-align:top 속성을 주면 글자들이 기준점을 다르게 삼아서 정렬이 된다.
kimkim
팔로우
이전 포스트
Html/Css. a&body&ul,li 노말라이즈
다음 포스트
Html/Css. inline-grid 클래스 만들어서 활용하기
0개의 댓글
댓글 작성