4일차

작심삼일 +1

---

CSS 속성

1. 개요

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

2. 박스모델

width, height

• 요소의 가로/세로 너비
• auto - 브라우저가 너비를 계산. auto 기본값 (요소에 이미 들어있는 속성의 값)
• 단위 px, em, vw 등 단위로 지정
  인라인 요소 가로세로 콘텐츠 크기만큼 자동으로 줄어듬
  블록 요소 가로 부모 요소의 크기만큼 자동으로 늘어남 세로 포함한 콘텐츠 크기만큼 자동으로 줄어듬
  
  

max-width, max-height

• 요소가 커질 수 있는 최대 가로/세로 너비
• none 최대 너비 제한 없음
• auto 브라우저가 너비를 계산
• 단위 px, em, vw 등 단위로 지정
  
  

min-width, min height

• 요소가 작아질 수 있는 최소 가로/세로 너비
• 0 최소 너비 제한 없음
• auto 브라우저가 너비를 계산
• 단위 px, em, vw 등 단위로 지정
  
  
  
  

3. CSS 단위

단위

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

브라우저 font-size 기본적으로 16px

4. margin

margin

• 요소의 외부 여백(공간)을 지정하는 단축 속성
• 0 외부 여백 없음
• auto 브라우저가 여백을 계산 -> 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용
• 단위 px, em, vw 등 단위로 지정
• % 부모 요소의 가로 너비에 대한 비율로 지정
• 음수 사용 가능 (사용시 콘텐츠가 겹쳐진다)

margin : top right bottom left 시계방향

margin : 10px 20px;
-> top, bottom 10 , left, right 20

margin : 10px 20px 30px;
-> top 10 , left right 20 , bottom 30

margin-방향

• 요소의 외부 여백(공간)을 지정하는 기타 개별 속성들
• margin-top
• margin-bottom
• magin-left
• margin-right
  
  

5. padding

padding

• 요소의 내부 여백(공간)을 지정하는 단축 속성
• 0 외부 여백 없음
• 단위 px, em, vw 등 단위로 지정
• 요소의 크기가 커진다

padding : top right bottom left 시계방향

padding : 10px 20px;
-> top, bottom 10 , left, right 20

padding : 10px 20px 30px;
-> top 10 , left right 20 , bottom 30

padding-방향

• 요소의 내부 여백(공간)을 지정하는 기타 개별 속성들
• padding-top
• padding-bottom
• padding-left
• padding-right
  
  

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

border

border

• 요소의 테두리 선을 지정하는 단축 속성
• border : border-width border-style border-color
• 선-두께 선-종류 선-색상 순으로 협업을 위해 관습에 맞게 적기
• border : medium none black; 기본값
• 요소의 크기가 늘어남

예시
border: 10px solid black;

border-width

• 요소 테두리 선의 두께
• medium 중간 두께
• thin 얇은 두께
• thick 두꺼운 두께
• 단위 px, em, % 등 단위로 지정 (✔권장)
• 네가지 방향 지정가능

border-style

• 요소 테두리 선의 종류
• none 선없음 ✔
• solid 실선 (일반 선) ✔
• dotted 점선
• dashed 파선 ✔
• double 두 줄 선
• groove 홈이 파여있는 모양
• ridge 솟은 모양 (groove의 반대)
• inset 요소 전체가 들어간 모양
• outset 요소 전체가 나온 모양
• 상하좌우 지정가능

border-color

• 요소 테두리 선의 색상을 지정하는 단축 속성
• black 검정색
• transparent 투명
• 색상 지정
• 상하좌우 지정가능

border-방향 border-방향-속성
요소의 테두리 선을 지정하는 기타 속성들

border-radius

• 요소의 모서리를 둥글게 깎음
• 0 둥글게 없음
• 단위 px, em, vw 등 단위로 지정
• 모서리에 정원의 반지름 수치
• 왼쪽 상단 부터 시계방향 4방향 지정가능

색상표현

색상 이름	브라우저에서 제공하는 색상 이름	red, tomato, royalblue
✔Hex 색상코드	16진수 색상(Hexadecimal Colors)	#000, #FFFFFF
RGB	빛의 삼원색	rgb(255, 255, 255)
RGBA	빛의 삼원색+투명도	rgba(0, 0, 0, 0.5)
HSL	색상, 채도, 명도	hsl(120, 100%, 50%)
HSLA	색상, 채도, 명도 +투명도	hsla(120, 100%, 50%, 0.3)

### 7. 크기 계산 (box-sizing)

box-sizing

box-sizing

• 요소의 크기 계산 기준을 지정
• content-box : 요소의 내용(content)으로 크기 계산
• border-box : 요소의 내용 + padding + border로 크기 계산

width값 height값 지정 후 border값도 추가를 했을때 내가 지정한 가로세로사이즈보다 커지게 된다 그때 컨텐츠를 내가 지정한 사이즈로 만들고 싶을때 border-box 사용 :)

8. 넘침 제어 (overflow)

overflow

overflow

• 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
• visible : 넘친 내용을 그대로 보여줌 (기본값)
• hidden : 넘친 내용을 잘라냄
• scroll : 넘친 내용을 잘라냄, 스크롤바(x축,y축) 생성
• auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

자식요소가 부모요소를 넘어갔을때 이용

overflow-x
overflow-y

### 9. 출력 특성 (display)

display

display

• 요소의 화면 출력(보여짐)특성
• block : 상자(레이아웃)요소
• inline : 글자 요소
• inline-block : 글자 + 상자 요소 (가로세로값지정가능)
• flex : 플렉스 박스 (1차원 레이아웃) x or y
• grid : 그리드 (2차원 레이아웃)
• none : 보여짐 특성 없음, 화면에서 사라짐
• 기타 : table, table-row, table-cell 등

block으로 인라인요소를 가로세로값 지정

10. 투명도 (opacity)

opacity

• 요소 투명도
• 1 : 불투명 (기본값)
• 0~1 0부터 1 사이의 소수점 숫자 지정