지난 포스팅에 이어서 이번엔 HTML의 TAG종류에 대해서 알아보도록 하겠습니다~!
1. 제목태그<h1>~<h6>(1->6으로 갈수록 글자 point가 작아짐)
-Heading의 약자 H사용
-자동 줄바꿈(블록요소)
-하나의 HTML문서에는 하나의 H1태그를 권장
-웹 검색엔진이 가장 먼저 검색하는 태그가 H1태그!!
2. 본문태그<p></p>
-pragraph의 약자 p사용!
3.줄바꿈 태그 <br>
4. 목록태그
1)<ul></ul>:순서 없는 목록(unordered list)
2)<ol></ol>:순서 있는 목록(ordered list)
5. 수평 줄<hr>
6. 문자 꾸미기 태그들
-<b></b> 두껍게
-<strong></strong>:두껍게+sementic한 의미를 지님!(semantic? 의미적으로 강조! 시각장애인인 경우 스크린리더기를 통해 말로도 강조되는걸 semantic하다~라고 함!!), 보여지는 건 b태그와 동일~
-<i></i>:이탤릭
-<em></em>:이탤릭+강조
-<del></del>:취소선
-<u></u>:밑줄
7. 이미지 태그<img src=" "></img>
-속성 값 중 하나인 , src(파일 경로)를 사용
-src에서 파일 경로는 절대경로와 상대경로가 있는데 주로 상대경로(./~~)를 사용한다!
-파일은 직접 가져올 수도, 인터넷 주소에서 링크 복사를 통해서 가져올 수 도 있다.
-올바르지 않는 경로를 src에 넣는 경우 xbox가 뜨게 된다.
-이미지 로드가 안되는 경우 alt속성이 중요!
8. 하이퍼링크 태그<a herf=" "></a>
-href:Hypertext Reference의 약자, 이동할 페이지의 링크
-target: 링크 된 문서를 열었을 떄 문서가 열릴 위치를 표시(_blank(새로운 탭에서),_self(현재 탭에서,default))
여기까지 배운 태그들을 한번 vscode를 통해 실제로 어떻게 웹브라우저에서 반영되는지 살펴보도록 할게용!
<!-- emmet:키워드로 html구조를 잡아주는 것(우리는 !tab으로 완성함) -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tag 종류</title>
</head>
<body>
<h1>tag 종류에 대해 배워보자!!</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<p>여기는 본문태그 입니다!</p>
<br><br><br>
<p>여기는 본문태그 입니다!</p>
<h3>오늘의 할 일</h3>
<!-- ul tag type attribute: disc(default),square,circle, none -->
<ul type="circle">
<!-- ul:순서없는 목록 -->
<li>html공부하기</li>
<li>운동하기</li>
<li>방 청소하기</li>
</ul>
<h3>아이스카페라떼 레시피</h3>
<!-- ol tag type attribute: 1(default),a(a,b,c,d...),A(A,B,C,D,...),i,I -->
<!-- start attribute: 시작 번호, reversed:역순으로 -->
<ol type="1" start="4" reversed>
<!-- o -->
<li><strong>우유</strong> <em>180ml</em> 컵에 넣기</li>
<li><b>얼음</b>을 가득 넣기</li>
<li><i>에스프레소 샷</i>을 넣어주면</li>
<li><u>완성!</u> <del>맛있게 드세요!</del></li>
</ol>
<hr>
<!-- 수평줄을 그어주는 태그 -->
<!-- 목록 태그의 중첩사용 -->
<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>
<hr>
<h1>img & a tag</h1>
<!-- 상대경로(같은 파일을 작성하더라도 접근하는 경로가 달라지는 것이고)/절대경로 (어떤 파일에 접근하더라도 경로가 같음)-->
<!--
.:현재
..:부모
-->
<!-- 현재파일에서 img폴더 안으로 가서 dog파일을 열어라(상대경로로 이미지 찾기) -->
<img src="./img/dog.jpeg" alt="dog 사진" width="500" height="250">
<!-- alt 속성이 없어도 되지만 없으면 이미지가 있었는지조차 알 수 업기 때문에 있는게 좋다(사진에 대한 설명) -->
<!-- ./를 해주면 동일 라인에 있는 폴더와 파일이 뜸 거기에서 이미지파일을 눌러주면 된다. -->
<!-- width:가로, height:세로 -->
<!-- 위의 상대경로로 표시된걸 절대경로(root부터 시작하는 경로)로 표시 -->
<!-- 따라서 보통 상대경로로 이미지 경로를 많이 표시한다.(현재 위치로부터 이미지 파일을 찾아가므로(사용자가 바뀌면 절대경로에서는 그걸 또 바꿔주어야하는 번거로움이 있음)) -->
<img src="C:\Users\김세은\Documents\sesac-ydp-5\02.html\img/dog.jpeg" alt="dog 사진" width="500" height="250">
<!-- 이미지 태그도 시작태그만 있어도 된다. -->
<!-- 인터넷 주소로 이미지설정(인터넷에서 이미지파일 우클릭 ->이미지 링크 복사) -->
<img src="https://th.bing.com/th/id/OIP.ZtrNE9GnhsrUDpGXFZ2gagHaJG?w=152&h=187&c=7&r=0&o=5&pid=1.7" alt="">
<br>
<br>
<a href="https://www.naver.com/">Naver로 이동하기(default)</a>
<!-- a태그는 content가 있어야 한다, 즉, 종료태그가 있어야한다 -->
<!-- a tag target attribute:링크가 열릴 위치 지정
_self(default):현재 탭에서 열기
_blank:
_title -->
<br>
<a href="https://www.naver.com/" target="_blank">Naver로 이동하기(target_blank)</a>
<br>
<a href="https://www.google.co.kr/" target="_blank" title="마우스 커서를 올리면 나타남!">Google로 이동하기(target_title)</a>
<br>
<a href="./html_start.html">html_start(default)</a>
<!-- a tag는 인터넷 상의 주소 뿐만 아니라 폴더 내의 다른 html 문서로 이동도 가능 -->
</body>
</html>
tag 종류에 대해 배워보자!!
제목2
제목3
제목4
제목5
제목6
여기는 본문태그 입니다!
여기는 본문태그 입니다!
오늘의 할 일
- html공부하기
- 운동하기
- 방 청소하기
아이스카페라떼 레시피
- 우유 180ml 컵에 넣기
- 얼음을 가득 넣기
- 에스프레소 샷을 넣어주면
- 완성!
맛있게 드세요!
내가 좋아하는 음식
- 양식
- 수제버거
- 파스타
- 한식
- 된장찌개
- 청국장
- 일식
- 초밥
- 우동
img & a tag
Naver로 이동하기(default)
Naver로 이동하기(target_blank)
Google로 이동하기(target_title)
html_start(default)
'[새싹X코딩온]웹 풀스택' 카테고리의 다른 글
| [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(2)-선택자(Selector)1 (0) | 2023.07.25 |
|---|---|
| [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(1)-개요, 참조방식 (0) | 2023.07.25 |
| [새싹X코딩온]웹 풀스택 1주차(7/19) HTML(3) 회고록 (0) | 2023.07.24 |
| [새싹X코딩온]웹 풀스택 1주차(7/19) HTML(1) 회고록 (0) | 2023.07.24 |
| [새싹X코딩온]웹 풀스택 1주차(7/17) 회고|OT&GIT사용법 (0) | 2023.07.19 |
