1. HTML의 특수 태그
- < : <
- > : >
- 띄어쓰기 :
- 줄바꿈 태그: <br> = </br>
- 주석: <!-- --> 한줄 또는 여러줄
<html>
<head>
<title>home of the first my website</title>
</head>
<body>
<!--
작성일: 2023-03-23
작성자: 전장훈
내용: 최초의 내 웹 사이트를 만들어 봄
-->
안녕하세요.<br>전장훈의 최초의 웹사이트에 오신걸 환영합니다!<br><br>
라이브 서버 확인! < >
</body>
</html>2. 문단 태그
- <p> ... </p>: 문단을 나타내는 태그
3. 블록 태그
- 한 라인을 모두 차지함
<html>
<head>
<title>문단 태그</title>
</head>
<body>
<p>1. 문단 태그</p>
<p>문단을 만드는 태그</p> 블록 태그
</body>
</html>4. 제목 태그
- <h1> ... </h1>
- h1 ~ h6까지 크기
- 블록 태그
- 검색엔진에서 제목으로 표현됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제목 태그</title>
</head>
<body>
<h1>안녕하세요. 제목태그 h1</h1>
<h2>안녕하세요. 제목태그 h2</h2>
<h3>안녕하세요. 제목태그 h3</h3>
<h4>안녕하세요. 제목태그 h4</h4>
<h5>안녕하세요. 제목태그 h5</h5>
<h6>안녕하세요. 제목태그 h6</h6>
</body>
</html>5. 서식 태그
글자를 꾸며주는 태그
- <b>: 텍스트를 굵게 표현(html 1.0부터)
- <strong>: 텍스트를 굵게 표현, 리더기에서 거센 발음(html 5.x부터)
- <i>: 텍스트를 이텔릭체로 표현(html 1.0부터)
- <em>: 텍스트를 이텔릭체로 표현, 리더기에서 거센 발음(html 5.x부터)
- <del>: 텍스트 가운데에 줄을 그어줌
- <ins>: 텍스트에 밑줄을 그어줌
- <sup>: 위첨자 텍스트 표현
- <sub>: 아래첨자 텍스트 표현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>서식 태그</title>
</head>
<body>
<h2>서식 태그</h2>
<p>b 태그는 단순히 글자가 <b>굵게</b> 표현됩니다.</p>
<p>strong 태그는 중요한 글자가 <b>굵게</b> 표현됩니다.</p>
<p>i 태그는 단순히 글자를 <i>이텔릭체로</i> 표현합니다.</p>
<p>em 태그는 중요한 글자를 <em>이텔릭체로</em> 기울여 표현합니다.</p>
<p>del 태그는 글자를 <del>지운 것처럼</del> 표현합니다.</p>
<p>ins 태그를 사용하면 중요한 글자에 <ins>밑줄을</ins> 그어줍니다.</p>
<p>sup 태그를 사용해서 수식을 표현합니다. x<sup>2</sup> + y<sup>3</sup> = z</p>
<p>sub 태그는 화학식을 표현합니다. H<sub>2</sub>O</p>
</body>
</html>6. 목록 태그
<ul> 순서가 없는 목록 태그, 블록태그
。김사과
。오렌지
。반하나
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
<ol> 순서가 있는 목록 태그, 블록태그
1. 김사과
2. 오렌지
3. 반하나
<ol>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ol>
<dl> 정의 목록 태그, 블록 태그
류정원 선생님
김사과 학생
오렌지 학생
반하나 학생
<dl>
<dt>류정원 선생님</dt>
<dd>김사과 학생</dd>
<dd>오렌지 학생</dd>
<dd>반하나 학생</dd>
</dl>7. 이미지 태그
- 이미지를 브라우저에 출력
- 인라인 태그(컨텐츠 크기만큼만 영역을 사용)
비트맵 이미지 |
벡터 이미지 |
| 픽셀이 모여 만들어진 정보의 집합 (점의 개념) | 수학적 정보의 형태들이 만들어내는 결과물 (면의 개념) |
| 레스터 이미지라고도 부름 | 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음 |
| 픽셀 단위로 화면에 렌더링함 | 확대 및 축소를 해도 이미지가 깨지지 않음 |
| 그림판, 포토샵 등 툴로 편집 | 일러스트 같은 툴로 편집 |
<img src='이미지가 위치하는 주소 또는 파일경로' alt='이미지를 대신할 문장'>- 무료로 png 이미지를 얻을 수 있는 사이트 ( https://www.iconfinder.com/ )
jpg(jpeg) |
|
gif |
|
png |
|
webp |
|
파일 경로 작성 방법
1. 절대 경로
- 물리적 경로
- URL 주소: https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png
- 드라이브: C:\Users\Administrator\Desktop\KDT\html\Day15\sea1.png
- 드라이브 물리적 경로는 나타나지 않아 웹사이트 개발 시 사용하지 않음
2. 상대 경로
- 이미지가 HTML 문서와 같은 디렉토리에 있는 경우
<img src='파일명'> or <img src='./파일명'>- 이미지가 하위 디렉토리에 있는 경우
<img src='디렉토리명/파일명'> or <img src='./디렉토리명/파일명'>- 이미지가 상위 디렉토리에 있는 경우
<img src='../파일명'> or <img src='./../파일명'>- 이미지가 상위 디렉토리의 하위 디렉토리에 있는 경우
<img src='../디렉토리명/파일명'> or <img src='./../디렉토리명/파일명'>8. 메타 태그
- HTML 문서에 대한 정보를 정의할 때 사용
- <head>와 </head> 사이에 적용
- name, content, http-equiv, author, viewport, keyword, description 등 여러가지 속성
속성
태그를 보완하는 역할
<!DOCTYPE html>: HTML 버전
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>목록 태그</title>
</head>- <!DOCTYPE html>: HTML 버전
- <html lang="en">: lang="en", 리더기의 언어를 설정(en: 영어, ko: 한국어)
- <meta charset="UTF-8">: charset을 utf-8로 설정, 전세계의 모든 국가의 OS/브라우저에서 모든 언어셋을 모두 설정
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 브라우저에서 최적의 크기로 페이지를 보여주고, 확대/축소를 금지
728x90
반응형
'KDT > HTML | CSS' 카테고리의 다른 글
| 아이프레임(iframe) (0) | 2023.03.24 |
|---|---|
| 테이블 만들기 (0) | 2023.03.24 |
| 책갈피 (0) | 2023.03.24 |
| 하이퍼링크(HyperLink) (1) | 2023.03.24 |
| HTML 개요 (0) | 2023.03.23 |
