💻 2-1. HTML Tags

• HTML 태그는 각각의 쓰임새에 대해서 정확한 의미를 가지고 있다. 그것을 영어로 semantic한 태그라고 표현.
• <div> 태그 : block 엘리먼트라고 하는데 일반적인 영역을 표현할 때 가장 많이 사용한다.

💻 2-2. HTML Layout 태그

• HTML 태그로 감싸진 각 정보 요소를 화면상의 어느 위치에 어떻게 자리잡을지 결정하는 것

• <header> : 문서나 섹션에 대한 헤더를 정의
• <nav> : navigation link 집합을 정의
• <section> : 문서에서 섹션을 정의
• <article> : 독립적인 컨텐츠 정의
• <aside> : content이외의 내용 정의 (ex. 사이드바)
• <footer> : 문서 또는 섹션에 대한 바닥글 정의

💻 2-3. HTML 구조설계

• ✍️ 구조화 설계는 마치 문서를 쓴다고 생각하면 쉽다.

  • 먼저 영역을 나누어 상단/ 본문 네비게이션으로 구분
  • 그 뒤에 각 영역 안에 내용의 구조를 잡는다.
  • 이때 CSS 코드를 같이 구현하지 않고 HTML로 먼저 문서의 구조를 잡는 것이 개발 단계에서 유리. 전체 뼈대가 튼튼해진다.

• ✍️ <img>

  • 문서에 이미지 삽입
  • src 특성은 필수이며, 이미지의 경로를 지정
  • alt 특성은 이미지의 텍스트 설명. 필수는 x

• ✍️ <section>

  • HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용
  • 보통 제목 요소(h1~h6)로 시작하는 컨텐츠를 의미적으로 그룹핑하기 위해 사용
  • 스타일링이 목적이라면 <div> 요소 사용

• ✍️ <span>

  • 인라인 요소로 자체만으로 어떤 의미를 가지진 않는다.

• ✍️ <header>

  • 소개 및 탐색에 도움을 주는 컨텐츠
  • 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함할 수 있다.

• ✍️ <nav>

  • 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구역을 나타낸다.
  • 자주 쓰이는 예제는 메뉴, 목차, 색인

• ✍️ <footer>

  • 주로 저작권 정보나 서비스 제공자 정보를 나타낸다.
  • 주로 사이트 하단에 위치

💻 2-4. class 와 id 속성

• ✍️ ID
  • 고유한 속성으로 한 HTML 문서에 하나만 사용 가능하다.
  • 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이하다.
• ✍️ Class
  • 하나의 HTML 문서 안에 중복해서 사용 가능하다.
  • 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수 있다.
  • 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서 class 사용이 필수적
• ✍️ BEM
  • Block Elements Modifier
  • class naming 규칙
    • 영어 소문자로 작성
    • block의 경우 ( - )로 연결
    • element의 경우 block 뒤에 ( __ )로 연결
    • modifier의 경우 element 뒤에 ( _ ) 로 연결
  • 유지보수에 있어서 생산성의 향상을 가져다준다.