1. HTML&CSS 기초 - (2) HTML 태그

※ 다음 강좌를 들으며 정리한 내용입니다.

www.edwith.org/boostcourse-ui/joinLectures/19142

[부스트코스] 웹 UI 개발 강좌소개 : edwith

1) HTML 태그 소개

- 태그(Tag)는 HTML을 이루고 있는 구성 요소로서 많은 종류의 태그들이 존재합니다.

종류가 다양한 만큼 의미에 맞는 태그를 사용하여 브라우저가 잘 이해할 수 있도록 (시멘틱 마크업) 하는 것이 매우 중요합니다.

 

- 현재 태그의 개수는 대략 130여 개 정도이지만 관련 통계 사이트를 보면, 실제로 대다수의 웹 페이지는 대략 25개 정도의 서로 다른 태그가 사용된다고 합니다.(html, head, body, title 등 기본적으로 들어가는 태그까지 포함해서)
( https://www.advancedwebranking.com/html/#overview ) 

The average web page from top twenty Google results

 

- 사용 빈도가 적은 태그는 필요할 때 스스로 찾아 익히는 방향으로 학습을 진행하면 됩니다. 태그를 반드시 외울 필요는 없고, 필요할 때 찾을 수 있으면 됩니다.

 

- 태그 정리된 사이트 : developer.mozilla.org/en-US/docs/Web/HTML/Element

HTML elements reference

2) 제목과 단락요소

• Heading 태그 ( h1~h6 ) : 제목(heading) 태그는 문서 내에 제목을 표현할 때 사용하는 태그입니다. <h1>은 보통 해당 페이지를 대표하는 큰 제목으로 사용되고, 숫자가 올라갈수록 조금 더 낮은 수준의 소제목을 나타내게 됩니다. 제목 태그를 <h6>까지 쓰는 경우는 거의 없습니다. 제목 태그를 사용하면 브라우저가 기본적으로 제목 태그에 맞게 스타일을 적용하여 일반 텍스트보다 강조됩니다.
• Paragraph 태그 ( p ) : 단락(Paragraph) 태그를 사용하면 화면에는 별다른 변화는 없지만, 이전보다 훨씬 의미에 맞게 잘 짜인 마크업 구조라고 볼 수 있습니다. 
• Linebreak 태그 ( br ) : <p>를 이용하면 태그 자체에서 자연스럽게 개행이 되지만, <p> 내부에서 강제로 개행을 하기 위해서는 <br>을 이용해야 합니다. 개행하고자 하는 곳에서 <br>을 선언하면 개행이 됩니다.

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

• <b> : bold 태그로 글자를 굵게 표현한다.
• <i> : italic 태그로 글자를 이탤릭체로 표현한다.
• <u> : underline 태그로 글자에 밑줄을 표현한다.
• <s> : strike 태그로 글자에 중간선을 표현한다.

- 위 태그들은 의미가 없는 표현용 태그이기 때문에 사용하실 때는 각별히 주의를 해야 합니다.

 

- HTML5 버전에서는 <i> 태그가 단순 표현용 태그에서 의미를 가지는 태그로 변경되었습니다.
특정 이유(기술적인 용어, 외국어 문구, 소설속 인물의 생각 등)로 다른 글자와 구분하기 위해 사용됩니다.

4) 앵커 요소

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

 

• <a> : anchor태그로 a태그, 앵커, 링크 등 여러 이름으로 불립니다.
• href 속성 : 링크를 만들기 위해 <a>는 반드시 href(hypertext reference) 속성을 가지고 있어야 합니다. href 속성의 값은 링크의 목적지가 되는 URL입니다.
• target 속성 : target 속성은 링크된 리소스를 어디에 표시할지를 나타내는 속성입니다. 속성값으로는 _self(현재 화면에 표시, 따로 선언 없으면 디폴트값), _blank(새로운 창에 표시), _parent, _top(2개는 프레임이라는 특정 조건에서만 동작, 요즘 잘 쓰이지X)이 있습니다.
• 기타 속성 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

- <a>를 통해 페이지 내부의 특정 요소로 초점을 이동할 수도 있는데, 이를 내부 링크라고 합니다.

내부 링크를 사용할 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 됩니다.

(웹페이지에서 화면 하단에 있는 'top' 또는 '맨 위로 이동하기' 버튼이 이에 해당합니다.)

5) 의미가 없는 컨테이너 요소

