크롬 개발자 툴을 알아보자
https://developers.google.com/web/tools/chrome-devtools/ 개발자도구는 마우스 우클릭 > 검사, 단축키 Ctrl+Shift+I 통해 열 수 있습니다. Device Mode 클릭 시 모바일 크기에 따른 화면 확인 가능 사용자 설정도 추가 가능합니다. edit > add custom device... 막대바 마우스 우측 클릭 시 미디어 쿼리 소스 확인 가능합니다. Elements hide element - visibility:hidden과 같습니다. scroll into view - 해당 태그로 스크롤 합니다. DOM Breakpoints - break on한 태그들을 확인 가능합니다. Break on을 설정해두면 자바스크립트 코드가 해당 dom 요소 변화를 줄 때..
크롬 브라우저 개발자 도구 - Device Mode
개발자도구여는 법 - Ctrl+Shift+I - 마우스 우 클릭 > 리스트에서 '검사' 클릭 Device Mode'디바이스 아이콘' 클릭하면 Device Mode 접근 가능 디바이스 사용자 추가 방법은Responsive옆에 '▼' 클릭 한 후 나오는 리스트에서 'Edit..' 클릭 여기에서 디바이스 추가 및 커스텀이 가능하다. Add custom device... 클릭해서 수치 넣고 Add 리스트에서 확인 가능! 저 막대기 바를 눌러서 크기 변경 가능 옵션 아이콘을 눌러서 Show media queries 누르면사용된 미디어 쿼리가 확인 가능. 마우스 올려두면 확인가능하지만파란색이 max-width 고 주황색이 min-width 옵션에서 show rulers누르면 이렇게 설정됩니다. 그리구 capture..