본문 바로가기
Web/HTML

HTML

단축 2020. 12. 25. 19:38
반응형

1. HTML 소개

 1.1 Hiper Text Markup language(HTML) 

 Hyper Text : 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트 즉, 링크를 의미합니다.

 Markup Language : 프로그래밍 언어의 한 종류로 정보를 구조적, 계층적으로 표현 가능하다는 특징이 있습니다.

 HTML은 파일 확장자로 .html을 쓰며, 그 파일 안에 html 코드를 작성하게 됩니다.

 

2. HTML 문법

 HTML문법은 크게 4가지입니다.

  • 태그(태그, 빈 태그, 중첩태그)
  • 속성
  • 공백
  • 주석

 코드를 예시로 들면 다음과 같습니다.

 2.1 태그(Tag)

 의미 : 무언가를 표시하기 위한 꼬리표, 이름표

 특징 :  <, > 기호로 표현, <, > 기호 사이에 태그 이름이 들어갑니다.

 대부분 태그는 시작 태그와 종료 태그로 이루어지며 종료 태그는 태그 이름 앞에 '/' 기호가 붙습니다.

 시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용이 위치하게 됩니다. 

 

 태그중첩 : 태그안에 또 다른 태그를 선언할 수 있습니다. 이 때 중첩태그는 부모태그를 벗어나면 안됩니다.

 

 빈 태그 : 태그의 내용이 없는 태그. 시작 태그만 있습니다. 이런 종류의 태그는 대표적으로 두 가지의 경우 사용합니다. 

 1) 기존엔 브라우저에 출력할 내용을 직접 내용을 써서 표현해야 했지만 브라우저가 직접 내용을 표현해야하는 경우

 이런 종류의 태그를 대체 태그, replacement tag라고도 합니다. 대표적으로 

  • <input type="">
  • <img src=""/>

 등이 있습니다.

 

 

 2) 실제 화면에 출력할 내용이 없을 때

  •  <br/> 

 등이 있습니다.

 

 

 

2.2 속성

 의미 : 태그의 이름, 이동 경로를 명시해 좀 더 구체적인 기능을 제공

 특징 : 태그안에 이름="값"의 형태로 주로 표현됩니다.

 예시코드 : id속성을 추가해 "title"이라는 값을 선언했습니다.

<h1 id="title">Hello World!</h1>

 

 

 2.3 공백

 특징 : 기본적으로 두 칸 이상의 공백 또는 개행을 모두 무시합니다.

 예시 : 이렇듯 코드 작성의 결과가 모두 같습니다.

 따라서 브라우저에 개행 또는 공백을 실제로 추가하기 위해서는 특정 속성을 삽입해주어야 합니다.

 

 

 2.4 주석

 특징 : 브라우저가 해당 코드 블럭을 따로 해석하지 않습니다. 또한 여러줄 가능합니다. <!-- 로 열고 -->로 닫습니다.

 예시 : <!--내용-->

<!--Hello-->
<!--
Hello
World
I'm
HTML
-->

 

3. HTML문서의 기본구조

 HTML문서는 웹 페이지를 제작하는 데 가장 기본이 되는 정보입니다.

 브라우저는 이 HTML문서에서 HTML버전, 문서제목, 내용 등을 파악합니다.

 문서구조는 다음과 같이 크게 5가지 있습니다.

  • <!doctype>
  • <html>
  • <head>
  • <meta>
  • <body>

 코드예시

가장 기본적인 HTML 문서코드

  

 3.1 <!doctype>

 의미 : 문서 타입 정의

 특징 : 문서 타입 정의는 보통 DTD(doctype)라고 부릅니다.

 이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문이며 반드시 문서 내 최상단에 선언되어야 합니다.

 문서 타입 선언 후에는 <html>태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그가 있습니다.

 

 

 3.2 <html>

 <html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미합니다. en은 영어, ko는 한국어입니다.

 

 

 3.3 <head>

 <head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않습니다. 대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 합니다.

 

 

 3.4 <meta>

<meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정합니다.

 

 

 3.5 <body>

<body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, 앞으로 우리가 다루는 태그들 대부분이 모두 여기에 해당이 됩니다. 위 코드는 가장 기본적인 문서 구조로, 보통은 이보다 더 많은 태그가 들어가게 됩니다.

 

4. HTML태그

130여개의 태그들이 있다고 합니다. 그 중 자주 사용하는 태그에 대해 설명해보려고 합니다.

 

 

4.1 Heading 태그

 Heading 태그 : 줄여서 h로 사용, 제목 레벨에 따라 <h1> ~ <h6>까지 있습니다. <h1>이 가장 큰 제목으로 사용 되며 숫자가 올라갈 수록 더 작은 크기의 소제목을 나타내게 됩니다.

 

