HTML tag의 종류
태그는 그 의미에 맞춰서 사용해야 합니다.
- 링크
- 이미지
- 목록
- 제목
그 밖에 가장 많이 사용하는 div태그가 있습니다.
div 태그는 block 엘리먼트라고 하는데 일반적인 영역을 표현할 때 가장 많이 사용합니다.
많은 태그를 모두 외울 필요는 없으며, 필요한 태그를 찾아서 적절한 의미에 맞는 태그를 사용하는 것이 중요합니다.
레이아웃을 위한 태그
(레이아웃 = HTML 화면을 구성하는 기본적인 모습들)
레이아웃을 구성하는 태그도 역시 그 의미에 맞춰서 사용됩니다.
- header
- section
- nav (네비게이션 네이버에서는 뉴스 연예 스포츠 웹툰 푸드 등 방향성 나누는데 씀.) 헤더,(nav,aside)본문,푸터 영역으로 주로 나뉘는데 본문은 주로 div에 id값 container,wrap 넣어서 많이 쓴다함.
- footer (하단)
- aside
html태그는 레이아웃을 할 때도 그 의미에 맞는 것을 찾아 사용해야 검색도 더 잘되고, 가독성 있는 코드를 만들 수 있게 됩니다.
지금 언급된 태그들은 예를 들어 아래와 같은 화면으로 구성됩니다.
pc버전은 주로 div나 이런 곳에 클래스 값으로 헤더나 푸터 값 줘서 쓴다고 함.
HTML 구조설계
구조화 설계는 마치 문서를 쓴다고 생각하면 쉽습니다.
현업에서는 Presentation 문서형태의 기획서나 디자인 파일을 받아서 그것을 기반으로 HTML개발을 시작합니다.
즉 어떠한 화면을 보면서 그대로 구현하는 것이죠.
그 화면을 보면서 구조를 분석해야 합니다.
먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리합니다.
그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반적입니다.
각 영역 안의 내용 역시 여러 가지 형태일 겁니다.
목록을 나타내거나, 이미지를 나타내거나, 문단을 나타낼 수 있습니다.
이때마다 적절한 태그를 쓰면 됩니다.
그러면서 영역 안에 또 다른 영역이 있다면 점점 안으로 좁혀가면서 HTML tag를 사용하면서 완성해나가는 겁니다.
이때 CSS코드를 같이 구현하지 않고 HTML로 먼저 문서의 구조를 잡아나가는 것이 개발 단계에서 유리합니다.
그래야 전체 뼈대가 튼튼하게 되는 것이죠.
class와 id속성
[영상보강]
영상 4:38 에 소개된 nav-section 클래스를 가진 section엘리먼트는 유심히 보면, nav만 감싸있는게 아닙니다.
nav와 아래 section등도 모두 포함한 wrapper역할을 합니다. 영상에서는 nav-section이라는 이름을 주었지만,전체 영역을 모두 커버하는 class이름이 더 적당할 거 같네요.
nav-section 클래스 이름이 적당한 엘리먼트는 그럼 무엇일까요? 네 section 바로 아래있는 nav엘리먼트에 그 클래스 이름을 주는 것이 어울 걸 겁니다.
ID
고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다.
고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이합니다.
Class
하나의 HTML문서 안에 중복해서 사용 가능합니다.
하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수가 있습니다.
홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다.
이렇게 구분할 수 있지만, 많은 회사마다 개발단계에서 어떠한 약속(convention)을 만들어서 자신들만의 규칙을 사용하기도 합니다.
예를 들어 ID사용을 금하는 곳도 있습니다.
class로만 사용하는 곳도 있습니다.
그건 팀이 결정하기 나름입니다.
하지만 반대의 경우 즉 모든 것을 id만으로 사용하는 것은 없겠죠?
네이버의 경우 자사 사이트에서 하나뿐일 컨테이너 푸터 등등은 div에 id값으로 container,footer를 넣어줘서 사용함. 하나뿐일 거라서 써줬음.
