목차
- 웹(Web)
1-1. 웹 표준
1-2. 웹 처리 과정
1-3. 웹 특징
1-4. 반응형 웹 - HTML
2-1. HTML5 특징
2-2. HTML 구성 요소
2-3. HTML 주의사항 - HTML 기본 구조
3-1. <!DOCTYPE html>
3-2. <html> </html>
3-3. <!-- 주석 --> - Visual Studio Code
4-1. vscode 설치
4-2. extension 추가
1. 웹(Web)
인터넷 통신망 위에서 작동하는 서비스에는 웹, FTP, 이메일 등등 그 종류가 다양하다.
그 중에서도 웹은 가장 널리 사용되어온 인터넷 서비스이다.
- 웹이란, 인터넷 통신망 위에서 작동하는 서비스 중 하나로 인터넷에 연결된 컴퓨터 통해 사람들간에 정보 공유가 일어나는 공간을 말한다.
- 인터넷의 등장은 1960년대로 거슬러 올라간다. 팀 버너스리(Tim Berners-Lee)가 하이퍼링크 포함한 문서의 개념을 제안하고, 월드 와이드 웹(World Wide Web)을 개발 및 배포하였으며, 웹 표준 단체 W3C를 창설하였다.
하이퍼링크(hyperlink)는 예를 들어 사이트 메인 화면에서 기사 링크를 클릭해 해당 페이지로 이동하는 것을 말한다.
1-1. 웹 표준
- 웹 서비스가 모든 브라우저에서 정상적으로 보여지도록 한다.
- HTML5를 웹 표준으로 권고하고 있다.
1-2. 웹 처리 과정
클라이언트(client)는 요청자, 서버(server)는 제공자 역할을 수행한다.
- 클라이언트가 주소창에 특정 도메인 URL을 입력하면 → 컴퓨터는 DNS(도메인 네임 서버, Domain Name Server)에게 해당 IP 주소를 묻고 → DNS는 IP 주소로 돌려준다.
- 이어 웹 브라우저 통해 관련 서버에게 페이지(HTML)를 요청하거든 → 마침내 서버로부터 페이지(HTML)를 응답 받는다.
1-3. 웹 특징
- HTTP(Hyper Text Transfer Protocol) 통신 규약을 사용한다.
- HTML(Hyper Text Markup Language)로 작성된 문서간 연결을 수행한다.
- 텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등 다양한 멀티미디어 서비스 제공한다.
1-4. 반응형 웹
- 웹에 접속하는 디바이스들이 다양해져가고 있다. 그에 따라 웹 서버에서 제공되는 정보들이 각 기기별로 알맞게 맞춰 제공될 수 있도록 만드는 환경을 말한다.
2. HTML
마크업(태그) : 문서의 논리적 구조를 정의하고, 출력장치에 어떤 형태로 보여질 것인지 지시하는 역할
마크업 언어 : 마크업(태그)의 형식 및 규칙을 정의한 언어
- HTML(Hyper Text Markup Language)의 목적은 웹에서 정보를 표현하는 데 있다.
- 즉 웹 페이지를 작성하기 위해 사용되는 마크업 언어인 것이다.
- 웹 브라우저에게 보일 문자열과 이를 감싸는 일종의 해석기호인 태그들로 구성된다. 특정 태그로 감싸면 어떻게 해석되도록 약속된 태그들을 말한다.
2-1. HTML5 특징
- 구조적 설계할 수 있도록 지원: header, footer, section, aside 등 시맨틱
- 그래픽 및 멀티미디어 기능 강화: flash, active x 등을 별도 설치해 사용해야 하는 부분들이 있었으나 이제는 내장된 기능으로서 지원한다
- CSS3, JavaScript 지원: 스타일이 적용된, 나아가 동적으로 작동하는 화면 구현이 가능하다
- 다양한 API 제공: 편리하게 쓸 수 있도록 추가된 API들을 가지고 있다
- 모바일 웹 지원 및 배터리 정보, 카메라, GPS 등 장치 접근 가능
- 웹 브라우저와 서버간 양방향 통신 가능
- 인터넷이 연결되지 않은 상태에서도 애플리케이션 동작: 오프라인 상태에서 실사용은 어렵겠지만, 기본적인 구조를 동작시키는 행위까지는 가능하게끔 한 것이다
2-2. HTML 구성 요소
| 구성요소 | 내용 |
| 태그 (tag) |
'<'와 '>'로 묶인 명령어 시작태그 및 종료태그를 한 쌍으로 이용 |
| 요소 (element) |
시작태그부터 종료태그까지 아우르는 모든 명령어 하나의 HTML 문서는 요소들의 집합 |
| 속성 (attribute) |
요소의 시작태그에 사용, 명령어 구체화 역할 여러 개의 속성 사용 가능, 속성간 구분은 공백 |
| 변수/속성값 (argument) |
속성이 가지는 값 값 입력 시 "" 혹은 '' 이용 |
<p align='center'>HTML/CSS</p>- 시작태그는 <태그>, 종료태그는 </태그>처럼 쓰인다: <p>, </p>
- 여기서 요소는 시작태그부터 종료태그까지, 즉 예시 문장 전체를 아우르는 개념이다.
- HTML/CSS는 내부문자이다.
- align은 시작태그에서만 쓰일 수 있는 속성이다.
- 속성값으로 'center'가 전달되었다. 이처럼 속성값을 작성할 때는 큰따옴표("") 또는 작은따옴표('')로 감싸주어야 한다
- 결과적으로 정렬=가운데 설정이 들어간다.
2-3. HTML 주의사항
- 태그는 대문자로 쓰여도 무방하지만 소문자 작성이 권장된다.
- 시작태그로 시작하면, 반드시 종료태그로 종료한다. 태그는 시작태그-종료태그가 한 쌍이기 때문이다.
- 파일 확장자는 .html으로 설정한다.
- 문자 공백의 경우 1개만 인식하기 때문에 의도적으로 공백을 추가하기 위해서는 특수기호( )를 이용해야 한다.
3. HTML 기본 구조
3-1. <!DOCTYPE html>
- .html 문서 최상단에 HTML5 문서 형식임을 선언한다.
- <!DOCTYPE>은 문서의 형식을 명시하는 태그이다.
- HTML4 및 XHTML은 엄격모드/호환모드/프레임세트모드와 같은 허용 범위 종류를 두었을 정도로 태그 내용이 길고 복잡했으나, HTML5 들어서 위처럼 간략히 작성할 수 있게 되었다.
3-2. <html> </html>
- <html> 태그는 HTML 문서 내용을 정의한다.
- .html 문서의 시작과 끝을 표시하는 것이다.
<html lang="ko">
- lang 속성을 시작태그에 함께 써서 페이지가 어떤 언어로 되어있는지 표시할 수 있다.
- 이는 눈에 보이는 기능을 위해서가 아니라, 검색 엔진으로 하여금 이 페이지에 접근할 때 참조할 수 있도록 작성하는 것이다.
- 제시된 속성값은 "ko" 한국어를 말한다. "설정언어"를 해당 자리에 작성하면 된다. 다른 예로는 de(독일어), en(영어), fr(프랑스어) 등이 있다.
3-3. <!-- 주석 -->
- 코드 작성 내용에 대해 설명을 표기하고자 할 때 주석을 쓸 수 있다.
- 브라우저는 주석 처리된 부분을 해석하지 않고 넘어간다.
4. Visual Studio Code
이번 과정 학습을 위해 비주얼 스튜디오 코드(vscode, Visual Studio Code)를 사용한다.
4-1. vscode 설치
- 설치는 공식 홈페이지 통해 간단히 치를 수 있다: https://code.visualstudio.com/
4-2. extension 추가
- 필요한 확장(extension) 기능을 추가해 사용할 수 있다.
'Frontend > HTML' 카테고리의 다른 글
| [HTML5] 멀티미디어 태그 | img | audio | video (0) | 2022.02.09 |
|---|---|
| [HTML5] 영역 분할 태그 | div | span | iframe | 시맨틱 (0) | 2022.02.09 |
| [HTML5] 테이블 태그 | table | rowspan | colspan | thead (0) | 2022.02.08 |
| [HTML5] 목록 태그 | li | ul | ol | dl (0) | 2022.02.08 |
| [HTML5] 글자 태그 | br | p | cite (0) | 2022.02.08 |