- 콘텐츠를 표현하기에 적합한 태그가 없는 경우에는 주로 의미 없는 태그들(단순히 요소들을 묶기 위해 사용)을 사용합니다. 또, 문서의 스타일이나 데이터 전송 등과 같은 부가적인 기능을 위해서도 종종 사용됩니다.

 

- 가장 대표적으로 많이 쓰이는 의미가 없는 태그는 <div>, <span>입니다.

 

• <div> : 블록 레벨 태그(ex <p>)로 기본적으로 한 줄을 생성해서 내용을 표현합니다.
• <span> : 인라인 레벨 태그(ex <b>, <i>)로 블록 레벨 요소의 한 줄 안에서 표현되는 요소들입니다.

- <div>, <span>는 모두 아무 의미가 없으므로 실제 브라우저도 별다른 스타일을 적용하지 않습니다.

6) 리스트 요소

• <ul> : unordered list 태그로, 순서가 없는 리스트를 표현할 때 사용합니다. 안에서 <li>를 사용해 각 항목을 나타내서 사용합니다.
• <ol> : ordered list 태그로, 순서가 있는 리스트를 표현할 때 사용합니다. 안에서 <li>를 사용해 각 항목을 나타내서 사용합니다.
• <dl> : definition/description list 태그는 용어와 그에 대한 정의를 표현할 때 사용합니다. <ul>, <ol>은 항목을 단순히 나열하는 구조지만, <dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조입니다. <dt>는 용어를 나타내는 태그이고, <dd>는 용어에 대한 정의 또는 설명을 나타내는 태그입니다. 용어 하나에 여러 정의가 들어갈 때, <dd>를 한 개 이상 쓰는 것이 가능합니다.

7) 이미지 요소

• <img> : <img>는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그 입니다.
• src 속성 : <img>의 필수 속성으로 이미지의 경로를 나타내는 속성입니다. 
• alt 속성 : 이미지의 대체 텍스트를 나타내는 속성입니다. 대체 텍스트는 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성입니다. src 속성과 더불어 반드시 들어가야 하는 속성입니다.
• width/height 속성 : 이미지의 가로/세로 크기를 나타내는 속성입니다. 값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산됩니다. 선택적인 속성이지만 이미지의 크기가 고정적이라면 width/height 속성을 선언하는 것이 성능적인 측면에서 좋습니다. 둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경됩니다.

- src 속성에는 이미지의 경로가 들어가며, 이미지의 상대경로와 절대경로가 있습니다. 상대 경로에서의 './'는 페이지가 있는 현재 폴더를 나타냅니다.

8) 테이블 요소 1

• <table> : 표를 나타내는 태그
• <tr> : 행을 나타내는 태그
• <th> : 제목 셀을 나타내는 태그
• <td> : 셀을 나타내는 태그

- 하나의 <table>은 하나 이상의 <tr>로 이루어져 있으며, <tr>은 셀을 나타내는 <th>, <td>를 자식으로 가지게 됩니다.

 

- 표를 구조적으로 파악하기 위해 도움이 되는 태그

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

- HTML5.1 ~ 현재(5.2): <tfoot>이 <tbody> 뒤에 위치해야 합니다. <tfoot>의 위치가 <tbody> 앞에 나올 경우 웹 접근성의 키보드의 초점 이동 순서 항목에 문제가 있기 때문에 변경되었습니다.

 

- 테이블 관련 속성

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

ex)

<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>

<table>
  <caption>Specification values</caption>
  <thead>
  <tr>
    <th rowspan="2">Grade.</th>
    <th rowspan="2">Point.</th>
    <th colspan="2">Strength.</th>
    <th rowspan="2">Percent.</th>
  </tr>
  <tr>
    <th>kg/mm</th>
    <th>lb/in</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Hard</td>
    <td>0.45</td>
    <td>56.2</td>
    <td>80,000</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Medium</td>
    <td>0.45</td>
    <td>49.2</td>
    <td>70,000</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Soft</td>
    <td>0.45</td>
    <td>42.2</td>
    <td>60,000</td>
    <td>30</td>
  </tr>
  </tbody>
</table>

10) 폼 요소 1

- 사용자로부터 데이터를 받아야 하는 경우 사용되는 요소들을 폼 요소라고 합니다.

 

- 폼 요소는 서버에 데이터를 전달하기 위한 요소이며 <input>은 대표적인 폼 요소입니다.

<input>은 내용이 없는 빈 요소이며 type 속성을 통해 여러 종류의 입력 양식으로 나타나게 됩니다.

