IT 국비 교육

쌍용교육센터 - 27일

개발자가 되고 싶어요 ㅣ 2024. 3. 26. 20:34

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 문서 작성시 주의사항

  1. 대소문자를 구분하지 않는다. <BODY> 와 <body>는 모두 같은 의미. 일반적으로 소문자로 표시
  2. 2칸이상의 공백은 모두 칸으로 취급
  3. 줄바꿈 하기 위해서는 <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> 형광펜 글자 태그

 

특수 문자

 

문자  엔티티 결과 설명
&nbsp;   non-breaking space의 약어. 공백문자 하나를 추가한다.
&lt; < Less than 의 약어. <를 표시한다.
&gt; > Greater than의 약어. >를 표시한다.
&amp; & Ampersand의 약어. &부호를 표시한다.
&quot; “ quotation maker의 약어. “를 표시한다.
&copy; ⓒ Copyright의 약어. 저작권,판권을 표시한다.
&trade; ™ 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
IT 국비 교육 다른글

티스토리툴바