CSS 속성(1)

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

1. 너비 width, height

• width(가로), height(세로)의 기본값은 auto(브라우저가 계산)
• inline 요소의 width와 height는 설정 불가능
• max-width, max-height의 기본값은 none
• min-width, min-height의 기본값은 0 (양수만 가능)

---

2. CSS 단위

✔ 절대 단위

• px : 픽셀

✔ 상대 단위

• % : 상대적 백분율
• em :요소의 글꼴 크기
• rem : 루트 요소(html)의 글꼴 크기
  ㄴ 기본 16px이므로 *16px로 계산
• vw : 뷰포트 가로 너비의 백분율
• vh : 뷰포트 세로 너비의 백분율

⭐ 0은 단위 붙이지 말고 쓰기!

---

3. 외부 여백 margin

• 기본값 0, 가운데 정렬 auto
• 음수값 사용 가능 -> 외부 여백 줄어들어 다른 요소와 겹치게 됨

---

4. 내부 여백 padding

• 기본값 0
• 내부에 여백을 추가하므로 ⭐요소 자체의 크기가 커짐
• 값으로 % 사용하면 부모 요소의 가로 너비에 대한 비율로 지정

🌟 padding과 margin은 단축속성 (값을 띄어쓰기로 구분)

• 값 2개 -> 상하 좌우
• 값 3개 -> 상 중(좌우) 하
• 값 4개 -> 상 우 하 중 (위부터 시계방향)
• 속성-방향(top, bottom, left, right)로 각각 지정 가능

---

5. 테두리 선 border

• border-width border-style border-color 지정하는 단축속성

  • 선의 두께 border-width : 기본 medium
  • 선의 종류 border-style : 기본 none, 실선 solid, 파선 dashed
  • 선의 색상 border-color : 기본 black, 투명 transparent

• 위 세 개 속성(두께, 종류, 색상)은 다시 상하좌우 각각 지정 가능한 단축속성

• padding과 마찬가지로 요소 자체의 크기가 커짐

• border-방향, border-방향-속성 형태로 각각 지정 가능

+ 색상 표현

1) 색상 이름 : 브라우저가 제공하므로 명확하지 않음
2) Hex 색상코드 : 16진수 (#000, #FFFFFF..)
3) RGB : 빛의 삼원색, 함수형태 (rgb(255,255,255))
4) RGBA : 빛의 삼원색+투명도, 함수형태 (rgba(0,0,0,.5) -> 반투명 의미)

---

6. 모서리 둥글게 border-radius

• 기본값 0
• 지정한 값의 반지름을 가진 사분원 형태로 깎아내는 개념
• 값 4개 -> 좌상단부터 시계방향

---

7. 크기 계산 box-sizing

• 기본값 content-box : 요소의 내용(contents)으로 크기 계산
• border-box : 내용+padding+border 전체로 크기 계산

---

8. 넘침 제어 overflow

• 요소의 크기 이상으로 내용이 넘쳤을 때 보여짐을 제어하는 단축 속성
• overflow-x, overflow-y 따로 지정 가능
• 기본값 visible : 넘쳐도 그대로 보여주기
• 잘라내기 hidden, 스크롤바(무조건) scroll, 스크롤바(잘라낸 부분 있으면) auto
• 부모 요소에 적용