* Chapter 1~2는 웹 개발환경 만드는 과정
Chapter 3 HTML 기본 문서 만들기
- HTML 문서의 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹 개발 입문</title>
</head>
<body>
<h1>웹 개발 기초</h1>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>
</html>
- 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻
- <html> ~ </html> : 웹 문서의 시작과 끝을 나타내는 태그
- <head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분.
<head> 태그 안에 주로 쓰는 태그로 <meta> 태그가 있는데 <meta> 태그중 하나로, 한글을 제대로 표기하기 위해서는 <meta charset=“UTF-8”>를 <head> 태그 안에 넣어줘야 함.
- <body> ~ </body> : 실제로 웹 브라우저 화면에 나타나는 내용
웹 문서 구조를 만드는 시맨틱(의미가 통하는) 태그
=> HTML의 태그는 그 이름만 봐도 의미를 알 수 있어 시맨틱 태그라고 한다.
<header> : 헤더 영역을 의미. 주로 맨 위쪽이나 왼쪽에 위치
<nav> : 네비게이션을 의미, 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다. 헤더 태그안에 포함됨.
<main> : 웹 문서에서 핵심이 되는 내용을 넣는다. 웹 문서마다 다르게 보여 주는 내용으로 구성함. <main> 태그는 웹 문서에서 한 번만 사용할 수 있음.
<article> : 독립적인 콘텐츠를 담음
<section> : 콘텐츠 영역
<aside> : 사이드 바 영역
<footer> : 웹 문서에서 맨 아래쪽에 있는 영역. 사이트 제작 정보나 저작권 정보, 연락처 등을 넣음.
<div> : 여러 소스를 묶는 태그. 영역을 구별하거나 스타일로 문서를 꾸밀 때 사용.
Chapter 4 웹 문서에 다양한 내용 입력하기
- 텍스트를 입력할 때 사용하는 태그들
<h1> : 제목을 뜻하는 heading을 줄인 말. h1이 가장 크기가 크고 h6이 가장 작음
<p> : 단락. 해당 텍스트 앞 뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐.
<br> : 줄바꿈. 단독으로 사용하므로 닫는 태그가 필요 없음.
<strong> : 굵은 글씨. 강조의 의미가 있음.
<b> : bold체, 진한 글씨. strong과 거의 같으나 강조의 의미는 없음.
<hr> : 가로줄을 넣어줌. 닫는 태그가 없음.
<ol> : ordered list, 순서가 있는 목록.
<ul> : unordered list, 순서가 없는 목록.
<li> : list,
<dl> : description list, 이름과 값의 형태로 된 목록을 말한다.
<dl> 태그 사이에는 한 쌍의 <dt> 태그와 <dd> 태그를 넣는데, <dt>태그 하나에 <dd> 태그를 여러 개 사용할 수도 있다.
<blockquote> : 인용문, 다른 텍스트 단락보다 안으로 들여 쓴 상태가 됨.
- 표 만들기
표의 구성 요소 태그
<caption> : 표 제목
<table> : 표 전체를 감싼다
<tr> : table row, 행
<td> : table cell, 셀
<th> : table head, 제목에 해당하는 셀
표의 속성
행을 합칠 때 : <td rowspan="합칠 셀의 개수">셀의 내용</td>
열을 합칠 때 : <td clospan="합칠 셀의 개수">셀의 내용</td>
- 이미지 삽입하기
<img src=“” alt=“” width=“” >
- 오디오와 비디오 삽입하기
<audio src=“오디오 파일 경로”></audio>
<video src=“비디오 파일 경로”></audio>
<audio>태그와 <video> 태그의 속성
controls : 컨트롤 바를 지원
autoplay : 자동재생,
loop : 반복재생
muted : 소리 제거
preload : 파일을 어ᄄᅠᇂ게 로딩할 것인지
width, height : 비디오 플레이어의 너비와 높이를 지정
poster=“파일 이름” : <video> 태그에서 사용하는 속성으로, 비디오가 재생되기 전에 표시할 포스터 이미지를 지정
- 하이퍼링크 삽입하기
<a href="링크할 주소"> 텍스트 또는 이미지 </a>
출처 : Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석
'HTML & CSS' 카테고리의 다른 글
| 220418 CSS Chapter 9 (0) | 2022.04.18 |
|---|---|
| 220416 CSS Chapter 8 (0) | 2022.04.16 |
| 220415 CSS Chapter 6~7 (0) | 2022.04.16 |
| 220414 HTML Chapter 5 (0) | 2022.04.14 |
| 220408 HTML 기초 (0) | 2022.04.09 |