1. HTML이란?
HTML이란 Hyper Text Markup Language의 줄임말로, 웹페이지를 만들기 위한 표준 마크업 언어입니다. 쉽게 말해 웹 페이지의 구조를 설명하기 위한 언어로, HTML 파일은 일련의 요소들(elements)로 구성되어 각 요소들은 브라우저가 어떻게 콘텐츠를 나타낼지 알려줍니다. 1989년에 Berners-Lee가 www를 발명한 후 1991년에 HTML을 발명, 2014년부터 HTML5가 W3C의 권장 표준이 되었습니다. HTML 문법은 시작태그 - 요소 내용 - 종료태그로 구성되며 중첩이 가능합니다. 아래는 HTML파일의 예시입니다.
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<h1>첫 번째 제목</h1>
<p>첫 번째 문단</p>
</body>
</html>
<!DOCTYPE html> 은 해당 문서가 HTML5 문서임을 알려줍니다. 이 태그는 페이지의 최상단에 단 한번만 등장합니다. <html> 태그는 HTML 페이지의 루트 요소(root element)입니다. <head> 태그는 HTML 페이지의 메타 정보들을 포함합니다. <title> 태그에는 HTML 페이지의 제목을 기술합니다. (이 내용은 브라우저의 탭의 이름으로 나타납니다.) <body> 태그는 문서의 몸체를 정의하며, 사용자가 볼 수 있는 콘텐츠들을 담는 그릇입니다.
웹브라우저는 이 HTML 문서를 읽어 적절히 사용자에게 보여주는 역할을 하는 것입니다.
2. HTML 속성(Attributes)
HTML 요소에 대해 추가적인 정보를 제공하는 역할을 합니다. 모든 HTML 요소가 속성을 가질 수 있으며 속성은 항상 시작 태그에 기술합니다. 보통 속성이름="속성값" 형태로 이루어집니다. <a> 태그의 href 속성, <img> 태그의 src 속성이 그 예시입니다. 몇 가지 태그들은 특정 속성을 필수적으로 명시하도록 권장되기도 합니다.
<img src="my_img.jpg" alt="swiss landscape">
사용자의 느린 네트워크, source의 오류, 스크린리더 사용하는 사람들의 경우 등 이미지를 보여줄 수 없는 경우를 대비해 <img> 태그엔 꼭 alt 속성을 넣어주어야합니다.
검색 엔진과 브라우저에게 정보를 올바르게 제공하기 위해서는 <html> 태그엔 꼭 lang 속성을 넣어야합니다. lang 속성에 나라 코드도 추가할 수 있는데 이럴 경우 첫 두 글자는 언어, 이후 두 글자는 나라를 나타냅니다. (예시 : en-US)
태그에 title 속성을 넣으면 사용자가 요소에 마우스를 올렸을 때 tooltip으로 나타납니다.
W3C에선 속성 이름을 소문자로 기술하고 값은 항상 인용부호를 쓰도록 권장(“”or ‘’)하고 있습니다. 단, 속성값 중간에 인용부호가 들어가야할 경우 single quote(')가 들어가면 double quote(")로 감싸주고 반대의 경우도 마찬가지로 해야합니다.
style 속성을 통해서는 해당 요소의 스타일을 지정할 수 있습니다. <tagname style=“property:value;"> 과 같은 문법을 사용하며 여기서 property는 CSS의 property이고 value는 CSS value를 나타냅니다.
3. HTML의 대표적인 태그들
3-1. <h> 태그
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
웹페이지에서 보여주고 싶은 title이나 subtitle을 나타내기 위해 사용합니다. h1부터 h6까지 존재하며 숫자가 낮을수록 중요한 heading입니다(더 크게 나타남). 검색 엔진은 heading을 이용해 웹페이지의 내용과 구조를 인덱싱하고 사용자 또한 heading으로 페이지를 훑어보기 때문에 heading은 중요합니다. 참고로, 브라우저는 자동으로 heading 앞뒤로 마진을 추가합니다. 단순히 텍스트를 크게 혹은 볼드체로 만들기 위해 h태그를 쓰면 안됩니다. <h>태그는 정해진 Default 사이즈가 있으나 CSS를 통해 크기를 더 키울 수 있습니다.
3-2. <p> 태그
<p>이건 하나의 문단입니다.</p>
<p>이건 또 다른 하나의 문단입니다.</p>
웹페이지에서 텍스트 블록을 보여주고 싶을 때 사용합니다. <p> 태그 안의 내용은 항상 새로운 라인에서 시작하며 브라우저는 자동으로 앞뒤로 마진(margin)을 추가합니다. 텍스트 사이 추가적인 빈 공간이나 new line을 넣을 수 없습니다(브라우저가 자동으로 삭제). 콘텐츠를 나누기 위해 가로줄을 나타낼 때에는 <hr> 태그 사용합니다(이는 empty tag로, 닫는 태그가 없습니다.). line break를 위해서는 <br>태그 사용 (이 또한 empty tag)
비슷한 태그로는 <pre>태그가 있으며, 이는 preformatted text를 나타낸다. 고정된 너비의 폰트로 표시되며 내용의 공백과 new line을 보존하는 특성이 있습니다.
3-3. 텍스트 포맷팅을 위한 태그들
| <b> | 볼드 텍스트 (중요도와는 상관없음) |
| <strong> | 중요 텍스트 (볼드체로 표시됨) |
| <i> | 이탤릭체 텍스트 |
| <em> | 강조(Emphasized) 텍스트 |
| <mark> | Marked 텍스트 (형광펜 효과) |
| <small> | 작은 텍스트 |
| <del> | 삭제된 텍스트 (텍스트 가운데 가로줄) |
| <ins> | 삽입된(Inserted) 텍스트 (텍스트 아래 가로줄) |
| <sub> | Subscript text (아래 첨자) |
| <sup> | Superscript text (위 첨자) |
3-4. 인용 텍스트를 위한 태그들
| <blockquote> | 다른 source로부터 인용된 섹션을 나타내는 요소 (cite 속성에 url을 명시) |
| <q> | 짧은 인용에 사용 (브라우저가 인용부호 삽입) |
| <abbr> | 약어 혹은 두문자어에 사용 (브라우저, 번역기, 검색엔진에 정보 제공)(title 속성에 설명을 기재하는 것을 추천) |
| <address> | 보통 작성자의 연락처. 대개 이탤릭체로 표시되며 브라우저는 <address>태그 앞뒤로 line break를 사용 |
| <cite> | 창작물의 제목을 기술. 주로 이탤릭체로 표시 |
| <bdo> | 텍스트 순서를 재정의. (예시로 dir속성에 rtl값을 주면 텍스트 순서가 right to left로 표시) |
3-5. <a> 태그
<a href="https://github.com/donghoonKang-dev">동동's 깃허브</a>
하이퍼링크를 나타내기 위해 사용되며 클릭을 통해 다른 문서로 이동할 수 있습니다. 커서를 올리면 커서 모양이 변경됩니다. 텍스트 뿐만 아니라 어느 HTML 요소든 a태그 안쪽에 중첩을 통해 해당 컴포넌트 삽입하면 링크로 만들 수 있습니다. href 속성에 url을 추가, 태그 사이의 내용은 사용자에게 보여질 내용을 담습니다. 미방문시 underlined, blue 스타일로 표시 / 기방문시 underlined, purple 스타일로 표시 / active link는 underlined, red 스타일로 표시(클릭시) 됩니다. 이는 물론 CSS로 스타일 변경가능합니다(a:link, a:visited, a:hover, a:active 처럼). default로는 현재 브라우저 윈도우에서 새로운 문서가 열리는데, 이를 변경하려면 target 속성 이용하면 됩니다. target 속성이 가질 수 있는 속성값은 다음과 같습니다.
| _self | default세팅 |
| _blank | 새로운 윈도우나 탭에서 열림 (이동시 뒤로가기 불가) |
| _parent | 부모 프레임에서 열림 (이동시 뒤로가기 가능) |
| _top | 창의 전체를 채우며 열림 (이동시 뒤로가기 가능) |
href 속성의 속성값으로는 절대주소와 상대주소 모두 사용 가능합니다. href 속성값을 mailto:로 시작하고 이메일을 적으면 사용자의 이메일 프로그램이 열립니다. <a>태그와는 달리 <button> 태그를 링크로 사용하려면 onclick 속성에 “document.location='default.asp'" 값과 같이 자바스크립트코드 삽입이 필요합니다. 북마크를 만들고자한다면 아래와 같이 원하는 요소의 id속성값을 href 속성에 넣어주면 북마크 기능 활용 가능합니다.
<a href="#C4">Chapter 4로 이동</a>
3-6. 이미지를 위한 태그와 속성
<img src="my_img.jpg" alt="swiss landscape">
<img>태그는 웹페이지에서 이미지를 나타내고자 할 때 사용합니다. <img>태그는 src, alt 속성을 필요로 합니다. 이미지의 너비와 높이를 지정해주지 않는다면 웹페이지는 이미지 로드와 동시에 깜박거릴 수 있습니다. 너비와 높이 지정을 위해선 width, height 속성을 직접 쓰는 것 보단 style 속성의 값으로 너비와 높이를 지정하는 것을 권장합니다. Animated GIF 또한 지원하지만 형식에 상관 없이 용량이 큰 이미지는 전체적인 로드 속도 저하 요소가 될 수 있습니다.
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
이미지 맵이란 이미지 안의 클릭 가능한 영역을 말합니다. 이는 <map>태그를 통해 만들어낼 수 있으며 <map>태그는 하나 이상의 <area>태그로 구성됩니다. <area>태그 안의 shape 속성에는 rect, circle, poly, default(entire region) 속성 값을 사용할 수 있습니다. onclick 속성을 통해 자바스크립트 함수 또한 실행 가능합니다.
<p style="background-image: url(‘img_swiss.jpg');">
HTML요소에 배경 이미지는 style 속성에 background-image CSS 속성을 추가하여 나타낼 수 있습니다. 요소보다 이미지 크기가 작다면 기본적으로 이미지는 반복되어서 나타납니다. 이를 피하기 위해선 background-repeat: no-repeat; CSS 속성을 조정해야 합니다. 이외에도 background-size: cover; 와 background-attachment: fixed; 속성을 통해 요소 전체를 덮을 수 있습니다.
만약 background-size: 100% 100%; 속성을 주면 이미지가 요소의 사이즈에 맞게 늘어납니다.
<picture>
<source media="(min-width: 600px)" srcset="img_france.jpg">
<source media="(min-width: 400px)" srcset="img_italy.jpg">
<img src="img_swiss.jpg">
</picture>
<picture>태그를 통해 브라우저에게 창의 사이즈에 따라 다른 이미지를 보여주도록 할 수 있습니다. 이를 위해 <picture>태그는 중첩 형식으로 srcset이라는 속성을 가지는 여러 <source>요소를 포함합니다. 이는 주로 이미지 로드 속도를 개선하기 위해 기기별로 다른 사이즈의 이미지를 제공한다던지, 브라우저나 기기별로 지원하지 않는 이미지 파일 형식을 다른 파일 형식으로 제공한다던지 할 때 사용합니다.
<link rel="icon" type="image/x-icon" href=“/images/favicon.ico">
favicon은 브라우저 탭의 페이지 타이틀 옆에 표시되는 작은 이미지를 말합니다. <head> 태그 안의 <link>태그에 위와 같이 선언하여 나타낼 수 있습니다. favicon의 이미지로는 높은 대비의 작은 이미지를 사용하는 것이 좋습니다.
3-7. <table>태그
<table>
<tr>
<th>회사</th>
<th>부서</th>
<th>위치</th>
</tr>
<tr>
<td>삼일테크앤</td>
<td>발전설비부</td>
<td>안양시</td>
</tr>
<tr>
<td>송강목재</td>
<td>시설보수과</td>
<td>삼척시</td>
</tr>
</table>
<table>태그는 웹개발자가 데이터를 행과 열로 나타낼 수 있도록 해줍니다. 하나의 셀은 <td>태그(table data)를 이용해 표시합니다. 셀 안에는 html요소도 포함 가능합니다. 하나의 행은 <tr>태그를 이용해 표시합니다(각 행의 셀 갯수만 일치한다면 얼마든지 행 추가 가능). 테이블 헤더는 <th>태그를 이용해 표시합니다. 테이블 헤더는 기본적으로 볼드체 및 중앙정렬로 표시됩니다(물론 CSS로 변경 가능합니다.). CSS를 이용해 border, border-radius, border-style 등 정의할 수 있습니다. border-collapse: collapse; 와 같은 CSS 속성으로 Collapse도 표현 가능합니다. 각 열과 행별로 CSS width, height 속성을 통해 다른 사이즈를 적용 가능합니다.
<th> 태그에 colspan 속성을 추가해 여러 열의 테이블 헤더를 하나로 묶을 수 있습니다. 여러 셀을 하나로 병합하기 윟
서 colspan, rowspan을 사용합니다. <table>태그 아래에 <caption>태그를 통해 테이블 캡션을 달 수도 있습니다.
padding, border-spacing등의 CSS 속성을 이용해 padding과 spacing 활용 가능하며 :nth-child(even) CSS 속성을 이용해 줄무늬 표현이 가능하고 :hover CSS 속성 또한 사용 가능합니다. <colgroup> 태그를 통해 특정 열들을 묶어 일괄 스타일 수정 가능
(자세한 예시는 다음 링크를 참조하세요 : https://www.w3schools.com/html/html_tables.asp )
3-8. 리스트를 나타내기 위한 태그
<h2>순서 없는 리스트</h2>
<ul>
<li>김치찌개</li>
<li>녹차라떼</li>
<li>동그랑땡</li>
</ul>
<h2>순서 있는 리스트</h2>
<ol>
<li>개요</li>
<li>목차</li>
<li>상세</li>
</ol>
HTML에선 연관된 아이템들의 집합을 리스트로 나타낼 수 있습니다. 각 리스트는 중첩 가능하며 CSS를 이용해 가로로도 표현 가능합니다.
순서 없는 리스트(Unordered List)는 <ul>태그를 사용합니다. 각 아이템은 <li>태그를 사용합니다. list-style-type CSS 속성을 사용해 각 아이템의 마커를 수정할 수 있습니다.
순서 있는 리스트(Ordered List)는 <ol>태그를 사용합니다. 각 아이템은 마찬가지로 <li>태그를 사용합니다. type 속성을 지정해서 마커를 수정할 수 있으며 start 속성을 지정해서 카운팅 시작 숫자도 설정 가능합니다.
설명을 위한 리스트(Description List)는 <dl>태그를 사용합니다. 각 아이템은 <dt>태그 사용 하며(term), <dd>태그를 이용해 각 아이템을 설명합니다.
3-9. <div> 태그
<div style="background-color:black;color:white;padding:16px;">
<h2>파리</h2>
<p>City of Love라고 불리는 도시로, 넷플릭스 시리즈 '에밀리, 파리에 가다'의 주요 무대로 등장해 사람들에게 여행 욕구를 심어주었다.</p>
</div>
주로 다른 HTML 요소들의 컨테이너로 쓰입니다. 보통의 id, class, style을 제외한 필요 속성이 따로 없습니다.
3-10. <span>태그
<p>동동이는 <span style="color:red;font-weight:bold;">경고성</span> 멘트를 <span style="color:orange;font-weight:bold;">주의 깊게</span> 보았다.</p>
문서의 일부나 텍스트의 일부를 mark up하기 위한 inline 컨테이너로 사용됩니다. <div>태그와 마찬가지로 보통의 id, class, style을 제외한 필요 속성이 따로 없습니다.
'HTML' 카테고리의 다른 글
| HTML Best Practice (0) | 2023.03.20 |
|---|---|
| HTML Forms (0) | 2022.12.13 |
| Semantic HTML 작성하기 (0) | 2022.10.31 |
| HTML 기본 (下) (0) | 2022.10.20 |
| HTML 기본 (中) (0) | 2022.10.19 |
