html 태그 기본 구성

html 태그 기본 구성

(* 이전에 대충 혹은 한번 이상은 공부했지만 지금부터는 아는 내용이라도 탄탄하게 기억하기 위해

기록, 정리하는 글.)

웹사이트의 뼈대를 구성하는 html 태그의 기본 구성에 대하여!

: html 문서 그 자체의 범위라는 뜻인 태그이다. 대표적으로 lang이라는 속성으로 문서의 언어를 설정해준다!

( ko, en 으로 한국어인지 영어인지 설정해주면 된다. )

: html 문서의 머릿속 문서의 정보를 담고 있는 태그이다.

: html 문서의 몸 부분, 문서의 구조를 담고 있는 태그이다.

html은 프로그래밍 언어는 아니지만 웹사이트의 기본적인 뼈대를 구성해주는 태그이기 때문에 속성 하나하나 제대로 알고 가는 게 나중에 대충 설렁설렁해서 헷갈리고 개판되는 상황 ( 많이 있었음. ) 보다는 오조오억 배 낫다.

* head 태그 웹사이트 머릿속에는 무슨 정보가 들어가 있어야 좋을지...!

1.

meta 정보! 정보는 무엇이냐 정보의 charset 문자 인코딩을 설정 ( 보통 일반적으로 유니코드로 설정. utf-8 )

2.

그러면 meta 정보의 name 이름은 무엇이냐 주로 description 문서의 설명, keywords 문서의 키워드, author 이 문서의 저자로

검색엔진에 걸릴 정보들을 담아준다!

3.

인터넷 익스플로러는 지원이 종료되었지만 그래도 아직까지 사용하는 곳들이 많기 때문에 최신 표준모드로 설정해주어서

호환성 이슈를 대비하는 정보이다.

4.

viewport는 지금 보이는 화면 영역을 뜻한다. 브라우저 창에서 문서를 볼 수 있는 전체적인 화면에 대한 내용.

(1) width 넓이는 device-width 디바이스 또는 특정한 너비에 맞춰주겠다.

(2) user-scalable=no 사용하는 사람이 확대할 수 있느냐? 기본은 yes이지만 no로 설정할 경우 확대할 수 없지만

ios10 이상은 이 내용을 무시함.

(3) initial-scale=1.0 디바이스 넓이와 보이는 뷰포트의 넓이의 비율을 맞춰줌. 0.0과 10.0 사이의 수로 (주로 1.0으로 맞춰준다.)

(4) maximum-scale=1.0 최대로 확대할 수 있는 비율은 1.0!으로 설정.

(5) minimum-scale=1.0 최소로 확대할 수 있는 비율은 1.0!으로 설정.

5.

외부의 문서를 연결해줄 때 link 태그를 사용해준다 rel 은 지금 문서와 외부 문서와의 관계를 표시해주는 것

stylesheet 꾸며주는 css 파일! 아이콘은 icon이라고 표기하면 된다.

href는 외부의 파일이 어디 있는지 경로를 지정해주어야 찾을 것 아니냐 파일 경로를 정확하게 설정해준다.

6.

외부의 자바스크립트 파일을 연결해줄 때 script 태그를 사용해준다. src로 스크립트 파일의 경로를 지정해준다.

from http://comrin.tistory.com/6 by ccl(A) rewrite - 2021-09-30 16:01:23