이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.

표는 웹 페이지에서 흔하게 볼 수 있는 2차원 격자 형태로 구성된 데이터를 의미한다.

표는 행(row), 열(column) 그리고 행과 열이 만나는 셀(cell)로 구성된다.

table 태그

HTML에서 표를 생성할 때는 table 태그를 사용한다.

폼과 마찬가지로 표 관련 태그는 table 태그 안에서 사용한다.

summary 속성은 더 이상 사용하지 않는다.
HTML5에서 공식적으로 summary 속성을 지원하지 않아 더 이상 사용하지 않는다.

caption 태그

웹 접근성을 향상하는 방법의 하나로 표 제목을 지정한다.

표 제목은 caption 태그로 지정하므로 표를 만들 때는 반드시 caption 태그를 사용해야 한다.

caption 태그는 table 태그 안에 첫 번째로 작성해야 하는 태그이다.

<table> 
	<caption>표 제목</caption>
</table>

tr 태그

tr(table row) 태그는 표에서 행을 생성한다.

tr태그 하나는 행 하나를 생성하므로 행을 여러 개 만들고 싶다면 tr 태그를 여러 번 사용하면 된다.

<table> 
	<tr></tr>
</table>

th, td 태그

th(table header) 태그와 td(table data) 태그는 표에서 열을 생성할 때 사용한다.

th 태그는 표에서 제목을 나타내는 열을 생성할 때, td 태그는 표에서 일반적인 데이터를 나타내는 열을 생성할 때 사용한다.

<table> 
	<th>제목</th>
	<td>내용</td>
</table>

아래의 그림에서 번호, 상품명, 수량, 가격과 같은 열은 제목을 의미하는 데이터이므로 th 태그로 생성하고, 나머지 데이터를 나타내는 열은 td 태그로 생성한다.

위와 같이 4 x 4 표를 만들려면 아래와 같이 코드를 작성한다.

<table border="1">
  <tr>
    <th>번호</th>
    <th>상품명</th>
    <th>수량</th>
    <th>가격</th>
  </tr>
  <tr>
    <td>1</td>
    <td>콜라</td>
    <td>1개</td>
    <td>1,500원</td>
  </tr>
  <tr>
    <td>2</td>
    <td>사이다</td>
    <td>2개</td>
    <td>1,000원</td>
  </tr>
  <tr>
    <td>3</td>
    <td>탄산수</td>
    <td>3개</td>
    <td>1,000원</td>
  </tr>
</table>

rowspan과 colspan 속성

셀은 병합할 수 있는데, 행과 행을 병합할 때는 rowspan 속성을, 열과 열을 병합할 때는 colspan 속성을 사용한다.

아래와 같은 형태로 표를 만든다고 할 때, rowspan과 colspan의 속성값으로 병합하고 싶은 셀의 개수를 적는다.

단, 병합한 셀의 개수만큼 다음 행 또는 열은 비워야 한다.

 <!-- 테이블의 시작을 의미 -->
  <table border="1">
    <tr>
      <th>번호</th>
      <th>상품명</th>
      <th>수량</th>
      <th>가격</th>
    </tr>
    <tr>
      <td>1</td>
      <td>콜라</td>
      <td>1개</td>
      <td>1,500원</td>
    </tr>
    <tr>
      <td>2</td>
      <td>사이다</td>
      <td>2개</td>
      <td rowspan="2">1,000원</td> <!-- 행 병합-->
    </tr>
    <tr>
      <td>3</td>
      <td>탄산수</td>
      <td>3개</td> 
      <!-- 4행 4열은 3행 4열과 병합했으므로 생성하지 않습니다. -->
    </tr>
    <tr>
      <td>총 금액</td>
      <td colspan="3">6,500원</td> <!-- 열 병합-->
      <!-- 5행 2열부터 열 3개를 병합했으므로 나머지 열은 생성하지 않습니다. -->
    </tr>
  </table>

thead, tfoot, tbody 태그

표에서도 행을 묶어 그룹화 할 수 있는데, thead, tfoot, tbody 태그를 사용하면 된다.

thead 태그는 헤더 영역에 해당하는 행을, tfoot 태그는 푸터 영역에 해당하는 행을, tbody 태그는 본문 영역에 해당하는 행을 그룹 짓는다.

thead, tfoot, tbody 태그는 표에서 표현하려는 데이터 형식에 따라 사용하지 않을 수도 있다.

하지만 사용한다면 반드시 thead, tfoot, tbody 순서여야 한다.

thead와 tfoot 태그는 한 번만 사용할 수 있고,  tbody 태그로 그룹화한 행은 th 태그로 열을 생성해야 한다.

