웹디자인2 [CSS] inline-block은 문제가 많다. [CSS] inline-block은 문제가 많다. inline-block은 문제가 많다. inline은 높이, 너비가 없는 요소를 말하고, block은 높이, 너비가 있는 요소를 말한다. 그래서 block을 디폴트값으로 가진 와 같은 태그는 세로로 정렬되고, 과 같이 inline을 디폴트값으로 가진 태그는 가로로 쭉 늘어진다. inline-block은 높이, 너비가 없는 inline 요소에 높이와 너비를 주면서 가로로 정렬시킨다. 근데, 가로로 정렬되는 block간의 원치 않는 가로 공간이 생기고, 화면의 크기에 따라 정렬이 깨질수도 있다. 아니 애초에 맞추기도 힘들다. 그리고 이렇게 정렬이 깨져서 내려온 block과 위의 block들 간의 위아래 간격은 또 다르게 생긴다. 이러한 문제를 해결하기 위해 .. 2022. 1. 6. CSS flexbox를 이해하기 좋은 사이트 CSS flexbox를 이해하기 좋은 사이트 CSS를 잘한다는 것은 CSS 코드들을 많이 알고 있는 것 보다 편집 디자인적 관점에서 얼마나 사용성이 높고, 아름답게 요소들을 배치하냐일 것이다. 하지만 기본적인 개념들을 모르면 구현하지도 못하는 법. CSS에서 정렬할 때 많이 쓰이는flexbox의 개념을 공부하고 이해하기 좋은 사이트들이 있어서 공유한다. 1. naverD2 https://d2.naver.com/helloworld/8540176 2. Heropy Tech https://heropy.blog/2019/08/17/css-grid/ CSS Grid 완벽 가이드 CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레.. 2021. 12. 23. 이전 1 다음
