CSS3 CSS 레이아웃 배치하기 - Grid Grid 지난 Flex 포스팅에 이어서 이번에는 Grid입니다. 격자라는 의미를 가진 Grid는 그 이름처럼 판 위에 가로 행과 세로 행을 기준으로 요소들을 배치할 수 있습니다. table과도 비슷한 면이 있는데, 보다 다양한 레이아웃의 구성을 더 쉽게 할 수 있다는 특징이 있습니다. 예를 들면 자식 요소들끼리 겹치게 배치되는 형태도 간단히 구현할 수 있게 됩니다. Grid도 Flex와 마찬가지로, 부모가 될 요소에 display: grid; 속성을 할당하는 것으로 간단히 적용할 수 있습니다. Grid container의 형태 결정하기 위에서 Grid는 가로 행과 세로 행을 기준으로 요소를 배치한다고 설명했습니다. 따라서 한 쪽만 지정하는 Flex 컨테이너와는 다르게, Grid 컨테이너는 가로와 세로의 .. 2022. 4. 24. CSS 레이아웃 배치하기 - Flex 레이아웃을 잡는 Flex와 Grid Flex와 Grid는 레이아웃을 배치할때 사용하는 대표적인 css 속성입니다. 기존의 float나 absolute, inline-block 등의 속성들을 조합하여 사용하는 방법보다 훨씬 간편하게 원하는 레이아웃을 만들 수 있는 장점이 있어 널리 사용되고 있습니다. Flex는 개인적으로도 많이 사용했었지만 아직까지도 정확히 어떻게 활용해야 원하는 레이아웃을 만들 수 있는지 모르고, 그때그때 되는 식으로 주먹구구로 적용하고 있어 이번 기회에 Grid까지 함께 공부해보려고 합니다. Flex 먼저 Flex입니다. Flex, 또는 Flexbox라고 불리는 이 속성은 요소의 크기가 정해지지 않았거나 동적으로 변할때 효율적으로 레이아웃을 구성할 수 있는 방법을 제공합니다. Flex.. 2022. 4. 20. CSS 적용 우선순위 몇 달 전부터 그날그날 공부하거나 코딩했던 내용들을 짧게 정리하고 있습니다. 학교 선배님들과 공유하며 하루를 돌아보는 시간을 가질 수 있어 참 좋다고 생각했었는데, 그러던 차에 선배님의 권유로 CSS에 대해 자세히 알아보는 시간을 가져보면 좋을 것 같다고 하던 차에 여유가 생겨 이번 기회에 정리해보려고 합니다. !important 가장 먼저 적용되는 속성은 !important 가 붙어있는 속성입니다. !important 가 붙게되면 다른 우선순위를 무시하고, 이 속성이 적용되게 됩니다. .context--name { color: #32ff33 !important; } 겹치는 두 가지 스타일을 동시에 적용하고, 한쪽에만 !important 를 적용시켜주겠습니다. title 클래스의 검은색은 취소선과 함께 .. 2020. 9. 8. 이전 1 다음
