[HTML] HTML 텍스트 익혀보기 (위키백과의 HTML5 문서 만들어보기)

728x90

태그의 기능들은 w3schols.com의 HTML Tutorial을 통해 알아보며

codepen.io 사이트를 통해 출력 화면을 보며 실습해본다.

위키백과에 HTML5를 검색해서 윗 부분을 작성해보자.

제목 작성하기

우선 문서의 첫 부분에 HTML5라는 큰 굵은 글씨는 제목(heading) 태그 이다.

제목(heading) 태그 : h
수준(Leve) : 1 ~ 6
h1 ~ h6 : h1(큰제목), h6(작은 제목) -숫자가 커질수록 작은 수준의 제목이 된다.

그리고 제목 밑의 구분선 태그는 단락 태그에서 찾을 수 있다.

구분선 표시 태그 : hr / Horizontal Rules (Empty Elementy)
<hr/>

* 구분선 표시 태그는 빈 태그로 종료 태그가 없음

구분선이 잘 추가됨

본문 내용 작성하기

구분선 밑 '위키백과, 우리 모두의 백과사전' 문구도 단락 태그에 포함된다.

단락 태그 : p /Paragraph
<p>text</p>

단락 태그를 추가하였음

밑의 본문의 단락 또한 이어서 작성해보자

태그 사이 내용이 긴 경우에는 줄 바꿈과 들여 쓰기를 이용하여 항상 가독성에 신경 써준다.

* 단락, 문장 표시 방식은 Enter 줄바꿈, space 공백은 개수에 상관 없이 공백 1칸으로만 인식한다.

- 줄바꿈 : br(break) / Empty Element
- 공백 1칸:   (nobreakspace)

본문에 Link태그 추가하기

링크를 클릭하면 다른 문서로 이동할 수 있으며

텍스트나 이미지, 기타 HTML요소 또한 링크가 될 수 있다.

링크 태그 : a(Anchor)
<a href="url">link text</a>

* 요소 a의 어원은 Anchor이며 우리말로 직역하면 '닻' 이라는 뜻이고 의역하면 '연결' 이라는 뜻이며 웹서핑을 바다에 비유해서 비롯됨

** 하이퍼링크 태그에서 href은 필수 속성이며 링크의 좌표(URL)를 지정하는 속성이다. (기본 값은 없음)

*** href : Hypertext Reference (하이퍼텍스트 참조)

**** url : Uniform Resource Locator (자원의 위치를 표현하는 규약/방식)

링크 텍스트 HTML과 핵심 마크업 언어에 a 요소를 활용해 링크를 연결하였다.

a태그의 속성 : target

_self- 기본. 클릭 한 것과 동일한 창 / 탭에서 문서를 엽니다.
_blank -새 창 또는 탭에서 문서를 엽니다.
_parent -상위 프레임에서 문서를 엽니다.
_top -창 전체에 문서를 엽니다.

a 요소의 속성에는 위 4개의 값이 올 수 있는데 이중에서 자주 사용할 _blank를 기억해주자.

target 속성 작성해주자.

첫 문단 내용 작성

목차 작성하기

목차에 맨 위 '목차' 텍스트를 작성하는데 여러 방법이 있지만 여기선 heading 태그를 사용하여 작성한다.

목록 태그
  - Ordered list : 순서있는 목록 (번호를 사용하여 순서를 표현)
    <ol>
      <li></li>
    </ol>

  - Unordered list : 순서없는 목록 (번호가 아닌 기호를 사용하여 순서와 상관없이 표현)
    <ul>
      <li></li> : List Item - 각 항목
    </ul>

  - Description list : 설명 목록 (주제에 대해서 부연 설명이 있는 형태)
    <dl>
      <dt>주제어</dt>
      <dd>주제에 대한 설명글</dd>
    </dl>

테두리나 글의 간격 등은 생략하고 진행한다.

다음 단락을 진행해보자.

소제목 이후에 기호로 이루어진 목록이 온다.

이 목록은 위의 색상 별로 나누어 작성할 수 있다.

우선 가장 상위의 목록들을 만들어주자.

하위 목록에 한번더 <ul> 태그를 사용한다.

이때 목록에 포함관계가 한 눈에 보이도록 줄바꿈과 들여쓰기에 신경써주자.

줄바꿈과 들여쓰기를 통해 목록간의 상하위 포함관계를 잘 신경쓰며 작성하자.

얼핏 보면 복잡한 모양이지만 한 부분씩 가장 상위단부터 아래로 단계적으로 작성하면 어렵지않게 할 수 있다.

위 빨간 테두리로 표시한 부분은 하나의 박스로 보고 Description list만을 사용하여 작성해보자.

아랫 부분은 Description list안에 Ordered list도 포함하여 작성하자.

위 칸은 <dd>태그만으로 작성하여 숫자를 따로 입력해주어야 하고

아래 칸은 <ol> 태그를 삽입하여 숫자가 자동으로 작성되었다.

표(Table)작성하기

테이블 태그의 종류
    - table (테이블 만들기)
    - tr : table row (행)
    - th : table heading (열 제목)
    - td : table date (셀)

