HTML - 2. HTML 태그

 

 

1. HTML 태그 소개

태그는 HTML을 이루고 있는 구성 요소로 130여 개 정도가 있다. 그러나 실제 주로 사용하는 태그는 30개 미만이다. 따라서 태그를 다 외운다고 생각하기 보단, 주요 태그를 잘 이해하고 사용빈도가 적은 태그는 필요할 경우 찾아 익히면 된다. 필요할 때 찾을 수 있는게 핵심이다.

 

 

2. 제목과 단락요소

• Heading 태그 (h1 - h6): 제목을 표현할 때 사용하는 태그이며 제목의 레벨에 따라 <h1-h6>로 표현한다. 숫자가 올라갈수록 낮은 수준의 제목 레벨을 표현한다.
• Paragraph 태그 (p): 본문에 해당하는 내용을 단락 태그를 이용해 작성한다.
• Linebreak 태그 (br): <p> 태그 내에서 임의로 개행을 하게 될 경우 사용하는 태그이다. 글의 줄바꿈을 생성하고 종료 기호 / 없이 사용하는 빈 태그이다.

 

 

3. 텍스트를 꾸며주는 요소

• <b>: Bold. 긁자를 굵게 표현한다. 
• <i>: Italic. 글자를 기울여 표현한다.
• <u>: Underline. 글자의 밑줄을 표현한다.
• <s>: Strike. 글자의 중간선을 표현한다

 

4. 시멘틱 마크업

시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작한다. 마크업 할 때, 의미에 맞는 태그, 요소를 사용하고 문서를 표현할 때 구조화를 잘 해줌으로써 브라우저가 코드를 잘 이해할 수 있게 해준다. 

 

• <b>: Bold. 긁자를 굵게 표현한다. vs <strong> 중요한
• <i>: Italic. 글자를 기울여 표현한다. (html5 버전에선 특정 이유(기술적인 용어, 외국어 문구, 소설속 인물의 생각 등)로 다른 글자와 구분하기 위해 사용된다.) vs <em> 강조하는
• <u>: Underline. 글자의 밑줄을 표현한다. vs <ins> 새롭게 추가된
• <s>: Strike. 글자의 중간선을 표현한다 vs <del> 삭제된

해당 코드를 작성해서 화면을 보면 각각의 요소가 같은 모습으로 표현된다. 그러나 그 의미는 같지 않다. <b>는 의미 없이 단순히 텍스트를 굵게 표현하는 태그지만 <strong>은 중요하다는 의미를 지닌다. 마찬가지로 <u>와 <s>는 단순히 글자에 선을 그은 것이지만 <ins>와 <del>은 내용이 새롭게 추가되거나 삭제 되었다는 의미를 지닌다.

이 처럼 각 의미에 맞는 태그, 요소를 사용하는 것이 적절하고 시멘틱한 마크업이다.

 

 

5. 앵커 요소

• <a>: 링크를 생성하는 태그. html의 가장 큰 특징이 되는 태그이다. 
• href 속성: 링크를 만들기 위해 반드시 가져야 하는 속성. 속성의 값은 링크의 목적지가 되는 URL이다.
• target 속성: 링크된 리소스를 어디에 표시할지 나타내는 속성. _self(기본), _blank, _parent, _top이 있으며 각각 현재 화면, 새로운 창에 표시 하며, _parent와 _top은 프레임이라는 특정 조건에서만 동작하는 속성이나 최근에는 프레임을 잘 쓰지 않으므로 앞의 두개만 알고 있으면 된다.

 

<a href='http://www.naver.com/' target='_blank'>네이버</a>

 

• 내부 링크: <a>를 통해 페이지 내부의 특정 요소로 초점을 이동할 수도 있는데, 이를 내부 링크라고 한다. 내부 링크를 사용할 경우 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으며 된다.

<a href='#some-element-id'>회사 소개로 이동하기</a>

...중략.

<h1 id='some-element-id'>회사 소개</h1>

보통 페이지에 내용이 많아 스크롤이 길어질 경우, 빠르게 화면 최상단으로 이동하고자 할 때 내부 링크를 주로 사용한다.

웹페이지 내에 화면 하단에 있는 'top' 또는 '맨 위로 이동하기' 버튼이 이에 해당한다.

 

 

6. 의미가 없는 컨테이너 요소

태그 자체에 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그. 스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 사용된다. 현재 웹은 문서형태에서 많이 벗어났기 때문에 사용빈도는 매우 높다. 

• div: block-level. 블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현한다. ex) <p>

<div>
    <span>Lorem</span>ipsum dolor sit.
</div>