<!-- 테이블의 시작을 의미 -->
  <table>
    <thead>
      <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>총 금액</td>
        <td colspan="3">6,500원</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>1</td>
        <td>콜라</td>
        <td>1개</td>
        <td>1,500원</td>
      </tr>
      <tr>
        <td>2</td>
        <td>사이다</td>
        <td>2개</td>
        <td rowspan="2">1,000원</td>
      </tr>
      <tr>
        <td>3</td>
        <td>탄산수</td>
        <td>3개</td>
      </tr>
    </tbody>
  </table>

thead, tfoot, tbody 태그는 왜 사용하나?

col과 colgroup 태그

표에서 열을 그룹화할 때는 col 태그와 colgroup 태그를 사용한다.

col 태그는 하나의 열을 그룹화하고, colgroup 태그는 span 속성과 함께 사용해 2개 이상의 열을 그룹화한다.

col 태그나 colgroup 태그는 보통 열 전체를 그룹화해서 통일된 스타일을 적용하는 목적으로 많이 사용한다.

caption 태그 다음에 사용해야 하고 tr 태그보다는 먼저 작성해야 한다.

또한 col 태그나 colgroup 태그를 사용하면 반드시 두 태그의 개수와 사용한 열 개수가 일치해야 한다.

아래의 코드는 열을 그룹 지어서 1열의 너비를 80px, 2열과 3열의 너비를 150px, 4열의 너비를 100px로 지정한다.

<table border="1">
    <col style="width:80px;">
    <colgroup span="2" style="width:150px"></colgroup>    
    <col style="width:100px">
    <tr>
      <th>번호</th>
      <th>상품명</th>
      <th>수량</th>
      <th>가격</th>
    </tr>
    <tr>
      <td>1</td>
      <td>콜라</td>
      <td>1개</td>
      <td>1,500원</td>
    </tr>
    <tr>
      <td>2</td>
      <td>사이다</td>
      <td>2개</td>
      <td rowspan="2">1,000원</td> <!--행 병합-->
    </tr>
    <tr>
      <td>3</td>
      <td>탄산수</td>
      <td>3개</td> 
      <!-- 4행 4열은 3행 4열과 병합했으므로 생성하지 않습니다. -->
    </tr>
    <tr>
      <td>총 금액</td> 
      <td colspan="3">6,500원</td>
      <!-- 5행 2열부터 열 3개를 병합했으므로 나머지 열은 생성하지 않습니다. -->
    </tr>
  </table>

scope 속성

표를 생성할 때 사용할 수 있는 속성 중에서 순전히 웹 접근 성 향상을 목적으로 사용하는 scope 속성이 있다.

scope 속성은 제목을 나타내는 셀의 범위를 지정한다.

그래서 표에서 제목을 나타내는 th 태그에서만 사용할 수 있다.

예를 들어, 아래의 표는 구분, 중간고사, 기말고사, 전공, 교양이 전부 th 태그로 작성되는 제목이어서 제목의 범위가 명확하지 않다.

실제로 표의 제목 범위는 아래의 그림처럼 인식되어야 한다.

이럴 때 scope 속성으로 각 th 태그의 범위를 지정하면 웹 접근성이 향상된다.

scope 속성은 col, colgroup, row를 값으로 넣을 수 있는데, col은 열을, row는 행을 뜻하므로 속성값에 col이 들어가면 세로 방향, row가 들어가면 가로 방향이라고 생각하면 된다.

제목이 colspan이나 rowspan으로 병합된 셀이라면 col이나 row 대신에 colgroup, rowgroup을 사용하면 된다.

<table border="1">
    <tr>
      <th scope="col">구분</th>
      <th scope="col">중간고사</th>
      <th scope="col">기말고사</th>
    </tr>
    <tr>
      <th scope="row">전공</th>
      <td>A+</td>
      <td>B+</td>
    </tr>
    <tr>
      <th scope="row">교양</th>
      <td>C-</td>
      <td>B</td>
    </tr>
</table>

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.

폼은 HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식을 의미한다.

대표적으로 사용자로부터 아이디와 패스워드를 입력받아 처리할 때 폼을 이용한다.

form태그

form 태그는 폼 양식을 의미하는 태그이다.

그래서 HTML의 폼을 구성하는 태그는 모두 form태그 안에 작성한다.

<form action="데이터가 전송될 url" method="get 또는 post"></form>

• action 속성 : action 속성에는 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL주소를 적는다.
• method 속성 : 입력받은 값을 서버에 전송할 때 송신 방식을 적는다. 속성값으로 get 또는 post를 사용할 수 있다.