html을 통해 표를 작성하기는 복잡하다. 특히 지금 실습하고 있는 표 테이블도 크고 데이터가 많은 편이다.

테이블을 대신하여 작성해주는 사이트를 이용할 것이다.

예시)

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

구글에 table generator 최상단의 사이트에 접속하자. (위 사이트)

Table 탭에 Set Size에 원하는 테이블의 크기를 설정하면 우리가 원하는 형태의 테이블을 만들 수 있다.

직접 내용을 입력하거나 복사 붙여넣기를 하여 표를 채워준다.

그대로 복사를 하여 내용을 채웠더니 스타일까지 복사되어 코드가 복잡해졌다.

아직 CSS의 진도를 나가지 않았으니 Do not generate CSS를 체크한다.

코드가 훨씬 간결해졌다.

코드를 복사하여 우리가 입력하려는 개발환경에 붙여넣기 해준다.

표가 나왔지만 경계선이 출력되지 않는다.

table 태그에 border(테두리) 속성 값 1을 주면 테두리가 만들어진다.

위와 같은 방식으로 테이블을 만들면 간단하지만 캡션이나 그룹지정 등 접근성에 대한 설정을 할 수 없다는 단점이 있다.

<h1>HTML5</h1>
<hr/>
<p>위키백과, 우리 모두의 백과사전.</p>
<p>
  HTML5는 <a target="_blank" href="https://ko.wikipedia.org/wiki/HTML" >HTML</a> 의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 <a target="_blank" href="https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EC%97%85_%EC%96%B8%EC%96%B4">핵심 마크업 언어</a>이다. 2004년 7월 Web Hypertext Application Technology Working Group(WHATWG)에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다.
</p>
<p>
  HTML5는 HTML 4.01, XHTML 1.0, DOM 레벨 2 HTML에 대한 차기 표준 제안이다. 비디오, 오디오 등 다양한 부가기능과 최신 멀티미디어 콘텐츠를 액티브X 없이 브라우저에서 쉽게 볼 수 있게 하는 것을 목적으로 한다.
</p>
<p>
  W3C는 2014년 10월 28일 HTML5 표준안을 확정했다고 발표했다.
</p>
<p>
  이후 2016년 11월 1일 HTML5의 마이너 업데이트 버전인 HTML5.1 표준안을 확정, 2017년 12월 14일 HTML5.2 표준안을 확정했다. HTML5.3 표준안은 현재 작업 초안 단계로 진행 중이다.
</p>
  
<h5>목차</h5>
<ol>
  <li>HTML4와의 차이점</li>
  <li>일정 및 역사</li>
  <li>브라우저 지원 현황</li>
  <li>HTML5 기반 암호화 표준화 진행</li>
  <li>같이 보기</li>
  <li>각주</li>
  <li>외부 링크</li>
</ol>

<h2>HTML4와의 차이점</h2>
<hr/>

<ul>
  <li>
    요소 추가
    <ul>
      <li>
        구조적인 요소
        <ul>
          <li>header</li>
          <li>nav</li>
          <li>article</li>
        </ul>
      </li>
      <li>
        멀티미디어 요소
        <ul>
          <li>audio - 오디오를 재생한다.</li>
          <li>video - 비디오를 재생한다.</li>
          <li>canvas</li>
        </ul>
      </li>
    </ul>
  </li>
  
  <li>
    요소 의미 변경
    <ul>
      <li>em</li>
      <li>hr</li>
    </ul>
  </li>
  <li>문서 선언  - !DOCTYPE html으로 간소화 되었다.(대소문자 구별 안함)</li>
  <li>
    요소 제거
    <ul>
      <li>비슷한 기능의 다른 태그로 대체 가능한 태그들 - acronym, applet, dir, isindex</li>
      <li>디자인적인 기능 이상의 의미가 없어 삭제 (CSS로 대체 가능한 태그들) - basefont, big, center, font, strike, tt</li>
      <li>
        웹 접근성 향상을 위해 사용을 지양하는 태그들 - frame, frameset, noframes</li>
    </ul>
  </li>
</ul>

<h2>일정 및 역사</h2>
<hr/>

<ul>
  <li>2007년 5월 HTML5와 Web Forums 2.0 스펙 채택 - 리뷰 기반으로</li>
  <li>2007년 11월 HTML5 디자인 원칙 작업 초안</li>
  <li>2010년 1월 HTML5 Last Call 작업 초안</li>
  <li>2010년 8월 HTML5 Working Draft 공개</li>
</ul>

<dl>
  <dt>수정된 HTML 5.0 개발 일정</dt>
  <dd>1. CR(Candidate Recommendation): 2012년 4분기</dd>
  <dd>2. LCf: 2014년 3분기</dd>
  <dd>3. PR(Proposed Recommendation): 2014년 4분기</dd>
  <dd>4. Rec(Recommendation): 2014년 4분기</dd>
</dl>

<dl>
  <dt>HTML5.1 개발 일정</dt>
  <dd>
    <ol>
      <li>FPWD(First Publication Working DrafT): 2012년 4분기</li>
      <li>LC(Working Draft Last Call): 2014년 3분기</li>
      <li>CR(Candidate Recommendation): 2015년 1분기</li>
      <li>Rec(Recommendation): 2016년 4분기</li>
    </ol>
  </dd>
