2024.03.26
웹의 역사
월드 와이드 웹(World Wide Web, www)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 정보 공간을 말한다. 인터넷은 전 세계를 연결하고 있는 국제 정보 통신망이고 웹은 그 위에서 작동하는 서비스를 의미한다.
HTML 정의
HTML : HyperText Markup Language의 약자
- HyperText : 사용자의 선택에 따라 원하는 페이지로 이동
- Markup Language : 태그의 형식과 규칙을 정의한 언어
태그의 구성 요소
- 복합 태그
<태그명> 내용 </태그명>
<div>안녕</div>
- 속성을 가지는 태그
<태그명 속성명=값> 내용 </태그명>
<p align=”center”>안녕</p>
- 단독 태그
<태그명>
<img src=”blue.jpg”>
태그 사용 규칙
<태그명></태그명>과 같이 여는 태그와 닫는 태그가 쌍으로 사용된다.
<div></div>
태그명과 속성명, 속성명과 속성명 사이는 한 칸씩 띄운다. 그 외 공백을 두어서는 안 된다.
<div align=”center”></div>
속성명과 값은 = 부호를 사용하여 표시하고 값은 “”로 감싼다.
<img src=”blue.jpg”>
주석
프로그램의 실행에 영향을 미치지 않고 설명을 위한 목적으로 사용하는 코드
<!-- HTML 주석 -->
HTML의 기본 구조
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
화면에 보여질 내용 명시
</body>
</html>
<!DOCTYPE html> 태그는 웹 브라우저가 현재 웹 페이지가 HTML5 문서임을 인식하게 만든다. <html> 태그는 모든 HTML 페이지의 루트 요소이고, lang속성을 입력할 수 있다. lang 속성은 웹 브라우저 동작에는 영향을 주지 않고 구글 같은 검색 엔진이 웹 페이지를 탐색할 때 해당 웹 페이지를 어떤 언어로 작성했는지 쉽게 알 수 있도록 도와주는 역할을 한다.
HTML 문서 작성시 주의사항
- 대소문자를 구분하지 않는다. <BODY> 와 <body>는 모두 같은 의미. 일반적으로 소문자로 표시
- 2칸이상의 공백은 모두 칸으로 취급
- 줄바꿈 하기 위해서는 <br> 태그를 명시해야 한다.
태그의 사용
- <head> 태그 사이에 표시할 태그태그 이름 설명
<title> 문서의 제목을 지정 <meta> HTML문서의 필요한 다양한 설정 <script> 자바스크립트 코드 명시 <style> 문서 전체의 레이아웃을 결정하여 문서에 통일감을 줄 수 있는 스타일 지정 <link> 웹 페이지에 다른 파일을 추가 - <body>태그
- <body>태그에는 화면에 표시할 내용을 명시
글자 태그
태그 이름 | 설명 |
<h1>~<h6> | 제목을 입력할 때 사용하는 제목 글자 태그 |
<p> | 본문 글자 태그 |
<br> | 줄 바꿈 태그 |
<hr> | 수평선 태그 |
<a> | 서로 다른 웹 페이지 사이를 이동하거나 웹페이지 내부에서 특정한 위치로 이동할 때 사용하는 태그 |
<b> , <strong> | 굵은 글자 태그 |
<i>, <em> | 기울어진 글자 태그 |
<small> | 작은 글자 태그 |
<sub> | 아래에 달라 붙은 글자 태그 |
<sup> | 위에 달라 붙은 글자 태그 |
<ins> | 밑줄 글자 태그 |
<del> | 취소선 글자 태그 |
<mark> | 형광펜 글자 태그 |
특수 문자
문자 | 엔티티 | 결과 설명 |
| non-breaking space의 약어. 공백문자 하나를 추가한다. | |
< | < | Less than 의 약어. <를 표시한다. |
> | > | Greater than의 약어. >를 표시한다. |
& | & | Ampersand의 약어. &부호를 표시한다. |
" | “ | quotation maker의 약어. “를 표시한다. |
© | ⓒ | Copyright의 약어. 저작권,판권을 표시한다. |
™ | ™ | Trademark의 약어. 상표를 표시한다. |
Character
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
안녕하세요.
<br>
줄바꿈시 br태그를 사용해야 함<br>
<!-- <b>,<strong> 태그: 굵은 글씨 -->
<b>굵은 글씨1</b>
<br>
<strong>굵은 글씨2</strong>
<br>
<!-- <ins> 태그 : 밑줄 -->
<ins>밑줄</ins>
<br>
<!-- <del> 태그 : 취소선 -->
<del>2,000</del>
<br>
<!-- <i>, <em> 태그 : 이탤릭체 -->
이제는 <em>반응형 웹</em>이 <i>대세</i>이다.
<br>
<!-- 태그는 중첩 가능 -->
<b>태그는 <ins>중첩</ins> 사용 가능</b> 하다.
<br>
<!-- <span> 태그 : 하나의 영역으로 묶기 -->
<span>내용형식</span>
<br>
<!-- <mark> 태그 : 형광펜 효과 내기-->
<mark>텍스트</mark>
<br>
<!-- <hr> 태그 : 수평선 -->
<hr size="1" width="100%"><!-- 상대적인 수치 지정 -->
<hr size="1" width="500"><!-- 절대적인 수치 지정 -->
<!-- 제목 표시하기 -->
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4 align="left">제목4</h4>
<h5 align="center">제목5</h5>
<h6 align="right">제목6</h6>
<!-- <p> 태그 : 단락 만들기 -->
<p align="center"><b>가운데</b>
<p align="left"><b>왼쪽</b>
<p align="right"><b>오른쪽</b>
<!-- <div> 태그 : 블럭 레벨 태그, 텍스트 (또는 이미지)를 블럭 단위로 묶을 때 사용 -->
<div align="center">가운데</div>
<div align="left">왼쪽</div>
<div align="right">오른쪽</div>
</body>
</html>
'IT 국비 교육' 카테고리의 다른 글
쌍용교육센터 - 29일 (0) | 2024.03.28 |
---|---|
쌍용교육센터 - 28일 (1) | 2024.03.27 |
쌍용교육센터 - 26일 (1) | 2024.03.25 |
쌍용교육센터 - 23~25일 (0) | 2024.03.22 |
쌍용교육센터 - 22일 (0) | 2024.03.19 |