HTML- hypertext markup language의 줄임말.
Hypertext란 문서를 서로 연결해주는 링크로 인터넷에서 링크만 클릭하면 다른 페이지나 사이트로 쉽게 연결하게 해줌
예전에는 화면을 구성할때 예전에는 입력 항목을 구성해놓고 추가했지만, 지금은 이걸 HTML로 사용
HTML은 웹페이지를 기술하기 위한 언어로, markup언어의 일종.markup언어란 텍스트에 태그에 붙여서 텍스트가 문서의 어디에 해당하는지를 기술하는 것
1.HTML의 기본구조
<!DOCTYPE html>:현재 문서가 HTML5 언어로 작성하는 웹문서라는 뜻
<html>~</html>:웹 문서의 시작과 끝
<head>~</head>:웹문서를 해석하는데 필요한 정보를 입력하는 부분
<body>~</body>:웹 브라우저 화면에 나타나는 내용
웹브라우저에 문서 정보를 알려주는 <head>태그
<head>영역의 내용은 대부분 웹 브라우저 화면에는 보이지 않음.
<meta>:웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용. 화면에 글자를 표시할때 어떤 인코딩을 사용할지 지정 //ex.)<meta charset="UTF-8">
<title>:문자제목을 나타냄.웹 브라우저의 제목을 표시함.
2.시맨틱 태그:HTML의 태그 이름으로 그 의미를 알 수 있음.ex)<p>,<a>
시맨틱 태그를 사용하지 않아도 만들수 있으나, 사용하는 이유
1.사용하면 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있음.
2.문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현할수있음
3.인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있음
주요 시맨틱 태그
1.<header>태그
<header>태그는 말 그대로 헤더 영역을 의미.사이드 전체의 헤더도 있지만 특정 영역의 헤더도 존재.<head>태그와 다름.
2.내비게이션 영역을 나타내는 <nav>태그
<nav>태그는 같은 웹 문서 안에서 다른 위치로 연결하거나, 다른 웹 문서로 연결하는 링크를 만듬.웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함할 수도 있고, 독립해서 사용할 수도 있음.
3.핵심 컨텐츠를 담는 <main>태그
<main>태그는 웹 문서에서 핵심이 되는 내용을 넣음. 페이지마다 똑같이 들어간 정보는 넣을 수 없고, 웹 문서마다 다르게 보여주는 내용으로 구성.<main>태그는 웹 문서에서 한번만 사용가능
4.독립적인 컨텐츠를 담는 <article>태그
<article>태그는 웹에서 실제로 보여주고 싶은 내용을 넣음.<article>태그는 여러개 사용가능하고, 이 안에는 <section>태그를 넣을 수테 있음.
5.콘텐츠 영역을 나타내는 <section>태그
<section>태그는 웹 문서에서 콘텐츠 영역을 나타냄.<article>과 차이는 <section>태그는 몇 개의 콘텐츠를 묶는 용도로 사용. <article>태그는 블로그의 포스트처럼 독립된 콘텐츠로 사용. 단순히 스타일을 적용하려고 콘텐츠를 묶으려면 <section>태그 대신 <div>태그 사용.현업에서는 <div>를 더 많이 사용.
6.사이드 바 영역을 나타내는 <aside>태그
<aside>태그는 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드바를 만듬.
7.푸터 영역을 나타내는 <footer>태그
<footer>태그는 웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만듬. 저작권 정보, 연락처 등을 넣음.<header>,<section>,<article>등 다른 시맨틱 태그 모두 사용가능.
8.여러 소스를 묶는 <div>태그
<div>태그는 id나 class속성을 사용해서 문서 구조를 만들거나 스타일을 적용할때 사용.
 |
 |