input 태그

로그인 페이지의 아이디와 비밀번호처럼 입력받는 요소를 생성할 때는 input 태그를 사용해야 한다.

input 태그에는 type, name, value 속성이 있는데, type 속성은 필수로 사용해야 하고, name과 value 속성은 선택해서 사용할 수 있다.

<input type="종류" name="이름" value="초깃값">

type 속성

type 속성은 입력된 값에 따라 상호작용 요소의 종류를 결정한다.

아래의 표는 input 태그로 생성할 수 있는 입력 요소이다.

입력 요소의 이름은 폼 요소의 성격에 따라 다를 수 있어서 type 속성값만 명시한다.

<form action="#">
  <input type="text">
  <input type="password">
  <input type="tel">
  <input type="number">
  <input type="url">
  <input type="search">
  <input type="email">
  <input type="checkbox">
  <input type="radio">
  <input type="file">
  <input type="button">
  <input type="image" src="facebook.png" alt="페이스북 버튼">
  <input type="hidden">
  <input type="date">
  <input type="datetime-local">
  <input type="month">
  <input type="week">
  <input type="time">
  <input type="range">
  <input type="color">
  <input type="submit">
  <input type="reset">
</form>

name 속성

name 속성에는 입력 요소의 이름을 작성한다.

입력요소가 form 태그에 의해 서버로 전송될 때, name 속성에 적힌 값이 이름으로 지정된다.

서버에서는 지정된 이름으로 입력 요소를 식별할 수 있다.

value 속성

value 속성에는 입력 요소의 초깃값을 작성한다.

입력 요소는 보통 사용자에게서 수동으로 값을 입력받지만, 상황에 따라 초깃값을 설정해야 하는 경우가 있다.

이럴 때사용하는 속성이다.

label 태그

label 태그는 form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용한다.

label 태그를 잘 사용하면 label 태그만 클랙해도 상호작용 요소를 선택할 수 있다.

또한 스크린 리더기가 label 태그로 연결된 상호작용 요소를 쉽게 식별할 수 있어서 웹 접근성 향상을 위해서도 필수적이다.

label 태그는 사용하는 방법에 따라 암묵적인 방법과 명시적인 방법으로 구분한다.

  <form action="#">
    <!-- 암묵적인 방법 -->
    <label>
      아이디
      <input type="text">
    </label>
    <!-- 명시적인 방법 -->
    <label for="userpw">비밀번호</label>
    <input type="password" id="userpw">  
    <!-- 암묵적 + 명시적 방법-->
    <label for="username">
      <input type="text" id="username"> 이름
    </label>  
  </form>

• 암묵적인 방법 : label 태그에 상호작용 요소를 포함하도록 설정
• 명시적인 방법 : label 태그의 for 속성과 상호작용 요소의 id 속성을 같은 값으로 설정

fieldset와 legend 태그

form 태그 안에 사용된 다양한 상호작용 요소도 fieldset 태그를 사용해 그룹 지을 수 있다.

fieldset 태그로 그룹을 지으면 그룹별로 박스 모양의 테두리가 생긴다.

이렇게 그룹 지은 요소들은 legend 태그로 이름을 붙일 수 있다.

<form action="#">
  <fieldset>
    <legend>기본 정보</legend>      
    <p>
      <label for="userid">아이디</label>
      <input type="text" id="userid">
    </p>
    <p>
      <label for="passwd">비밀번호</label>
      <input type="password" id="passwd">
    </p>
  </fieldset>
  <fieldset>
    <legend>선택 정보</legend>
    <p>
      <label for="age">나이</label>
      <input type="number" id="age">
    </p>
    <p>
      <label for="recommender">추천인</label>
      <input type="text" id="recommender">
    </p>
  </fieldset>
</form>

textarea 태그

여러 줄의 입력 요소를 생성할 때는 input 태그가 아닌 textarea 태그를 사용한다.

웹 사이트에서 글을 작성할 때 사용하는 입력 요소는 대부분 textarea 태그로 생성한다.

textarea 태그는 input 태그와 다르게 닫는 태그가 있다.

그래서 input 태그로 생성한 입력 요소의 초깃값은 value 속성으로 정의하지만, textarea 태그로 생성한 여러 줄의 입력 요소는 콘텐츠 영역에 초깃값을 정의한다.

<form action="#" method="post">
  <fieldset>
    <legend>블로그 글쓰기</legend>
    <p>
      <label for="title">제목
        <input type="text" id="title" name="title">
      </label>
    </p>
    <p>
      <label for="desc">내용
        <textarea id="desc" name="desc" readonly></textarea>
      </label>
    </p>
  </fieldset>
