CSS

Front-end Course Day 03
CH 1. HTML/CSS/JS

🫥 이미 잘 알고있는 내용이니, 중요한 것 + 새로 알게 된 내용 위주 정리.

CSS 속성

width / height

• default (기본값)

width: auto;
height: auto;

-> 브라우저가 자동으로 요소의 너비 계산

inline 요소는 width, height를 지정해줄 수 없다.

• max-width, max-height
  요소가 커질 수 있는 최대 가로/세로 너비 (기본값 = none)

• min-width, min-height
  요소가 작아질 수 있는 최소 가로/세로 너비 (기본값 = 0)

CSS 단위

px : 픽셀. 화면을 구성하는 가장 기본이 되는 단위.
% : 상대적 백분율.
em : 요소의 글꼴 크기.
rem : 루트 요소(=html)의 글꼴 크기.
vw : 뷰포트 가로 너비의 백분율. (100vw = 100%)
vh : 뷰포트 세로 너비의 백분율. (100vh = 100%)

Padding

• 내부 여백 공간.
• %는 부모요소 기준 퍼센트. (가로길이)

border

border은 요소의 크기가 늘어난다.
만약 border-style이 none 이면 화면에 출력되지 않는다.
border-width에는 medium 등의 키워드도 있지만, 사용을 권장하지는 않는다.

border-bottom-width,
border-right-style 등으로 나누어서 스타일 지정이 가능하다!

색상 표현

• 색상 이름
• Hex 색상코드
• RGB / RGBA

rgb(255, 255, 255)

box-sizing

요소의 크기 계산하는 기준을 지정함.

• content-box
  내용(content) 기준으로 크기 계산

• border-box
  content~border 까지 모두 크기 계산
  (content + padding + border)

overflow

• 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어.

1. visible (기본값)

• 그대로 보여줌

2. hidden

• 숨김

3. auto

• 넘치면 스크롤 생성됨

4. scroll

• 무조건 스크롤 생성됨

참고로, x방향과 y방향 컨텐츠를 나누어 지정하기 위해
overflow-x와 overflow-y를 사용할 수 있다.

display

• block / inline / inline-block
• flex / grid
• none
• table / table-row, table-cell 등

opacity

• 0-1 사이 소수점 숫자.
• 0.5의 경우 .5로 작성할 수 있다.

0 : 투명
1 : 불투명 (기본값)

타이포그래피

font-style

normal (기본)
italic = oblique

font-weight

normal = 400
bold = 700

font-family

serif 바탕체 계열
sans-serif 고딕체 계열
monospace 고정너비 글꼴 -> 가독성 👍
cursive 필기체 계열 등

line-height

주로 글꼴 크기의 배수로 지정. (단위X)

text-indent

들여쓰기 지정.
기본값 = 0
단위 = px, em, rem 등으로 지정

background

• background-color

• background-image
  url('path') 함수로 이미지 경로 명시.
  경로에 ''는 생략해도 OK. 상대경로 또는 절대경로로 작성.

• background-size
  만약 200px200px인 div의 background-image로 500500인 이미지를 딱 들어가게 넣는다면?
  background-size: 200px 또는 background-size: cover 을 작성해줌.

cover : 넓은 길이에 맞춰서 맞추고, 이미지를 잘라냄
contain : 짧은 길이에 맞춰서 빈 공간이 생김.

• background-repeat에서 x, y축을 따로 지정해줄 수 있다.
  예> repeat no-repeat

• background-position
  top, bottom, left, right, center
  또는 단위(px, em 등)

마찬가지로 x,y축을 따로 지정해줄 수 있다.
background-position : top right;

• background-attachment
  scroll : 요소를 따라 스크롤됨(=기본값)
  fixed : 요소는 스크롤되어도 이미지는 고정되어 있음.