5/31 html

<hn> 태그

<h1> 부터 <h6> 까지 

제목 표시. <h1>이 가장 큰 제목이고 <h6> 이 가장 작은 제목 크기이다.

ex) <h2> 피자메뉴 </h2>

 

<hr> 태그 

수평선을 출력하기 위한 태그.

ex) <hr>
    <hr align = "left">
    <hr align = "left" width = "600">
    <hr align = "left" width = "50%">

 

<p> 태그

단락표시.
<p> 태그로 표시하는 텍스트 단락은 </p> 태그를 만날때 까지 줄바꿈 없이 텍스트를 한줄로 표현.
	텍스트 줄이 브랑저창의 너바보다 길어질 경우, 자동으로 줄바뀜.

ex) <p> 햄피자와 파인애플피자의 환상적인 만남 </p>

 

<br> 태그

줄 바꿈 위한 태그.

ex) <p>햄피자는 가장 기본적인 피자이며<br> 파인애플 피자는 호불호가 갈리는 피자이다.</p>

 

햄피자는 가장 기본적인 피자이며

파인애플피자는 호불호가 갈리는 피자이다.

---

align  속성

태그내용을 정렬하기 위한 속성.

left(기본) / right / center / justify

<h1 align="left" title = "메뉴판">

 

title 속성

툴팁 기능을 이용하여 설명문(속성값)을 제공하는 속성

 

width 속성

태그의 폭을 변경하기 위한 속성.

크기 또는 위치를 표현하는 단위
	px (기본) & 절대값 / % (백분율) & 상대값

 

---

 

  : 공백
&lt; : < 문자 / &gt; : > 문자
&amp; : & 문자 등 


&lt;강백호&gt;님 &amp; &lt;서태웅&gt;님&nbsp;&nbsp;&nbsp;&nbsp;반갑습니다.

<강백호>님 & <서태웅>님    반갑습니다.

 

---

 

태그내용을 있는 그대로 출력하는 태그

 ex) <pre>강백호님,      만나서 반갑습니다.
	다음에 다시 만나요.</pre>

 

---

 

div 태그 : - 블럭 레벨 태그 (범위를 설정하기 위한 태그)
span 태그 :  - 인라인 레벨 태그 (범위를 설정하기 위한 태그)

style 속성 : CSS 스타일 관련 속성과 속성값 설정

---

 

ex)
<div style="font-size: 24px;">오늘은 <span style="color: red;">2023년 05월 24일 수요일</span>입니다.
	내일은 <span style="color: green;">2023년 05월 25일 목요일</span>입니다.</div>

오늘은 2023년 05월 24일 수요일 입니다. 내일은 2023년 05월 25일 목요일입니다.

 

---

img

 

<img> 태그

alt 속성 : 출력 이미지에 대한 설명을 값으로 설정 - 음성 지원

src 속성 : 이미지 파일을 경로(URL 주소)를 값으로 설정 → 설정된 파일이 없는 경우 404 상태코드 전달

이미지 파일을 제공받아 출력하기 위한 태그 (GIF / PNG /JPEG 파일등 )

ex) <img alt="다음로고" src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png">
- 웹사이트에서 가져온것

 

---

+ width 을 통해 출력될 이미지의 크기변경 

<img alt="코알라" src="http://localhost:8000/web/html/Koala.jpg" width="200">

 

 

○ 웹문서와 웹자원이 동일한 서버에 있으면, 서버 접속 관련정보를 생략 가능 

웹문서(02.img)  웹자원(koala.jpg) 는 같은 폴더 안에있음.

 

* 절대경로 - 웹자원의 경로를 서버의 최상위 디렉토리(Root Directory)를 기준

<img alt="코알라" src="/web/html/Koala.jpg" width="200">

 

*상대 경로 - 웹자원의 경로를 현재 요청한 웹문서의 경로를 기준

<img alt="코알라" src="./Koala.jpg" width="200">

 

---

 

절대경로	<img alt="펭귄" src="/web/html/images/Penguins.jpg" width="200">
상대경로	<img alt="펭귄" src="images/Penguins.jpg" width="200">

 

---

 

절대경로	<img alt="튤립" src="/web/Tulips.jpg" width="200">
상대경로	<img alt="튤립" src="../Tulips.jpg" width="200">