예시 : 브라우저에서 정해진 h 태그 규격대로 출력이 된 모습입니다.

 

 

4.2 Paragraph 태그

 Paragraph 태그 : 줄여서 p로 사용. <p>를 사용해서 단락으로 구분하면 자연스럽게 개행이 됩니다. 하지만 한 단락안에서 개행을 하고 싶을 때는 다른 태그를 사용해야합니다. 이 태그가 <br>입니다

 

 

4.3 Linebreak태그

 Linebreak 태그 : <p> 내부에서 강제로 개행을 하기 위해서 사용합니다. 

 

 

 

4.4 텍스트 관련 태그(B, I, U, S)

 텍스트 관련 태그(B, I, U, S) : 웹 문서를 표현하는 방법에 대한 태그들입니다.

  • <b> : bold 태그는 글자를 굵게 표현하는 태그입니다.

  • <i> : italic 태그는 글자를 기울여서 표현하는 태그입니다.

  • <u> : underline 태그는 글자의 밑줄을 표현하는 태그입니다.

  • <s> : strike 태그는 글자의 중간선을 표현하는 태그입니다. (예전에 존재했던 strike 태그와는 다른 태그로, strike 태그는 폐기되어 더는 사용할 수 없습니다.)

 

  예시

  

 

 

4.5 앵커태그

 앵커 태그 : 링크를 생성하는 태그. 이를 이용해 다른 페이지로 이동하거나 현재 페이지 내에서 특정 위치로 초점을  이동시킬 수 있습니다.

    특징 : href속성을 반드시 가져야 됩니다. href 속성값은 링크의 목적지가 되는 url입니다.

    예시 : 안녕이라는 텍스트를 클릭하면 네이버 홈페이지로 이동이 되는것을 확인할 수 있습니다.

  앵커 태그의 속성들

  • target : 링크된 리소스를 표시할 장소를 나타냅니다.  속성값으로는 _self, _blank, _parent, _top이 있습니다.  _self는 현재 화면에 표시한다는 의미로, target 속성이 선언되지 않으면 기본적으로 self와 같이 동작합니다. _blank는 새로운 창에 표시한다는 의미로 외부 페이지가 나타나게끔 하는 속성입니다.  _parent와 _top은 프레임이라는 특정 조건에서만 동작하는 속성으로 최근에는 프레임을 잘 쓰지 않기 때문에 따로 다루지 않고 넘어가겠습니다.

   내부링크 : <a>를 통해 페이지 내부의 특정 요소로 초점을 이동하는 것. 사용시 href속성값에 #를 쓰고 뒤에 페이지       내에 이동하고자 하는 id 속성값을 적어면 됩니다.

   예시 : 회사 소개로 이동하기 텍스트를 클릭하기 전 화면, 클릭 후 화면   

 

 

 

4.6 의미없는 컨테이너 태그

  의미없는 컨테이너 태그 : 태그 자체에 아무 의미가 없고 단순히 요소들을 묶기 위해 사용되는 태그.

 특징 : 스타일을 주거나 서버에 보내는 데이터를 담을 수 있습니다. 

 대표태그

  • <div> : 블록 레벨 태그. 기본적으로 한 줄 생성해 내용 표현

  • <span> : 인라인 레벨 태그. 블록 레벨 요소의 한 줄에서 표현되는 요소.

 

 

4.7 리스트 요소

 리스트 요소 : 일련된 항목이 나열된 것들입니다.

  • <ul> : unordered list의 줄임. 순서가 상관이 없는 리스트의 경우 사용합니다.

  예시 : 순서 상관없이 그대로 브라우저에 리스트가 출력되는 것을 확인할 수 있습니다.

 

  • <ol> : ordered list의 줄임. 순서가 상관있을 때 사용합니다.

  예시 : 리스트마다 번호가 붙어 출력되는 것을 확인할 수 있습니다.

  • <dl> : definition/description list의 줄임. 용어와 그에 대한 정의 표현할 때 사용합니다. 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조입니다. <dl>태그 안에는 <dt>, <dd> 태그가 있습니다. <dt> 용어를 나타내는 태그. <dd> 용어에 대한 정의 또는 설명을 나타내는 태그. 용어 하나에 여러 정의가 들어갈 때, <dd>를 한 개 이상 쓰는 것이 가능합니다.

 

 