• span: inline-level. 블록 레벨 요소의 한 줄 안에서 표현되는 요소들이다. ex) <b>, <i>, <u>, <s>

 

7. 리스트 요소

• ul (unordered list): 순서가 없는 리스트. <li> 태그만을 자식 요소로 가질 수 있다.

<ul>
    <li>콩나물</li>
    <li>파</li>
    <li>국 간장</li>
    ...
</ul>

• ol (ordered list):  순서가 있는 리스트. <li> 태그만을 자식 요소로 가진다.

<ol>
	<li>콩나물</li>
    <li>파</li>
    <li>국 간장</li>
    ...
</ol>

• dl (definition/description list): 
  • <dt>: 용어를 구분한다.
  • <dd>: 용어의 정의를 나타낸다.

<dl>
    <dt>리플리 증후군</dt>
    <dd>허구의 세계를 진실이라 믿고 ....</dd>
    <dt>피그말리온 효과</dt>
    <dd>타인의 기대나 관심으로 ...</dd>
    <dt>언더독 효과</dt>
    <dd>사람들이 약자라고 믿는 ...</dd>
</dl>

 

8. 이미지 요소

• img: 문서에 이미지를 삽입하는 태그로 닫는 태그가 없는 빈 태그이다.

<img src="./images/pizza.png" alt="피자">

• alt: 이미지의 대체 텍스트를 입력하는데, 대체 텍스트란 이미지를 설명하는 글이다. 웹 접근성 측면에서 중요한 속성이다.
• src: 이미지 경로를 지정하는 필수 속성이다. './'는 현재 폴더 '../'는 상위폴더
• width/ height: 이미지의 크기를 지정하며 필수 속성은 아니다. 둘 중 한가지의 속성만 사용할 경우 원본 이미지의 비율에 맞춰 가로 세로를 각각 줄여나간다. CSS에서 반응형으로 바꾸는 게 추세이다.

 

9. 테이블 요소1

• table: 데이터 표를 나타내는 태그
• th: 데이터 셀(굵은 글씨)
• tr: 행
• td: 데이터 셀

<tabel>
  <tr>
      <td></td><td></td><td></td><td></td>
  </tr>
  <tr>
      <td></td><td></td><td></td><td></td>
  </tr>
  <tr>
      <td></td><td></td><td></td><td></td>
  </tr>
  <tr>
      <td></td><td></td><td></td><td></td>
  </tr>
</table>

 

• <caption>: 표의 제목
• <thead>: 제목 행을 그룹
• <tfoot>: 바닥 행을 그룹

<table>
    <caption> Montly Savings</caption>
    <thead>
        <tr><th>Month</th><th>Savings</th></tr>
    </thead>
    <tfoot>
        <tr><td>Sum</td><td>$180</td></tr>
    </tfoot>
    <tbody>
        <tr><td>January</td><td>$100</td></tr>
        <tr><td>February</td><td>$80</td></tr>
    </tbody>
</table>

 

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

<table>
    <caption> Montly Savings</caption>
    <thead>
        <tr><th>Month</th><th>Savings</th></tr>
    </thead>
    <tfoot>
        <tr><td colspan='2'>Sum</td></tr>
    </tfoot>
    <tbody>
        <tr><td>January</td><td>$100</td></tr>
        <tr><td>February</td><td rowspan='2'>$80</td></tr>
        <tr><td>March</td></tr>
    </tbody>
</table>

 

 

10. 폼 요소

서버에 데이터를 전달하기 위한 요소들

• <input 요소>: 대표적인 폼 요소로 다양한 type 속성으로 여러 종류의 입력 양식으로 나타난다.
• type = "text": Text를 입력할 수 있는 폼
• placeholder: 사용자가 입력 값을 입력하기 전 노출되는 내용. 양식 가이드처럼 활용할 수 있음.
• type = "password": 값이 노출되지 않음
• type = "radio": 성별이나 약관 동의하는 버튼에서 사용 됨. name 속성을 같게 해야만 상호배타적 관계를 만들 수 있음. 불리안 속성인 checked 속성을 통해 기본값을 설정할 수 있음.
• type = "checkbox": 취미나 관심사 항목에서 사용 됨. 개수에 관계 없이 체크할 수 있음.

 

• type = "file": 내 컴퓨터에 있는 파일들을 서버에 올릴 때 사용한다.
• type = "submit": 입력한 양식들을 서버로 전송.
• type = "reset": 값을 초기화
• type = "button": 기본 기능이 없는 버튼. 직접 커스텀을 통해 기능을 추가 해야한다.
• type = "image": 버튼의 동작은 submit 버튼과 동일하나 버튼의 모양에 이미지를 삽입할 수 있는 속성이다. src, alr 속성이 반드시 필요하다. 

 

