[CSS] 태그 및 기본 용어 정리

📌  div : html의 영역을 나눠주는 태그

---

• div 태그로 나누는 이유
  • 유지보수의 용이성.
  • 협업의 용이성.
    • div.class, id 명명시 누가 보더라도 알아볼 수 있도록 (직관적인 명명)
      • 예시: header, footer, headerSearch, header-search
  • 직관적인 명명 하기
    • 명사사용
    • 2가지 규칙: headerSearch, header-search
• div 태그 이용시 사용하는 상속
  • display: inline; 텍스트
  • display: blokc: 쌓이는 상자
• 상속이 되는 속성
  • font-size

 

📌  px, em, rem : 폰트 사이즈를 나타내주는 단위

---

• 16px = 1em = 1rem
• em: 부모태그에게 font-size 속성이 있으면, 그 속성을 1em으로 계산
• rem: html에서 철학적으로 rem을 쓰는게 맞다.(구글에서 폰트 변경을 할 때 rem으로 될때 사용자에게 font-size를 변경할 권리가 보통 rem으로 준다.)

 

📌 float : html 배치를 위에 만들어진 html

---

• float는 떠있는 거니 2층에서 산다고 생각
• block의 성격을 무시
• 형제 구조
• 해당 요소들의 높이 값이 맞아야 미디어쿼리 적용시 제대로 작동
• 기본: float : none (1층에 산다)
• float : right, left (2층에 산다)

 

📌 display: flex (굉장히 많이 쓰인다)

---

• chrome 브라우저에서 버튼을 눌러 확인 기능
• inline이나 float에 비해 훨씬 쉽게 되지만 float, div로 html 배치를 할 줄 알아야 함.

 

📌 grid: 굉장히 최근 방식이며 실무에서 가장 많이 쓰인다.

---

• 레이아웃을 미리 정해놓고 태그를 가져다 붙히는 형식
• 자식에게 width ,height를 명시하지 않아도 되지만 auto로 명시해주면 좋다.

 

📌 font

---

• font-style: 폰트 style
• font-weight: 폰트 굵기
  • lighter(100), normal(400), bold(700), border(900)
• font-varient
• fint-size: 폰트 크기
• line-height : 글 사이의 line 높이를 나타내줌
• font-family : font를 여러 개 지정해놓으면 폰트가 없을시 대체하여 사용한다.
• @font-face : 폰트를 불러와 쓸 수 있게 만듦

 

📌 margin, padding

---

• 특징: 공간을 지정하는 데 margin과 padding이 사용된다.
  • margin : border 바깥쪽
  • padding: border 안쪽

 

📌 margin 겹침, margin collapsing : 어렵고 별로 중요하지 않음

---

• margin collase는 글자나, border와 같이 보이는게 보이면 마진 겹침현상이 없어진다.!!
• 시각적인 효과가 있으면 마진겹침 현상을 해결해줄 수 있다.!!