4.8 이미지 요소

 이미지 요소 : 이미지를 삽입하는 용도로 사용합니다.

  이미지 파일 형식 : gif(제한적 색 사용, 용량 적음, 투명 이미지와 애니메이션 이미지 지원), jpg(사진이나 일반적 그림    에 쓰임. 높은 압축률, 투명 제외 자연스러운 색상 표현 지원), png(이미지 손실 적고 투명 반투명 모두 지원함)

  

  • <img> : HTML문서에 이미지를 삽입하는 태그입니다. 닫는 태그가 없는 빈 태그입니다.                                   - src속성 :  필수적으로 들어가며 이 속성의 값은 이미지의 경로를 나타냅니다. 속성값으로는 절대경로(실제 이미지가 위치한 곳의 전체 경로) 또는 상대경로(현재 웹 페이지를 기준으로 상대적인 이미지의 위치가 들어있는 경로)가 들어갈 수 있습니다.                                                                                                                     - width / height 속성: 가로 크기를 나타내는 속성입니다. height는 세로 크기를 나타내는 속성입니다. 값의 단위는 불필요하며 값을 입력하면 자동으로 픽셀 단위로 계산됩니다. 이미지 크기가 고정적이라면 해당 속성을 사용하는 것이 좋습니다. 둘 중 하나만 선언하면 나머지 한 속성은 선언한 크기에 맞춰 자동으로 비율에 맞게 조정됩니다. 만약 두 속성 모두 선언하면 비율과 무관하게 선언한 크기대로 변경됩니다.

  • <alt> : 이미지 로딩 실패시 대체 텍스트를 표시할 때 사용합니다.

 

 

