CSS 헷갈렸던 속성 정리

📍지금까지 내가 정리했던 CSS 자료들📍
https://velog.io/@loopy/CSS-%EA%B0%9C%EC%9A%94
https://velog.io/@loopy/CSS-%EC%86%8D%EC%84%B11
https://velog.io/@loopy/CSS-%EC%86%8D%EC%84%B12

그 중에서도 꼭 다시 정리해야할 것들!

• HTML의 속성은 Attributes vs. CSS와 JS의 속성은 Properties

1. 너비

• inline 요소의 width와 height 설정 불가능

2. 단위

• 절대단위 px / 상대단위 % en rem vw vh

3. 여백

• 외부여백 margin(auto면 가운데 정렬) / 내부여백 padding
  • border, padding은 내부 여백 추가해 요소 자체의 크기가 증가
  • 상 하 상 중 하 상 우 하 좌

4. 넘침제어

• overflow의 속성은 visible, hidden, scroll, auto
  -> 부모 요소에 적용!!

5. 출력

• display의 속성은 block/inline/inline-block/flex/grid/none
  • 1차원 레이아웃 flex / 2차원 레이아웃 grid

6. 글씨

• font-family 작성 시 후보1,후보2,후보3,글꼴
  • 띄어쓰기 등 특수문자 포함된 이름은 큰따옴표로 묶기
• text-align 문자 정렬 속성은 left/right/center/justify
• 밑줄은 text-decoration: underline;
• text-indent 설정하면 문단 첫 줄에 들여쓰기 적용

7. 배치

• position의 속성 값
  • static : 위치가 없는 상태
  • relative : 배치 전 자리는 비어있는 채로 허상이 생기는 개념, absolute 적용 시 위치상 부모요소 지정 위해 사용
  • absolute : 구조 상 부모 요소에 relative 적용 필요, 부모 없으면 상위 요소로(뷰포트까지)
  • fixed : 스크롤 움직여도 요소는 고정
  • absolute, fixed는 요소가 붕 뜨며 다른 요소와 겹치게 됨 + 자동으로 display: block;
• 요소 쌓임 우선순위(stack order): position 유무 > z-index 값 > HTML 구조

+) flex, 변환 및 전환효과들 여러번 복습하기!!!