</form>

select, option, optgroup 태그

select 태그를 사용하면 콤보박스를 생성할 수 있다.

콤보박스에 항목을 하나 추가할 때는 option 태그를 사용하고, 항목들을 그룹으로 묶고 싶다면 optgroup 태그를 사용한다.

option 태그는 서버에 전송할 값을 value 속성으로 지정할 수 있는데, 속성을 생략하면 option 태그의 콘텐츠로 적은 텍스트가 값으로 전송된다.

optgroup 태그로 항목들을 그룹 지을 때 반드시 label 속성으로 그룹명을 지정해야 한다.

<!-- select & option & optgroup 태그 사용-->
  <form action="#" method="post">
    <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city">
          <optgroup label="서울시">
            <option value="강북구">강북구</option>
            <option value="강남구">강남구</option>
            <option value="서초구">서초구</option>
          </optgroup>
          <optgroup label="경기도 성남시">
            <option value="중원구">중원구</option>
            <option value="분당구">분당구</option>
          </optgroup>
        </select>
        <input type="submit" value="등록">
    </fieldset>
  </form>

size 속성

size 속성은 콤보박스에서 화면에 노출되는 항목 갯수를 지정하는 속성이다.

속성값으로 숫자를 적으면 되고, 생략할 경우 기본으로 1개 항목이 표시된다.

 <!-- select & option 태그만 사용 -->
  <form action="#" method="post">
    <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city" size="3">
          <option value="강북구">강북구</option>
          <option value="강남구">강남구</option>
          <option value="서초구">서초구</option>
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </select>
        <input type="submit" value="등록">
    </fieldset>
  </form>

mutible 속성

select 태그로 생성하는 콤보박스는 기본으로 1개 항목만 선택할 수 있다.

그러나 multiple 속성을 사용하면 여러 항목을 동시에 선택할 수 있다.

콤보박스에서 항목 하나를 선택한 상태로 ctrl(맥OS는 cmd)를 누르고 다른 항목을 클릭하면 된다.

<!-- select & option 태그만 사용 -->
  <form action="#" method="post">
    <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city" multiple>
          <option value="강북구">강북구</option>
          <option value="강남구">강남구</option>
          <option value="서초구">서초구</option>
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </select>
        <input type="submit" value="등록">
    </fieldset>
  </form>

selected 속성

콤보박스는 첫 번째 option 태그의 값이 기본 선택된 상태로 표시되는데, selected 속성을 사용하면 기본 선택 항목을 변경할 수 있다.

<!-- select & option 태그만 사용 -->
  <form action="#" method="post">
    <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city">
          <option value="강북구">강북구</option>
          <option value="강남구">강남구</option>
          <option value="서초구" selected>서초구</option>
          <option value="중원구">중원구</option>
          <option value="분당구">분당구</option>
        </select>
        <input type="submit" value="등록">
    </fieldset>
  </form>

button 태그

버튼 요소는 input 태그에서 type 속성값을 submit, reset, button으로 지정해 생성할 수 있다.

또한, 밸도의 button 태그로 생성할 수도 있다.

button 태그도 마찬가지로 type 속성을 가진다.

type 속성값은 서버에 전송할 목적이면 submit, 상호작용 요소에 입력된 내용을 초기화하는 버튼이면 reset, 단순한 버튼이면 button으로 지정한다.

<form action="#">
    <button type="submit">
      <img src="facebook.png" alt="페이스북 버튼">
      페이스북에 등록하기
    </button>
</form>

폼 관련 태그 추가 속성

폼 관련 태그에서 공통으로 사용할 수 있는 몇 가지 속성이 있다.

disabled 속성

disabled 속성은 상호작용 요소를 비활성화하며, input, textarea, select, button 태그에서 사용할 수 있다.

<input type="text" disabled>
<button type="button" disabled>비활성</button>

readonly 속성

readonly 속성은 상호작용 요소를 읽기 전용으로 변경한다.

읽기 전용으로 변경되면 입력 요소에 텍스트를 입력할 순 없지만, 요소를 선택하거나 드래그해서 내용을 복사할 순 있다.

<input type="text" readonly>
<textarea readonly></textarea>

disable 속성과 readonly 속성
disable 속성은 form 태그로 서버에 값을 전송할 때 값이 아예 전송되지 않는다.
반면에 readonly속성은 값이 전송된다.

maxlength 속성

maxlength 속성은 입력할 수 있는 글자 수를 제한한다.

