인스티즈앱 본 강좌는 PC버전에서 원할히 볼 수 있어!!!![[1강] 반응형 웹디자인 * 반응형 웹디자인 기본 알아보기!!! | 인스티즈](http://file2.instiz.net/data/cached_img/upload/2015/11/10/22/7e4a5c9052675540beed89f0f8775fbd.png)
![[1강] 반응형 웹디자인 * 반응형 웹디자인 기본 알아보기!!! | 인스티즈](http://file2.instiz.net/data/cached_img/upload/2015/11/10/22/dc805247f7dd4a1a4a3a6e4a0acab180.png)
![[1강] 반응형 웹디자인 * 반응형 웹디자인 기본 알아보기!!! | 인스티즈](http://file2.instiz.net/data/cached_img/upload/2015/11/10/22/7d61b2c0118938da0beababbd73d240b.png)
순서대로
1. 창 크기가 1010px 이상일때
2. 창 크기가 620px 이상일때
3. 창 크기가 480px 이상일때
1번과 2번의 차이는 뭘까?
창이 줄어들면서 가장 맨위의 회색배경의 메뉴가 사라졌어!!!
그리고 파란색 배경의 메뉴 글씨도 사라졌지???
동시에, 검색창이 숨고, 간단하게 아이콘 메뉴가 생겨났어!!!
2번과 3번의 차이는 크지 않아! 글자수가 좀 줄어들었지???
그럼 여기서 드는 생각 있지 않아???
어떻게 상황에 따라서 스타일을 다르게 줄 수 있을까???
바로 CSS(Cascading Style Sheets) 파일에서 해상도에 따른 스타일을 지정 해주면 되~!!!
css파일은 웹페이지의 스타일을 담은 하나의 파일이야.
그럼 css 소스를 어떻게 짜야 해상도에 따른 스타일을 지정해줄까!!!
css의 미디어 쿼리를 이용하면 되!!!
/* 여기는 공통 부분 스타일 */
@media only screen and (min-width: 480px) {
/* 480px 이상 스타일 */
}
@media only screen and (min-width: 620px) {
/* 620px 이상 스타일 */
}
@media only screen and (min-width: 1010px) {
/* 1010px 이상 스타일 */
}설명 해줄게~
여기는 공통 부분 스타일
말 그대로 공통되는 스타일을 적용 해주는거야!
예를들어 삼성전자 홈페이지를 보면 파란색 배경 색깔은 화면이 커지든, 작아지든 색상이 똑같이?
이처럼 어느 창크기에서나 공통되는 스타일을 지정해주는거지
@media only screen and (min-width: 480px) { }
간단히 구문 설명 해줄게!!!
스크린(창)의 최소 크기가 480px 일때, 즉!!! 창 크기가 480px 이상일때의 속성을 정해주는거지.
삼성전자 홈페이지에서 글씨크기가 줄어들게 하는 속성을 넣어줄수 있지!!!
@media only screen and (min-width: 620px) { }
위에서 설명했다시피 창 크기가 620px 이상일때의 속성을 정해줘.
삼성전자 홈페이지에서 620px 이상일때 회색배경의 메뉴가 사라지고, 파란색 배경의 메뉴 글씨들이 사라진것처럼 이 속성들을 넣어줄수 있어!
@media only screen and (min-width: 1010px) { }
창 크기가 1010px 이상일때의 속성을 정해줘.
회색배경의 메뉴, 파란색 배경의 메뉴 글씨들을 출력해주는 소스를 넣어주면 되겠지???
간단하고 쉽게 이해할수 있게 쓴다고 썼는데 이해 했는지 모르겠어 ㅜㅜ
혹시나 이해 안가는 부분은 댓글 달아줘
확인하는 즉시 바로 답변 줄게!!!
다음 강좌는 삼성전자 홈페이지랑 비슷한 레이아웃을 구성하고 스타일을 입혀볼게!!!