1. 문자엔티티
- html문법과 겹쳐서 표현하기 어려울 때 특정문자를 대체해서 사용하는 문자열이다.
| ＆nbsp; | 공백 |
|---|---|
| ＆lt; | < |
| ＆gt; | > |
| ＆amp; | ＆ |
| ＆quot; | " |
| ＆copy; | © |
2. 색상표현
| 속성 | 설명 | 사용법 |
|---|---|---|
| bgcolor | 해당 태그영역의 배경색을 변경 | <body bgcolor="navy"> |
| text | 해당 태그영역의 폰트색 변경 | <body text="white" |
| background | 해당 태그영역의 배경이미지 변경 | <body background="img.jpg"> |
3. Textformatting
- 글씨의 모양을 표현하기 위해서 사용하는 태그이다.
| 태그 | 의미 | 태그 | 의미 |
|---|---|---|---|
| b | 굵은 글씨 | sup | 위첨자 |
| i | 기울임 | sub | 아래첨자 |
| u | 밑줄 | big | 더 크게 |
| strike | 취소선 | small | 더 작게 |
4. img태그
- 화면에 이미지를 보여주고 싶을 때 사용한다.
기본형식 <img src="url"> 수정형식 <img src="url" title="팝업 텍스트" width="숫자" height="숫자"
화면에 flower.jpg 파일을 이용해 사진을 넣어보자
<!DOCTYPE HTML>
<html>
</head>
<title>CAT</title>
<meta charset="UTF=8">
<br>
</head>
<body>
<img src="img/flower.jpg" title="팝업">
<img src="img/flower.jpg" width="200" height="1080" title="꽃">
<img src="img/flower.jpg" width="1920" title="꽃">
</body>
</html>❗ 해당 html파일이 있는 같은 위치에 img폴더가 존재하고 안에 flower.jpg 이미지가 존재해야 함.
5. 절대경로와 상대경로
5.1 절대경로
- 절대경로는 고유한 경로입니다. http://가 포함되어 있는 절대경로를 경로명만 웹브라우저 주소줄에 입력해도 그 이미지가 그대로 나옵니다.
5.2 상대경로
- 이미지를 삽입할 HTML 문서를 기준으로 경로를 인식하는 방법입니다.
- 이미지 파일이 HTML 문서와 같은 폴더에 있는지, 상위 폴더에 있는지, 하위 폴더에 있는지를 따져보고 경로를 지정해줘야 합니다.
- 현재 html를 기준으로 상위 폴더로 접근하고 싶으면 점 2개(..) 찍어서 이동한다.
6. A 태그
-
A 태그는 현재 html문서에서 다른 html문서로 이동하고자 할 때 사용하는 태그이다.
<a href="http://www.daum.net" target="_blank" title="다음이동">다음</a>해석: href에 주소를 넣고 사용자가 클릭하면 해당 href로 이동.
title은 마우스를 올려 놓았을때 볼 수 있는 팝업 문자열
target은 href에 기술된 주소를 적용할 화면이다.
_self는 자기 자신의 창으로 이동하는것이고 _blank의 경우는 새 창을 만들어 이동한다.
ex) 같은 페이지에서 특정 링크를 클릭하여 원하는 위치로 이동하는 프로그램을 구현해보자
다음은 '맨위로' 링크를 누르면 맨위로 가게해주는 링크와 질문과 답변을 매칭시켜주시기 위해 a태그를 사용한 예제이다.
<a id="식별자">이동 후 위치</a> <a href="#식별자">이동 전 위치</a> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자주 하는 질문</title>
</head>
<body>
<big><a id="top1"></a>자주하는 질문</big>
<br><br>
<p style="color:blue;">
<a href="#html">Html은 무엇인가요?</a><br>
<a href="#dns">DNS(domain name system) 란?</a><br>
<a href="#domain">도메인이란?</a><br>
<a href="#severclient">서버와 클라이언트란?</a></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p style="color:blue;">
<big><a id="html"></a>Q.Html은 무엇인가요?</a></big>
<p style="background-color:Gray">HTML 은 Hyper Text Markup Language 약어로
HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다.
다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며,
흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다.</p>
<p style="color:blue;"></p><a href="#top1">맨위로^</a>
<br>
<p style="color:blue;">
<big><a id="dns">Q.DNS(domain name system)란?</a></big>
<p style="background-color:Gray">HTML 은 Hyper Text Markup Language 약어로
HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다.
다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며,
흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다.</p>
<p style="color:blue;"></p><a href="#top1">맨위로^</a>
</body>
</html>
7. h1,h2...h6(block)태그
- H태그는 heading의 약자로 제목을 표현하는 태그이다.
8. list태그 : 목록태그
- 순서가 없는 목록(unorder list), 순서가 있는 목록(order list), 정의형 목록(definition list) 등이 있고 정의형 목록은 잘 사용하지않는다.
- ul태그의 type속성은 항목앞에 붙어있는 동그라미 모양을 변경할 수 있다.
<ul type=속성값>으로 기술하면 되고 disc,circle,square 등이 올수
있다.
9. table 태그
| 태그 | 내용 |
|---|---|
| tr | table row(행) 약자로 테이블에 하나의 row데이터를 넣을 때 사용한다. |
| td | table data 약자로 표에서 하나의 칸을 표현할때 사용한다. |
| th | table head의 약자로 테이블 데이터 제목을 의미한다. td중 제목으로 사용되는 데이터를 th로 변경하여 사용한다. |
| caption | 테이블의 제목을 표현할때 사용하는 태그다. |
테이블 만드는 방법
- table 태그를 선언한다.
- tr태그를 선언한다.
- 하나의 tr에 들어가는 공간 만큼 td태그를 선언한다.
- tr태그 개수만큼 2,3을 반복
- table태그를 닫는다.
- td 데이터 중 표의 제목으로 사용하는 부분은 th로 변경한다.