• type = "select": 지역과 같은 항목에서 사용. selected 속성을 통해 checked와 같은 기능을 하게 할 수 있음.
• type = "textarea": 자기소개 항목에서 사용. 박스의 크기를 cols와 rows 속성으로 조절할 수 있다. placeholder 속성도 사용 가능
• <button type="...">: input 타입보다 자유로운 스타일을 만들 수 있음

<form action="/test/html">
  ID: <input type='text' placeholder='영문으로만 적어주세요'><br>
  PW: <input type='password'><br>
  성별: 남자 <input type='radio' name='gender' checked>, 여자 <input type='radio' name='gender'>
  취미: 영화감상 <input type='checkbox' name='hobby' checked>, 
       음악감상 <input type='checkbox' name='hobby' checked>, 
       독서 <input type='checkbox' name='hobby' checked><br>
       
  프로필 사진 업로드: <input type="file"><br>
  <input type="submit" value="전송"><br>
  <input type="reset" value="취소"><br>
  <input type="button" value="등록"><br>
  <input type="image" src="./login.png" alt="로그인" width="100" height="50">
  
  지역: <select>
    <option>서울</option>
    <option>경기</option>
    <option>강원</option>
    <option selected>제주</option>
  </select><br>
  자기소개: <textarea cols="30", rows="5" placeholder="500자 이내로 작성해주세요."></textarea><br>
  <button type="submit">전송</button>
  <button type="reset">취소</button>
  <!-- <input type="submit" value="전송"><br> 위의 두 코드와 같은 기능을 한다
  <input type="reset" value="취소"><br> -->
</form>

 

• <label>: 폼 요소와 연결시켜 주기 위해 사용하며 웹 접근성 향상에 도움이 되므로 필수적으로 사용해야 한다. 폼요소의 id값과 레이블 요소의 for 속성은 반드시 같아야 한다. 레이블을 클릭하면 해당 폼요소를 클릭한 것처럼 동작한다. 
• <fieldset>: 폼 요소들을 그룹화 하여 구조적으로 만들기 위해 사용한다.
• <legend>: 필드셋 태그로 묶인 그룹의 이름을 지정해주는 태그. 필드셋 태그의 자식태그로 가장 먼저 선언되어야 한다.
• <form>: 폼 데이터를 그룹화하여 서버에 전송한다.
• action = "": 폼 데이터를 처리하기 위한 서버의 주소. 해당 주소로 값들을 전달하게 됨.
• method = "":  데이터를 전송하는 방식을 지정(get, post) 
  • get: 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출된다. 민감한 정보를 다루는 폼에 사용할 수 없음
  • post: 데이터가 전송될 때 데이터가 노출되지 않는다.

<form action="/test/html">
  <fieldset>
    <legend>기본 정보</legend>
    <label for="userid">ID:</label>
  	<input type='text' placeholder='영문으로만 적어주세요' id="userid"><br>
  
  	<label for="userpw">PW:</label>
  	<input type='password' id="userpw"><br>
  
  	성별: <label for="male">남자</label> <input type='radio' name='gender' id="male" checked>,
       	 <label for="female">여자</label> <input type='radio' name='gender' id="female">
  </fieldset>
  <fieldset>
    <legend>부가 정보</legend>
    취미: <label for="watchingmovie">영화감상</label> 
       	 <input type='checkbox' name='hobby' id="watchingmovie" checked>,
       
         <label for="listeningmusic">음악감상</label> 
         <input type='checkbox' name='hobby' id="listeningmusic">, 
       
         <label for="readingbooks">독서</label> 
         <input type='checkbox' name='hobby' id="readingbooks"><br>
       
  	프로필 사진 업로드: <input type="file"><br>
  	<input type="submit" value="전송"><br>
    <input type="reset" value="취소"><br>
    <input type="button" value="등록"><br>
    <input type="image" src="./login.png" alt="로그인" width="100" height="50">
  
    지역: <select>
      <option>서울</option>
      <option>경기</option>
      <option>강원</option>
      <option selected>제주</option>
    </select><br>
  
  	자기소개: <textarea cols="30", rows="5" placeholder="500자 이내로 작성해주세요."></textarea><br>
    <button type="submit">전송</button>
    <button type="reset">취소</button>
    <!-- <input type="submit" value="전송"><br> 위의 두 코드와 같은 기능을 한다
    <input type="reset" value="취소"><br> -->
  </fieldset>
</form>