1. HTML반응형 웹사이트 만들기 - html의 head에 meta태그 지정

반응형 웹사이트를 만드는 과정을 작성해보았다.

 

 

먼저 visual studio code를 열어서 아래와 같이 폴더와 파일을 구성해주는게 시작이다.

기본 시작을 이렇게 시작하면 된다.

 

 

이제 index.html에서 visual studio code의 자동완성 기능을 이용해 HTML 기본틀을 생성한다.

 

 

그리고 검색엔진과 viewport를 위해 meta태그들을 작성해보자

<meta name="description" content="반응형 웹사이트 온라인 강의 리스트"/>
<meta name="keywords" content="반응형, 강의, 온라인 강의, 파이썬, 풀스택"/>
<meta name="author" content="shin junhyeok"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

1. description : 웹페이지 설명

2. keywoeds : 웹페이지의 태그(사용자가 어떤 키워드를 가지고 검색했을 때 이 웹페이지가 나오면 좋을지)

 -하지만 구글 같은경우에는 이 키워드를 무작위로 작성해서 이 키워드 자체만으로 웹페이지를 사용자에게 보여주진 않는다. (없는 것보단 나으니까)

3. author : 저자

4. viewport : 다양한 디바이스에서 이 웹페이지가 보여질때 어느정도 해상도로 보여질지 세팅하는 것

 - width=device-width : width를 각각의 디바이스마다 알맞은 해상도를 뜩하는 device-width로 설정

 - user-scalable : 사용자가 확대 축소를 못하도록 설정함(깨질 수가 있으므로) -디바이스가 워낙 다양해서 적용안될 때가 있음

 - initial-scale=1.0 : 처음에는 100%로 설정

 - maximum-scale=1.0 : 최대 확대 100%로

 - minium-scale=1.0 : 최소 축소도 100%로 설정해서 최대한 화면이 안깨지게 함

5. http-equiv="X-UA-Compatible" content="IE-edge" : 익스플로어가 화면 렌더링하는 엔진을 다른 것을 쓰지 않도록 최신엔진을 쓰도록 지정해줌