Tag 종류
h태그 < h >
: 제목(heading)을 나타내는 데 사용되는 요소
-h태그는 HTML 문서의 구조와 계층을 정의하며, h1부터 h6까지 총 6가지
P태그 < p >
: 문단(paragraph)을 나타내는 요소
-웹 페이지에서 텍스트를 그룹화하고 구조화하는 데 사용
br 태그 < br >
: 텍스트를 강제로 줄바꿈합니다.
hr 태그 < hr >
: 수평선을 삽입
span 태그 < span >
: 인라인 스타일
-특정 텍스트에 CSS 스타일을 적용하기 위해 사용
글씨를 꾸미는 데 사용할 수 있는 태그
- < b > : 굵은 글씨
- < strong > : 중요한 강조
- < i > : 기울임 글씨
- < em > : 강조 (기울임 포함)
- < mark > : 텍스트에 형광펜 효과
- < u > : 밑줄
- < pre > : 서식 있는 텍스트
- < s > : 취소선
Tag 종류에 대해 배워보자!
두번째
세번째
네번째
다섯번재
여섯번째
여기는 본문 영역. ~~~~~~~
여기도 본문 영역. ~~~~~~~~~
<h1>Tag 종류에 대해 배워보자!</h1>
<h2>두번째</h2>
<h3>세번째</h3>
<h4>네번째</h4>
<h5>다섯번재</h5>
<h6>여섯번째</h6>
<p>여기는 본문 영역. ~~~~~~~ </p>
<br/>
<br/>
<br/>
<p>여기도 본문 영역. ~~~~~~~~~</p>
ul 태그 < ul >
: "순서 없는 목록"을 나타내는 데 사용
- disc (기본값) : 채워진 원 모양의 불릿.
- circle : 비어 있는 원 모양의 불릿.
- square : 채워진 정사각형 모양의 불릿.
오늘의 할 일
- HTML 공부하기
- 운동하기
- CSS 예습하기
- HTML 공부하기
- 운동하기
<h3>오늘의 할 일</h3>
<ul type="square">
<li>HTML 공부하기</li>
<li>운동하기</li>
<li>CSS 예습하기</li>
</ul>
<ul type="circle">
<li>HTML 공부하기</li>
<li>운동하기</li>
</ul>
ol 태그 < ol >
: 순서 있는 목록"을 나타내며, 여러 속성을 통해 번호 스타일과 동작을 제어할 수 있음
- type 속성
- 1 : 기본 숫자 (1, 2, 3, ...)
- a : 소문자 알파벳 (a, b, c, ...)
- A : 대문자 알파벳 (A, B, C, ...)
- i : 소문자 로마 숫자 (i, ii, iii, ...)
- I : 대문자 로마 숫자 (I, II, III, ...)
-
start 속성
: 목록 시작 번호를 지정합니다.
ex) < ol start="5" >
-
reversed 속성
: 목록을 역순으로 표시합니다.아이스커피 레시피
- 얼음을 150ml컵에 담는다
- 샷을 내린다
- 에스프레소 샷을 넣어주면
- 완성!
디카페인도 가능합니다
<h3>아이스커피 레시피</h3>
<ol type="A" start="4" reversed>
<li><strong>얼음</strong>을 <em>150ml</em>컵에 담는다 </li>
<li><b>샷</b>을 내린다</li>
<li><i>에스프레소 샷</i>을 넣어주면</li>
<li><u>완성!</u><del>디카페인도 가능합니다</del></li>
</ol>
목록 태그의 중첩 사용
음식
- 양식
- 파스타
- 스테이크
- 한식
- 제육볶음
- 김치찌개
- 일식
- 초밥
- 라멘
<h3>음식</h3>
<ul>
<li>양식
<ul>
<li>파스타</li>
<li>스테이크</li>
</ul>
</li>
<li>한식
<ul>
<li>제육볶음</li>
<li>김치찌개</li>
</ul>
</li>
<li>일식
<ul>
<li>초밥</li>
<li>라멘</li>
</ul>
</li>
</ul>
img 태그
: 웹 페이지에 이미지를 삽입할 때 사용
-src : 이미지를 불러올 경로(URL 또는 파일 경로)
ex) < img src="image.jpg" >
-
상대경로 : 현재 위치를 기준으로 하는 상대적인 경로
-프로젝트의 위치가 바뀌어도 그대로 사용할 수 있다는 장점.
-목적 파일(불러올 사진)의 위치가 바뀐다면 상대경로를 수정해야하는 단점
ex) ./src/img/img.png
-
절대경로 : root(맨처음 최상단)부터 해당 파일까지의 경로
-내 로컬 환경 에서는 어는 곳에서든 접근 가능하다는 것이 장점.
-다른 로컬에서는 절대 경로가 실제로 동일해야만 접근이 가능하다는것이 단점
-ex) http://www.naver.com, c:/User/... -
a tag target attribute : 링크가 열릴 위치 지정
-_self (default) : 현재 탭에서 열기
-_blank : 새탭으로 열기
-ex) < a href="http://www.naver.com"target="_blank" >
<h2>img 태그</h2>
<img src="./image/다운로드.webp" alt="새싹" width="400" height="300">
<br>
<img src="C:/Users/jylee/Downloads/다운로드.webp" alt="새싹">
<br>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kK">
<hr>
<a href="http://www.naver.com">네이버 바로가기</a>
<a href="http://www.naver.com" target="_blank">네이버 바로가기</a>
<a
href="http://www.naver.com"
target="_blank"
title="마우스를 올리면 나타나는 제목"
>네이버 바로가기</a>
