3-6. 제목, 문단, 연락처정보, 구분선 알아보기

2017. 10. 10. 10:39ㆍ웹 표준 퍼블리싱 바이블

1. 레이아웃을 먼저 잡아야만 하는 것은 아닙니다. 누구는 각각의 요소를 먼저 만든 후에 레이아웃을 지정하기도 하고 누구는 레이아웃을 먼저 작성하기도 합니다. 중요한 것은 완료된 코드가 누가 봐도 체계적이고 알기 쉬운 코드로 만들어졌느냐 입니다.

 

2. 제목을 작성하는 방법

 레이아웃을 작성하는 예를 들면서 제목 작성하는 방법을 보여드렸는데요. 문서를 마크업하는 경우에 빠뜨리지 말아야 할 요소가 바로 제목 요소(<h1>~<h6>)입니다. 문서 전체의 제목을 나타내는 <title>요소고 중요합니다. 본문의 가장 큰 제목을 <title>의 내용으로 적용하면 되는데, 메인 페이지의 경우에는 로고를 <title>의 내용으로 적용하는 것이 좋습니다.

 

2-1. 제목요소는 <h1>이 가장 큰 제목이고 <h1>~<h6>까지 지정할 수 있습니다.

- 소스코드

 

  <h1>Heading1</h1>
  <h2>Heading2</h2>
  <h3>Heading3</h3>
  <h4>Heading4</h4>
  <h5>Heading5</h5>
  <h6>Heading6</h6>

 

 

- 실행결과

 

2-2. <h1>이후에 <h3>가 오면 안되며, 순서대로 지정해야 합니다.

- 잘못된 방법 소스코드

 

  <h1>Heading1</h1>
  <h3>Heading3</h3>

 

 

- 실행결과

 

 

- 올바른 방법 소스코드

 

  <h1>Heading1</h1>
  <h2>Heading2</h2>

 

 

- 실행결과

 

 

2-3. 같은 레벨의 제목은 여러 번 같은 제목으로 지정할 수 있습니다.

- 소스코드

 

  <h1>Heading1</h1>
  <h2>Heading2</h2>
  <h2>Heading2</h2>
  <h2>Heading2</h2>

 

 

- 실행결과

 

 

 

2-4. <h1>의 경우 책의 표지 제목과 같이 가장 큰 제목을 표현하게 되며, 웹 사이트 제작 시에는 보통 로고를 <h1>으로 지정하게 됩니다.

- 소스코드

 

  <h1><a href="#">LOGO</a></h1>

 

 

- 실행결과

 

3. 문단(Paragraph)의 작성

 문단을 나타내는 <p>요소는 다음 요소와 하나의 빈 줄을 통해 구분시켜 주는 블록 요소입니다. 긴 문장을 하나의 문단으로 표현하기도 하고, 몇 가지의 인라인 요소를 묶어주는 역할도 하게 됩니다.

 

3-1. 단락을 표현하는 요소입니다.

- 소스코드

 

  <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, nostrum, harum,
   nemo, minima quidem ab hic suusciput ut aut saepe molestias quia eveniet
   accusamus beatae magni error libero. Excepturi, ipsam?
  </p>

 

 

- 실행결과

 

3-2. 몇 개의 인라인을 묶어주는 데에 사용하기도 합니다.

- 소스코드

 

  <p>
   <label for="userId">아이디</label>
   <input type="text" name="userId">
  </p>
  <p>
   <label for="userPwd">비밀번호</label>
   <input type="text" name="userPwd">
  </p>

 

 

- 실행결과

 

4. 연락처정보 알아보기

 <address>요소에는 그 문서에 관한 연락처를 기술합니다. 담당자이름, 홈페이지 링크, 주소, 전화번호 그 외 연락을 위해 필요한 정보를 배치할 수 있습니다. XHTML일 경우에는 블록 요소를 포함할 수 없으나, <p>요소만은 포함 가능합니다.

HTML5의 경우에는 가장 가까운 조상의 연락처 정보를 나타내게 됩니다.

 

4-1. 일반적인 작성자 정보의 예제

- 소스코드

 

  <address>
   주소:대한민국
   전화번호:02-1234-5678
   이메일:<a href="mailto:example@tistory.com">example@tistory.com</a>
  </address>

 

 

- 실행결과

 

4-2. <p>요소를 포함한 예제

- 소스코드

 

  <address>
   <p>주소:대한민국</p>
   <p>전화번호:02-1234-5678</p>
   <p>
    이메일:<a href="mailto:example@tistory.com">example@tistory.com</a>
   </p>
  </address>

 

 

- 실행결과

 

4-3. HTML5에서는 <footer>요소 안에 적용하며, 저작권 정보를 추가로 적용했습니다. 여기서 <footer>의 상위 요소가 <section>이면 해당 <section>의 작성자 정보가 되, <body>라면 <body>의 작성자 정보가 됩니다.

 

- 소스코드

 

  <footer>
   <address>
    <p>주소:대한민국</p>
    <p>전화번호:02-1234-5678</p>
    <p>
     이메일:<a href="mailto:example@tistory.com">example@tistory.com</a>
    </p>
    <p>Copyright &copy; 2017iCox co.</p>
   </address>
  </footer>

 

 

- 실행결과

 

5. 주제를 분리하는 hr 요소

 가로구분선(horizontal rule)의 역할은 주제의 분리, 화제의 전환을 나타낼 때 사용합니다. 웹 페이지를 작성하는 경우 문서의 헤더, 본문, 푸터를 구분하는 데에 사용하고 본문에서 주제사 바뀌는 부분에 적용합니다.

 

- 소스코드

 

  <div id="wrap">
   <div id="header">
    <h1>LOGO</h1>
    <h2>MAIN MENU</h2>
   </div>
   <hr>
   <div id="container">
    <div class="visual">
    </div>
     <hr>
    <div class="nav">
     <h2>ABOUT</h2>
    </div>
     <hr>
    <div id="contents">
     <h3>Company info</h3>
     <hr>
      <h3>Portfolio list</h3>
    </div>
   </div>
   <hr>
   <div id="footer">
   </div>
  </div>

 

 

- 실행결과

 

저작자표시 비영리 동일조건

'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글

3-8. 각종 목록을 표현하는 요소  (0) 2017.10.12
3-7. 인용문, 정형화된 텍스트 알아보기  (0) 2017.10.11
3-5. HTML5 섹셔닝 요소들의 활용  (0) 2017.10.08
3-4. Div 요소로 작성하는 문서의 그룹화 방법  (0) 2017.10.08
3-3. 특수문자 삽입 방법과 텍스트를 정의하는 인라인 요소들  (0) 2017.10.06

관련글

댓글 0

티스토리툴바