초격차 #7.

속성

박스 모델 : w, h, 내부/외부 여백

글꼴, 문자

배경 : 배경 색상/이미지

배치

플렉스 (정렬) : 수평 정렬

전환 : 요소의 전후 상태를 애니메이션으로 연결

변환 : 요소 회전, 이동, 크기 조절 => 요소에 변화를 주는 속성

띄움 : 요소를 공중에 띄움 => 주변에 글자가 흐를 수 있게 함

애니메이션 : 전환보다 복잡한 구조의 애니메이션

그리드 : 행과 열이 있는 2차원 구조를 만들가 위한 속성

다단 : 텍스트를 여러 단으로 나눔

필터 : 요소 블러, 반전, 흑화 ...

너비 : 요소의 가로, 세로 너비

auto (default): 브라우저가 너비를 계산
단위 : px/em/vw 등으로 지정

span : 콘텐츠가 포함된 영역만큼 줄어듦

div : 가로 => 부모 요소만큼 늘어남 / 세로 => 컨텐츠가 포함된 영역만큼 줄어듦

max-width, max-height : 요소의 최대 너비

• none (default) : 제한 없음
• auto : 브라우저가 계산

min-width, min-height : 요소의 최소 너비

• none (default) : 제한 없음
• auto : 브라우저가 계산

CSS 단위

1. px : 픽셀
2. % : 상대적 백분율
3. em : 요소의 글꼴 크기
4. rem : 루트 요소 (html) 글꼴 대비 크기
5. vw : 뷰포트 가로 너비의 백분율
6. vh : 뷰포트 세로 너비의 백분율

외부 여백 단축 속성 margin

• 0 (default) : 외부 여백 없음
• auto : 브라우저가 계산 (가운데 정렬)
• 단위 : px/em/vw 등 단위로 계산, 음수값도 가능
• margin : __ => 모든 방향 일괄 적용
• margin : __ __ => 위/아래 좌/우
• margin : __ __ __ => 위 좌/우 아래
• margin : __ __ __ __ => 위 우 아래 좌 (시계방향)

• margin-bottom 처럼 개별 속성 지정도 가능

내부 여백 단축 속성 padding

• 0 (default) : 내부 여백 없음
• % : 부모 요소의 가로 너비에 대한 비율로 지정
• 단위 : px/em/vw 등 단위로 계산
• 요소의 크기가 커짐
• padding : __ => 모든 방향 일괄 적용
• padding : __ __ => 위/아래 좌/우
• padding : __ __ __ => 위 좌/우 아래
• padding : __ __ __ __ => 위 우 아래 좌 (시계방향)

• padding-bottom 처럼 개별 속성 지정도 가능

테두리 선(border)과 색상 표현

border : border-width border-style border-color;

• 순서는 상관 없지만, 관습대로 코딩하는 습관 기르기

• border-width :
  • medium, thin, thick px, em, % 등으로 지정하기
  • 단축 속성이자 개별 속성
• border-style :
  • none (default) : 선 없음
  • solid : 실선 (일반 선)
  • dashed : 파선 -----
  • 단축 속성이자 개별 속성
• border-color :
  • black (default)
  • transparent : 투명
  • 단축 속성이자 개별 속성
• 방향 지정 가능
  • border-top / border-bottom / border-right / border-left

색상 표현

• 색을 사용하는 모든 속성에 적용 가능한 색상 표현

• 색상 이름
  • 브라우저에서 제공하는 색상 이름 red, tomato, royalblue
  • 브라우저 마다 달라서 추천 X
• Hex 색상코드
  • 16진수 색상 #000, #FFFFFF
  • 가장 많이 사용
• RGB
  • 빛의 삼원색 rgb(255, 255, 255)
• RGBA
  • 빛의 삼원색 + 투명도 rgba(0, 0, 0, 0.5)

모서리 둥글게 (border-radius)

• 0(default) : 둥글게 없음
• 단위 : px, em, vw 등 단위로 지정
• 값이 4개 => 시계방향으로 적용

크기 계산 (box-sizing)

• 요소의 크기 계산 기준을 지정

• content-box(default) : 요소의 내용으로 크기 계산
• border-box : 요소의 내용 + padding + border로 크기 계산
• 값이 4개 => 시계방향으로 적용

넘침 제어 (Overflow)

• 요소의 크기 이상으로 내용이 넘쳤을 때 보여짐을 제어하는 단축 속성

• visible(default) : 넘친 내용을 그대로 보여줌
• hidden : 넘친 내용을 잘라냄
• auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
• scroll : x축, y축 스크롤바 생성
• overflow-x / overflow-y : 개별 속성 지정 가능

display

• 요소의 화면 출력 특성

