1. 개요

html속성 = attribute
css속성 = properties
JS속성 = properties

< css로 구현할수있는 것 (css속성 ppt 참고) >

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

2. 너비

div로 너비 표현 가능

• width 역할: 요소의 가로 너비
  height 역할: 요소의 세로 너비
  -> 기본값은 auto

• max width, max hegith 기본값: auto

• min widht, min hegith 기본값: none

3. CSS 단위

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

v

• 기본적으로 16 px임
  -> child 가 10em 이라면 160 px 이 된다.
  -> child 가 20em 이라면 320 px 이 된다.
• parent에 font-size를 10 px 라고 해놓으면 chil가 20em 이라면 200px 이 됌
  (em 은 관리가 필요한 단위가 됌)
• html 을 16px 라고 하고 child를 20rem 이라고 한다면 320px 이 됌
  부모fontsize를 10px 라고 해도 child 변화하지 않음. html 을 기준으로 하기때문.
  
• vw는 화면이 기준이다.
  -> 위에서 child width 를 50vw 라고 하면 화면가로의 절반을 차지하게 된다.
  height 를 50vh 라고 한다면 화면세로의 절반을 차지하게 된다.

<깜짝 퀴즈>

• em 단위의 기준 = 요소의 글꼴 크기
• 0px 과 0vw중에 더 큰값은 = 모두 같은 값

4. 외부여백: margin

-> margin 에 음수 넣을 수있고 쪼그라든다.

다음과 같이 쓸수있다.
1. margin-top
2. margin-bottom
3. margin-left
4. margin-right

5. 내부여백: padding

요소의 내부에 여백이 생겨서 요소는 커짐

• padding 속성의 역할: 요소의 내부 여백
• padding 속성의 특징: 요소의 크기가 늘어남

다음과 같이 쓸수있다.
1. padding-top
2. padding-bottom
3. padding-left
4. padding-right

6. 테두리 선과 색상 표현

7. 모서리 둥글게

8. 크기 계산

9. 넘침 제어

10. 출력특성

11. 투명도

12. 글꼴

13. 문자

14. 배경

15,16,17. 배치

18,19. 플래스(정렬)container

20. 플랙스(정렬)Items

21. 전환

22,23. 변환

24. Overwatch 캐릭터 선택 예제