<input type="url" maxlength="4">
<textarea maxlength="4"></textarea>

checked 속성

checked 속성은 요소를 선택된 상태로 표시한다.

선택 요소가 있어야 하므로 input 태그의 type 속성값이 checkbox나 radio인 요소에만 사용할 수 있다.

<form action="#">
    <fieldset>
      <legend>좋아하는 과일</legend>
      <input type="checkbox" id="banana" name="banana" value="banana">
      <label for="banana">banana</label><br>
      <input type="checkbox" id="apple" name="apple" value="apple">
      <label for="apple">apple</label><br>
      <input type="checkbox" id="orange" name="orange" value="orange"  checked>
      <label for="orange">orange</label><br>
    </fieldset>
</form>

placeholder 속성

placeholder 속성은 입력 요소에 어떠한 값을 입력하면 되는지 힌트를 적는 용도로 사용한다.

<input type="tel" placeholder="전화번호를 입력해 주세요.">

이 글은 HTML+CSS+자바스크립트 웹표준의 정석(저자 : 고경희)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.

텍스트 작성하기

<hn> 태그

제목을 나타내는 태그이다.

웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시한다.

<hn>에서 n은 1~6까지 입력할 수 있고, 숫자가 작아질수록 글씨의 크기가 작아진다.

<h1>레드향</h1>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>

검색 엔진은 hn태그를 검색할 때 h1 태그부터 단계적으로 검색한다.
만약 h4태그를 사용하지 않고 h5, h6태그를 사용한다면 검색 엔진은 h1부터 단계적으로 태그를 검색하다가 h4태그가 없으면 h5, h6태그를 검색하지 않는다.

p태그

텍스트 단락을 만드는 태그, 줄을 바꾸는 태그이다.

<p>와 </p> 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다.

텍스트 단락의 내용이 길어서 웹 브라우저에 한 줄로 표시할 수 없을 경우에는 자동으로 줄이 바뀐다.

제목이나 주제를 나타내는 텍스트가 아니면 대부분 본문이기 때문에 p태그를 자주 사용한다.

<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>

br 태그

텍스트 단락을 만들 때 원하는 위치에서 줄을 바꾸려면 <br> 태그를 사용하면 줄을 바꿀 수 있다.

<br> 태그는 단독으로 사용하므로 닫는 태그가 필요 없다.(인라인)

<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해<br> 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>

<br>과 <p>의 차이점
<br> 태그를 두 번 사용하면 빈 줄이 생기면서 텍스트 단락이 나뉜 것처럼 화면에 표시할 수 있다. 하지만 실제로는 단락이 만들어진 게 아니므로 CSS를 사용해 텍스트 단락 스타일을 적용할 때 문제가 생긴다.

blockquote 태그

인용할 때 쓰는 태그

브라우저가 인용문을 인식할 수 있게 해 준다.

<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<blockquote>비타민 C와 비타민 P가 풍부해<br> 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</blockquote>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>

blockquote 태그는 반드시 한 개 이상의 p태그를 포함해야 한다.
그래서 p태그 내용에 blockquote 태그는 포함될 수 없다.

q태그

q 태그는 문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용하는 태그이다.

<p>차세대웹기술지원센터의 데이터에 따르면 <q cite="인용 사이트 주소">2021년 대한민국에서 가장 높은 점유율을 가지고 있는 웹 브라우저는 구글의 크롬입니다.</q></p>

ins와 del 태그

ins 태그는 새로 추가된 텍스트임을 나타낼 때 사용하고, del 태그는 기존에 있던 텍스트가 삭제된 텍스트임을 나타낼 때 사용한다.

ins태그를 사용한 콘텐츠에는 밑줄이, del 태그를 사용한 콘텐츠에는 취소선이 생긴다.

<p>세일 기간을 맞이하여 온라인 강의 수강권을 할인된 금액(정가<del>36,000원</del><ins>20,000원</ins>)에 판매합니다.</p>

sub와 sup태그

sub태그와 sup태그는 각각 아래 첨자, 위 첨자에 해당하는 텍스트를 작성할 때 사용한다.

<p>공기의 원소 기호는 H<sub>2</sub>O</p>
<p>4<sup>2</sup>은 16입니다.</p>

그룹 짓기

HTML 코드를 작성하다 보면 관련 있는 요소를 그룹으로 묶어야 하는 경우가 많다.

웹 페이지를 만들 때 관련 있는 요소끼리 그룹으로 묶으면 레이아웃을 구성하기가 쉬워지고 HTML 페이지의 구조를 더 깔끔하게 작성할 수 있다.