시맨틱 태그를 통해 좀 더 간편히 이해할 수 있음.
3.텍스트 입력하기
1.제목을 나타내는<hn>태그
2.텍스트 단락을 만드는<p>태그, 줄을 바꾸는 <br>태그
<p> 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐.
<br>태그는 태그를 사용하면 텍스트 단락을 만들 때 원하는 위치에서 줄을 바꿔줌
<br>태그와 <p>태그의 차이점: <br>태그 두번사용하면 빈줄이 생기면서 텍스트 단락이 나뉜 것처럼 화면에 표시할 수 있음.하지만 실제로는 단락이 만들어진게 아니라 CSS 사용해 텍스트 단락 스타일을 적용할 때 문제가 생김. 따라서 텍스트 단락을 만들 때는 <p>태그 사용.
3.인용할때 쓰는 <blockquote>태그
<blockquote>태그는 인용문처럼 <p>태그 보다 다른 텍스트 단락보다 안으로 들여 쓴 상태처럼 나옴
4.텍스트를 굵게 표시하려면 <strong>,<b>태그
이 2개를 구분하는 이유는 화면 낭독기의 기능 때문.예를 들어 경고나 주의 사항처럼 중요한 내용을 갖오해야할 때는 <strong>태그, 키워드처럼 단순히 글자만 굵게 표시할 때는 <b>태그
5.기울인 텍스트를 입력해 주는 <em>,<i>태그
<em>와<i>태그는 텍스트를 기울여 표시할때 사용.
<em>태그는 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용
<i>태그는 마음속의 생각이나 용어,관용구 등에서 사용
4.목록 만들기
웹문서에서 목록은 단순히 어떤 항목을 나열할 때 뿐 아니라 특히 CSS와 함께 사용해서 내비게이션을 만들거나 컨텐츠를 배치하는 등 다양한 용도로 사용.
1.순서 있는 목록을 만드는 <ol>,<li>태그
각 항목을 순서대로 나열. 순서 목록은 어떤 순서대로 설명할때 <ol>,<li>
| <ol> <li>항목1</li> <li>항목2</li> <ol> |
1.항목1 2.항목2 |
<ol>태그의 type,start 속성
앞에 예제처럼 기본형은 숫자 1,2,3 으로 번호를 붙임.이때 type을 사용하면 영문자나 로마 숫자 등으로 순서를 나타낼 수 있음. 또 start을 활용하면 시작 번호를 바꿀 수도 있음. 여러 개의 순서 있는 목록을 연결하여 번호를 붙여야 할 경우 start 속성을 사용하여 원하는 번호를 붙여야 할 경우 사용
2.순서 없는 목록을 만드는 <ul>,<li>태그
순서 없는 목록은 항목의 순서가 중요하지 않을 때 사용. 작은 원이나 사각형을 붙여서 구분하는데 이를 bullet이라고 부름
3.설명 목록을 만드는 <dl>,<dt>,<dd>태그
설명 목록이란 이름과 값 형태로 된 목록.이름 부분을 지정하는 <dt>태그, 값 부분을 지정하는 <dd>태그. 이때 <dt>태그 안에 <dd>태그 여러개 사용이 가능함.
5.표 만들기
1.표를 만드는 <table>,<caption>태그
표의 시작과 끝을 알려 주는 <table>과 </table>태그
표의 제목을 붙이려면 <caption>태그
2.행(row)을 만드는 <tr>태그와 셀을 만드는 <td>,<th>태그
<tr>태그는 행을 만들고, <td>태그는 행 안에 있는 셀을 만듬
<th>태그는 표의 제목 행에 셀을 만들떄 사용.
<th>태그를 사용하면 내용은 진하게 표시되고 셀 안에서 중앙에 배열되 눈에띔.
| <table> <tr> <td>1행 1열 </td> <td>1행 2열</td> </tr> <tr> <td>2행 1열</td> <td>2행 2열</td> </tr> </table> |
1행 1열 | 1행 2열 |
| 2행 1열 | 2행 2열 |
3.표의 구조를 지정하는 <thead>,<tbody>,<tfoot>태그
일부 표에서는 제목이 표시된 셀과 자료가 표시된 셀 외에 표 아래쪽에 합계나 요약 내용을 표시해놓음
<thead>,<tbody>,<tfoot>태그를 사용. table의 't'와 제목,본문,요약을 각각 합친 말
4.행이나 열을 합치는 rowspan,colspan 속성 알아보기
여러 셀을 합치거나 나누어서 다양한 형태로 바꿈. 행이나 열을 합치는 것은 실제로는 셀을 합치는 것이므로 <td>태그나 <th>태그에서 이뤄짐. 행을 합치려면 rowspan 속성 사용. 열을 합치면 colspan 속성 사용.
5.열을 묶어주는 <col>,<colgroup>태그
단순히 표를 만들기만 하는 것이 아니라 특정 열에 배경색을 넣거나 너비를 바꾸려면 원하는 열을 선택하기 위해서 사용.<colgroup>,<col>태그는 반드시 <caption>태그 다음에 사용
6.멀티미디어 삽입하기
1.이미지 삽입하는 <img>태그
<img src="이미지 파일 경로" alt="대체용 텍스트">
src속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려 주는 역할. alt속성은 이미지를 대신해서 읽어줄 텍스트.웹에서 사용하는 대표적인 이미지 파일 형식은 파일 크기가 크지 않으면서 화질이 좋아야해서 JPG나 PNG파일 형식 사용.
2.이미지 크기를 조절하는 width,height 속성
weight나 height로 이미지 크기 조절이 가능. width나 height 중 1개만 지정해도 나머지 속성은 비율을 자동으로 계산. 단위로 퍼센트나 픽셀을 사용.
3.다양한 멀티미디어 파일을 삽입할때 쓰는 <object>,<embed>태그
<object>태그는 오디어 파일뿐만 아니라 비디오 등 다양한 멀티믿어 파일을 삽입할때 사용
<object width="너비" height="높이" data="파일"></object><embed>태그는 대부분 브라우저에서 사용할 수 있음. src 속성을 사용해 삽입할 멀티미디어 파일을 지정.필요한 경우 width,height속성으로 플레이어의 너비와 높이를 지정. <embed>태그에는 닫는 태그가 없음
<embed src="파일 경로" width="너비" height="높이">
4.오디오와 비디오 파일을 삽입하는 <audio>,<video>태그
HTML5 웹표준이 정해지면서 가장 많이 변한 부분. HTML4은 웹 브라우저에 멀티미디어 파일을 삽입한 후에 재생하려면 플러그인 프로그램이 따로 필요. BUT HTML5는 웹 브라우저 안에서 멀티미디어 파일을 삽입하고 바로 재생가능.
<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>5.하이퍼링크를 삽입하는 <a>태그와 href속성
<a href="링크할 주소">텍스트 또는 이미지 </a>
텍스트 링크는 <a>와 </a> 태그 사이에 링크로 만들 텍스트를 입히고, href속성에는 텍스트를 클릭하면 연결할 문서의 경로와 파일명을 넣음.
'Study > FrontEnd' 카테고리의 다른 글
| FrontEnd (0) | 2024.01.18 |
|---|---|
| HTML,CSS을 활용한 자기 페이지 만들기 (3) | 2024.01.03 |
| JAVASCRIPT(1) (0) | 2023.12.27 |
| CSS (0) | 2023.12.26 |
| HTML(2) (0) | 2023.12.26 |
