css33

• 

  [CSS3] display : grid ① Grid, 배우면 뭐가 좋을까? 먼저 Flex와의 차이점에 대해서 알아보자. 우리는 Flex가 가로나 세로로 HTML 요소들을 정렬하는데 활용된다는 사실을 알고 있다. 이에 반해, Grid를 사용하면 가로와 세로를 포함한 면적에 대한 레이아웃을 짤 수 있게 된다. 기존에 Grid를 배우지 않은 상태에서는 float를 써서 화면을 구성해주어야 한다. 아래의 화면 레이아웃은 float를 활용한 레이아웃을 구성한 것이다. float를 써서 화면 레이아웃을 구성하는 것이 어려운 일은 아니다. width를 px 단위가 아니라, %로 주면 쉽게 해결할 수 있다. See the Pen 일반적인 HTML-CSS 레이아웃 설정 by joonho lee (@goldycoder) 비교를 위해 같은 작업을 Grid을 활용하여, 레이아웃을 짜보자. 각 태그에.. Web/CSS 2020. 10. 18.

• 

  [CSS3] display : flex ② Flex 아이템에 적용되는 속성들 지난 시간에는 'Flex 컨테이너에 적용되는 속성들'에 대해서 알아보았다. 이번에는 컨테이너의 자식 요소인 아이템에 적용되는 속성들을 알아보자. 정해진 비율만큼 크기를 늘려, 여백 채우기 : flex-grow display: flex에 적용된 것을 보면, 여백이 채워지지 않는 모습을 볼 수 있다. 이는 flex-grow의 기본 값이 0이기 때문이다. 만약 다음과 같이 아이템 박스 1에 flex-grow: 1을 지정하면, 나머지 여백의 100% 비율에 맞춰 크기를 늘리는 모습을 볼 수 있다. 이 상태에서 아이템 박스 2에 flex-grow: 1을 지정하면, 나머지 여백의 박스1과 박스2가 각각 1:1의 비율로 크기를 늘리는 모습을 볼 수 있다. See the Pen KKzePBg by joonho lee .. Web/CSS 2020. 9. 15.

• 

  [CSS3] display : flex ① Flex 컨테이너에 적용되는 속성들 반응형 웹페이지를 만들기 위해선, 박스모델들의 너비 비율을 유지한 채 박스모델들을 한 줄로 정렬하는 작업이 필수적이다. 그러나 이는 position이나 float로 처리하기 꽤나 까다롭다. (원래 그러한 목적으로 만들어진 기능들도 아니다. float의 경우, 이미지 주변에 글귀들을 두기 위해 사용되는 속성이다. 또한 Position의 경우, HTML 요소에 차원을 부여하고 위치를 지정하기 위해 생성된 기능이다) 이럴 때 아주 유용하게 쓸 수 있는 기능이 있는데, 바로, display : flex이다!! 다만, 비교적 최근에 나온 기능이라 크로스 브라우징을 고려했을 때 고민하는 분들이 더러 있을 것 같다. 그러나 거의 모든 브라우저는 display : flex를 지원한다. (뿐만 아니라, align-con.. Web/CSS 2020. 9. 14.