이런 그룹 짓기 작업을 div 태그와 span태그로 수행한다.

div태그

div 태그는 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용한다.

 <div class="movie">
    <p>영화 소개</p>
    <p>영화를 소개하는 페이지입니다.</p>
  </div>
  <div class="tv">
    <p>TV 프로그램 소개</p>
    <p>TV 프로그램을 소개하는 페이지입니다.</p>
  </div>

span 태그

span 태그는 인라인 요소를 그룹으로 묶을 때 사용한다.

<h1>영화 소개</h1>
  <p>이번 영화의 <span>하이라이트</span> 장면은 바로 여기입니다.</p>

이렇게 그룹으로 묶어 요소의 공간을 분할하면 분할된 요소에 CSS로 스타일을 적용할 수 있다.

아직은 스타일을 적용하기 전이므로 '하이라이트'부분에 변화가 없다.

목록 만들기

목록은 목차와 메뉴를 구성할 때 주로 사용하지만, 그 외에도 웹 페이지의 다양한 곳에서 사용할 수 있다.

목록을 생성할 때 사용할 수 있는 태그로는 ul, ol, dl 태그가 있다.

ul태그

ul태그는 순서가 없는 비순서형 목록을 생성할 때 사용한다.

이때, 목록 내용은 li태그로 구성한다.

<h1>판매 중인 과일</h1>
  <ul>
    <li>바나나</li>
    <li>사과</li>
    <li>수박</li>
  </ul>

ol태그

ol태그는 순서형 목록을 생성할 때 사용한다.

ul태그와 마찬가지로 li태그로 목록 내용을 구성한다.

<h1>오늘 할일</h1>
  <ol>
    <li>아침 먹기</li>
    <li>점심 먹기</li>
    <li>저녁 먹기</li>
  </ol>

dl 태그

dl태그는 정의형 목록을 만들 때 사용한다.

정의형 목록은 용어와 용어 설명을 나열한 형태의 목록이라고 보면 된다.

dl태그로 목록을 생성할 때는 li태그 대신에 dt태그로 용어를, dd태그로 용어 설명을 작성한다.

 <dl>
    <dt>HTML</dt>
    <dd>HTML은 Hyper Text Markup Language의 약자로 웹 문서의 구조를 설계하기 위한 목적으로 개발된 언어입니다.</dd>
    <dt>CSS</dt>
    <dd>CSS는 Cascading Style Sheets의 약자로 웹 문서를 꾸미기 위한 목적으로 개발된 언어입니다.</dd>
  </dl>

링크와 이미지 넣기

링크는 문서와 문서 간 연결을 의미하며, 기본적으로 a 태그를 사용한다.

사진과 같은 이미지 객체를 삽입할 때는 img 태그로 작성한다.

a 태그

a 태그는 HTML에서 내부나 외부 링크를 생성한다.

a 태그는 대상 경로를 의미하는 href 속성을 필수로 사용해야 하고, 그 외에 target, title 속성을 선택해서 사용할 수 있다.

href 속성
링크의 대상 경로를 입력할 때 사용한다.
속성 값은 대상 경로의 주소이거나 내부 분서의 id 속성값일 수 있다.

target 속성
링크를 생성할 때 대상이 연결되는 방식을 지정한다.
속성 값으로 _blank, _parent, _self, _top을 사용할 수 있지만, 새 창으로 열리는_blank를 제외하고 거의 사용하지 않는다.
이 속성은 생략이 가능하다.

title 속성
링크를 설명할 수 있는 텍스트를 작성한다.

<a href="https://www.gilbut.co.kr" target="_blank" title="도서출판 길벗">길벗 홈페이지</a>

img 태그

이미지 객체를 삽입하고 싶을 때는 img 태그를 사용한다.

img 태그는 src 속성과 alt 속성으로 구성된다.

src 속성
삽입하려는 이미지 경로를 입력하는 속성이다.
HTML에서 이미지 경로는 항상 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준이다.

삽입하려는 이미지 파일이 HTML 파일과 같은 폴더에 있는 images 폴더에 있고 이미지 파일의 이름과 확장자가 beach.jpg라면 현재 폴더를 의미하는 ./ 기호를 사용해서 작성한다.

alt 속성
삽입한 이미지 객체를 설명할 수 있는 텍스트를 넣는다.

웹 표준에서는 src 속성과 alt 속성을 필수로 사용하도록 권고하고 있다.

<img src="./beach.png" alt="아름다운 여름 해변">

이미지 링크

a 태그 안에는 텍스트뿐만 아니라 여러 요소가 올 수 있다.