4.9 테이블 요소

 테이블 요소 : 데이터를 표로 나타낼 때 사용합니다.

  • <table> : 표를 나타내는 태그, 하나 이상의 <tr>로 이루어져 있습니다.

  • <tr> : 행을 나타내는 태그, <th>, <td>를 자식으로 가지게 됩니다.

  • <th> : 제목 셀을 나타내는 태그

  • <td> : 셀을 나타내는 테그

  예시 : 기본적으로 테이블의 기본 스타일에는 테두리가 없습니다. 

 

 아래의 css 코드를 <head>안에 입력하면 테두리가 나옵니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      th,
      td {
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>열1</th>
        <th>열2</th>
        <th>열3</th>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>
  </body>
</html>

실행결과

표가 복잡해지면 테이블의 구조를 파악하기 쉽지 않습니다. 이를 위해 도움이 되는 태그들이 있습니다.

  • <caption> : 표의 제목을 나타내는 태그
  • <thead> : 제목 행을 그룹화하는 태그
  • <tfoot> : 바닥 행을 그룹화하는 태그
  • <tbody> : 본문 행을 그룹화하는 태그

예시

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      th,
      td {
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        Monthly Savings
      </caption>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Sum</td>
          <td>$180</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

실행결과

테이블 관련 속성 : 속성값으로는 병합할 셀의 개수를 넣어주시면 됩니다.

  • colspan : 셀을 가로방향으로 병합
  • rowspan : 셀을 세로방향으로 병합

 

 

4.10 폼 요소

 폼 요소 : <input> 으로 사용합니다.

 자주 사용하는 속성

  • type="text" : 단순한 텍스트를 입력할 때 사용하는 속성값입니다.

  • type="password" 입력값을 노출시키지 않을때 사용합니다.

  • placeholdertype = "password" : 사용자가 입력하기 전 미리 속성값을 화면에 노출하게 됩니다.

  • type="radio" : 라디오 버튼을 만들 때 사용합니다. 중복 선택이 불가능 합니다. 

  • type="checkbox" : 체크 박스를 만들 때 사용합니다. 중복 선택이 가능합니다. 라디오 버튼과 체크박스에는 checked, name 속성이 존재합니다. checked속성은 값이 별도로 존재하지 않는 boolean속성입니다. 속성이 존재하면 true, 없으면 false를 가집니다. 이 속성을 적으면 자동으로 체크됩니다. name속성은 그룹화시켜주는 속성입니다. 같은 그룹으로 radio 또는 checkbox를 묶고 싶다면 같은 name값을 적어주면 됩니다.

 예시

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      th,
      td {
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    아이디 : <input placeholder="영문" type="text" /> <br />
    비밀번호 : <input placeholder="비번" type="password" /> <br />
    성별 : 남자 <input type="radio" name="gender" checked />, 여자
    <input type="radio" name="gender" /> <br />
    취미 : 영화감상 <input type="checkbox" name="hobby" />독서
    <input type="checkbox" name="hobby" /> 음악감상
    <input type="checkbox" name="hobby" /><br />
  </body>
</html>

실행결과

 

  • type="file" : 파일 선택

  • type="submit" : 폼형식을 제출하는 용도로 사용됩니다.

  • type="image" : src,alt속성이 필수며 weight,height속성을 넣을 수 있습니다.

  • type="button" : value속성으로 버튼들의 이름을 지정 가능

  • type="reset" : 해당 폼의 텍스트 값들을 초기화합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" name="file" /><br />
    <form action="./test.html">
      메시지: <input type="text" name="message" /><br />
      <input type="submit" />
      <input type="reset" />
      <input
        type="image"
        src="http://placehold.it/50x50?text=click"
        alt="click"
        width="50"
        height="50"
      />
      <input type="button" value="버튼" />
    </form>
  </body>
</html>

실행결과

제출 버튼을 클릭시 페이지가 이동되는데 이떄 서버에 전송하는 것이고 서버로 전송할 때 처리는 따로 코드에 작성해놓진 않았기에 "페이지 없음"메시지가 뜨게 됩니다.

 

  • <select> : 선택 목록상자(콤보박스)를 생성할 수 있습니다. 안에 <option>태그를 준 후 선택 목록을 만들 수 있습니다.

  • <textarea> : 여러줄의 text를 입력할 수 있는 text box를 생성할 수 있습니다. cols,rows 속성을 부여할 수 있습니다. cols는 가로크기, rows는 텍스트 줄 수를 결정할 수 있습니다.

  • <button> : 버튼을 만들 때 사용하며 submit, reset, button 3가지의 타입이 있습니다. 각 버튼은 이전에 배웠던 input 타입의 submit, reset, button과 모두 같은 기능을 가진 버튼입니다. 다만, 빈 태그가 아니며 내용을 안에 직접 넣을 수 있으므로 좀 더 자유로운 스타일 표현이 가능합니다.

  • <label> : form 요소의 이름과 form 요소를 명시적으로 연결하기 위해 사용합니다. form 요소의 id속성과 label의 for속성값은 같아야 합니다. 스크린 리더기로 듣게 되면 form요소에 접근 시 label을 함께 읽어줍니다. 사용성 접근성적인 측면으로 중요한 역할을 하므로 반드시 써주는 것이 좋습니다.

<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>

  • <fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용

  • <legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성

<form action="" method="">
    <fieldset>
        <legend>기본 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
    <fieldset>
        <legend>부가 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
</form>

<fieldset>은 보통 form의 성격에 따라 구분합니다.

<legend>는 <fieldset>의 자식으로 반드시 최상단에 위치해야 합니다.

<form>에는 대표적 2가지 속성이 있습니다. action 데이터 처리 위한 서버의 주소. method는 데이터를 전송하는 방식을 지정합니다. method의 속성값으로는 get/post 2가지 방식이 존재합니다. get방식은 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출됩니다. 반면 post방식은 데이터가 전송될 때 header의 body 부분에 data가 적재되므로 노출되지 않습니다. 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="./test.html">
      아이디 : <input placeholder="영문" type="text" /> <br />
      비밀번호 : <input placeholder="비번" type="password" /> <br />
      성별 : 남자 <input type="radio" name="gender" checked />, 여자
      <input type="radio" name="gender" /> <br />
      취미 : 영화감상 <input type="checkbox" name="hobby" />독서
      <input type="checkbox" name="hobby" /> 음악감상
      <input type="checkbox" name="hobby" /><br />
      <input type="file" name="file" /><br />
      메시지: <input type="text" name="message" /><br />

      <input
        type="image"
        src="http://placehold.it/50x50?text=click"
        alt="click"
        width="50"
        height="50"
      />
      <input type="button" value="버튼" /> <br />
      사는지역 :
      <select>
        <option>서울</option>
        <option>경기</option>
        <option>강원</option>
        <option selected>제주</option></select
      ><br />
      자기소개 : <textarea cols="30" rows="5"></textarea>
      <input type="submit" />
      <input type="reset" />
    </form>
  </body>
</html>

 

5. HTML콘텐츠 모델

HTML 5에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있습니다. 요소는 이 규칙들을 준수해야 하며, 반드시 HTML 권고안을 따라야 합니다. 이런 규칙에 대해 비슷한 요소들끼리 묶어놓은 것이 콘텐츠 모델입니다.

각 요소는 하나 이상의 콘텐츠 모델에 속하게 됩니다. 각 콘텐츠 모델에 대해 설명하도록 하겠습니다.

 

콘텐츠 모델들의 관계도

5.1 Metadata

 " base,
 link, 
meta,
 noscript,
 script,
 style,
 title " 

Metadata에는 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함됩니다.

메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분 <head>내에 들어간다는 것이 특징입니다.

 

 

5.2 Flow

" a, abbr, address,
map>area, article, aside,
audio, b, bdo, blockquote,
br, button,
canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed,
fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img,
 input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol,
output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong,
style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr " 

Flow에는 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함됩니다.

Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함됩니다.

 

 

5.3 Sectioning

" article, aside, nav, section "

Sectioning에는 문서의 구조와 관련된 요소들이 포함됩니다.

HTML5에서 새로 생긴 <article>, <aside>, <nav>, <section> 등이 포함되며 이 태그들은 문서의 구조, 아웃라인에 영향을 주게 됩니다.

 

 

5.4 Heading

" h1, h2, h3, h4, h5, h6 "

Heading에는 각 section의 header를 정의하는 heading 태그가 포함됩니다.

 

 

5.5 Phrasing

"a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed,
 i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output,
 progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time,
var, video, wbr"

Phrasing에는 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이 포함됩니다.

 

 

5.6 Embedded

" audio,
 canvas,
 embed,
 iframe,
 img,
 math,
 object,
 svg,
 video " 

Embedded에는 외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들이 이에 해당합니다.

 

 

5.7 interactive

" a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,
object[usemap], select, textarea, video[controls] "

Interactive에는 사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들이 이에 해당합니다.

 

 

 

 

6. 시멘틱 마크업

웹이 발전하고 데이터가 방대해지면서 인터넷 마케팅이 급속도로 발달하게 되었습니다.

인터넷 마케팅 방식의 한 방식으로 검색 엔진 최적화가 있습니다.

검색 엔진 최적화는 HTML 코드에서 정보를 모아 검색 키워드에 맞는 적절한 웹사이트 구성하여, 검색 결과의 상위에 나올 수 있도록 하는 작업입니다.

해당 웹페이지의 내용을 파악하고 검색엔진에 노출이 잘되도록 하기 위해서는 HTML 요소를 적절하게 사용한 시멘틱한 마크업이 필요합니다. 

 

6.1 시멘틱 마크업 

시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다. 

시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻합니다.

애초에 프로그래밍 언어는 사람과 기계와의 정해진 약속이며 HTML 역시 마찬가지입니다.

시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작합니다. 

 

 

6.2 시멘틱 마크업 하기

마크업 할 때는 의미에 맞는 태그, 요소를 사용하는 것이고 문서를 표현할 때는 구조화를 잘 해주는 것이 중요합니다.

정해진 약속대로 코드를 작성하게 되면 결국 기계뿐 아니라 사람도 이해하기 쉬운 코드가 됩니다.

 

<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>

위 코드를 작성해서 화면을 보면 각각의 요소가 같은 모습으로 표현되나 그 의미가 같지는 않습니다.

<b>는 의미 없이 단순히 텍스트를 굵게 표현하는 태그지만, <strong>은 중요하다는 의미를 지닙니다.

<strong>은 중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된 것입니다.

따라서 중요하다는 의미를 포함할 때는 <b>가 아닌 <strong>을 사용하는 것이 적절하고 시멘틱한 마크업입니다.

 

이외에 <i>는 단순히 기울어진 글자를 표현하지만, <em>은 글자의 특정 부분을 강조하는 의미를 지닙니다.

<u>와 <s>는 단순히 글자에 선을 그은 것이고, <ins>와 <del>은 내용이 새롭게 추가되거나

삭제가 되었다는 의미를 지닙니다.

 

 

6.3 HTML5 시멘틱 요소

  • <article> 
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <time>

 

 

 

7. 블록&인라인

7.1 Block Level 

한 줄에 하나의 요소를 표시합니다.

부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소입니다.

양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 됩니다.

블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함할 수 있습니다. 

" div, h1~h6, p, ul, li, table ..."

7.2 Inline Level

한줄에 여러개의 요소를 표시합니다

하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소입니다.

라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있습니다.

인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없습니다.

즉, 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없습니다. 

" span, i, img, em, strong, a ..." 

다만, HTML5 버전에서 생겨난 한가지 예외 경우가 있는데 <a>는 인라인 레벨 요소지만

자손으로 블록 레벨 요소를 가질 수 있습니다.

예외로 <h1> ~ <h6>(headings) 요소와 <p> 요소는 블록 레벨 요소지만, 내부 요소로 Phrasing Content만 허용합니다.

 

 

* 부스트코스 웹 UI 개발 강의(조영광 님)를 들으며 정리한 내용입니다.

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

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

(HTML) - 웹 접근성  (0) 2021.01.26

'Web/HTML' Related Articles

티스토리툴바