[CSS] 선택자, 주요 속성 정리(flex, grid, font-size, color, margin, padding, position)

1. 선택자란?

선택자는 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지를 브라우저에 알려주는 요소입니다.

 

1) 요소 선택자

: 직접 요소명을 적어서 나타내는 선택자 (a, h1, div, img, p, span 등)

2) id 선택자

: id 속성 앞에 #을 붙여서 사용

3) class 선택자

: class 속성 앞에 .(마침표)를 붙여서 사용

4) 선택자 중첩

: 선택자를 이어서 사용

ex) 선택자가 span.main 이라면 span 태그이면서 class 명이 main인 선택자들을 선택합니다.

5) 선택자 묶음

: ,를 이용하여 묶음

6) 후손 선택자

: 띄어쓰기로 연결하면 자식요소를 선택함

ex) 선택자가 img a 라면 img 태그의 자식 요소인 a 선택자를 선택합니다.

 

2. CSS 주요 속성 정리

- flex

뷰 포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산시키도록 하는 것이 flex 속성입니다. flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성됩니다.

flexbox

flexbox의 전체적인 정렬과 흐름 속성은 부모인 flex container에서 정의하고, 크기나 순서에 관련된 속성은 자식 요소에 해당하는 flex-item에서 정의합니다.

 

flexbox 속성

flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있으며, flex-direction을 통해서 축을 바꿀 수 있습니다. (기본: row)

 

- grid

grid

grid item은 2차원으로 수평, 수직 방향으로 동시에 영역을 나눌 수 있습니다.

grid-template-columns 속성을 이용하여 행을, grid-template-rows 속성을 이용하여 열을 바꿉니다. 속성 값을 fr을 이용하여 비율 형태로 설정하거나 px를 이용해 단위 형태로 설정할 수 있습니다.

- font-size

: 폰트의 크기를 지정

- color

: 폰트의 색상을 지정

- margin

: 바깥 여백을 지정

- padding

: 안쪽 여백을 지정

 

margin과 padding

- position

: 요소가 위치할 방식을 지정

1) static

: 요소를 일반적인 문서 흐름에 따라 배치

2) relative(상대위치)

: 일반적인 문서 흐름 O, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용

3) absolute(절대위치)

: 일반적인 문서 흐름 X, 가까운 위치 지정 조상 요소에 대해 상대적으로 배치

4) fixed(절대위치)

: 일반적인 문서 흐름 X, 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치

 

css position