</dl>

<h2>브라우저 지원 현황</h2>
<hr/>

<table border="1">
<thead>
  <tr>
    <th>브라우저</th>
    <th>Ver</th>
    <th>HTML5 검사 점수<a href="https://ko.wikipedia.org/wiki/HTML5#cite_note-3">[3]</a><br>2012년 1월 6일</th>
    <th>Ver</th>
    <th>HTML5 검사 점수<br>2012년 5월 23일<a href="https://ko.wikipedia.org/wiki/HTML5#cite_note-4">[4]</a></th>
    <th>Ver</th>
    <th>HTML5 검사 점수(500)<br>2012년 12월 11일<a href="https://ko.wikipedia.org/wiki/HTML5#cite_note-5">[5]</a></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><a href="https://ko.wikipedia.org/wiki/%EA%B5%AC%EA%B8%80_%ED%81%AC%EB%A1%AC">크롬</a></td>
    <td>16.0</td>
    <td>373/475</td>
    <td>18</td>
    <td>400</td>
    <td>23</td>
    <td>448</td>
  </tr>
  <tr>
    <td><a href="https://ko.wikipedia.org/wiki/%EB%AA%A8%EC%A7%88%EB%9D%BC_%ED%8C%8C%EC%9D%B4%EC%96%B4%ED%8F%AD%EC%8A%A4">파이어폭스</a></td>
    <td>10.0</td>
    <td>332/475</td>
    <td>12</td>
    <td>345</td>
    <td>16</td>
    <td>372</td>
  </tr>
  <tr>
    <td><a href="https://ko.wikipedia.org/wiki/%EC%98%A4%ED%8E%98%EB%9D%BC_(%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80)">오페라</a></td>
    <td>11.60</td>
    <td>329/475</td>
    <td>11.60</td>
    <td>338</td>
    <td>-</td>
    <td>-</td>
  </tr>
  <tr>
    <td><a href="https://ko.wikipedia.org/wiki/%EC%98%A4%ED%8E%98%EB%9D%BC_(%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80)">오페라</a></td>
    <td>12 알파</td>
    <td>344/475</td>
    <td>12.00</td>
    <td>385</td>
    <td>12.10</td>
    <td>419</td>
  </tr>
</tbody>
</table>

<h2>HTML5 기반 암호화 표준화 진행</h2>
<hr/>

<h2>같이 보기</h2>
<hr/>

<ul>
  <li>(영어) HTML5에서의 ogg 포맷</li>
  <li>(영어) HTML5 레이아웃 엔진의 비교</li>
  <li>HTML5 비디오</li>
  <li>HTML</li>
  <li>XHTML</li>
  <li>CSS3</li>
  <li>SVG</li>
</ul>

<h2>각주</h2>
<hr/>

<ol>
  <li> “Mac Developer Library: System-Declared Uniform Type Identifiers”. Apple. 2009년 11월 17일.</li>
  <li> “HTML5 specification finalized, squabbling over specs continues”. Ars Technica. 2014년 10월 29일. 2014년 10월 29일에 확인함.</li>
  <li> (영어)“웹 브라우저의 HTML5 지원 검사 결과”. 2012년 1월 6일에 확인함.</li>
  <li> l5test.com 5월 23일 확인</li>
  <li> l5test.com 12월 11일 확인</li>
  <li> l5test.com 04월 07일 확인</li>
</ol>

<h2>외부 링크</h2>
<hr/>
<ul>
  <li> 위키미디어 공용에 HTML5 관련 미디어 분류가 있습니다.</li>
  <li>WHAT Working Group</li>
  <li>W3C HTML Working Group</li>
  <li>WHATWG 편집자 초안</li>
  <li>W3C 편집자 초안</li>
  <li>HTML4와 차이점</li>
  <li>(영어) How HTML5 will change the Web (HTML5는 웹을 어떻게 바꿀 것인가)</li>
  <li>(영어) HTML5 호환성 점수 보기</li>
</ul>

ko.wikipedia.org/wiki/HTML"

'Front > HTML' 카테고리의 다른 글

[HTML] HTML <video> 동영상올리기, video태그와 속성 (0)	2021.01.07
[HTM] HTML <img> 이미지올리기, img태그와 속성 (0)	2021.01.07
[HTML] HTML5 콘텐츠 모델 (0)	2021.01.07
[HTML] HTML 엔터티 (Entity, Escape) (0)	2021.01.07
[HTML] HTML 기본 (정의, 요소, 빈요소, 구조, DOCTYPE, 속성) (0)	2021.01.06

Jonghyun

[HTML] HTML 텍스트 익혀보기 (위키백과의 HTML5 문서 만들어보기)

'Front > HTML' 카테고리의 다른 글

티스토리툴바

[HTML] HTML 텍스트 익혀보기 (위키백과의 HTML5 문서 만들어보기)

'Front > HTML' 카테고리의 다른 글

'Front/HTML' Related Articles

티스토리툴바