풀스택 개발 학습 과정/프론트엔드
[HTML + CSS] HTML 태그 - 1
육츠
2024. 2. 15. 21:20
FRONTRND
1) HTML (HyperText Markup Language) : 웹문서의 구조
2) CSS (Cascading Style Sheet) : 웹문서의 표현
3) JavaScript : 웹문서의 로직담당 (동적인 기능)
html : https://www.javatpoint.com/html-5-tags
HTML 5 Tags - javatpoint
HTML 5 tags with examples, forms, input, text, anchor, image, heading, marquee, textarea, paragraph, title, quotes, code etc.
www.javatpoint.com
HTML
텍스트 콘텐츠 태그
| 텍스트 콘텐츠를 표기하는 태그 | ||
| hn 태그 - Heading | 제목을 표기하는 태그 h1 : 로고, 표지 제목 h2 : 대제목, 단락제목 h3 : 중제목, 페이지 제목 h4 : 소제목, 문단 제목 h5 : 문단 제목 h6 : 주석 제목 |
|
| p 태그- 본문 태그, 문단 태그 |
문단이나 본문을 표기하는데 사용되는 태그이며, 작성자가 여러개의 문단으로 구성하고자 하면 여러개의 p태그를 사용하여 표기한다. |
|
| br 태그 - 줄바꿈 태그 | br 태그는 한 줄의 문장을 둘 이상으로 나눌때 사용하는 태그이다. 여러개의 br 태그를 사용하면 줄 사이에 여백이 생긴다. 여러 줄을 나누기 위해 br 태그를 반복적으로 사용하는 일은 없어야 한다. |
|
| hr 태그 - 수평선 태그 | 한 줄의 수평선을 만들어주는 태그 ( 속성값을 통해 선의 모양을 바꿀 수 있다.) | |
| strong, br 태그 - 텍스트를 한 줄로 표기하면서 굵게 강조하는 태그 |
화면 낭독기에서의 기능 차이 strong : 경고나 주의사항 / b : 단순히 굵게 표현 |
|
| i, em 태그 - 이탤릭체로 표기하는 태그 |
i : 마음속의 생각이나 꿈, 기술적 용어 / em : 흐름상 특정부분 강조 | |
| span 태그 - 줄 나눔없이 영역을 묶기 |
일부 글자만 스타일을 적용하고자 할때 사용 | |
| u 태그 |
링크를 표시하기 위한 용도가 아닌 단순 밑줄 표시하는 태그
|
|
| s 태그 |
가격 표시 등에 사용하는 취소선
|
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 콘텐츠를 표기하는 태그</title>
</head>
<body>
<h2>텍스트 콘텐츠를 표기하는 태그</h2>
<p>
html 문서의 body 태그에는 기본적인 데이터를 표현하기 위해 <br>
각 데이터를 표기하는 태그를 사용해야 한다. <br>
텍스트를 표현하기 위해 사용하는 태그들은 어떤 것들이 있을까?
</p>
<hr> <!--가로선-->
<h3>제목 태그</h3>
<h4>hn 태그 - Heading </h4>
<p>
hn 태그는 제목을 표기하는 태그 <br>
제목의 용도에 따라 1~6단계로 구분된다.
</p>
<h1>h1 : 로고, 표지 제목</h1>
<h2>h2 : 대제목, 단락제목</h2>
<h3>h3 : 중제목, 페이지 제목</h3>
<h4>h4 : 소제목, 문단 제목</h4>
<h5>h5 : 문단 제목</h5>
<h6>h6 : 주석 제목</h6>
<hr>
<h3>본문 태그, 문단 태그</h3>
<h4>p 태그 - Paragraph</h4>
<p>
p 태그는 문단이나 본문을 표기하는데 사용되는 태그이며 <br>
작성자가 여러개의 문단으로 구성하고자 하면 여러개의 p태그를 사용하여 표기한다.
</p>
<hr>
<h3>줄바꿈 태그</h3>
<h4>br 태그 - Break Line</h4>
<p>
br 태그는 한 줄의 문장을 둘 이상으로 나눌때 사용하는 태그이다. <br>
여러개의 br 태그를 사용하면 줄 사이에 여백이 생긴다. <br>
따라서 여러 줄을 나누기 위해 br 태그를 반복적으로 사용하는 일은 없어야 한다.
</p>
<hr>
<h3>수평선 태그</h3>
<h4>hr 태그 - Horizontal Rule</h4>
<p>
hr 태그는 한 줄의 수평선을 만들어주는 태그이다. <br>
속성값을 통해 선의 모양을 바꿀 수 있다. (css)
</p>
<hr>
<h3>텍스트를 한 줄로 표기하면서 강조하는 태그</h3>
<strong>strong : 굵게 강조할 텍스트</strong><br>
<!-- 화면 낭독기에서의 기능 차이 strong(경고나 주의사항)/ b(단순히 굵게 표현)-->
<b>b(bold) : 굵게 강조할 텍스트</b>
<hr>
<i>i : 이탤릭체로 표기하는 태그</i><br>
<!--i(마음속의 생각이나 꿈, 기술적 용어) / em(흐름상 특정부분 강조)-->
<em>em : 이탤릭체로 표기하는 태그</em>
<hr>
<span>span 태그 - 줄 나눔없이 영역을 묶기</span><br>
<span style="color: rgb(104, 28, 176);">일부 글자만 스타일을 적용하고자 할때 사용</span>
<!--인라인 스타일-->
<hr>
<u>u 태그 -링크를 표시하기 위한 용도가 아닌 단순 밑줄 표시하는 태그</u>
<hr>
<s>s 태그 - 가격 표시 등에 사용하는 취소선</s><br>
<s>120,000원</s> <strong>100,000원</strong>
</body>
</html>
리스트 콘텐츠 태그
| 목록 콘텐츠를 표기하는 태그 | ||
| ul태그, li태그 - Unordered List, List |
<ul> <li>항목 1</li> <li>항목 2</li> </ul> |
|
| ol태그, li태그 - ordered List, List |
<ol type = "I"> <!-- 1: 숫자, a : 영문 소문자, A: 영문 대문자 i:로마 숫자 소문자, I : 로마 숫자 대문자 --> <li>항목 1</li> <li>항목 2</li> </ol> |
|
| 사용자 정의 목록 태그 - dl, dt, dd |
책의 특정 단어를 설명하기 위한 주석이나 사전처럼 특정문자를 설명하는 질의 형태를 만들때 사용되는 태그 - dl태그 - Definition List 정의 목록 - dt태그 - Definition Term 정의 용어 - dd태그 - Definition Descript 정의 설명 |
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>목록 콘텐츠를 표기하는 태그</title>
</head>
<body>
<h2>목록 콘텐츠를 표기하는 태그</h2>
<p>
목록은 순서목록과 기호목록으로 구분할 수 있다. <br>
목록은 개별적인 항목으로 만들어져 있다.
</p>
<hr>
<h3>ul태그, li태그 - Unordered List, List</h3>
<!-- ul이 부모태그 -->
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
</ul>
<hr>
<h3>ul태그, li태그 - Unordered List, List</h3>
<ol type = "I">
<!-- 1: 숫자, a : 영문 소문자, A: 영문 대문자 i:로마 숫자 소문자, I : 로마 숫자 대문자 -->
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
</ol>
<hr>
<h3>리스트 중첩</h3>
<ul>
<li>항목 1
<ul>
<li>중첩 1</li>
<li>중첩 2</li>
<li>중첩 3</li>
<li>중첩 4</li>
<li>중첩 5</li>
</ul>
</li>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
</ul>
<h3>>사용자 정의 목록 태그(dl,dt,dd)</h3>
<p>
책의 특정 단어를 설명하기 위한 주석이나 사전처럼 특정문자를 설명하는
질의 형태를 만들때 사용되는 태그
</p>
<h4>dl태그 - Definition List 정의 목록</h4>
<h4>dt태그 - Definition Term 정의 용어</h4>
<h4>dd태그 - Definition Descript 정의 설명</h4>
<dl>
<dt><b>제목</b></dt>
<dd>설명1</dd>
<dd>설명2</dd>
</dl>
<p>
dl 태그는 첫 번째 자식 태그는 dt이며, dd 태그는 설명을 쓸 때 사용한다. <br>
dt와 dl 태그 이외의 자식은 가질 수 없다.
</p>
</body>
</html>
테이블 콘텐츠 태그
| 테이블을 만드는 태그 | |||
| caption | 표의 제목 | th | 제목셀 |
| <thead> <tr> <th>th : 제목셀1</th></tr> </thead> <tbody> <tr><td>td: 본문11</td></tr> </tbody> 해당 형식을 유지한다. |
td | 본문셀 - colspan = "n" : 행(가로)을 n 개로 셀 병합 - rowspan = "n" : 열(세로)을 n 개로 셀 병합 |
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 콘텐츠</title>
<style>
table {
border: 2px solid #898989;
border-collapse: collapse;
}
table thead {
background-color: crimson;
}
table th,
table td {
border: 1px solid #245 ;
padding: 10px;
}
</style>
</head>
<body>
<h2>테이블을 만드는 태그</h2>
<ul>
<li>행 row : 가로 (Record)</li>
<li>열 column : 세로</li>
<li>셀 cell : 행과 열이 만나서 생성되는 하나의 칸</li>
</ul>
<table border="1"> <!-- 디폴트는 0 -->
<caption>caption : 표의 제목</caption>
<thead>
<tr>
<th>th : 제목셀1</th>
<th>제목셀2</th>
<th>제목셀3</th>
<th>제목셀4</th>
</tr>
</thead>
<tbody>
<tr>
<td>td: 본문11</td>
<td>본문12</td>
<td>본문13</td>
<td>본문14</td>
</tr>
<tr>
<td>본문21</td>
<td>본문22</td>
<td>본문23</td>
<td>본문24</td>
</tr>
<tr>
<td>본문31</td>
<td>본문32</td>
<td>본문33</td>
<td>본문34</td>
</tr>
</tbody>
</table>
</body>
</html>
진료 시간표로 만드는 테이블 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>셀병합</title>
<style>
table {
border: 2px solid #898989;
border-collapse: collapse;
}
table thead {
background-color: crimson;
}
table th,
table td {
border: 1px solid #245 ;
padding: 10px;
}
</style>
</head>
<body>
<h2>진료 시간 변경</h2>
<p>진료 시각 및 종료 시각이 30분씩 앞당겨집니다.</p>
<table>
<thead>
<tr>
<th></th> <!--제목셀-->
<th>이비인후과</th>
<th>내과</th>
</tr>
</thead>
<tbody>
<tr>
<th>평일</th>
<td colspan="2">08:30 ~ 17:30</td>
</tr>
<tr>
<th>토요일</th>
<td>08:30 ~ 13:30</td>
<td>08:30 ~ 12:30</td>
</tbody>
</table>
</body>
</html>
이미지 표기하는 태그
- img 태그는 끝태그가 없는 오픈 태그이다.
- 이미지의 크기는 img 태그의 속성인 width, height 를 이용해 지정할 수 있으나
- CSS 속성을 이용해 수정하는 방법이 권장된다.
- 이미지를 볼 수 없는 환경에서 이미지의 정보를 출력할때 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지를 표기하는 태그</title>
</head>
<body>
<h3>경로 path</h3>
<ol>
<li>
<h4>상대 경로 : 현재 문서를 기준으로 만들어지는 경로</h4>
<ul>
<li>. : 현재 위치</li>
<li>.. : 상위 위치</li>
</ul>
</li>
<li>
<h4>절대 경로 : 특정 기준점을 기준으로 만들어지는 경로</h4>
<ul>
<li>네이버 http://naver.com</li>
<li>Window의 특정 문서를 나타내는 경로 : G:\내 드라이브\workspace_kd3\Test_Frontend\html\imges </li>
</ul>
</li>
</ol>
</body>
</html>
링크를 표기하는 태그
- 링크를 만드는 태그 (<)< >(>) 태그는 클릭을 하면 연결된 곳으로 이동하는 태그
- 텍스트를 안에 넣어 사용하면 텍스트링크가 되고, 이미지를 넣어 사용하면 이미지 링크가 된다.
| 링크를 표기하는 태그 | ||
| a 태그 |
href : 링크를 생성해서 이동할 목적지의 파일이나 웹 문서의 다른 주소 | |
| target : 링크의 내용이 표시될 위치 - _self : 현재 창에 바로 열림 (default값) - _blank : 새로운 창에 열림 - 사용자 지정 이름 : 사용자가 지정한 이름의 창으로 열림, 그 이름의 창이 없으면 새 창으로 열림 |
||
| 예시 :<li><a href="http://naver.com">네이버</a></li> | ||
| 문서 내 특정 위치로 이동 |
href : 속성값으로 특정 문서의 위치로 이동하기 위해서는 글로벌 속성인 id를 지정하고 해당 아이디가 적용된 요소를 a 태그의 href 로 지정하면 클릭시 해당 id의 위치를 브라우저 상단에 놓는다. | |
| 예시 : <li><a href="#section1">a 태그의 중요 속성</a></li> | ||
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>링크를 표기하는 태그</title>
</head>
<body>
<h2>a 태그 - 링크를 표기하는 태그</h2>
<p>
링크를 만드는 태그 < > 태그는 클릭을 하면 연결된 곳으로 이동하는 태그 <br>
텍스트를 안에 넣어 사용하면 텍스트링크가 되고, 이미지를 넣어 사용하면 이미지 링크가 된다.
</p>
<h4 id="section1">a 태그의 중요 속성</h4>
<ul>
<li>href : 링크를 생성해서 이동할 목적지의 파일이나 웹 문서의 다른 주소</li>
<li>target : 링크의 내용이 표시될 위치
<ul>
<li>_self : 현재 창에 바로 열림 (default값)</li>
<li>_blank : 새로운 창에 열림</li>
<li>사용자 지정 이름 : 사용자가 지정한 이름의 창으로 열림, 그 이름의 창이 없으면 새 창으로 열림</li>
</ul>
</li>
</ul>
<hr>
<h4 id="section2">텍스트 링크</h4>
<ul>
<li><a href="http://naver.com">네이버</a></li>
<li><a href="http://google.co.kr" target="_blank">구글</a></li>
<li><a href="http://daum.net" target="mywin">다음</a></li>
</ul>
<h4 id="section3">이미지 링크</h4>
<ul>
<li><a href="https://webtoon.kakao.com/content/%EA%B2%BD%EC%9D%B4%EB%A1%9C%EC%9A%B4-%EC%86%8C%EB%AC%B8/1525">
<img src="https://kr-a.kakaopagecdn.com/P/C/1525/c2/2x/509913ad-ca2c-4bc9-8c7f-f133bb53464d.webp" alt="경이로운 소문" height="300px">
</a> <br>
<strong>경이로운 소문</strong>
</li>
<li><a href="https://webtoon.kakao.com/content/%ED%99%98%EC%83%9D%EC%9D%98-%EC%A0%95%EC%84%9D/3019">
<img src="https://kr-a.kakaopagecdn.com/P/C/3019/c1/2x/808602c0-b34f-4a38-a97c-0bb694aea6d2.webp" alt="환생의 정석" height="300px">
</a> <br>
<strong>환생의 정석</strong>
</li>
</ul>
<hr>
<h4>문서 내 특정 위치로 이동</h4>
<p>
href 속성값으로 특정 문서의 위치로 이동하기 위해서는 글로벌 속성인 id를 지정하고 <br>
해당 아이디가 적용된 요소를 a 태그의 href 로 지정하면 클릭시 해당 id의 <br>
위치를 브라우저 상단에 놓는다.
</p>
<ul>
<li><a href="#section1">a 태그의 중요 속성</a></li>
<li><a href="#section2">텍스트 링크</a></li>
<li><a href="#section3">이미지 링크</a></li>
</ul>
</body>
</html>