1. HTML 기본 구조 태그
: HTML 문서의 버전을 지정하는 선언
: HTML5에서는 <!DOCTYPE html>만 사용하면 됨.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
<h1>안녕하세요!</h1>
</body>
</html>1. <html>
: HTML 문서의 루트(root) 요소
: lang 속성으로 문서의 언어를 지정할 수 있음.
2. <head>
: 문서의 메타데이터를 포함하는 부분
3. <title>
: 웹 브라우저의 탭 제목을 지정하는 태그
4. <meta>
: 문서의 정보를 설정하는 태그
charset, name, content, viewport 등의 속성을 설정 가능
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="이 페이지는 HTML 태그 설명 페이지입니다.">
5. <link>
: 외부 스타일시트(CSS)나 아이콘을 연결하는 태그
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
6. <style>
: 내부 CSS 스타일을 작성하는 태그
: 기본적으론 CSS에서 대부분 처리를 함.
: 우선순위에 따라서 때론 태그에서 해줘야할 때가 있음.
<h1 style = "color: blue">Hello Tag</h1>
7. <script>
: JavaScript 코드를 삽입하는 태그
: src 속성을 사용하면 외부 스크립트 연결 가능
<script>
alert("Hello, world!");
</script>
<script src="script.js"></script>2. 텍스트 관련 태그
1. <h1> ~ <h6>
: 제목을 표시하는 태그
: <h1>이 가장 크고 <h6>이 가장 작음.
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
2. <p>
: 문단을 나타내는 태그
3. <br>
: 줄바꿈을 하는 태그.(닫는 태그 없음)
4. <hr>
: 가로선 그리는 태그. (닫는 태그 없음)
<p>첫 번째 문장입니다.<br>두 번째 줄입니다.</p>
<hr>
<p>다음 문단입니다.</p>
5. <strong> / <b>
<strong> : 중요한 텍스트(기본적으로 굵게 표시됨)
<b> : 단순히 굵게 표시하는 태그
6. <em> / <i>
<em> : 강조하는 텍스트(기본적으로 기울임)
<i> : 단순히 기울임꼴로 표시
7. <mark>
: 하이라이트 효과(형광펜) 적용
8. <small>
: 작은 글씨 표시
9. <del>
: 취소선(삭제된 텍스트)
<p><strong>강조된 텍스트</strong>와 <b>굵은 텍스트</b></p>
<p><em>강조된 기울임</em>과 <i>단순 기울임</i></p>
<p><mark>하이라이트 표시</mark></p>
<p><del>삭제된 텍스트</del></p>
10. <sup> & <sub> (윗첨자 & 아랫첨자)
: <sup> : 윗첨자, 주로 수학이나 화학식에서 사용
: <sub> : 아랫첨자, 화학식 같은 곳에서 사용
<p>이것은 <sub>아래첨자</sub>입니다.</p>
<p>이것은 <sup>윗첨자</sup>입니다.</p>
11. <pre>
: 공백과 줄바꿈을 그대로 유지함
: 고정폭 글꼴(모노스페이스 폰트, 예: Courier New)로 출력됨
: CSS를 사용해서 변경 가능
<pre>
이 글은 여러 개의 공백을 사용했지만,
<pre> 태그 안에서는 그대로 유지됩니다.
</pre>
<p>
이 글은 여러 개의 공백을 사용했지만,
HTML에서는 공백이 하나로 변합니다.
</p>: P 태그는 여러 개의 공백을 하나의 공백으로 변환시켜 보여줌
: pre 태그는 작성한 그대로를 보여줌
3. 목록 관련 태그
1. <ul> (순서 없는 목록)
: 항목을 점(●)으로 표시하는 목록
<ul>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
</ul>
<ul style="list-style-type: disc;">
<ul style="list-style-type: square;">
<ul style="list-style-type: circle;">disc : 동그란 점
square : 네모난 점
circle : 중간이 비어있는 동그란 점
2. <ol> (순서 있는 목록)
: 번호가 매겨진 목록
<ol>
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
</ol>
<ol type="1">
<ol type="A">
<ol type="a">
<ol type="I">: type 지정한 부분이 잴 처음 부분
List 안에 List 가능
<ul>
<li>coffee
<ol type="1">
<li><a href="#">black</a></li>
<li>milk</li>
</ol>
</li>
<li>tea</li>
<li>soda
<ol type="1">
<li>cola</li>
<li>side</li>
</ol>
</li>
</ul>
3. <dl> (설명 목록)
: 용어와 설명을 짝지어 표현
<dl>
<dt>HTML</dt>
<dd>웹 페이지를 만드는 마크업 언어</dd>
<dt>CSS</dt>
<dd>웹 페이지의 스타일을 정의하는 언어</dd>
</dl>4. 링크 및 미디어 태그
1. <a> (링크)
: 다른 페이지로 이동하는 하이퍼링크
: 자신이 설계한 다음 페이지로도 넘어갈 수 있음.
<a href="https://www.google.com">구글로 이동</a>
<a href="index4.html">index4.html로 이동</a>
<a href="http://localhost:9000/index3.html">index3.html로 이동</a>
<a href="index2.html" target="_self">index2.html로 이동(현재창에서)</a>
<a href="index2.html" target=" _blank">index2.html로 이동(새로운창에서)</a>
2. <img> (이미지)
: 웹 페이지에 이미지를 삽입
<img src="image.jpg" alt="이미지 설명" width="300">src : 이미지 파일 경로
alt : 이미지가 안나왔을 시 대체용 텍스트
width, height : 가로, 세로 크기 조절( %(브라우저 창 크기 단위) / px(픽셀 단위) )
3. <audio> (오디오)
: 오디오 파일을 삽입
4. <video> (비디오)
: 동영상 삽입 가능
<video controls width="400">
<source src="video.mp4" type="video/mp4">
</video>
<video src="movie.mp4" poster="thumbnail.jpg" width="400" controls></video>
<video src="movie.mp4" preload="auto" controls></video>controls : 컨트롤 바 표시
autoplay : 자동 재생
loop : 반복 재생
muted : 음소거
poster="파일 이름" : 비디오가 재생되기 전에 표시할 이미지(포스터)를 설정하는 속성
preload : 비디오 데이터를 로드하는 방식을 결정하는 속성
auto : 페이지가 로드될 때 비디오를 자동으로 미리 로드함 (기본값)
metadata : 비디오 파일의 정보만 로드 (길이, 해상도 등)
none : 아예 미리 로드하지 않음, 사용자가 재생 버튼을 눌러야 로드함
5. <object> 기본형
: 오디오, 비디오, PDF등을 삽입할 때 사용
<object width="너비" height="높이" data="파일"></object>5. 테이블 관련 태그
1. <table> (표 생성)
border= "숫자" : 해당 속성으로 테두리 선 생성
2. <tr> (행)
3. <th> (헤더 셀)
4. <td> (데이터 셀)
5. <caption> (테이블의 제목)
<table border="1">
<caption>학생명단</caption>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>25</td>
</tr>
</table>rowspan="2" : 2개의 행 합치기
colspan="2" : 2개의 열 합치기
6. <thead> (Table Head)
: 테이블의 헤더(머리글) 부분을 정의하는 태그
: 보통 열(column)의 제목을 포함하는 <tr>(행)과 <th>(셀)를 포함
: <thead> 안의 내용은 스타일을 지정하거나, 테이블을 스크롤할 때 고정하는 등의 용도로 활용
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
</thead>
</table>
7. <tbody> (Table Body)
: 테이블의 본문(데이터) 부분을 정의하는 태그
: <tr> 태그를 포함하여 본문의 여러 행을 구성
: <thead>와 구분되어 있어 스타일을 다르게 적용하거나, 스크롤 기능을 활용할 수 있다.
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>30</td>
<td>개발자</td>
</tr>
<tr>
<td>이순신</td>
<td>45</td>
<td>장군</td>
</tr>
</tbody>
</table>
6. 폼 관련 태그
1. <form> (입력 폼)
action : 서버 프로그램 지정
method : get, post
name : JavaScript 폼 이름 지정
target : 열어볼 파일 위치 지정
2. <input> (사용자 입력)
: input은 같이 사용할 속성들이 많다.
: 상황에 따라 사용하면 된다.
3. <textarea> (멀티라인 입력)
rows : 세로줄 수(길 경우 스크롤 바 생성)
cols : 가로 너비
4. <button> (버튼)
submit : 폼을 서버로 전송
reset : 폼 초기화
5. <select> (드롭다운 목록)
: 선택 리스트
: 하나 또는 여러 개의 옵션을 선택할 수 있는 UI 요소
<form action="/submit" method="post">
<input type="text" name="username" placeholder="이름 입력">
<button type="submit">전송</button>
</form>: 하나 또는 여러 개의 옵션을 선택할 수 있는 UI 요소
6. <label>
: 입력 필드와 연결해서 클릭 시 자동으로 입력 필드로 포커스를 이동시킴
: 접근성을 향상시켜서 스크린 리더 같은 보조 기술이 필드 설명을 읽을 수 있도록 도와줌
<label for="username">아이디:</label>
<input type="text" id="username" name="username">
<label>
아이디: <input type="text" name="username">
</label>: for 속성의 값은 input 태그의 id와 동일해야 함
: 클릭 시 input 필드에 포커스가 자동 이동됨
: <label>이 input을 감싸면 자동으로 연결됨 (하지만 for 속성을 사용하는 방식이 더 명확함)
7. <fieldset>
: 그룹화
8. <legend>
: 그룹화 한 필드셋에 제목
간단한 실제 예제
<form action="default.jsp" method="post">
ID:<input type="text" name="id" placeholder="아이디" required /><br/>
PW:<input type="password" name="pw" placeholder="패스워드" required /><br/>
<input type="submit" value="로그인">
</form>action : 사용자가 입력한 데이터를 default.jsp로 전송함.( 즉, 폼을 제출하면 default.jsp 파일이 실행됨 )
name="id" : 입력한 값의 이름(name) → id라는 변수에 저장( 제출하면 default.jsp?id=사용자가 입력한 값 형태로 전송 )
placeholder="아이디" : 입력창 안에 "아이디"라는 힌트(예시 텍스트) 표시
<input type="submit"> : 제출 버튼( 클릭하면 default.jsp로 입력된 데이터(id, pw)를 전송 )
method="post" : get 방식을 사용하면 주소(URL)에 ID / PW가 노출될 수 있기때문에
: POST 사용( 데이터가 숨겨진 상태로 전송됨.(URL에 보이지 않음) )
required : 입력 필수 (비어 있으면 제출 안 됨)
HTML) input 태그 & select 태그 & textarea 태그 주요 타입 및 속성 이해
1. input 태그타입설명text한 줄 텍스트 입력number숫자 입력date날짜 입력color색상 선택range슬라이더 형태 입력button버튼 생성radio단일 선택 버튼 checkBox 체크 박스 버튼 생성 1. text 타입text입력: 2. nu
pogun.tistory.com
7. HTML 레이아웃 태그
1. <header> (머리글)
: 문서나 섹션의 머리 부분을 나타냄.
: 로고, 내비게이션, 제목 등을 포함할 수 있음.
<header>
<h1>내 블로그</h1>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">연락처</a></li>
</ul>
</nav>
</header>
2. <footer> (꼬리글)
: 문서나 섹션의 하단 정보를 나타냄.
: 저작권 정보, 연락처, 사이트맵 등을 포함할 수 있음.
<footer>
<p>© 2025 내 블로그. 모든 권리 보유.</p>
<a href="mailto:contact@example.com">문의하기</a>
</footer>
3. <section> (섹션)
: 하나의 주제를 가진 콘텐츠 그룹을 만들 때 사용
: <article>과 달리 독립적인 내용이 아닐 수도 있음.
<section>
<h2>최신 뉴스</h2>
<p>오늘의 주요 뉴스입니다.</p>
</section>
4. <article> (독립적인 콘텐츠)
: 독립적으로 배포할 수 있는 콘텐츠를 의미함.
: 블로그 글, 기사, 댓글, 포스트 등에 사용됨.
<article>
<h2>HTML 태그 정리</h2>
<p>오늘은 HTML의 주요 태그에 대해 배워볼 거예요.</p>
</article>
5. <aside> (사이드바, 보조 콘텐츠)
: 본문과 관련된 보조 정보를 제공하는 태그
: 광고, 추천 링크, 사이드바 메뉴 등에 사용됨.
<aside>
<h3>관련 글</h3>
<ul>
<li><a href="#">CSS 기본 가이드</a></li>
<li><a href="#">JavaScript 개념 정리</a></li>
</ul>
</aside>
6. <div> (레이아웃 구분)
: 특별한 의미 없이 레이아웃을 만들 때 사용됨.
: CSS와 함께 사용하여 스타일을 적용할 때 유용함.
<div class="container">
<div class="box">박스 1</div>
<div class="box">박스 2</div>
</div>
7. <span> (인라인 요소)
: 특정 부분만 스타일을 적용할 때 사용하는 태그
: <div>와 다르게 인라인 요소이며, 블록을 만들지 않음.
<p>이 문장에서 <span style="color: red;">강조된 부분</span>입니다.</p>
레이아웃 활용한 예제 : 쉽게 이해하기 위함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 구조</title>
</head>
<body>
<header>
<h1>내 블로그</h1>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">연락처</a></li>
</ul>
</nav>
</header>
<div>
<main>
<section>
<h2>최신 뉴스</h2>
<article>
<h3>HTML 태그 정리</h3>
<p>오늘은 HTML의 주요 태그에 대해 배워볼 거예요.</p>
</article>
</section>
</main>
<aside>
<h3>관련 글</h3>
<ul>
<li><a href="#">CSS 기본 가이드</a></li>
<li><a href="#">JavaScript 개념 정리</a></li>
</ul>
</aside>
</div>
<footer>
<p>© 2025 내 블로그. 모든 권리 보유.</p>
</footer>
</body>
</html>그 외 자주 사용하는 태그
1. <nav> (네비게이션)
: 주요 링크 목록을 감싸는 태그
: 사이트 내 메뉴, 내비게이션 바를 만들 때 사용
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">연락처</a></li>
</ul>
</nav>
2. <figure> & <figcaption> (이미지 설명)
<figure> : 이미지나 차트를 감싸는 태그
<figcaption> : 이미지 설명을 추가하는 태그
<figure>
<img src="image.jpg" alt="설명 이미지">
<figcaption>이것은 이미지의 설명입니다.</figcaption>
</figure>
3. <code> (코드 블록)
: 프로그래밍 코드를 표시할 때 사용
<p>JavaScript 예제:</p>
<code>console.log("Hello, World!");</code>
4. <abbr> (약어 설명)
: 마우스를 올리면 약어의 전체 의미를 표시함.
<p><abbr title="World Health Organization">WHO</abbr>는 국제 보건 기구입니다.</p>
5. <cite> (출처 표시)
: 책, 논문, 기사 등의 출처를 표시할 때 사용
<p>웹 개발을 배우려면 <cite>HTML & CSS Guide</cite> 책이 유용합니다.</p>
6. <address> (연락처 정보)
: 주소나 연락처를 표시하는 태그
<address>
이메일: <a href="mailto:contact@example.com">contact@example.com</a><br>
전화번호: 010-1234-5678
</address>
7. <progress> (진행 상태 표시)
: 진행률을 나타내는 태그
<label for="progress">진행률:</label>
<progress id="progress" value="70" max="100"></progress>
8. <meter> (범위 값 표시)
: 특정 값이 범위 내에서 어디에 위치하는지 표시하는 태그
<meter value="7" min="0" max="10">7/10</meter>
9. <details> & <summary> (숨길 수 있는 내용)
<details> : 클릭하면 내용을 펼칠 수 있음.
<summary> : 기본으로 보이는 제목 부분
<details>
<summary>더보기</summary>
<p>여기에 숨겨진 내용이 있습니다!</p>
</details>
10. <time> (날짜 및 시간 표시)
: 날짜와 시간을 명확하게 표시할 때 사용
<p>이 이벤트는 <time datetime="2025-02-12">2025년 2월 12일</time>에 열립니다.</p>
11. <iframe> (웹페이지 안에 다른 웹페이지를 삽입)
: 하나의 웹페이지 안에서 다른 페이지, 문서, 동영상 등을 불러올 수 있다.
<iframe src="https://www.example.com" width="600" height="400"></iframe>src : 불러올 웹페이지 URL
가로 & 세로 크기 : 픽셀 또는 %
frameborder : 테두리 표시(0 : 없음 / 1 : 표시)
allowfullscreen : 전체 화면 보기 허용
sandbox : 보안 제어 (예: sandbox="allow-scripts")
<iframe src="index8.html" width="320" height="240"></iframe>
<!-- CGV 홈페이지 -->
<iframe src="https://www.cgv.co.kr" width="320" height="240"></iframe>
<!-- 유튜브 동영상 -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
<!-- 구글 지도 -->
<iframe
width="600"
height="450"
style="border:0"
loading="lazy"
allowfullscreen
src="https://www.google.com/maps/embed?...">
</iframe>: 특정 홈페이지는 X-Frame-Options 설정으로 <iframe>로 삽입이 차단될 가능성이 있음!!
'Front > HTML' 카테고리의 다른 글
| HTML) 화면 나누기 : div 태그 / 시멘틱 태그(Semantic Tag) (0) | 2025.02.18 |
|---|---|
| HTML) input 태그 & select 태그 & textarea 태그 주요 타입 및 속성 이해 (0) | 2025.02.14 |