그중 img 태그를 a 태그 안에 사용하면 이미지를 클릭했을 때 특정 링크로 이동하게 할 수 있다.

이를 HTML에서는 이미지 링크라고 한다.

<a href="https://www.google.com" target="_blank">
    <img src="./google_logo.png" alt="구글 로고">
  </a>

텍스트 강조하기

텍스트에서 특정 내용을 강조해 표현하고 싶을 때가 있다.

이럴 때는 strong 태그와 em 태그를 사용한다.

strong 태그

텍스트의 의미를 강조하고 싶을 때 사용한다.

strong 태그는 스타일에서 차이를 두기 위해 시각적으로 텍스트를 굵게 표시하는 것뿐만 아니라 웹 브라우저에 중요한 부분임을 알려 주는 역할을 한다.

<p>이 시설은 <strong>관계자 외 출입금지</strong>입니다.</p>

strong 태그는 중첩해서 사용할 수 있으며, 중첩할수록 의미를 더욱더 강조하게 된다.

따라서 strong 태그가 중첩된 텍스트는 실행 결과에서 강조 효과는 동일하지만 구조적으로 더 중요한 부분임을 의미하게 된다.

em 태그

em 태그 역시 텍스트의 의미를 강조하고 싶을 때 사용한다.

em 태그를 사용하면 텍스트가 기울어져 보이면서 강조 효과를 낼 수 있다.

<p>여기서부터는 위험하니까 <em>절대로</em> 지나가지 마세요.</p>

em 태그는 중첩해서 사용할 수 있으며, 중첩할수록 의미를 더욱더 강조하게 된다.

따라서 em 태그가 중첩된 텍스트는 실행 결과에서 강조 효과는 동일하지만 구조적으로 더 중요한 부분임을 의미하게 된다.

b태그와 i태그는 strong 태그와 em태그와 차이가 없을 정도로 유사하다.
하지만 HTML이 발전하면서 b태그와 i태그는 점점 사용하지 않는 추세이다.
b태그와 i태그는 구조적으로 중요함을 나타내는 것이 아닌 단순히 텍스트를 굵게 만들거나 기울이는 것뿐이기 때문이다.

이 글은 HTML+CSS+자바스크립트 웹표준의 정석(저자 : 고경희)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.

HTML의 기본 구성 요소

태그와 속성

태그

웹 페이지를 구성하는 요소는 텍스트, 이미지, 버튼 등 매우 다양하다.

태그는 이런 다양한 구성 요소를 정의하는 역할을 한다.

태그는 HTML 문법을 이루는 가장 작은 단위이다.

기본 형식은 아래와 같이 <>사이에 태그명을 넣는 형태이다.

<태그명>

속성

속성은 태그에 어떤 의미나 기능을 보충하는 역할을 한다.

쉽게 설명하자면, 옵션과 같은 느낌이다.

그래서 속성은 사용해도 되고 안 해도 된다.

또한 여러 개를 사용해도 된다.

하지만 태그 없이 단독으로 사용할 수는 없다.

속성은 아래와 같이 속성명과 속성값으로 구성된다.

<태그명 속성명="속성값">

일반적으로 속성을 사용할 때, 속성명은 따옴표 없이 작성하고 값은 큰따옴표 안에 작성한다.

속성값이 여러 개인 경우에는 하나의 큰따옴표 안에 콤마로 구분해 값을 나열하면 된다.

<태그명 속성명1="속성값1", 속성명2="속성값2">

콘텐츠

HTML은 태그와 속성으로 문법을 구성한다.

그리고 문법은 크게 콘텐츠가 있는 문법과 콘텐츠가 없는 문법으로 나뉜다.

콘텐츠가 있는 문법

콘텐츠가 있는 문법에서는 위와 같이 콘텐츠 앞뒤를 태그로 감싼다.

이때 앞에 넣는 태그를 시작 태그, 뒤에 넣는 태그를 종료 태그라고 한다.

종료 태그는 태그명 앞에 /가 있다는 것만 다르고 시작 태그와 같다.

시작 태그(open tag)와 종료 태그(close tag), 콘텐츠(content)를 합쳐서 요소(element)라고 한다.

콘텐츠가 없는 문법

콘텐츠가 없는 문법은 앞뒤로 감싸야 할 콘텐츠가 없으므로 시작 태그만 사용한다.

그래서 내용이 비어있다는 의미로 빈 태그라고도 한다.

<br>

콘텐츠가 없는 문법은 시작 태그가 곧 요소여서 위와 같은 br태그는 br 요소라고도 할 수 있다.

주석

주석은 코드에 어떠한 메모나 설명을 남기고 싶을 때 사용한다.

