HTML이란?
HTML은 HyperText Markup Language의 줄임말로 웹 문서를 만드는 언어라고 할 수 있습니다.
HTML의 기본 기능은 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것입니다.
HTML 구조 파악하기
HTML 문서는 일반 문서와 달리 정해진 형식에 맞추어 내용을 입력해야 합니다.
웹 문서는 보통 <!DOCTYPE html>로 시작해 <html>, <head>, <body>라는 3개의 영역으로 구성되어 있습니다.
<!DOCTYPE html>: 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻입니다.
<html> ~`: 웹 문서의 시작과 끝을 나타내는 태그입니다. 웹 브라우저가태그를 만나면`까지 소스를 읽어 화면에 표시합니다.
<head> ~ </head>: 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분입니다.
<body> ~ </body>: 실제로 웹 브라우저 화면에 나타나는 내용입니다. 앞으로 우리가 공부할 HTML 태그는 대부분 <body> 태그 안에 들어 있습니다.
<HTML의 태그는 그 이름만 봐도 의미를 알 수 있어 시맨틱(semantic) 태그라고 합니다.>
웹 문서 구조를 만드는 주요 시맨틱 태그
- <header> 태그는 말 그대로 헤더 영역을 의미합니다.
- <nav> 태그는 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듭니다. <nav> 태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있습니다.
- <main> 태그는 웹 문서에서 핵심이 되는 내용을 넣습니다. <main> 태그는 웹 문서에서 한 번만 사용할 수 있습니다.
- <article> 태그는 웹에서 실제로 보여 주고 싶은 내용을 넣습니다. 문서 안에는 <article> 태그를 여러 개 사용할 수 있고, 이 안에는 <section> 태그를 넣을 수도 있습니다.
- <section> 태그는 웹 문서에서 콘텐츠 영역을 나타냅니다.
- <aside> 태그는 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만듭니다.
- <footer> 태그는 웹 문서에서 맨 아래쪽에 있는 푸터 영역를 만듭니다. 푸터 영역에는 <header> 태그를 비롯하여 <section>, <article> 등 다른 시맨틱 태그를 모두 사용할 수 있습니다.
- <div> 태그는 여러 소스를 묶어 영역을 구별하거나 스타일로 문서를 꾸미는 태그로 <div id="header">나 <div class="detail">처럼 id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용합니다.
제목을 나타내는 <hn>태그 |
- <hn> 태그의 n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있습니다.
- <h1>이 가장 큰 제목이고 <h2>, <h3>, …,<h6>의 순서로 크기가 작아집니다.
텍스트 단락 만들기 |
- <p>와 </p> 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어집니다.
- 편집기에서 <p> 태그의 텍스트 단락의 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시됩니다.
- <p></p> 태그는 paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰입니다.
줄 바꾸기 |
- <br> 태그를 사용하면 텍스트 단락의 줄을 바꿀 수 있습니다.
- <br> 태그는 단독으로 사용하므로 닫는 태그가 필요 없습니다.
인용문 태그 사용하기 |
- <blockquote>와 </blockquote> 태그로 인용문을 감싸 주면 웹 브라우저는 <blockquote> 태그 안의 내용을 인용문으로 알고 다른 텍스트보다 약간 들여 씁니다.
텍스트 굵게 표시하기 |
<strong> 태그와 <b> 태그는 눈으로 볼 때 별로 차이가 느껴지지 않지만 그래도 구분하는 이유는 화면 낭독기의 기능 때문입니다.
- <strong> 태그는 경고나 주의 사항처럼 중요한 내용을 강조해야 할 때 사용합니다.
- <b> 태그는 키워드처럼 단순히 글자만 굵게 표시할 때 사용합니다.
텍스트 기울여서 쓰기 |
<em> 태그에서 em은 강조를 뜻하는 emphasis의 줄임말이고 <i> 태그에서 i는 이탤릭체, 즉 기울기체를 뜻하는 italic의 줄임말입니다.
- <em> 태그는 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용합니다.
- <i> 태그는 마음속의 생각이나 용어, 관용구 등에 사용합니다.
순서 있는 목록 사용하기 |
ol은 ordered list의 줄임말이고, li는 list의 줄임말입니다.
- <ol>과 <li> 태그를 사용해 각 항목을 순서대로 나열합니다.
- 목록을 표시할 내용 앞뒤에 각각 <ol>과 </ol> 태그를 두고, 그 사이에 <li>와 </li> 태그를 삽입합니다.
type과 start 속성 사용하기 |
- <ol> 태그에 type 속성을 사용하면 문자나 로마 숫자 등으로 순서를 나타낼 수 있습니다.종류설명
type = “1” 숫자(기본값) type = “a” 영문 소문자 type = “A” 영문 대문자 type = “i” 로마 숫자 소문자 type = “I” 로마 숫자 대문자 - 순서 목록은 기본적으로 ‘1’부터 시작하지만 start 속성을 사용해서 시작 번호를 바꿀 수도 있습니다.
- 여러 개의 순서 있는 목록을 연결하여 번호를 붙여야 할 경우 start 속성을 사용하여 원하는 번호부터 시작하면 됩니다.
순서 없는 목록 사용하기 |
ul은 unordered list의 줄임말입니다.
- <ul>과 </ul> 태그를 목록 앞뒤에 붙인 후 <li>와 </il> 태그를 삽입하여 순서 없는 목록을 만들 수 있습니다.
설명 목록 사용하기 |
dl은 description list의 줄임말입니다.
- 설명 목록은 이름(단어명) 부분을 지정하는 <dt> 태그와 값(설명) 부분을 지정하는 <dd> 태그로 구성됩니다.
- <dt> 태그 하나에 <dd> 태그를 여러 개 사용할 수도 있습니다.
표 만들기 |
- 셀은 행과 열이 만나 이루어진 곳으로 표의 내용이 들어가는 한 칸을 의미합니다.
- 표는 행(row)과 열(column) 그리고 셀(cell)로 이루어집니다.
표를 만드는 <table>, <caption> 태그
- <table>과 </table> 태그는 표의 시작과 끝을 알려 줍니다.
- <caption> 태그를 사용하여 표에 제목을 붙일 수 있습니다.
행을 만드는 <tr> 태그와 셀을 만드는 <td>, <th> 태그
- <tr> 태그는 행을 지정하고 <td> 태그는 셀을 지정합니다.
- <th> 태그는 표의 제목 행에 셀을 만들 때 사용합니다.
표의 구조 지정하기 |
- <thead>와 <tbody>, <tfoot> 태그는 table의 ‘t’와 제목(head), 본문(body), 요약(foot)을 각각 합친 말입니다.
행과 열 합치기 |
<td rowspan="합칠 셀의 개수">셀의 내용</td>
<td colspan="합칠 셀의 개수">셀의 내용</td>
Copy- 행을 합치려면 rowspan 속성을 사용하고 열을 합치려면 colspan 속성을 사용해서 몇 개의 셀을 합칠지 지정하면 됩니다.
열을 묶어주기 |
- 원하는 열을 선택하여 특정 열에 스타일 속성을 지정할 수 있습니다.
<colgroup>
<col>
</colgroup>
Copy- <col> 태그는 열을 1개만 지정할 때 사용하고, <colgroup> 태그는 <col>태그를 2개 이상 묶어서 사용합니다.
- <colgroup>, <col> 태그는 반드시 <caption> 태그 다음에 써야 합니다.
- <col> 태그를 사용할 때는 <colgroup> 태그 안에 <col> 태그를 포함해 표 전체 열의 개수만큼 <col> 태그를 넣어야 합니다.
- 같은 스타일 속성을 사용하는 <col> 태그가 있다면 span 속성을 사용해서 묶어 줄 수 있습니다.
이미지 삽입하기 |
이미지를 삽입하는 <img> 태그
<img src="이미지 파일 경로" alt="대체용 텍스트">
Copy- src 속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려 주는 역할을 하며 반드시 있어야 합니다.
- alt 속성에는 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력합니다.
이미지 파일 경로를 나타내는 src 속성
- 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해집니다.
<!-- 웹 문서와 같은 폴더에 있는 이미지 파일 경로 넣기 --> <img src="tangerines.jpg"> <!-- 웹 문서 하위 폴더에 있는 이미지 파일 경로 넣기 --> <img src="images/tangerines.jpg"> Copy
이미지를 텍스트로 대신 설명하는 alt 속성
- alt 속성을 지정하면 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 텍스트가 나타납니다.
이미지 크기를 조절하는 width, height 속성
- width는 이미지의 너비를, height는 이미지의 높이를 지정합니다.
- width나 height 중 1개만 지정해도 나머지 속성은 비율을 자동으로 계산하여 나타냅니다.
- 단위는 퍼센트(%)와 픽셀(px)이 있습니다.
오디오와 비디오 삽입하기 |
다양한 멀티미디어 파일을 삽입할 때 쓰는 <object>, <embed> 태그
<object width="너비" height="높이" data="파일"></object>
Copy- data 속성에 보여 줄 멀티미디어 파일을 지정하고 width, height 속성을 사용해 플레이어의 크기를 지정합니다.
- <embed src="파일 경로" width="너비" height="높이"> Copy
- HTML의 <audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저를 고려해야 하면 <embed> 태그를 사용해서 멀티미디어 파일을 삽입합니다.
오디오와 비디오 파일을 삽입하는 <audio>, <video> 태그
- HTML5에서는 웹 브라우저 안에서 멀티미디어 파일을 삽입하고 바로 재생할 수 있습니다.
<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>
Copy- 배경 음악이나 효과음 등 오디오 파일을 삽입할 때는 <audio> 태그를 사용하고,비디오 파일을 삽입할 때는 <video> 태그를 사용합니다.
- <audio>, <video> 태그의 속성
| controls | 플레이어 화면에 컨트롤 바를 표시합니다. |
| autoplay | 오디오나 비디오를 자동으로 실행합니다. |
| loop | 오디오나 비디오를 반복 재생합니다. |
| muted | 오디오나 비디오의 소리를 제거합니다. |
| preload | 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정합니다. 사용할 수 있는 값은 auto, metadata, none입니다. |
하이퍼링크 삽입하기 |
링크를 삽입하는 <a> 태그와 href 속성
<a href="링크할 주소">텍스트 또는 이미지</a>
Copy- 텍스트 링크 만들기
텍스트 링크는 <a>와 </a> 태그 사이에 링크로 만들 텍스트를 입력하면 텍스트에 링크를 만들 수 있습니다. - 이미지 링크 만들기
<a>와 </a> 태그 사이에 <img> 태그를 넣으면 이미지에 링크를 만들 수 있습니다. - target 속성에 _blank를 지정하면 링크에 연결된 문서가 새 탭에서 열립니다.
<출처 & 공부한 사이트>
https://academy.elice.io/courses/7739/info
Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 | 엘리스
한 권으로 끝내는 웹 기본 교과서
academy.elice.io
'학부생나부랭이 > _web_programing' 카테고리의 다른 글
| css_study_d3_정리 (0) | 2022.01.14 |
|---|---|
| css_study_d2_정리 (0) | 2022.01.07 |
| css_study_d1_정리 (0) | 2022.01.04 |
| 혼자 끄적여 본 html (0) | 2022.01.03 |
| html_study_d2_정리 (0) | 2022.01.03 |
댓글