CSS 속성들

CSS의 속성(Properties)

HTML과 비슷하게, CSS도 특정한 기능을 하는 속성들이 미리 정의되어 있으며, 이를 활용하여 태그의 스타일을 정의 할 수 있다.

속성의 종류는 매우 많지만 중요한 속성들은 다음과 같다.

• 박스 모델
• 글꼴, 문자
• 배경
• 배치
• 플렉스(정렬)
• 전환
• 변환
• 띄움
• 애니메이션
• 그리드
• 다단
• 필터

먼저 HTML과 CSS에서 사용하는 단위는 다음과 같다.

단위	설명
px	픽셀
%	상대적 백분율
em	요소의 글꼴 크기
rem	루트 요소(html)의 글꼴 크기
vw	뷰포트 가로 너비의 백분율
vh	뷰포트 세로 너비의 백분율

박스 모델

CSS의 박스 모델은 HTML의 요소를 상자(박스)로 생각하고, 이 박스의 크기와 여백을 지정하는 속성들이다.

크기와 레이아웃

• width, height
  • 요소의 가로/세로 너비
  • 기본값: 브라우저 자동 계산
• max-width, max-height
  • 요소의 최대 가로/세로 너비
  • 기본값: 제한 없음
• min-width, min-height
  • 요소의 최소 가로/세로 너비
  • 기본값: 0

여백과 내부 여백

• margin
  • 요소의 외부 여백(공간) 지정
  • 기본값: 0
• padding
  • 요소의 내부 여백(공간) 지정
  • 기본값: 0
  • 요소의 크기가 증가한다!!!

테두리와 모양

• border
  • 요소의 테두리 선 지정
  • border: 선-두께 선-종류 선-색상 (border-width, border-style, border-color)
  • 요소의 크기가 증가한다!!!
• border-style
  • 테두리 선 종류
  • 기본값: none
  • solid: 실선
  • dashed: 파선(점선)
• border-color
  • 요소 테두리 선 색상 지정
  • 기본값: black
• border-radius
  • 요소 모서리 둥글게 깎음
  • 기본값: 0

크기 계산과 내용 넘침

• box-sizing
  • 요소 크기 계산 기준 지정
  • 기본값: content-box
  • content-box: 내용으로 크기 계산
  • border-box: 요소의 내용(content) + 여백(padding) + 테두리(border)까지 포함하여 크기 계산
  • border-box로 지정하면, 내가 원하는 크기의 박스를 얻고 싶을 때 유용
• overflow
  • 내용이 요소 크기를 넘어설 때 보여짐 제어
  • 기본값: visible
  • visible: 넘친 내용을 그대로 보여줌
  • hidden: 내용 잘라냄
  • scroll: 잘라내고 스크롤바
  • auto: 내용 있을 때 잘라내고 스크롤바

화면 출력 특성

• display
  • 요소의 화면 출력(보여짐) 특성 (각 요소에 이미 지정되어 있음)
  • 각 요소들의 기본값을 벗어나서, 내가 원하는 화면 출력 특성을 부여할 수 있다.
  • 기본값: block, inline, inline-block
  • block: 상자(레이아웃) 요소
  • inline: 글자 요소
  • inline-block: 글자 + 상자 요소
  • flex: 플렉스 박스 (1차원 레이아웃, 수평정렬에 용이함)
  • grid: 그리드 (2차원 레아이웃)
  • none: 보여짐 특성 없음, 화면에서 사라짐
  • 기타: table, table-row, table-cell 등

투명도

• opacity
  • 요소의 투명도
  • 기본값: 1 (불투명)
  • 0~1 사이 값으로 지정

글꼴, 문자

font-style

• 글자의 기울기
• 기본값: normal

font-weight

• 글자의 두께(가중치)
• 기본값: normal, 400
• bold, 700
• 100 ~ 900

font-size

• 글자의 크기
• 기본값: 16px

font-family

• 글꼴 지정

line-height

• 한 줄의 높이, 행간과 유사
• 기본값: normal
• 요소의 글꼴 크기의 배수로 지정

color

• 글자의 색상
• 기본값: rgb(0, 0, 0) , 검정색

text-align

• 문자의 정렬방식
• 기본값: left

text-decoration

• 문자의 장식(선)
• 기본값: none
• underline, line-through

text-indent

• 문자 첫 줄의 줄여쓰기
• 기본값: 0

배경

background-color

• 요소의 배경 색상
• 기본값: transparent (투명함)

background-image

• 요소의 배경 이미지 삽입
• 기본값: 이미지 없음
• url(”경로”)

background-repeat

• 요소의 배경 이미지 반복
• 기본값: repeat

background-position

• 요소의 배경 이미지 위치

background-size

• 요소의 배경 이미지 크기

background-attachment