<!-- 와 --> 사이에 내용을 작성하면 해당 내용은 주석 처리된다.

<!-- 주석 내용 -->

블록 요소와 인라인 요소

body 태그에서 사용하는 태그 중에서 웹 브라우저의 공간 유무와 상관없이 hn태그나 p 태그처럼 사용할 때마다 줄바꿈되는 태그가 있다.

이런 태그로 작성한 코드를 블록 요소라고 한다.

이와 반대로 a태그나 span 태그처럼 공간이 부족할 때만 줄 바꿈되는 태그가 있는데, 이런 태그로 작성한 코드를 인라인 요소라고 한다.

• 블록 요소 : 공간 유무와 상관없이 사용할 때마다 줄바꿈되는 태그
• 인라인 요소 : 공간이 부족할 때만 줄 바꿈되는 태그

부모, 자식, 형제 관계

HTML은 태그 사용 위치에 따라 부모, 자식, 형제 관계가 성립된다.

<A>
    <B></B>
    <C></C>
</A>

A태그 안에 B와 C 태그가 사용되면 A태그는 B와 C 태그의 부모가 되고, B와 C태그는 A태그의 자식이 된다.

부모가 같은 B와 C 태그는 형제 관계가 된다.

HTML문서의 기본 구조

VS Code에서 html 확장자 명을 입력하고 파일을 만들었다면 아래와 같이 !를 입력하고 엔터를 누르면

아래와 같이 자동으로 기본적인 HTML 문서 구조가 완성된다.

• <!DOCTYPE html> : 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻이다.
• <html> ~ </html> : 웹 문서의 시작과 끝을 나타내는 태그이다. 웹 브라우저가 <html> 태그를 만나면  </html>까지 코드를 읽어 화면에 표시한다. </html> 태그 뒤에는 아무 내용도 없어야 한다.
• <head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분이다. 이 영역의 내용은 대부분 화면에 보이지 않는다. 
• <body> ~ </body> : 실제로 웹 브라우저 화면에 나타나는 내용이다.

<html lang="en">
이 태그는 영어로 작성된 문서라는 뜻이다.
한국어로 작성된 문서라고 알려주고 싶다면 en 대신 ko를 입력하면 된다.

<head> 태그

<head> 영역의 내용은 대부분 웹 브라우저 화면에 보이지 않는다. 웹 문서에 방문한 사람이 굳이 알아야 할 정보가 아니기 때문이다.

문서에서 사용할 스타일 시트 파일도 이곳에서 연결한다.

<head> 영역에는 <meta> 태그와 <title> 태그가 들어간다.

<meta> 태그

메타 정보라고 하면 '데이터에 관한 데이터'를 말한다. 책의 메타 정보로 가격, 쪽수, 지은이 등이 있는 것처럼 <meta> 태그도 비슷하다. <meta> 태그의 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정하는 것이다.
웹 서버는 영어가 기본이므로 화면에 한글로 된 내용을 표시할 때에는 UTF-8이라는 문자 세트를 사용한다고 웹 브라우저에게 알려줘야 한다.

<meta charset="UTF-8">​

다양한 메타 태그

<meta name="keyword" content="웹 문서의 키워드"> <!--웹 문서의 키워드-->
<meta name="description" content="웹 문서의 설명"> <!--웹 문서의 설명-->
<meta name="author" content="웹 문서의 소유자나 제작자"> <!--웹 문서의 소유자나 제작자-->​

<title> 태그

<title>과 </title> 사이에 웹 문서의 제목을 입력한다.
태그 사이에 입력된 문자가 웹 문서의 제목이 된다.

<title>아무이름</title>​

제목은 HTML 문서마다 중복되지 않아야 한다.
구글이나 네이버 같은 검색 엔진 사이트에서 HTML문서를 찾을 때는 title 태그에 작성된 제목으로 찾는다.
만약 한 웹사이트에서 제목이 중복된 문서가 여러 개 발견된다면 검색 엔진은 해당 웹사이트가 신뢰성이 떨어진다고 판단해서 검색 엔진 노출 시에 불이익을 준다.

<body> 태그

<body>와 </body> 사이에 실제 웹 브라우저에 표시할 내용을 입력한다.

<body>
    <h1>프런트엔드 웹 개발</h1> <--가장 큰 제목-->
    <hr> <--줄-->
    <p>HTML</p> <--HTML 출력후 단락만들기-->
    <p>CSS</p> <--CSS 출력후 단락만들기-->
    <p>자바스크립트</p> <--자바스크립트 출력후 단락만들기-->
</body>​