Doctype, HTML 내부 살펴보기

Study/HTML5 & CSS3

 

  • Fastcampus 프론트엔드 웹 개발의 모든 것 초격차 패키지 - Ch 3, Ch4



Review

 

 

 

 

 


 

  • Fastcampus 프론트엔드 웹 개발의 모든 것 초격차 패키지 - Ch 3, Ch4

 

 

Doctype(DTD, Document Type Definition)

: 문서(페이지)의 HTML 버전을 지정한다. HTML5(표준)

마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 

이해하면 되는지를 알려주는 용도로 사용한다.

 

우리가 브라우저로 접속하는 각 웹 페이지는 기본적으로 하나의 HTML 파일이 동작하는 것이기 때문에,

HTML(특히 index.html)을 하나의 페이지로 이해할 수도 있다.

 

 

html 태그

: 문서의 전체 범위를 지칭한다. HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할을

한다

 

 

head 태그

: 문서의 정보를 나타내는 범위를 지칭한다.

웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은 웹 페이지의

보이지 않는 정보를 작성하는 범위이다.

 

 

body 태그

: 문서의 구조를 나타내는 범위를 지칭한다.

사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은 웹 페이지의

보여지는 구조를 작성하는 범위이다.

 

 

title 태그 

: HTML 문서의 제목(title)을 정의할 때 사용한다. 작성한 제목은 웹 브라우저의 탭에 표시된다.

 

 

link 태그

: 외부 문서를 가져와서 연결할 때 사용한다. (대부분 CSS 파일)

rel은 Relationship의 약어이며 가져올 외부 문서가 현재의 HTML과 어떤 관계인지를 명시하는

HTML 속성(Attribute)이고,

href는 Hyper Text Reference의 약어이며 브라우저가 참조할 특정 경로(Path)를 지정하는 HTML

속성(Attribute)이다.

 

link 태그를 이용해 파비콘도 연결할 수 있다. Favicon(파비콘)은 Favorite Icon의 약어이다.

HTML Favicon을 적용할 때는 이름을 favicon이라고 지정하길 권장하며, favicon.ico 혹은

favicon.png 파일이 주로 사용된다.

 

 

style 태그

:스타일(CSS)을 HTML 문서 안에서 작성하는 경우에 사용한다.

 

 

script 태그

: src 속성을 사용해 js 파일을 가져와 현재 HTML 파일에 연결하는 방식을 통해 개발자 도구에

콘솔 탭에 특정한 문자를 출력한다.

src(Source의 약어)는 사용할 소드 코드(파일)를 지정하는 HTML 속성(Attribute)이다.

 

src 라는 속성을 사용하는 방식은 link 태그처럼 외부에 있는 자바스크립트(JS) 파일을 가져오는

경우에 사용할 수 있는 방식이다. 

반면 style 태그처럼 HTML 문서 내부에 직접 자바스크립트(JS) 코드를 작성할 수도 있다.

 

 

meta 태그

: HTML 문서(웹 페이지)의 제작자, 내용, 키워드 같은 여러 정보를 검색 엔진이나 브라우저에게

제공한다.

meta 라는 것은 정보를 의미하며, 기본적인 정보를 meta 태그를 통해 제공하는 것이다.

그 기본적인 정보의 종류는 name이라는 속성 부분에 명시하면 된다.

content 라는 속성은 그 정보의 실제 값을 나타낸다. 

 

우리는 스마트폰(태블릿)에서 웹 사이트를 오픈할 수 있다.

그 스마트폰이 모바일 장치(디바이스)이다.

그리고 그런 모바일에서 웹 페이지의 가로 너비를 모바일 환경의 가로 너비와 일치시키거나, 

웹 사이트가 처음 출력될 때 확대/축소 여부나 정도를 어떻게 결정하겠다 등 몇 가지 정보를 META

태그로 명시하는 개념이 name="viewport"의 내용이다.

 

charset(Character Set의 약어)은 문자 인코딩 방식을 지정하는 HTML 속성(Attribute)이며,

화면에 표시하는 문자를 어떠한 방식으로 인코딩할 것이냐를 나타내는 속성이다.

문자 인코딩(Encoding)이란 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것을 말하며,

우리가 웹 페이지에서 볼 수 있는 각각의 문자를 어떤 식으로 처리할 것인지에 대한 방식을 의미한다.

대표적으로 한글 사용에서는 EUC-KR 혹은 UTF-8 등이 사용되며, 웹에선 UTF-8의 사용을 권장한다.

UTF-8을 사용하면 웹에서 사용하는 가장 모던한 방식으로 문자들을 처리할 수 있다.

 

 


 

alt(Alternate 단어의 약자)는 이미지가 출력되지 못하는 경우 대신 출력할 텍스트라고 해서 

대체 텍스트라고 부른다. 이미지 경로가 잘못되거나 네트워크가 불안정하거나 등 이미지를 출력할

수 없는 다양한 상황에 이미지 대신 화면에 나오는 글자이다.

 

 

 

 

 

반응형