[ 24.04.03 HTML ] Web 이론

Web

[ 24.04.03 HTML ] Web 이론

96__혀누 2024. 4. 3. 16:16

월드 와이드 웹(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 Language)

문서나 데이터 구조를 정의하고 표시하기 위해 사용되는 언어. 태그(Tag)라고 불리는 특정한
구문을 사용하여 문서의 요소를 표시

HTML의 특징

- HTML 문서는 .html의 확장명으로 저장  
- 대소문자를 구별하지 않음  
- 문서를 작성할 수 있는 에디터라면 HTML 문서를 작성할 수 있음  
- 띄어쓰기, 줄바꿈을 구별하지 않음  
- 대부분의 태그는 시작태그와 종료태그로 구성되어 있음  
<태그> </태그>  
          시작태그  종료태그  

<html>  
<head> </head>  
<body> </body>  
</html>

※ 최초의 웹사이트(1990년 제작) : https://info.cern.ch/

에밋(emmet)

html, xml, xsl 문서 등을 작성할 때 빠른 코딩을 위해 사용하는 플러그인
원래 젠코딩으로 부르다가, 에밋으로 이름을 변경

! + Enter : html 기본코드 완성

! + Enter :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

익스텐션(Extensions)

Live Server

HTML 파일에 대해 로컬 웹 서버를 가상으로 실행하여, 웹페이지를 실시간으로 미리 보기할 수 있는 확장 기능

HTML 문서 -> 알트는 누르고 있는 상태 + L, O 순서대로 누름

Auto Rename Tag

HTML이나 XML파일에서 태그를 변경하면, 해당 태그의 짝 태그를 자동으로 변경해주는 확장 기능

HTML 특수 태그

< : &lt;  
\> : &gt;  
(공백) : &nbsp;  
<br> : 다음줄로 개행  

주석  
<!-- 주석을 넣음 -->

웹 접근성(web accessibility)

모든 사용자, 장애를 가진 사람들이 웹 컨텐츠를 인식, 이해 사용할 수 있도록 설계된 웹 사이트 및 어플리케이션을 가리킴.
장애를 가진 사람들뿐만 아니라 모든 사용자가 웹을 이용하는데 있어, 동등한 기회를 제공하는 것을 목표로 함

웹 표준(Web standards)

웹에서 사용되는 기술과 프로토콜에 대한 권고사항과 규약, 웹페이지 및 어플리케이션을 개발할 때 준수해야하는 지침이며, 구조, 동작, 표현을 정의하는데 사용

<태그 속성="속성값" 속성2="속성값" ...>
속성 : 태그를 보완하는 역할. 작은 따옴표 또는 큰 따옴표를 사용

<!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:\\2klips\\KDT3\\Web\\HTML\\Day1\\rain1.png  
URL : [https://www.tcpschool.com/img/logo.png](https://www.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/파일명'>