• block(default) : 상자 요소
• inline(default) : 글자 요소
• inline-block(default) : 글자 + 상자 요소
• flex : 플렉스 박스 (1차원 레이아웃)
• grid : 그리드 (2차원 레이아웃)
• none : 보여짐 특성 없음, 화면에서 사라짐
• 기타 : table, table-row, table-cell 등 ..

요소 투명도 (opacity)

• 1(default) : 불투명
• 0~1 : 0부터 1 사이의 소수점 숫자 => 0 생략 가능 .5/.6

글꼴

• font-style : 글자의 기울기

• normal(default) : 기울기 없음
• italic : 이탤릭체

• font-weight : 글자의 두께

• normal, 400(default) : 기본 두께
• bold, 700 : 두껍게
• 100 ~ 900 : 100 단위의 숫자 9개, normal / bold 이외 두께

• font-size : 글자의 크기

• 16px(default) : 기울기 없음
• 단위 : px, em, rem 등 단위로 지정

• line-height : 한 줄의 높이

• normal(default) : 브라우저의 기본 정의 사용
• 숫자 : 요소의 글꼴 크기의 배수로 지정
• 단위 : px, em, rem 등 단위로 지정

• font-family : 글꼴

• font-family : 글꼴1, "글꼴2", .. 글꼴 계열
• 후보 중 가능한 글꼴 우선 적용, 안 되면 마지막 계열 중 아무 폰트 적용
  • serif : 바탕체 계열
  • sans-serif : 고딕체 계열
  • monospace : 고정너비 글꼴 계열
  • cursive : 필기체 계열
  • fantasy : 장식 글꼴 계열
• normal(default) : 브라우저의 기본 정의 사용
• 숫자 : 요소의 글꼴 크기의 배수로 지정
• 단위 : px, em, rem 등 단위로 지정

문자

• color : 글자의 색상

• rgb(0, 0, 0) (default) : 검정색
• 색상 : 기타 지정 가능한 색상

• text-align : 문자의 정렬 방식

• left (default) : 왼쪽 정렬
• right : 오른쪽 정렬
• center : 가운데 정렬

• text-decolation : 문자의 장식

• none (default) : 장식 없음
• underline : 밑줄
• line-through : 중앙 선

• text-indent : 문자의 첫 줄의 들여쓰기

• 0 (default) : 들여쓰기 없음
• right : 오른쪽 정렬
• 단위 : px, em, rem 등 단위로 지정
  • 음수를 사용하면 내어쓰기

배경

• background-color : 요소의 배경 색상

• transparent (default) : 투명함
• 색상 : 지정 가능한 색상

• background-image : 요소의 배경 이미지 삽입

• none (default) : 이미지 없음
• url("경로") : 이미지 경로'url()'

• background-repeat : 요소의 배경 이미지 반복

• repeat (default) : 이미지를 수직, 수평 반복
• repeat-x : 이미지를 수평 반복
• repeat-y : 이미지를 수직 반복
• no-repeat : 이미지 반복 안 함

• background-position : 요소의 배경 이미지 위치

• 0% 0% (default) : 0% ~ 100% 사이 값
• 방향 : top, bottom, left, right, center 방향
• 단위 : px, em, rem 등 단위로 지정

• background-size : 요소의 배경 이미지 크기

• auto (default) : 이미지의 실제 크기
• 단위 : px, em, rem 등 단위로 지정
• cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤
• contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤

• background-attachment : 요소의 배경 이미지 스크롤 특성

• scroll (default) : 이미지가 요소를 따라서 같이 스크롤
• fixed : 이미가 뷰포트에 고정, 스크롤 X
• cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤

배치

• position : 요소의 위치 지정 기준

• static (default) : 기준 없음

• relative : 요소 자신의 기존 자리를 기준 => 부모요소 만들어줌

• absolute : 위치 상 부모 요소를 기준, 주변 요소와 상호작용 x

• fixed : 뷰포트(브라우저)를 기준 => body를 scroll 해도 고정

• sticky : 스크롤 영역

• 같이 이용하는 CSS 속성들 (모두 음수 사용 가능)

  • 요소의 각 방향별 거리 지정 (auto : 브라우저가 계산)
    • top
    • bottom
    • left
    • right
    • z-index : 요소의 쌓임 정도를 지정
      • auto (default) : 부모 요소와 동일한 쌓임 정도
      • 숫자 : 숫자가 높을수록 위에 쌓임
        • 보통은 0 취급, 뒤로 보내려면 -1

---

요소 쌓임 순서 (stack order)

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

• 요소에 position 속성의 값이 있는 경우 위에 쌓임 (static 제외)

• 1번 조건과 같은 경우, z-index 속성의 숫자 값이 높을수록 위에 쌓임

• 1/2번 조건까지 같을 경우, HTML의 다음 구조일수록 위에 쌓임

---

요소의 display가 변경됨

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