2017. 10. 8. 04:33ㆍ웹 표준 퍼블리싱 바이블
1. 문서를 만들 때 어려운 점은 원하는 레이아웃을 만드는 작업이었습니다. 몇 년 전까지만 해도 <table>요소를 활용해서 레이아웃을 만들었고, 최근엔 <div>요소로 묶은 후 CSS를 활용해 레이아웃을 만들고 있습니다. <div>요소를 활용해서 문서를 묶어주는 방법을 그룹화한다고 합니다. 문서를 만들어보기도 전에 그룹화하는 방법부터 알아보는 이유가 뭘까요? 사실 HTML5로 발전하는 과정에서 그룹화의 의미가 바뀌게 되었습니다. HTML5부터는 원래 <div>가 담당하던 그룹화 작업을 새롭게 섹셔닝 요소들이 담당하게 되었고, 그룹화라는 용어도 블록 요소 중에서 p, hr, pre, blockquote, ol, ul, li, dl, dt, div 등에 그 역할을 넘겨주게 되었습니다.
웹 페이지를 레이아웃에 맞춰 그룹화 작업을 하는 경우 적절한 제목을 붙여주는 것은 필수입니다.
제목은 <h1>~<h6>까지 있는데, <h1>이 가장 큰 제목을, <h6>이 가장 작은 제목을 나타냅니다. 제목은 글자 크기를 위해서 쓰는 것이 아니므로 항상 구조에 맞춰 작성해야만 한다. 그럼 제목은 어디에 어떤 식으로 붙여하 할까요?
제목을 작성하는 경우 페이지의 가장 큰 제목은 로고가 될 것입니다. 먼저 사이트의 제목을 알리는 것이 중요하니까요. 그리고 다음은 메인 메뉴 부분입니다. 원하는 본문을 찾아가기 위해 메인멘뉴를 찾아야 하는 데, 이는 책을 펼치면 만나게 되는 컨텐츠(목차)와 같은 부분입니다. 위 그름에서 보이는 좌측 메뉴의 제목은 메인메뉴의 내용과 같은 "ABOUT"이므로 메인메뉴와 같은 제목을 쓰면 됩니다. 본문의 "Company info"는 그 다음 제목이 됩니다. 참고로 메인메뉴에서 제목이 여러 개 연속해서 나타나 있는데, 이런 경우 목록을 사용해서 표현하고 제목은 한 번만 쓰게 됩니다.
다음은 레이아웃을 작성한 코드 예제입니다.
- 소스코드
|
<!DOCTYPE html>
|
-실행결과
※ 전체를 wrap으로 묶은 것은 디자인에 도움이 되려고 하는 것이지 필수는 아닙니다. 꼬, 각 이름을 작성하면서 "id" 또는 "class" 속성으로 이름을 만들었는데, <id>의 값은 중복될 수 없으며 링크의 목적지(target)가 됩니다. class는 중복될 수 있기 때문에 주로 반복적으로 디자인이 적용되는 부분에 쓰입니다. 자세한 내용은 링크와 스타일 시트에서 다루게 됩니다.
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 3-6. 제목, 문단, 연락처정보, 구분선 알아보기 (0) | 2017.10.10 |
|---|---|
| 3-5. HTML5 섹셔닝 요소들의 활용 (0) | 2017.10.08 |
| 3-3. 특수문자 삽입 방법과 텍스트를 정의하는 인라인 요소들 (0) | 2017.10.06 |
| 3-2. 블록/인라인 레벨 요소 및 컨텐츠 분류 (0) | 2017.09.25 |
| 3-1. HTML 문서의 구조 (0) | 2017.09.13 |