티스토리 뷰

Web

1. Html 이론

muru_ 2024. 4. 3. 16:21

* 월드 와이드 웹 (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)
- 데이터를 포함하거나 네트워크의 다른 컴퓨터에서 엑세스하는 기능을 제공하는 컴퓨터 또는 장치
  클라이언트가 http://www.naver.com를 치면 
  서버는 문서를 제공하고 클라이언트는 그 문서를 받아서 브라우저를 통해 볼 수 있음 -> 웹
  IP를 통해 서버 접속 -> 웹서버는 만들어놨던 웹페이지(html)를 찾아서 보내줌 -> 클라이언트는 브라우저를 통해 봄

* 웹서버(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 기본코드 완성

* 익스텐션 (Extensions)
- Live Server
HTML 파일에 대해 로컬 웹 서버를 가상으로 실행하여 웹페이지를 실시간으로 미리 보기할 수 있는 확장 기능

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

* HTML 문서 미리보기 : 알트 누르고 있는 상태 + L, O 순서대로 누름 (수정 사항 바로 적용)
  윈도우에서 F12 눌러서 html 코드 보기 -> mac 에서 command+option+i

* HTML 특수 태그
< : &lt;   (less than)
> : &gt;   (greater than)
공백 : &nbsp;    (none breaking space)
<br> : 다음줄로 개행   (break)

* 주석
<!-- 주석을 넣음 -->
제목크기는 css에서 디자인하기때문에 6종류밖에 없음

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

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

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

 

* ! + Enter 시 나오는 기본 형식
<!DOCTYPE html> : 선언문, HTML5 나타냄
<html lang="en"> : 리더기의 언어를 설정 (en: 영어, ko: 한국어)
<head>
    <meta charset="UTF-8">  : 언어셋을 설정 (예: euc-kr) UTF-8이 전세계에서 지원
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
모바일에서 열어도 화면 크기에 맞게 자동 조정
    <title>목록태그</title> : 제목 표시줄에 텍스트 출력
</head>

* 메타태그
- <meta>: HMTL 문서에 대한 정보를 정의할 때 사용
- <head> ~ </head> 사이에 적용
- name, content, http-equiv, author, viewport, keyword, description 등

* 이미지
1. 비트맵 이미지
- 픽셀이 모여 만들어진 정보의 집합
- 레스터 이미지
- 픽셀 단위로 화면에 렌더링함
- 그림판, 포토샵 등 툴로 편집
- bmp, jpg(jpeg), gif, png, webp ...

2. 벡터 이미지
- 수학적 정보의 형태들이 만들어내는 결과물
- 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
- 확대, 축소를 해도 이미지가 깨지지 않음
- 일러스트 같은 툴로 편집

* JPG(JPEG) : Joint Photographic Experts Group
- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
- 가장 널리 쓰이는 이미지 포맷
- 손실 압축
- 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합

* GIF : Graphics Interchange Format
- 이미지 파일내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
- 여러장의 이미지를 한 개의 파일에 저장할 수 있음
- 8비트(256 색상) 컬러만 지원
- 비손실 압축

* PNG : Portable Network Graphics
- gif의 대체 포맷으로 개발
- 8비트, 24비트 컬러 이미지 처리
- 알파 채널 지원
- w3c 권장 포맷

* webp : 구 브라우저에서는 호환이 안됨
- 구글에서 만든 가장 완벽한 포맷
- jpg, png, gif를 모두 대체할 수 있는 포맷
- 알파 채널 지원(손실, 비손실)

* 이미지 태그
<img src='파일경로' alt='문자열'>

1. 절대 경로
파일 경로 : /Users/muru/Documents/web/day1
URL : https://www.iconfinder.com/static/img/logo/black_small.svg?eb4fe0853e

2. 상대 경로
- 이미지가 HTML문서와 같은 디렉토리에 있는 경우
<img src = '파일명'>, <img src='./파일명'>


- 이미지가 하위 디렉토리(img)에 있는 경우

<img src='img/파일명'>, <img src='./img/파일명'>


- 이미지가 상위 디렉토리에 있는 경우
<img src='../파일명'>, <img src='./../파일명'>


- 이미지가 상위 디렉토리의 하위 디렉토리(images)에 있는 경우
<img src='../images/파일명', <img src='./../images/파일명'>

 

'Web' 카테고리의 다른 글

5. Html Css 선택자  (0) 2024.04.11
4. (과제1) 닷홈 호스팅을 이용한 웹 페이지 만들기  (0) 2024.04.05
3. Html 태그3 (디스플레이)  (0) 2024.04.05
3. Html 태그종류2 (하이퍼링크, 책갈피, 테이블, 아이프레임, 폼)  (0) 2024.04.04
2. Html 태그종류 (문단, 제목, 서식, 목록, 이미지)  (0) 2024.04.03
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함