Chrome 은 개발자에게 많은 편의사항을 제공하는대요. 여기서 설명하는 디바이스 모드도 그중 하나로 PC 용 Chrome 에서 반응형 웹이나 모바일 웹의 디자인을 확인할 수 있는 방법입니다. 물론 PC로 작업하기 때문에 Javascript 디버깅 및 CSS 임시 수정도 쉽게 가능합니다. 우선 페이지에서 우측 버튼을 클릭 후 '검사'를 눌러서 개발자 모드로 들어가시기 바랍니다. * 예전에는 '요소 검사' 였는데 안 본 사이에 변했네요. FireFox 랑 겹쳐서 그런가... FireFox는 그대로 '요소 검사'를 사용하고 있네요. 그리고 아래와 같이 '검사' 창의 좌측 상단에 있는 모바일 모양의 아이콘을 클릭해주시기 바랍니다. 이제 아래와 같이 디바이스 모드로 변경된 화면을 확인하실 수 있으실 것입니다. ..
Bootstrap 에서 사용하는 Mediaquery 의 사이즈 입니다. (v. 3.1.1) Media query 란 화면의 사이즈에 따라 Stylesheet 를 적용하는 방식으로 반응형 웹을 만들때 javascript 가 아닌 Stylesheet 를 이용하여 만들때 많이 사용합니다. /* 가장 작은 크기 */ @media(max-width:767px){ } /* 중간 1*/ @media(min-width:768px){ } /* 중간 2 */ @media(min-width:992px){ } /* 가장 큰 크기 */ @media(min-width:1200px){ } 위와 같은 코드를 에 넣어주시고 각 크기에 맞게 원하는 스타일을 넣어 주시면 됩니다.
- Total
- Today
- Yesterday
- 개발
- 서버 개발
- 게임 개발
- 개발자
- 서버
- SNS
- php
- 데이터베이스
- Developer
- 웹
- Laravel
- 튜토리얼북
- 게임
- Nodejs
- 에러
- mac
- cocos2d-x
- 맥
- 웹 개발
- 설치
- it
- 웹 개발자
- html
- JavaScript
- 우분투
- Tutorialbook
- ubuntu
- Database
- 인터넷
- 웹 서버
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |