월드 와이드 웹(World Wide Web)
인터넷 상에서 정보를 공유하고 문서를 표시하기 위한 시스템
네트워크(Network)
컴퓨터나 기타 장치들이 상호 연결되어 데이터를 주고받을 수 있는 구조
인터넷(Internet)
전 세계적으로 연결된 컴퓨터 네트워크들의 집합체
IP(Internet Protocol)
컴퓨터 네트워크에서 사용되는 주요 프로토콜 중 하나. 데이터를 보내는데 사용되며
컴퓨터나 기기가 인터넷에 연결되어 있는 모든 기기에 IP주소가 할당됨
IPv4: 32비트 주소 체계. XXX.XXX.XXX.XXX 형식으로 표현
(예: 192.0.0.1과 같이 네 개의 0~255까지의 숫자로 구성)
IPv6: 128비트 주소 체계. x:x:x:x:x:x:x:x와 같이 16진수로 표현
클라이언트(Client)
서버로부터 서비스나 데이터를 요청하는 컴퓨터 또는 장치
서버(Server)
데이터를 포함하거나 네트워크의 다른 컴퓨터에서 엑세스하는 기능을 제공하는 컴퓨터 또는 장치
웹서버(Web Server)
클라이언트로부터 요청을 받아들이고, 해당 요청에 대한 응답을 제공하는 소프트웨어. 웹 서버는 월드 와이드 웹
에서 웹페이지, 이미지, 동영상, 파일 등을 제공하는 역할
HTML(Hyper Text Markup Language)
웹 페이지를 만들기 위해 사용되는 표준 마크업 언어
마크업 언어(Markup Langauge)
문서나 데이터 구조를 정의하고 표시하기 위해 사용되는 언어. 태그(Tag)라고 불리는 특정한 구문을
사용하여 문서의 요소를 표시
HTML의 특징
- HTML 문서는 .html 확장명으로 저장
- 대소문자를 구별하지 않음
- 문서를 작성할 수 있는 에디터라면 HTML 문서를 작성할 수 있음
- 띄어쓰기, 줄바꿈을 구별하지 않음
- 대부분의 태그는 시작태그와 종료태그로 구성되어 있음
<태그> </태그>
시작태그 종료태그
<html>
<head> </head>
<body> </body>
</html>
최초의 웹사이트(1990년 제작)
htts://info.cern.ch/
에밋(emmet)
- html, xml, xsl 문서 등을 작성할 때 빠른 코딩을 위해 사용하는 플러그인
- 원래 젠코딩으로 부르다 에밋으로 이름을 변경
!(Enter): html 기본코드 완성
익스텐션(Extensions)
Live Server
HTML 파일에 대해 로컬 웹 서버를 가상으로 실행하여 웹페이지를 실시간으로 미리 보기 할 수 있는 확장 기능
HTML 문서 -> 알트 누르고 있는 상태 + L, O 순서대로 누름
Auto Rename tag
HTML이나 XML파일에서 태그를 변경하면 해당 태그의 짝 태그를 자동으로 변경해주는 확장 기능
HTML 특수 태그
< : <
> : >
(공백) :
<br>: 다음줄로 개행
주석
<!-- 주석을 넣음-->
<!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>
<h2>서식 태그</h2>
<p>b 태그는 글자를 <b>굵게</b> 표현</p>
<p>strong 태그도 글자를 <strong>굵게</strong> 표현</p>
<p>i 태그는 글자를 <i>이탤릭체</i>로 표현</p>
<p>em 태그는 글자를 <em>이탤릭체</em>로 표현</p>
<p>ins 태그는 <ins>중요한 글자</ins>를 표현</p>
<p>del 태그는 <del>글자를 지운 것</del>처럼 표현</p>
<p>sup 태그는 수식을 표현: x<sup>2</sup> + y <sup>3</sup> = 2</p>
<p>sub 태그로 화학식을 표현:H<sub>2</sub>O</p>
</body>
</html>
<!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>
<h2>목록태그</h2>
<!--ul>li*3-->
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
<hr>
<ol>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ol>
<hr>
<!-- dl>dt+dd*3-->
<dl>
<dt>류정원 선생님</dt>
<dd>김사과</dd>
<dd>오렌지</dd>
<dd>반하나</dd>
</dl>
</body>
</html>
웹 접근성(Web accessibility)
모든 사용자, 장애를 가진 사람들이 웹 컨텐츠를 인식, 이해, 사용할 수 있도록 설계된 웹 사이트 및 어플리케이션을 가리킴. 장애를 가진 사람들 뿐만 아니라 모든 사용자가 웹을 이용하는 데 있어 동등한 기회를 제공하는 것을 목표로 함.
웹 표준(Web standards)
웹에서 사용되는 기술과 프로토콜에 대한 권고사항과 규약. 웹페이지 및 어플리케이션을 개발할 때 준수해야하는 지침이며 구조, 동작, 표현을 정의하는 데 사용
<태그 속성="속성값" 속성="속성값" 속성="속성값" ...>
속성: 태그를 보완하는 역할. 작은 따옴표 또는 큰 따옴표를 사용
<!DOCTYPE html> : 선언문, HTML5 나타냄
<html lang="en"> : 리더기의 언어를 설정(en: 영어, ko:한국어)
<head>
<meta charset="UTF-8"> : 언어셋을 설정(예: euc-kr)
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 환경에 대한 설정
<title>목록 태그</title> : 제목 표시줄에 텍스트 출력
</head>
메타태그
- <meta> : HTML 문서에 대한 정보를 정의할 때 사용
- <head> ~ </head> 사이에 적용
- name, content, http-equiv, author, viewport, keyword, descriptioN 등 여러가지 속성들을 사용
이미지
1. 비트맵 이미지
- 픽셀이 모여 만들어진 정보의 집합
- 레스터 이미지라고 부름
- 픽셀 단위로 화면에 렌더링함
- 그림판, 포토샵 등 툴로 편집
- bmp, jpg(jpeg), gif, png, webp ...
2. 벡터 이미지
- 수학적 정보의 형태들이 만들어내는 결과물
- 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
- 확대, 축소를 해도 이미지가 깨지지 않음
- 일러스트 같은 툴로 편집
jpg(jpeg)
- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
- 가장 널리 쓰이는 이미지 포맷
- 손실 압축
- 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합
gif
- 이미지 파일 내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
- 여러장의 이미지를 한 개의 파일에 저장할 수 있음
- 8비트(256 색상) 컬러만 지원
- 비손실 압축
png
- gif의 대체 포맷으로 개발
- 8비트, 24비트 컬러 이미지 처리
- 알파 채널 지원
- w3c 권장 포맷
webp
- 구글에서 만든 가장 완벽한 포멧
- jpg, png, gif를 모두 대체할 수 있는 포멧
- 알파 채널 지원(손실, 비손실)
이미지 태그
<img src='파일경로' alt='문자열'>
1. 절대 경로(물리적 경로)
파일경로: C:\pom\KDT3\Web\HTML\Day1\rain1.png
URL : https://tcpschool.com/img/logo.png
2. 상대 경로
이미지가 HTML문서와 같은 디렉토리에 있는 경우
<img src='파일명'>, <img src='./파일명'>
이미지가 하위 디렉토리(img)에 있는 경우
<img src="img/파일명">, <img src="./img/파일명">
이미지가 상위 디렉토리에 있는 경우
<img src="../파일명">, <img src="./../파일명">
이미지가 상위 디렉토리의 하위 디렉토리(images)에 있는 경우
<img src='../images/파일명'>, <img src='./../images/파일명'>
<!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>
<h2>이미지 태그</h2>
<img src="https://tcpschool.com/img/logo.png" alt="TCP스쿨 로고">
<img src="C:\pom\KDT3\Web\HTML\Day1\rain1.png" alt="비 이미지"> <!-- 사용하지 않음 -->
<hr>
<img src="./rain2.png" alt="비 이미지">
<img src="./img/rain3.png" alt="비 이미지">
<img src="./../rain4.png" alt="">
<img src="./../images/rain5.png" alt="">
</body>
</html>