📍 제목과 단락요소
제목 태그
제목(heading) 태그는 문서 내에 제목을 표현할 때 사용하는 태그입니다. 태그 이름은 heading을 줄여서 h로 쓰며, 제목의 레벨에 따라서 <h1>~<h6>까지 있습니다.
보통 <h1>은 해당 페이지를 대표하는 큰 제목으로 주로 사용되며, 숫자가 올라갈수록 조금 더 낮은 수준의 소제목을 나타내게 됩니다.
하지만 현재 웹 페이지의 내용은 제목과 본문 식의 문서 형태보다는 주로 이미지나 그림처럼 시각적인 형태로 표현되고 있어서 제목 태그를 <h6>까지 쓰는 경우는 거의 없습니다.
<h1>역사</h1> <h2>개발</h2> 1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다.... 이하 생략 <h2>최초 규격</h2> HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.... 이하 생략
예시 글에서는 역사가 가장 큰 제목이기 때문에 <h1>를 사용했고, 개발과 최초 규격에는 그보다 아래 단계인 <h2>를 사용했습니다.
아래 원문을 참고하여 적절하게 태그를 사용했습니다.
(https://ko.wikipedia.org/wiki/HTML 중 역사 섹션)
제목 태그를 사용하면, 일반 텍스트보다 더 강조되는 스타일이 적용되는데 이는 브라우저가 기본적으로 제목 태그에 제공하는 스타일입니다. 제목이라는 의미에 맞게 기본적으로 좀 더 굵고 크게 표현이 됩니다.
단락 태그
단락(paragraph) 태그는 paragraph를 줄여서 p로 씁니다. 제목 태그에 이어 본문에 해당하는 내용을 단락 태그를 이용해 작성해보겠습니다.
<h1>역사</h1> <h2>개발</h2> <p> 1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다. ... 이하 생략 </p> <h2>최초 규격</h2> <p> HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다. ... 이하 생략 </p>
화면에는 별다른 변화는 없지만, 이전보다 훨씬 의미에 맞게 잘 짜인 마크업 구조라고 볼 수 있습니다.
개행
<p>를 사용해서 단락으로 구분하면 자연스럽게 개행이 됩니다. 그럼 <p> 내부에서 임의로 개행을 하려면 어떻게 해야 할까요?
HTML 문법 중 공백 시간에 배운 대로, html은 한 칸 이상의 공백 및 개행을 무시하기 때문에 실제 코드창에 개행을 하더라도 화면에 나타나지는 않습니다.
따라서 개행을 위해 쓰이는 태그가 바로 <br>입니다. (linebreak 를 줄여서 br 이라고 합니다.) <br>은 닫기 태그와 내용이 존재하지 않는 빈 태그입니다. 개행하고자 하는 곳에서 <br>을 선언하면 개행이 됩니다.
이처럼 <p>를 이용하면 태그 자체에서 자연스럽게 개행이 되지만, <p> 내부에서 강제로 개행을 하기 위해서는 <br>을 이용해야 합니다.
📍 텍스트를 꾸며주는 요소
텍스트 표현 태그
웹 표준화가 대두하면서 웹 문서의 구조와 표현을 분리하였습니다. 그 과정에서 많은 표현용 태그들이 사라졌고, 지금은 표현용 태그가 얼마 남지 않았습니다.
그 중 <b>, <i>, <u>, <s>에 대해 살펴보도록 하겠습니다.
<b> : bold 태그는 글자를 굵게 표현하는 태그입니다.
<i> : italic 태그는 글자를 기울여서 표현하는 태그입니다.
<u> : underline 태그는 글자의 밑줄을 표현하는 태그입니다.
<s> : strike 태그는 글자의 중간선을 표현하는 태그입니다. (예전에 존재했던 strike 태그와는 다른 태그로, strike 태그는 폐기되어 더는 사용할 수 없습니다.)
위 태그들은 의미가 없는 표현용 태그이기 때문에 사용하실 때는 각별히 주의를 하셔야 합니다.
✔ HTML5 버전에서는 <i> 태그가 단순 표현용 태그에서 의미를 가지는 태그로 변경되었습니다.
특정 이유(기술적인 용어, 외국어 문구, 소설속 인물의 생각 등)로 다른 글자와 구분하기 위해 사용됩니다.
코드실습
<p> <b>Lorem</b> <i>ipsum</i> dolor sit amet<br> <u>Lorem</u> <s>ipsum</s> dolor sit amet </p>
## 📍 앵커 요소
<a>
<a>(anchor 태그)는 a태그, 앵커, 링크 등 여러 이름으로 불립니다.
<a href="http://www.naver.com/" target="_blank">네이버</a>
href 속성
링크를 만들기 위해 <a>는 반드시 href(hypertext reference) 속성을 가지고 있어야 합니다. href 속성의 값은 링크의 목적지가 되는 URL입니다.
target 속성
target 속성은 링크된 리소스를 어디에 표시할지를 나타내는 속성입니다. 속성값으로는 _self, _blank, _parent, _top이 있습니다.
_self는 현재 화면에 표시한다는 의미로, target 속성이 선언되지 않으면 기본적으로 self와 같이 동작합니다.
_blank는 새로운 창에 표시한다는 의미로 외부 페이지가 나타나게끔 하는 속성입니다.
_parent와 _top은 프레임이라는 특정 조건에서만 동작하는 속성으로, 최근에는 프레임을 잘 쓰지 않기 때문에 따로 다루지 않고 넘어가겠습니다.
기타 속성
<a>에는 이 외에도 많은 속성이 있습니다.
아래 링크를 참고해 다루지 않은 나머지 속성을 직접 공부하기를 권장합니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
(참고로 속성 이름 옆 html5 레이블로 표시된 것은 html5 버전이 나오면서 새로 생긴 속성이라는 뜻입니다. Obsolete attributes로 표시된 부분은 폐기된 속성들이므로 보지 않으셔도 됩니다.)
내부링크
<a>를 통해 만들어진 링크가 꼭 외부 페이지로만 이동하는 것은 아닙니다.<a>를 통해 페이지 내부의 특정 요소로 초점을 이동할 수도 있는데, 이를 내부 링크라고 합니다. 내부 링크를 사용할 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 됩니다.
<a href="#some-element-id">회사 소개로 이동하기</a> <h1 id="some-element-id">회사 소개</h1>
보통 페이지에 내용이 많아 스크롤이 길어질 경우, 빠르게 화면 최상단으로 이동하고자 할 때 내부 링크를 주로 사용합니다.
웹페이지에서 화면 하단에 있는 'top' 또는 '맨 위로 이동하기' 버튼이 이에 해당합니다.
📍 의미가 없는 컨테이너 요소
태그 자체에 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그입니다. 스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 의미 없는 요소들이 사용됩니다. 이런 의미 없는 태그의 사용빈도는 매우 높습니다. 그 이유는 html 태그들은 문서를 웹에 나타내기 위해 제작되어 기본적으로 문서에 최적화되어있는의미를 지니는데, 현재 웹의 형태는 문서 형태에서 많이 벗어났기 때문입니다.
다행히 HTML 버전이 업그레이드되면서 웹에 알맞은 태그들이 많이 생겼습니다. 가장 대표적으로 많이 쓰이는 의미가 없는 태그는 <div>, <span>입니다.
<div>태그와 <span>태그
div(division) 태그는 블록 레벨 태그입니다. 블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현합니다. 반면, span 태그는 인라인 레벨 태그입니다. 인라인 레벨 요소들은 블록 레벨 요소의 한 줄 안에서 표현되는 요소들입니다. 이전에 배운 <p>는 블록 레벨 태그이며, 그 안에서 텍스트를 꾸며주는 <b>, <i>, <u>, <s>는 모두 인라인 레벨 태그입니다.
<div> <span>Lorem</span> ipsum dolor sit. </div>
<div>, <span>는 모두 아무 의미가 없으므로 실제 브라우저도 별다른 스타일을 적용하지 않습니다.
📍 리스트 요소
<ul>
ul(unordered list) 태그는 순서가 없는 리스트를 표현할 때 사용합니다.
<ul> <li> 콩나물</li> <li> 파</li> <li> 국 간장</li> ... </ul>
콩나물국에 들어가는 일부 재료들을 나열한 리스트입니다. 각 재료는 나오는 순서가 바뀌어도 상관이 없으므로 이러한 것은 순서가 없는 리스트로 표현할 수 있습니다.
<ul>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용합니다.
<ol>
ol(ordered list) 태그는 순서가 있는 리스트를 표현할 때 사용합니다.
<ol> <li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.</li> <li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li> <li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li> ... </ol>
콩나물국을 끓이는 순서를 나열한 리스트입니다. 이 순서는 서로 바뀌면 안 되기 때문에 순서가 있는 <ol>을 사용해야 합니다.<ol>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용합니다.
<dl>태그
dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용합니다.<dl>은 앞서 배운 <ul>, <ol>과는 구조가 조금 다릅니다.<ul>, <ol>은 항목을 단순히 나열하는 구조지만, <dl> 은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조입니다.
<dl> <dt>리플리 증후군</dt> <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd> <dt>피그말리온 효과</dt> <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd> <dt>언더독 효과</dt> <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd> </dl>
<dt> : 용어를 나타내는 태그
<dd> : 용어에 대한 정의 또는 설명을 나타내는 태그
용어 하나에 여러 정의가 들어갈 때, <dd>를 한 개 이상 쓰는 것이 가능합니다.
📍 이미지 요소
<img>
<img>는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그 입니다.
<img src="./images/pizza.png" alt="피자">
src 속성
<img>의 필수 속성으로 이미지의 경로를 나타내는 속성입니다.
alt 속성
이미지의 대체 텍스트를 나타내는 속성입니다. 대체 텍스트는 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성입니다. src 속성과 더불어 반드시 들어가야 하는 속성입니다.
width/height 속성
이미지의 가로/세로 크기를 나타내는 속성입니다. 값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산됩니다. width/height는 선택적인 속성이지만 이미지의 크기가 고정적이라면 width/height 속성을 선언하는 것이 성능적인 측면에서 좋습니다. width/height 속성이 없으면 이미지는 원본 크기대로 노출되며, 둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경됩니다. 반면 두 속성 모두 선언하면 이미지는 비율과 무관하게 선언한 크기대로 변경됩니다.
상대경로와 절대경로
src 속성에는 이미지의 경로가 들어가며, 이미지의 상대경로와 절대경로가 있습니다. 상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이고, 절대경로는 실제 그 이미지가 위치한 곳의 전체 경로입니다.
<!-- 상대경로 --> <img src="./images/pizza.png" alt="피자"> <!-- 절대경로 --> <img src="C:/users/document/images/pizza.png" alt="피자"> <img src="http://www.naver.com/pizza.png" alt="피자">
상대 경로에서의 './'는 페이지가 있는 현재 폴더를 나타냅니다.
이미지 파일 형식
gif: 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식jpg: 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식(투명을 지원하지 않는다.)png: 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식
📍 테이블 요소
표의 구성 요소
표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있습니다.
표의 행(가로 방향)을 row, 열(세로 방향)을 column이라 합니다.
<table> : 표를 나타내는 태그
<tr> : 행을 나타내는 태그
<th> : 제목 셀을 나타내는 태그
<td> : 셀을 나타내는 태그
하나의 <table>은 하나 이상의 <tr>로 이루어져 있으며, <tr>은 셀을 나타내는 <th>, <td>를 자식으로 가지게 됩니다.
표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성하면 됩니다.
<table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> <tr> <td>13</td> <td>14</td> <td>15</td> <td>16</td> </tr> </table>
위는 1부터 16을 표현한 4행 4열의 표를 나타내는 코드입니다. 브라우저 화면을 확인해보면 테두리가 없어 표가 어색해 보일 수 있습니다. 브라우저에서 제공하는 테이블의 기본 스타일에는 테두리가 없기 때문입니다.
확인을 위해 아래의 CSS 코드를 <head> 안에 입력하면 테두리가 나타나는 걸 확인할 수 있습니다.
<style> th, td { border: 1px solid; } </style>
표의 구조와 관련된 태그
표가 복잡해지면 표를 해석해서 음성으로 전달해야 하는 스크린 리더기와 같은 보조 기기를 통해서는 표의 내용을 이해하는 것이 더욱 어려워질 것입니다. 따라서 표를 구조적으로 파악하기 위해 도움이 되는 태그를 사용해야 합니다.
<caption>: 표의 제목을 나타내는 태그
<thead>: 제목 행을 그룹화하는 태그
<tfoot>: 바닥 행을 그룹화하는 태그
<tbody>: 본문 행을 그룹화하는 태그
<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>
<tfoot>은 <thead> 다음에 있지만, 실제 화면에서는 표의 맨 아래에 위치하게 된다는 점을 주의해야 합니다.
✔HTML 버전에 따라 위치가 다르다.
HTML4: <tfoot> 위치가 <tbody> 전에 위치합니다. 이유는 데이터의 양이(<tbody>) 잠재적으로 매우 클수도 있기 때문에 그 전에 <tfoot>을 렌더해야 했기 때문입니다.
HTML5: <tfoot>의 위치가 <tbody> 앞에 와도 되고, 뒤에 와도 상관없습니다.
HTML5.1 ~ 현재(5.2): <tfoot>이 <tbody> 뒤에 위치해야 합니다. <tfoot>의 위치가 <tbody> 앞에 나올 경우 웹 접근성의 키보드의 초점 이동 순서 항목에 문제가 있기 때문에 변경되었습니다.
## 📍 폼 요소
폼 요소는 서버에 데이터를 전달하기 위한 요소이며 <input>은 대표적인 폼 요소입니다.<input>은 내용이 없는 빈 요소이며 type 속성을 통해 여러 종류의 입력 양식으로 나타나게 됩니다.
본 강의에서는 자주 사용되는 type들만 다루니 나머지는 아래 링크를 참고하시기 바랍니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
type="text"
<input type="text" placeholder="ㅇㅇㅇ">
주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용합니다.
type="text"에는 placeholder 속성이 존재합니다.
placeholder 속성은 사용자가 입력하기 전 미리 화면에 노출하는 값으로, 입력하는 값의 양식을 표현할 수 있습니다.
type="password"
<input type="password">
암호와 같이 공개할 수 없는 내용을 입력할 때 사용합니다.
화면에는 type="text"와 같게 나타나지만 실제로 입력할 때 값을 노출하지 않습니다.
type="radio"
<input type="radio" name="gender"> 남자 <input type="radio" name="gender"> 여자
라디오 버튼을 만들 때 사용합니다.
라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 합니다.
type="checkbox"
<input type="checkbox" name="hobby"> 등산 <input type="checkbox" name="hobby"> 독서 <input type="checkbox" name="hobby"> 운동
체크박스를 만들 때 사용합니다.
체크박스는 중복 선택이 가능합니다.
본 강의에서는 다루지 않았지만, 라디오 버튼과 체크박스에는 checked, name 속성이 존재합니다. checked 속성은 값이 별도로 존재하지 않는 boolean 속성입니다.
boolean 속성은 true/false 둘 중 하나의 값을 가지며 속성이 존재하면 true, 속성이 존재하지 않으면 false를 가집니다.
name 속성은 라디오 버튼과 체크박스를 그룹화시켜주는 속성입니다.
type="file"
<input type="file">
파일을 서버에 올릴 때 사용합니다. 브라우저에 따라 표현되는 형태는 조금씩 다르지만, 모두 같은 역할을 합니다.
type="submit|reset|image|button"
<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>
submit, reset, image, button 타입은 모두 클릭 가능한 버튼을 만듭니다.
✔ submit : form의 값을 전송하는 버튼
✔ reset : form의 값을 초기화하는 버튼
✔ image : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함)
✔ button : 아무 기능이 없는 버튼
이미지 버튼은 이미지 관련 속성인 src, alt 속성이 반드시 필요하며 width/height 속성을 적용할 수도 있습니다.
