CSS 소스 작성할 때에 크롬브라우저로 편하게 코딩하는 방법
웹사이트의 HTML 태그의 수정 및 디자인 등을 이용할 때 CSS 코드를 많이 작성하실 겁니다. 뭐 이미 현업에서 작업 하시는 분들은 대부분 아시는 내용이시겠지만 필요한 분들이 있을 수 있으니 크롬 브라우저를 이용해서 CSS 소스 코딩을 편하게 하는 방법에 대해서 간단히 작성해 보려고 합니다.
만약 크롬 브라우저를 잘 모르시는 분들은 크롬 브라우저를 설치하는 방법에 대해서 작성한 적이 있으니 필요하신 분들은 참고하시면 좋을 것 같습니다. 링크된 경로를 참고하시기 바랍니다. - http://zzarungna.tistory.com/472
물론 소스 코드를 작성하는 곳에서 CSS 코드를 많이 다뤄보고 익숙하고 기억하고 있으신 분들은 소스를 입력하는 곳에서 소스를 입력하면 좋겠지만 저와 같이 필요한 부분만 그때그때 코드를 확인하고 사용하는 분들은 크롬 브라우저에서 실시간으로 웹페이지를 확인하면 CSS 코드를 획득할 수 있기 때문에 개인적으로는 이 방법을 많이 사용하는 편입니다.
먼저 소스코드를 작업하는 곳에서 CSS 작업이 필요한 HTML 태그에 ID를 부여하고 CSS 태그에서 해당 ID를 적어 주시면 됩니다.
아래 이미지와 같이 어떤 웹사이트를 개발하고 있는 상황입니다. 크롬 브라우저를 이용해 F12 단축키를 누르시면 소스를 수정할 수 있는 영역이 나오게 됩니다.
그럼 아래 이미지의 빨간색 영역에 해당 웹사이트의 코드를 볼 수 있는 창이 새롭게 나오게 됩니다.
그런 뒤에 왼쪽 아래에 있는 화살표 방향에 표시된 버튼을 누르시고 실제 CSS 코드 수정 작업이 필요한 HTML 태그를 선택해 주시면 됩니다.
그럼 HTML 특정 태그에 CSS ID 선택자 부분이 크롬 브라우저에 들어가 있습니다. 여기서 직접 눈으로 확인할 수 도 있고 CSS 사용 문법 등이 크롬 브라우저에서 표시가 되기 때문에 편하게 작업이 가능합니다.
작업이 끝나면 직접 눈으로 테스트도 완료되었기 때문에 해당 영역을 마우스로 드래그하여 복사하시면 됩니다.
그런 뒤에 다시 소스 코드를 입력하는 부분에서 크롬 브라우저에서 작업한 소스코드를 그대로 갖다 붙이시면 CSS 코드 문법도 오류가 없고 눈으로 모두 확인하여 작업을 끝냈기 때문에 개인적으로는 이 작업을 많이 이용해 CSS 작업을 하는 편입니다.
프로그래밍 언어 중에서 CSS 코드를 작성할 때 크롬 브라우저를 이용하시면 위처럼 좀 더 편하게 작업이 가능하리라 생각합니다. 사용하다 보니 저는 대부분 크롬 브라우저에서 CSS 작업을 진행하게 되더군요.
