# HTML 콘텐츠
1. 제목 태그 <h1> ~ <h6>
문서 구획 제목을 나타내는 태그
구역의 순서, 계층을 잘 지켜야 함
<h1> 태그는 페이지 내에 한번만 사용되어야 함
<!DOCTYPE html>
<!-- 문서 버전 -->
<html lang="en">
<!-- HTML 문서 시작 선언 및 문서 기본 언어 설정 -->
<head>
<!-- 문서에 필요한 정보가 기입되는 곳 <head></head> -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML만들어보기</title>
<link rel="stylesheet" href="style.css" />
<!-- 문서 제목 -->
</head>
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
</body>
</html>
- 줄 단위 복사 단축키 : alt + shift + 방향키
2. 문단 태그 <p>
문단을 나타내는 태그, 블록 레벨 요소
레이아웃처럼 사용하면 X
3. 서식 태그 <b>, <strong>, <i>, <em>, <u>, <s>, <del>
<b> : 의미를 가지지 않고 단순히 굵은 글씨로 변경, 인라인 레벨 요소
<strong> : 굵은 글씨로 변경 후 강조의 의미 부여, 인라인 레벨 요소
<i> : 글자를 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우 사용
ex ) 등장인물, 외국어 구줄, 기술 용어 등
<em> : 기울임과 내용에 강조 의미 부여
<u> : 밑줄을 넣어서 주석을 가지는 단어임을 나타냄
단순하게 밑줄 긋는 용도로 사용하면 안됨
만약 단순하게 글자 밑에 밑줄을 넣고 싶다면?
<span> 태그와 같은 태그 사용 후 CSS로 밑줄 넣어주어야 함
<s> : 단순히 시각적인 취소선만 추가
<del> : 문서에서 제거된 텍스트를 나타냄, <ins> 태그를 함꼐 사용하면 제거된 텍스트 옆에 추가된 텍스트 표현 가능
<!DOCTYPE html>
<!-- 문서 버전 -->
<html lang="en">
<!-- HTML 문서 시작 선언 및 문서 기본 언어 설정 -->
<head>
<!-- 문서에 필요한 정보가 기입되는 곳 <head></head> -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML만들어보기</title>
<link rel="stylesheet" href="style.css" />
<!-- 문서 제목 -->
</head>
<body>
<h1>제목1</h1>
<p>문단태그</p>
<p>문단태그</p>
<p>문단태그</p>
<br />
<b>굵은 글씨</b>
<br />
<strong>굵은 글씨 + 강조</strong>
<br /><br /><br />
<i>기울어집니다</i>
<br />
<em>기울어집니다 + 강조</em>
<br /><br /><br />
<u>밑줄 그려주세요</u>
<br />
<s>취소선</s>
<br />
<del>삭제된 단어</del>
<br />
<ins>추가된 단어</ins>
</body>
</html>
<a> : 클릭하면 페이지를 이동할 수 있는 링크 요소 만드는 태그
href 속성 사용해서 이동하고자 하는 파일 혹은 URL 작성
target 속성 사용해서 이동해야 할 링크를 새 창, 현재창 등 원하는 타겟 지정
<a href="https://www.naver.com" target="_blank">네이버로 이동</a>
# 멀티미디어
<img> : 문서 내에 이미지를 넣을 수 있는 태그
-> src 속성 사용 이미지 경로 넣음
-> alt 속성 사용 이미지 로딩 문제 발생 시 대체 텍스트 띄움, 꼭 작성해주어야 함
<figure>, <figcaption> : 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그
<figure> 태그 안에 이미지, 오디오 등 태그를 넣고 figcaption태그로 설명을 달아줌
<video> : 문서 내 영상 첨부 태그
-> src 속성 사용 비디오를 문서 내 첨부
-> poster 속성 사용 비디오가 로드되기 전 포스터 보여줌
-> source 태그 사용 여러 타입 비디오 제공
<audio> : 문서 내 소리 첨부
-> src 속성 사용 문서 내 소리 첨부
-> controls 속성 사용 재생/정지 버튼 컨트롤러 띄움
controls 속성 사용하지 않으면 기본적으로 화면에 보이지 않음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>멀티미디어 만들기</title>
<link rel="stylesheet" href="chapter05.css" />
</head>
<body>
<img src="assets/image1.jpg" alt="펭수입니다" />
<br /><br /><br />
<video src="assets/192357 (1080p).mp4" width="200" autoplay>
비디오가 재생 안 되면 보이는 글씨입니다
</video>
<!-- video 태그 안에 source 태그를 사용하여
src에 넣고자하는 비디오의 주소, type 속성에 해당 비디오의 확장자를
입력해주면 브라우저가 자동으로 재생해줌 -->
<br /><br /><br />
<audio controls src="assets/once-in-paris-168895.mp3"></audio>
<br /><br /><br />
<figure>
<img src="assets/image1.jpg" alt="펭수입니다" />
<figcaption>펭수 사진입니다</figcaption>
</figure>
<!-- figure 태그는 블럭 레벨 요소 -->
</body>
</html>
<svg> : 그래픽으로 만들어진 이미지
수학 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않아 확대/축소 자유로움
크기를 자주 바꾸어야 하는 작은 아이콘에서 많이 사용
viewBox="x축 y축 가로길이 세로길이"
width, height는 태그 자체의 가로, 세로 크기
- 동일한 문자 편집 단축기 : control + d
# 새롭게 배운 것 & 깨달은 것
제대로 알지 못하고 사용했던 태그들에 대해서 정확한 용도와 사용법에 대해 알 수 있었다
'TIL > 프로그래머스 데브코스' 카테고리의 다른 글
| 클라우딩 어플리케이션 엔지니어링 TIL Day 4 (2) (1) | 2023.12.22 |
|---|---|
| 클라우딩 어플리케이션 엔지니어링 TIL Day 4 (1) (0) | 2023.12.22 |
| 클라우딩 어플리케이션 엔지니어링 TIL Day 3 (2) (0) | 2023.12.21 |
| 클라우딩 어플리케이션 엔지니어링 TIL Day 2 (0) | 2023.12.19 |
| 클라우딩 어플리케이션 엔지니어링 TIL Day 1 (0) | 2023.12.19 |
