1. 웹과 관련된 주요 용어
월드 와이드 웹(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)
데이터를 포함하거나 네트워크의 다른 컴퓨터에서 엑세스하는 기능을 제공하는
컴퓨터 또는 장치
2. 웹 서버와 HTML
웹서버(Web Server)
클라이언트로부터 요청을 받아들이고, 해당 요청에 대한 응답을 제공하는 소프트웨어
웹 서버는 월드 와이드 웹에서 웹페이지, 이미지, 동영상, 파일 등을 제공하는 역할
HTML(Hyper Text Markup Language)
웹 페이지를 만들기 위해 사용되는 표준 마크업 언어
마크업 언어(Markup Language)
문서나 데이터 구조를 정의하고 표시하기 위해 사용되는 언어
태그(Tag)라고 불리는 특정한 구문을 사용하여 문서의 요소를 표시
HTML의 특징
- HTML 문서는 .html 확장명으로 저장
- 대소문자를 구별하지 않음
- 문서를 작성할 수 있는 에디터라면 HTML 문서를 작성할 수 있음
- 띄어쓰기, 줄바꿈을 구별하지 않음
- 대부분의 태그는 시작태그와 종료태그로 구성되어 있음
<태그> </태그>
시작태그 종료태그
<html>
<head> </head>
<body> </body>
</html>
최초의 웹사이트 (1990년 제작)
http://info.cern.ch
info.cern.ch
에밋(Emmet):
- HTML, XML, XSL 문서 등을 작성할 때 빠른 코딩을 위해 사용되는 플러그인입니다.
- 원래는 Zen Coding으로 불렸으나, 후에 Emmet으로 이름이 변경되었습니다.
익스텐션(Extensions):
- HTML 파일에 대해 로컬 웹 서버를 가상으로 실행하여 웹 페이지를 실시간으로 미리 보기할 수 있는 확장 기능입니다.
- HTML 문서에서는 Alt 키를 누른 상태에서 L, O 순서대로 누르면 실행됩니다.
Auto Rename Tag:
- HTML이나 XML 파일에서 태그를 변경하면 해당 태그의 종료 태그의 짝 태그를 자동으로 변경해주는 확장 기능입니다.
HTML 특수 태그:
- < : <
- > : >
- (공백) :
- <br> : 다음 줄로 개행
주석:
- <!-- 주석을 넣음 -->
웹 접근성(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 등 여러갖지 속성들을 사용
3. 이미지:
비트맵 이미지:
- 픽셀 모여 만들어진 정보의 집합으로 레스터 이미지라고도 불립니다.
- 화면에 픽셀 단위로 렌더링되며, 그림판, 포토샵 등의 툴로 편집할 수 있습니다.
- 주로 사용되는 포맷에는 bmp, jpg(jpeg), gif, png, webp 등이 있습니다.
벡터 이미지:
- 수학적 정보의 형태들이 만들어내는 결과물로, 이미지가 가지고 있는 점, 선, 면의 위치와 색상 정보를 가지고 있습니다.
- 확대 또는 축소를 해도 이미지가 깨지지 않습니다.
- 주로 사용되는 편집 툴로는 일러스트 등이 있습니다.
jpg(jpeg):
- 압축률이 뛰어나기 때문에 사진 및 예술분야에서 널리 사용됩니다.
- 가장 널리 쓰이는 이미지 포맷 중 하나입니다.
- 손실 압축 방식을 사용합니다.
- 24비트의 표현 색상(약 1600만 색상)으로 고해상도 표시장치에 적합합니다.
gif:
- 이미지 파일 내에 이미지 및 문자열 등 다양한 정보를 저장할 수 있는 파일 형식입니다.
- 여러 장의 이미지를 한 개의 파일에 저장할 수 있습니다.
- 8비트(256 색상) 컬러만을 지원합니다.
- 비손실 압축 방식을 사용합니다.
png:
- GIF의 대체 모델로 개발되었습니다.
- 8비트와 24비트 컬러 이미지를 처리할 수 있습니다.
- 알파 채널을 지원합니다.
- W3C에서 권장하는 포맷입니다.
webp:
- 구글에서 개발한 가장 완벽한 이미지 포맷 중 하나입니다.
- JPG, PNG, GIF를 모두 대체할 수 있는 기능을 갖추고 있습니다.
- 알파 채널을 지원하며, 손실 및 비손실 압축 방식을 모두 지원합니다.
이미지 태그
<img src='파일경로' alt='문자열'>
1. 절대 경로(물리적 경로)
파일경로: C:\KJW\KDT3\Web\HTML\Day1\pic1.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/파일명">- alt 속성은 이미지에 대한 대체 텍스트를 제공합니다.
- 파일 경로는 절대 경로(물리적 경로 또는 URL)나 상대 경로로 지정할 수 있습니다.
'웹 개발' 카테고리의 다른 글
| 5. HTML 요소 이해: 인라인, 블록, 시맨틱 태그 (0) | 2024.04.05 |
|---|---|
| 과제- 뉴스기사,즐겨찾기,이력서 html 만들기 (0) | 2024.04.04 |
| 4. 웹 개발을 위한 기본 HTML 태그 모음 & 요약 정리2 (0) | 2024.04.04 |
| 3. HTML과 FTP 사용법 정리(닷홈 호스팅을 활용한 실습 가이드) (0) | 2024.04.04 |
| 2. 웹 개발을 위한 기본 HTML 태그 모음 & 요약 정리 (0) | 2024.04.03 |
