부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기_2차

부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기_2차

 

서브라임텍스트 설치와 반응형 코딩

 

1. 프리웨어 코딩 프로그램 설치
http://www.sublimetext.com/3
2. 플러그인 설치를 할 수 있게 세팅
https://packagecontrol.io/
① 메인페이지에 있는 install now 버튼을 클릭하고 sublime
text 3 영역 안에 있는 내용을 복사한다.
② 서브라임에서 view>show console(ctrl+')클릭하여 콘솔창
열고 붙여 넣기
③ 서브라임 툴을 열고 tools>command pallete(ctrl+shift+p)
를 눌러 텍스트 입력창을 띄우고 install 을 입력하여 엔터후
설치하고 싶은 플러그인 이름을 입력!

이렇게 옛날에 했었는데 이제는 Ctrl +Shift + P를 눌러서 'Install Package Control' 을 치면 끝

 

2. 필요한 플러그인들을 차례대로 설치

각 각의 플러그인 설치 시마다 Ctrl + Shift + P 하여 입력창에 install 엔터 후 플러그인 입력을 하고 엔터하면 된다.

① emmet : 코딩 빠르게 해주는 플러그인
② bracket highlighter: 쌍으로 존재해야 하는 코드를 하이라이
트로 처리해주는 플러그인
③ sidebar enhancement : 사이드 바의 기능을 강화해주는 플
러그인
④ color picker : 색상 팔레트 설치하는 플러그인

** 현재는 이 모든 플러그인들이 다 깔려져 있는 것 같음 -> 그렇게 생각하는 이유: 검색을 해도 안 나오기 때문 **

 

 

하지만 이제는 VS code를 많이 하기에 VS code로 하겠다.

 

4. css를 활용하여 반응형 웹 코딩하기 핵심포인트

- 디바이스 장치에 따라 레이아웃이 바뀌는 웹페이지

- 미디어쿼리의 사용

@media규칙을 이용하여 반응형 웹을 만들어 봅니다.

① 아래 메타태그 꼭 포함하기
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

① 아래 메타태그 꼭 포함하기
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

② 다양한 디바이스 사이즈 별 미디어쿼리 예시
@media screen and (min-width: 1600px){
css 스타일
}
@media screen and (min-width: 1280px) and (max-width: 1599px){
css 스타일
}
@media screen and (min-width: 1024px) and (max-width: 1279px){
css 스타일
}
@media screen and (min-width: 780px) and (max-width: 1023px){
css 스타일
}
@media screen and (min-width: 640px) and (max-width: 779px){
css 스타일
}
@media screen and (min-width: 480px) and (max-width:639px){
css 스타일
}
@media screen and (max-width:479px){
css 스타일
}

③ 원하는 디바이스 선택하여 미디어 쿼리별 스타일 코딩하기
/*디바이스 장치가 최소 1200 이상일 때 :laptop컴퓨터 큰 모니터용*/
@media (min-width: 1200px){
html, body{background-color: purple}
}
/*디바이스 장치가 최소 992 이상일 때 :laptop컴퓨터 작은 모니터용*/
@media (min-width: 992px){
#wrap{width: 80%; }
}
/*디바이스 장치가 최소 768 이상일 때 :타블렛용*/
@media (min-width:768px {
html, body{background-color: orange}
#content_wrap #content{font-size: 1.5em;}
}
/*디바이스 장치가 최대 767 이하일 때 :스마트폰용*/
@media (max-width:767px) {
html, body{background-color: pink}
#content_wrap #content{font-size: 2em; }
nav ul li{width: 100%;}
}

④ 모니터 장치일 때의 스타일을 코딩해 봅시다.
/*디바이스 장치가 최소 992 이상일 때 :laptop컴퓨터용*/
@media (min-width: 992px){
#wrap{width: 80%; }
}

⑤ 타블렛 장치일 때의 스타일을 코딩해 봅시
다.
/*디바이스 장치가 최소 768 이상일 때 :
타블렛용*/
@media (min-width:768px) {
html, body{background-color: orange}
#content_wrap #content{font-size:
1.5em;}
}

⑥ 스마트폰 일때의 스타일을 코딩해 봅시다.
/*디바이스 장치가 최대 767 이하일 때 :
스마트폰 용*/
@media (max-width:767px){
html, body{background-color: pink}
#content_wrap #content{font-size:
2em; }
nav ul li{width: 100%;}
}

꼭 기억해야 할 포인트 정리
1. 디바이스 장치에서 레이아웃이 달라지는 반응형 웹페이지를 만들 때 기본적으로 꼭 포함해야
하는 meta태그에서 아래 빈칸에 들어가는 코딩은 무엇일까?
< meta name="viewport" content="width=device-width, initial-scale=1.0" />
2. 미디어쿼리 규칙의 코딩은 @media (디바이스 사이즈){
css 스타일
} 이다.
3. 부트스트랩에서는 디바이스 장치의 사이즈를 크게 3개로 나누는데 그 중에 laptop 컴퓨터용
사이즈는 디바이스 사이즈가 최소 992 px 이상일 때이고, 스마트폰은 디바이스 사이즈가 최대
767 px 이상일 때이다.