• type = "text" : 주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용합니다.
• placeholder : 사용자가 입력하기 전 미리 화면이 노출하는 값으로, 입력값의 양식을 표현할 수 있습니다.
• type = "password" : 암호와 같이 공개할 수 없는 내용을 입력할 때 사용합니다. 화면에는 type="text"와 같게 나타나지만 실제로 입력할 때 값을 노출하지 않습니다.
• type = "radio" : 라디오 버튼을 만들 때 사용합니다. 라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 합니다.
• type = "checkbox" : 체크박스를 만들 때 사용합니다. 체크박스는 중복 선택이 가능합니다.

- 라디오 버튼과 체크박스에는 checked(체크된 상태로 나타날지 설정), name(라디오 버튼과 체크박스를 그룹화)속성이 존재합니다.

 

 

11) 폼 요소 2

- 다양한 input type에 대해 알아보도록 하겠습니다.

• type = "file" : 파일을 서버에 올릴 때 사용합니다. 브라우저에 따라 표현되는 형태는 조금씩 다르지만, 모두 같은 역할을 합니다.

- submit, reset, image, button 타입은 모두 클릭 가능한 버튼을 만듭니다.

• type = "submit" : form의 값을 전송하는 버튼
• type = "reset" : form의 값을 초기화하는 버튼
• type = "image" : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함). 이미지 버튼은 이미지 관련 속성인 src, alt 속성이 반드시 필요하며 width/height 속성을 적용할 수도 있습니다.
• type = "button" : 아무 기능이 없는 버튼

 

12) 폼 요소 3

- 폼 요소의 종류인 <select>, <textarea>, <button>에 대해 알아보도록 하겠습니다.

 

- <select>는 선택 목록 상자 또는 콤보박스라고도 합니다.

몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그입니다. (multiple 속성을 사용하면 다중 선택도 가능합니다.)

 

- <select>내부의 <option>으로 각 항목을 나타냅니다. <option>의 속성으로는 selected가 있으며 이는 선택된 항목을 의미합니다.

 

- <textarea>는 한 줄만을 입력할 수 있는 <input type="text" >와 달리 여러 줄의 텍스트를 입력할 때 사용합니다. <textarea>에는 텍스트 상자의 크기를 조절하는 rows, cols 속성이 있습니다.

 

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

13) 폼 요소 4

- 폼 요소의 종류인 <label>, <fieldset>, <legend>, <form>에 대해 알아보도록 하겠습니다.

 

- <label>은 form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용합니다. 모든 form 요소에 사용할 수 있습니다. form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어주어야 합니다.

 

- <label>을 사용하면 이를 클릭했을 경우 해당 form 요소를 클릭한 것처럼 동작합니다. 또한, 스크린 리더기를 통해 듣게 되면 해당 form 요소에 접근 시 <label>을 함께 읽어주게 됩니다.

 

- <fieldset>, <legend>는 form 요소를 구조화 하기 위해 필요한 태그입니다.

• <fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
• <legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성. <fieldset>의 자식으로 반드시 최상단에 위치해야 합니다.

- <form>은 form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그입니다.

만약 <fieldset>으로 구조화되어있다면 <fieldset>도 함께 감싸는 역할을 합니다.

 

- <form>에는 대표적인 2가지 속성이 있습니다.

• action: 데이터를 처리하기 위한 서버의 주소
• method: 데이터를 전송하는 방식(get/post)을 지정.

- get 방식은 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출됩니다.

반면, post 방식은 데이터가 전송될 때 데이터가 노출되지 않습니다.

 

ex)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="">
        <h1>Form 관련 요소</h1>
        <fieldset>
            <legend>기본 정보</legend>
            <label for="userid">아이디 : </label> <input type="text" placeholder="영문으로만 써주세요" id="userid"><br>
            <label for="userpw">비밀번호 : </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"><br>
        </fieldset>
        <fieldset>
            <legend>부가 정보</legend>
            취미 : 영화 감상 <input type="checkbox" name="hobby" checked>, 음악 감상 <input type="checkbox" name="hobby">, 독서 <input type="checkbox" name="hobby"><br>
            프로필 사진 업로드 : <input type="file"><br>
            사는 지역 : <select>
                <option>서울</option>
                <option>경기</option>
                <option>강원</option>
                <option selected>제주</option>
            </select><br>
            자기소개 : <textarea cols="30" rows="5" placeholder="자기소개는 짧게 해주세요."></textarea><br>
            <button type="submit">전송</button>
            <button type="reset">취소</button>
        </fieldset>
    </form>
</body>
</html>