• 요소의 배경 이미지 스크롤 특성
• 기본값: scroll
• scroll: 이미지가 요소를 따라서 같이 스크롤
• fixed: 이미지가 뷰포트에 고정, 스트롤 X

배치

position

• 요소의 위치 지정 기준
• top, bottom, left, right, z-index (모두 음수 가능)
• 기본값: static
• static: 기준 없음 (그냥 원래 있는 자리에 있음)
• relative: 요소 자신을 기준
  • 본인이 원래 있었던 그 자리 기준!
  • 배치 전 자리는 비어 있다 (그 자리에 다른 요소가 채워지지 않는다)
  • 그래서 자기 자신을 기준으로 배치하지는 않는다.
  • 보통은 position absolute의 구조상의 부모요소가 위치상의 부모요소가 될 수 있도록 포지션을 부여하는 용도로 쓰임
• absolute: 위치 상 부모 요소를 기준 (위치 상 부모 요소를 반드시 확인!)
  • 배치에서 가장 많이 사용됨
  • 부모 기준으로 배치가 되니, 원래자리는 없어짐. 즉, 원래 있던 자리에 다른 요소가 채워짐
  • 위치상의 부모요소의 position을 relative를 줘야 함
• fixed: 뷰포트(브라우저)를 기준

top, bottom, left, right

• 요소의 각 방향별 거리 지정
• 기본값: 브라우저가 계산

요소 쌓임 순서(Stack order)

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임.(기본값 static 제외)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임.
3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임. (더 늦게 선언되었을 수록)

z-index

• 요소의 쌓임 정도를 지정
• 기본값: 0
• 포지션 속성이 없을 경우, z-index가 아무리 높아도 밑에 있음

요소의 display가 변경됨!

position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경됨.

플렉스(정렬, 1차원 레이아웃)

block 속성의 박스에 display값을 flex를 주면,

1. 이때부터 해당 박스는 flex container가 되며, (자식 요소들은 flex items 라고 부름)
2. 자식 요소들이 수평 정렬된다.

이때, flex container와 flex items에 부여할 수 있는 속성들이 나뉘는데, 다음과 같다.

• flex container 속성들 : display, flex-flow, flex-direction, flex-wrap, justify-content, align-content, align-items
• flex items 속성들: order, flex, flex-grow, flex-shrink, flex-basis, align-self

flex container 속성들

display

• flex container의 화면 출력(보여짐) 특성
• flex: 블록 요소와 같이 flex container 정의
• inline-flex: 인라인 요소와 같이 flex container 정의

flex-direction

• 주 축을 설정
• 기본값: row
• row: 좌 → 우
• row-reverse: 우 → 좌
• column: 위 → 아래
• column-reverse: 아래 → 위

flex-wrap

• flex items 묶음(줄 바꿈) 여부
• 기본값: nowrap
• nowrap: 묶음(줄 바꿈) 없음
• wrap: 여러 줄로 묶음 (줄 바꿈 있음)

justify-content

• 주 축의 정렬 방법
• 기본값: flex-start
• flex-start: flex items를 시작점으로 정렬
• flex-end: flex items를 끝점으로 정렬
• center: flex items를 가운데 정렬
• space-between: 각 flex item 사이를 균등하게 정렬
• space-around: 각 flex item의 외부 여백을 균등하게 정렬

align-content

• 교차 축의 여러 줄 정렬 방법 (두 줄 이상이라 별로 안씀)
• 기본값: stretch
• stretch: flex items를 시작점으로 정렬
• flex-start: flex items를 시작점으로 정렬
• flex-end: flex items를 끝점으로 정렬
• center: flex items를 가운데 정렬
• space-between: 각 flex item 사이를 균등하게 정렬
• space-around: 각 flex item의 외부 여백을 균등하게 정렬

align-items

• 교차 축의 한 줄 정렬 방법 (이걸 더 많이 씀)
• 기본값: stretch
• stretch: flex items를 시작점으로 정렬
• flex-start: flex items를 시작점으로 정렬
• flex-end: flex items를 끝점으로 정렬
• center: flex items를 가운데 정렬

flex items 속성들

order

• flex item의 순서
• 기본값: 0
• 숫자가 작을수록 먼저 배치

flex-grow

• flex item의 증가 너비 비율
• 기본값: 0
• 숫자로 증가비율을 부여

flex-shrink

• flex item의 감소 너비 비율
• 기본값: 1
• 0을 입력하면 감소가 없는 것

flex-basis

• flex item의 공간 배분 전 기본 너비
• 기본값: 요소의 Content 너비
• 0을 입력하면 기본 컨텐츠 너비를 0으로 설정함
• flex-grow와 함께 사용하여, 원래 컨텐츠 너비는 무시하고, 비율대로 배분하고 싶을 때 사용함