1. WEB의 중요개념
web client: 클릭한 페이지를 요청하는 pc -> 네트워크로 연결된 서버로부터 정보를 제공받는 컴퓨터
web server: 클릭된 페이지를 제공하는 pc -> 클라이언트에게 네트워크를 통해 서비스를 제공하는 컴퓨터
2. HTML이란?
- HTTP(Hyper Text Transfer Protocol) 인터넷에서 하이퍼텍스트 문서를 교환하기 위하여 사용되는 통신규약
- HTML(Hyper Text MarkUp Language): 웹 페이지에 정보를 담아 표시하기 위한 마크업 언어
- Hyper Text: 현재 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
- Mark Up: 어딘가에 Mark! 즉, 표시를 해두는 것
3. HTML의 구성요소
4. body태그 속성
| 속성 | 설명 |
| background | 배경 이미지 지정 |
| bgcolor | 배경색 지정 |
| text | 글꼴 색 지정 |
| link | 링크 색 지정 |
| vlink | 방문했던 링크 색 지정 |
| alink | 링크를 클릭하는 순간의 색 지정 |
5. 제목태그
<h>제목</h> : html문서 본문 내 제목을 표현하는 태그(h1~h6)
6. 글자태그
<p>본문</p>: 본문의 내용을 단락으로 표현할 때 사용하는 태그
<span>본문</span>: 본문의 내용을 문장으로 표현할 때 사용하는 태그
<b>텍스트</b>:다른 텍스트와 구별할 때 사용하는 태그
<strong>텍스트</strong>: 중요한 문구를 강조하는 태그
7. 문단태그
<br/>: 줄바꿈(개행)태그
<hr/>: 단락 간의 구분을 위해 사용하는 태그
<hr>
| 속성 | 설명 |
| align | 수평선의 정렬 방식(right,left,center) |
| color | 수평선의 색 |
| size | 수평선의 굵기 |
| width | 수평선의 가로 길이 |
| noshade | 그림자가 없는 평면의 수평선 |
8.리스트 태그
<ul>: 번호없는 목록을 사용할 때 사용하는 태그
<ol>: 번호있는 목록을 사용할 때 사용하는 태그
<li>: 공통적으로 사용되는 태그
9.코드 예시
[ex01ready.html]
<!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>Document</title>
</head>
<body bgcolor="green" text="white">
<!--
주석 : Ctrl+ /
코드 실행: Alt+L+O
-->
안녕하세요. 홍길동의 첫 웹페이지 입니다.
글자추가
글자추가
글자추가
글자추가
</body>
</html>[ex02문장.html]
<!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>Document</title>
</head>
<body>
<!-- 1. 제목태그 head의 약자 (h1~h6)-->
<h1>h1태그</h1>
<h2>h2태그</h2>
<h6>h6태그</h6>
<!-- 2.본문태그 -->
<!-- (1) p태그(paragraph)
단락으로 표현이 되기 때문에 한줄의 영역을 전부차지
=> 개행이 된 것 처럼 보인다
-->
<p>p태그</p>
<p style="color:blue;">p태그</p>
<!-- (2) span 태그
문장으로 표현이 되기 때문에 내가 넣은 컨텐츠만큼만을 영역으로 차지 => 개행x
어떤 특징도 가지고 있지 x => '공태그'
일반 text로는 특정 요소에 접근 할 수 없다
-->
<span>span태그</span>
<br>
<!-- (3) br 태그(break) : 개행 태그 -->
<span style="color:blue;">span태그</span>
그냥text
style="color:blue;"그냥text
<hr>
</body>
</html>[ex03강조.html]
<!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>Document</title>
</head>
<body>
<span> span 태그</span>
<b> b태그</b>
<strong>strong태그</strong>
<!-- br*2 -->
<br><br>
<!-- 1.b태그 (bold)
글자를 굵게해서 강조 => '시각적'의미의 강조
=> 디자인의 영역 'CSS로 대체'
-->
<br>[공지사항]<br>
<span>입실시, QR 체크인을 해주세요!</span>
<!-- 2. strong 태그
=> '실질적' 의미의 강조
-->
<br><br>
<span> 이 좌석은 </span>
<strong>노약자,임산부,어린이만</strong>
<span>이용 가능합니다.</span>
</body>
</html>[ex04리스트.html]
<!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>Document</title>
</head>
<body>
<!--
ul,ol => 리스트를 만들겠다고 선언하는 공간!
li => 실질적인 데이터를 넣어주는 태그
(ul,ol 모두 사용)
-->
<!-- ul (Unordered List) 정렬되지 않은 리스트 -->
<ul type="circle">
<!-- type: circle, square ... etc) -->
<li> 데이터1</li>
<li> 데이터2</li>
</ul>
<!-- ol(Ordered List) 정렬되어있는 리스트 -->
<ol type="I">
<li>데이터1</li>
<li>데이터2</li>
</ol>
<hr>
<h3>실습!</h3>
<p>구매 목록</p>
<!-- ul>li*3 -->
<ul type="square">
<li> 딸기</li>
<li> 닭발</li>
<li> 마라탕</li>
</ul>
<p>마라탕 순서</p>
<ol type="A">
<li>고기를 볶는다</li>
<li>육수와 소스를 넣는다.</li>
<li>재료를 넣는다.</li>
</ol>
</body>
</html>
'HTML' 카테고리의 다른 글
| 이미지 태그 와 테이블, 폼태그 (0) | 2022.09.21 |
|---|---|
| HTML (0) | 2022.08.15 |
