css
[CSS] position 속성 (static, relative, absolute, fixed, sticky)
이전 게시글에서 display 속성에 대해 알아봤습니다. display는 요소가 차지할 영역에 관한 정보들을 가집니다. 오늘 다룰 position은 요소가 배치될 위치에 관한 정보들을 가집니다. 즉, position이 요소의 위치를 결정하고, display가 그 요소가 차지할 영역을 결정하는 것입니다. 1. static (default) position 속성을 별도로 지정하지 않는다면 기본값으로 static이 적용됩니다. static일 때 요소들은 일반적인 문서 흐름에 따라 화면에 배치됩니다. static에서는 좌표 값(top, bottom, left, right) 및 z-index 설정이 무시됩니다. 2. relative relative는 요소의 원래 위치(static일 때 위치)를 기준으로 좌표 값만..
[CSS] display 속성 (block, inline, inline-block)
display 속성은 요소가 차지하는 영역에 관한 정보를 나타냅니다. 각 속성에 따라 서로 다른 요소들이 배치되는 모습이 달라집니다. 이 글을 통해 각 속성의 특징과 대표적인 태그 예시들을 알아봅니다. 또한 inline-block이 inline과 block의 어떤 특징을 갖고 있는지도 알아봅니다. 이를 토대로 요소들을 원하는 모습으로 배치할 수 있는 것을 목표로 합니다. 1. block 특징 항상 줄바꿈이 발생합니다. 가로폭(width)은 화면 전체를 차지합니다. → width: 100% width, height, margin, padding 속성을 지정할 수 있습니다. block 요소 안에는 inline 요소를 포함할 수 있습니다. 대표적인 block 요소 → , , , 2. inline 특징 줄바꿈 ..
[CSS] Flex (Flexbox)
Flex Flex는 Flexible Box라고 불릴 만큼 유연한 레이아웃을 표현할 수 있다. 또한 Grid와 더불어 대표적인 차세대 CSS 레이아웃으로 알려져 있다. Grid는 Flex보다 더 최신 문법이고 Flex 레이아웃이 대부분 Grid로도 구현할 수 있긴 하다. 그렇다고 Flex를 배울 필요가 없는 것은 아니다. 설계 목적이 다르기 때문이다. Flex: 1차원 레이아웃 Grid: 2차원 레이아웃 이러한 차이 때문에 Grid로는 구현이 어렵지만 Flex가 더 편리한 경우가 많이 존재한다. 만약 레이아웃을 만들 때 행, 열 중 하나만 다룬다면 Flex를, 둘 다 다룬다면 Grid를 고려해보자. (참고로 Safari에선 Flexbox가 동작하지 않는 이슈가 많다. 주의하자) 기본 구조 Flex 레이아웃..
[CSS] 선택자 종류 (CSS selectors)
CSS selectors 자주 쓰이는 CSS 선택자를 정리하고자 한다. 참고로 선택자의 한글 명칭은 사이트마다 다르니 영어 명칭에 친숙해지는 것을 추천한다. 1. Universal selector(전체 셀렉터) *는 페이지에 있는 전체 요소를 대상으로 한다. 하지만 *를 남용하는 것은 좋지 않다. 브라우저에 과부하를 줄 수 있기 때문이다. * { margin: 0; padding: 0; } *를 6.1 Descendant combinator처럼 사용할 수 있다. 예시는 .container의 자식 요소 전체를 의미한다. .container * { border: 1px solid black; } 2. Type selector(태그 셀렉터) 해당 태그명을 가지는 요소를 선택한다. p { color: blue;..