1. HTML 구조 및 기본 태그
HTML 문서는 웹 페이지의 기본 구조를 정의하는 마크업 언어이다. 모든 HTML 문서는 다음과 같은 기본 구조를 가진다.
<!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>
<!-- 웹 페이지 내용 -->
</body>
</html>
DOCTYPE
<!doctype html>
HTML 문서는 최상단에 항상 위 태그를 사용해야한다. 해당 문서를 브라우저가 다르게 렌더링 하지 않도록 하기 위해 HTML 문서임을 알려주는 태그이다.
<html>
문서 범위 설정 태그로 html 문서는 해당 태그로 오픈한 후 작성되어야 하고 맨 마지막에 해당 태그로 닫아야한다.
<html lang="ko">
속성
- lang: 문서 언어 설정 (ko, en ...)
<head>, <body>
head 태그 안에는 html 문서 전체를 대표하거나, html 문서 전체에서 필요한 데이터를 넣는다. head 태그 안에서 사용되는 주요 태그는 title, meta 태그가 있다. body 태그 안에는 html 문서에 표시되는 내용을 넣는다.
<head>
</head>
<body>
</body>
<title>
html 문서 제목을 의미한다. 주로 해당 웹페이지를 보여주는 웹브라우저 상단에 표시한다.
<title>문서 제목</title>
<meta>
문서 전반에 걸친 정보를 표시하기 위한 설정
<meta name="description" content="HTML 문서에 대한 설명">
<meta name="keywords" content="HTML, CSS, JAVASCRIPT">
<meta name="author" content="yundoun">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> // 호환성 관련 태그
속성
- charset: 문자 인코딩 설정 (utf-8, euc-kr ...)
- name: 메타 정보 이름 (author: 저자 이름, description: HTML 문서 설명 등)
2. 텍스트 관련 태그
<h1> ~ <h6>
제목 태그이다. h1은 제목1, h6는 제목6 으로 제목 폰트 사이즈 차이가 존재한다. 웹브라우저 호환성을 위해 태그에 표현 서식이 들어 있는 경우는 모두 삭제하고 css style을 별도로 적용하는 방식을 많이 사용한다.
<h1>가장 큰 제목</h1>
<h2>두 번째 큰 제목</h2>
<h3>세 번째 큰 제목</h3>
<h4>네 번째 큰 제목</h4>
<h5>다섯 번째 큰 제목</h5>
<h6>가장 작은 제목</h6>
<p>
문단을 표시하는 태그이다. 하나의 문단을 정의하며 자동으로 앞뒤에 여백이 추가된다.
<p>문단을 나타내는 태그입니다.</p>
<div>
Division의 약자로, HTML 문서의 특정 영역을 지정하는데 사용된다. 블록 레벨 요소로 새로운 줄에서 시작하며 사용 가능한 전체 폭을 차지한다.
<div class="container">
<div class="header">헤더 영역</div>
<div class="content">컨텐츠 영역</div>
<div class="footer">푸터 영역</div>
</div>
<span>
텍스트의 특정 부분을 묶는 인라인 요소이다. div와 달리 줄바꿈이 되지 않고 필요한 영역만큼만 차지한다.
<span>인라인 텍스트를 묶는 태그입니다.</span>
<strong>
텍스트를 굵게 표시하여 강조한다. 강한 중요성, 중대함 혹은 긴급한 내용임을 나타내며 단지 굵게 표시하기 위해서 사용해서는 안된다.
<strong>굵은 글씨로 강조합니다.</strong>
<em>
텍스트를 이탤릭체로 표시하여 강조한다.
<em>이탤릭체로 강조합니다.</em>
3. 리스트 태그
<ul>, <ol>, <li>
리스트 관련 태그로서 모던 웹에서 많이 사용된다. ol 태그는 순서가 있는 리스트, ul은 순서가 없는 리스트를 나타내며, ol과 ul 내에 li 태그를 사용해서 각 리스트 아이템을 표시한다.
순서가 있는 리스트
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>
순서가 없는 리스트
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
4. 링크 및 미디어 태그
<a>
하이퍼링크를 설정하는 태그
<a href="index.html" target="_blank">링크를 넣을 문자열</a>
속성
- href : 하이퍼링크 URL (하이퍼링크 외 전화번호, 이메일 주소 기입 가능)
- target : 링크된 URL 이동 방법 지정 (_self : 현재 브라우저에 띄움, _blank: 새로운 브라우저 탭에 띄움)
<img>
이미지 삽입 태그
<img src="tmp.jpg" alt="이미지 대체 텍스트">
속성
- src : 이미지 파일 위치 (상대경로 또는 절대경로로 설정)
- alt : 이미지 대체 텍스트 (alt는 웹 접근성을 높이는 필수 속성, 구글 SEO 문서에서도 alt를 필수 권장함)
<audio>
audio 태그는 음악이나 오디오 스트림과 같은 사운드를 정의할 때 사용한다.
<html>
<body>
<audio src="assets/audio/Kalimba.mp3" controls></audio>
</body>
</html>
속성
- src : 음악 파일 경로
- preload : 재생 전에 음악 파일을 모두 불러올 것인지 지정
- autoplay : 음악 파일을 자동의 재생 개시할 것인지 지정
- loop : 음악을 반복할 것인지 지정
- controls : 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.
<video>
비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입한다. 오디오에서도 사용할 수 있으나, <audio> 요소가 사용자 경험에 좀 더 적합하다.
<html>
<body>
<video width="640" height="360" controls>
<source src="assets/video/wildlife.mp4" type="video/mp4">
<source src="assets/video/wildlife.webm" type="video/webm">
</video>
</body>
</html>
속성
- src : 동영상 파일 경로
- poster : 동영상 준비 중에 표시될 이미지 파일 경로
- preload : 재생 전에 동영상 파일을 모두 불러올 것인지 지정
- autoplay : 동영상 파일을 자동의 재생 개시할 것인지 지정
- loop : 동영상을 반복할 것인지 지정
5. 테이블 태그
<table> : 표를 감싸는 태그 <tr> : 표 내부의 행 (table row) <th> : 행 내부의 제목 셀 (table heading) <td> : 행 내부의 일반 셀 (table data) <tbody> : 표의 내용을 나타내는 각 행들을 표시
→ <thead>, <tbody>, <tfoot>은 html5에서 정의된 태그로, <tr>과 <td>로만 구성해도 문제는 없음 그러나 thead나 tfoot은 표에서 한 번도 안나오거나, 한 번만 나와야함. tfoot은 thead보다 뒤에 위치해야한다.
<table>
<thead>
<tr>
<th>제목 열1</th>
<th>제목 열2</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용 열1</td>
<td>내용 열2</td>
</tr>
<tr>
<td>내용 열3</td>
<td>내용 열4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>표의 마지막 열1</td>
<td>표의 마지막 열2</td>
</tr>
</tfoot>
</table>
속성
- colspan : tr 태그에서 사용, 열을 확장
- rowspan : td 태그에서 사용, 행을 확장
<table>
<tr>
<td colspan="2">열 확장</td>
</tr>
<tr>
<td>열1</td>
<td>열2</td>
</tr>
</table>
<table>
<tr>
<td rowspan="2">행 확장</td>
<td>열1</td>
</tr>
<tr>
<td>열2</td>
</tr>
</table>
6. 폼 태그
<form>
사용자 입력을 받는 태그로 input 태그 등과 같이 사용됨
속성
- action : 사용자 입력 받은 데이터를 처리할 URL
- method : HTTP method (post 또는 get)
- target : 링크된 URL 이동 방법 지정
<input>
사용자 데이터를 입력받는 주요 태그
속성
- type : 사용자 입력 받는 인터페이스 설정
- maxlength : 사용자 입력 문자열 최대 길이
- minlength : 사용자 입력 문자열 최소 길이
- autofocus : 페이지 로드시, 해당 사용자 입력창에 커서가 자동으로 놓이도록 하는 설정
- autocomplete : 자동완성 기능 설정
<form action="login.html" method="post">
ID: <input type="text" name="id">
PW: <input type="text" name="pw">
</form>
<textarea>
textarea 태그는 여러 줄의 글자를 입력할 때 사용한다.
<html>
<body>
<textarea
name="message"
rows="10"
cols="30">
Write something here
</textarea>
</body>
</html>
<button>
button 태그는 클릭할 수 있는 버튼을 생성한다. <input type="button"> 과 유사하지만 input 태그는 빈 태그인 반면에 button 태그는 그렇지 않다. 따라서 button 요소에는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다.
type 속성은 반드시 지정하는 것이 바람직하며 속성값으로 button, reset, submit을 지정할 수 있다
<html>
<body>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<input
type="button"
value="Click Me!"
onclick="alert('Hello world!')"
/>
</body>
</html>
<label>
사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용한다. 사용자 인터페이스 항목의 설명을 나타낸다. 주로 form 요소의 이름표를 정의할 때 많이 사용된다. 해당 입력 필드가 어떤 정보를 입력해야 하는지 사용자에게 알려준다.
<form>
<div>
<label for="name">이름:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="email">이메일:</label>
<input type="email" id="email" name="email">
</div>
<div>
<label>
<input type="checkbox" name="subscribe">
뉴스레터 구독하기
</label>
</div>
</form>
속성
- for : label과 form 요소를 연결시키는 속성, form 요소의 id 값과 동일해야 함
- form : label이 속한 form을 지정, form의 id 값을 지정
<select>, <option>
드롭다운 목록을 만들 때 사용되는 태그이다.
<select name="fruits" multiple size="3">
<option value="apple">사과</option>
<option value="banana" selected>바나나</option>
<option value="orange">오렌지</option>
<option value="grape" disabled>포도</option>
</select>
select의 속성
- name : 폼 데이터로 전송될 때 사용되는 이름
- multiple : 다중 선택이 가능하도록 설정
- disabled : 비활성화 상태로 설정
- required : 필수 입력 항목으로 설정
- size : 한 번에 보여질 옵션의 개수
option의 속성
- value : 서버로 전송될 값
- selected : 기본 선택값으로 지정
- disabled : 선택 불가능하도록 설정
7. Semantic Web
시멘틱 웹이란, 웹페이지 각 요소에 의미를 부여해서, 단순 키워드 중심 검색을 뛰어넘어 '의미'와 '관련성'을 기반으로 보다 진보된 검색 또는 서비스가 가능토록 하는 시도. 이를 통해서 검색엔진 최적화(SEO)와 웹 접근성을 향상시킬 수 있다.
시맨틱 웹 태그
- header : 헤더를 의미한다
- nav : 네비게이션을 의미한다
- aside : 옆에 위치하는 부분을 의미한다
- section : 본문의 여러 내용(article)을 포함하는 부분을 의미한다
- article : 본문의 주내용이 들어가는 부분을 의미한다
- footer : 하단부를 의미한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시맨틱 태그 예시</title>
</head>
<body>
<!-- 헤더 영역: 로고, 네비게이션 등 -->
<header>
<h1>회사 로고</h1>
<!-- 네비게이션 영역: 메인 메뉴 -->
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#services">서비스</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
<!-- 메인 컨텐츠 -->
<main>
<!-- 섹션: 독립적인 컨텐츠 영역 -->
<section id="about">
<h2>회사 소개</h2>
<!-- 아티클: 독립적으로 사용 가능한 컨텐츠 -->
<article>
<h3>우리의 비전</h3>
<p>혁신적인 기술로 더 나은 미래를 만듭니다.</p>
</article>
</section>
<section id="services">
<h2>서비스</h2>
<article>
<h3>웹 개발</h3>
<p>최신 기술을 활용한 웹 개발 서비스를 제공합니다.</p>
</article>
</section>
<!-- 사이드바: 부가적인 컨텐츠 -->
<aside>
<h3>최근 소식</h3>
<ul>
<li>신규 서비스 출시</li>
<li>업데이트 안내</li>
</ul>
</aside>
</main>
<!-- 푸터 영역: 저작권, 연락처 등 -->
<footer>
<p>© 2025 회사명. All rights reserved.</p>
<address>
<p>연락처: contact@example.com</p>
<p>주소: 서울시 강남구</p>
</address>
</footer>
</body>
</html>
8. 그래픽 태그
<canvas>
<canvas> 는 HTML5에서 도입된 그래픽 요소로, Javascript를 사용하여 동적으로 그래픽을 그릴 수 있는 컨테이너이다.
기본 사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas 예제</title>
<script>
function draw() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// 빨간 사각형 그리기
ctx.fillStyle = 'rgb(200,0,0)';
ctx.fillRect(10, 10, 50, 50);
// 반투명 파란 사각형 그리기
ctx.fillStyle = 'rgba(0,0,200,0.5)';
ctx.fillRect(30, 30, 50, 50);
}
}
</script>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body onload="draw();">
<canvas id="myCanvas" width="150" height="150">
이 브라우저는 canvas를 지원하지 않습니다.
</canvas>
</body>
</html>
속성
- width : 기본 300px (선택사항)
- height : 기본 150px (선택사항)
주의사항
- 닫는 태그 필수
- CSS 크기 조절 시 왜곡 주의
- 브라우저 지원 여부 확인 필요
- 대체 콘텐츠 제공 권장
<SVG>
확장 가능한 벡터 그래픽을 정의하는 태그이다.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
속성
- width : SVG 요소의 너비
- height : SVG 요소의 높이
- viewBox : SVG 뷰포트의 크기와 위치 정의
- preserveAspectRatio : 종횡비 유지 여부 설정
도형 요소 사용 예시
<!-- 원 -->
<circle cx="50" cy="50" r="40"/>
<!-- 사각형 -->
<rect x="10" y="10" width="80" height="80"/>
<!-- 선 -->
<line x1="0" y1="0" x2="100" y2="100"/>
<!-- 다각형 -->
<polygon points="50,0 100,100 0,100"/>
<!-- 경로 -->
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30"/>
9. 참고자료
https://www.inflearn.com/course/프런트엔드-풀스택-2
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2] 강
잔재미코딩 DaveLee | 현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이
www.inflearn.com
웹 프로그래밍 튜토리얼 | PoiemaWeb
Front-end Development Tutorial
poiemaweb.com
https://developer.mozilla.org/ko/docs/Web/HTML/Element
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. 필요로 하는 요소를 쉽게 찾을 수 있도록 기능별로 분류했으며, 각각의 요소 참조 페이지 사이드바에서는 사전 순
developer.mozilla.org
'HTML, CSS, Javascript' 카테고리의 다른 글
| CSS의 레이아웃 (1) | 2025.01.22 |
|---|---|
| CSS 기본 개념 (1) | 2025.01.19 |