모래알 반응형웹

웹페이지 작업을 할 때 반드시 알아두어야 할 크롬(Chrome)의 개발자도구, 즉 검사기능이다.크롬 개발자 도구에 대하여 많은 글들이 있다. 하지만 전문성을 곁들여 설명을 하고 있어 대체로 처음 사용자에게는 어렵게 느껴진다.여기에서는 크롬 개발자 도구에서 늘 사용하는 기능만 간단하게 소개하겠다. 크롬의 개발자도구는 F12, Ctrl+Shift+I, 마우스오른쪽 메뉴 '검사'로 실행할 수 있다. 크롬의 개발자 도구는 HTML 소스영역, 적용된 CSS 영역, 페이지의 에러메시지를 보여주는 Console 영역으로 삼분할되어 있다. 이미 이전 포스팅 반응형 테스트 (Responsive Tester), http://passauer1083.tistory.com/19에서 소개한 바 있는 브라우저의 크기를 테스트할 수..

반응형 홈페이지를 만들 때 각각의 화면 너비에 맞게 반응형이 잘 되고 있는 지 확인할 필요가 있다.수많은 모바일 기기들을 모두 준비해서 하나하나 확인하는 것이 최상이겠지만 (실제로 이렇게 하는 사람들을 본 적이 있다.) 크롬 브라우저에서 간단하게 확인할 수 있다. 아래에 2개의 크롬 확장프로그램과 다음에서 제공하는 사이트를 소개한다. 하지만 가장 정확한 브라우저 사이즈 조절은 크롬의 개발자도구(F12) 에서 반응형을 체크하는 것이다.먼저 크롬 개발자 도구에 있는 내용을 살펴보자. 현재 화면에서 F12눌러서 개발자 도구를 띄우고 왼쪽 위의 아이콘을 클릭. 아래 화면에서 빨갛게 표시된 부분에 화면의 크기를 입력하면 가장 정확한 브라우저 사이즈로 현재의 웹페이지를 체크할 수 있다. Responsive Web ..

홈페이지를 제작하는 중이거나 홈페이지의 특정 내용을 검색엔진이 가져가게 하고 싶지 않을 때다음과 같이 설정한 파일을 서버에 업로드 해두면 된다. 서버 루트에 다음과 같은 내용으로 robots.txt라는 이름을 가진 파일을 만들고 이 파일을 서버 루트에 두면 규정을 지키는 검색엔진들(구글 등)의 검색로봇이 서버의 웹사이트들을 뒤지지 못한다. [robots.txt 내용] User-agent: * Disallow: / 웹작업을 할 때 잠시 검색엔진 로봇이 웹페이지 내용을 가져가지 못하게 할 때,사이트를 다 만들고 나면 풀어야 한다.