개발자 도구 (1) 썸네일형 리스트형 [HTML_CSS] Chrome 개발자 도구를 이용하여 쉽게 편집하기 지금 당장의 티스토리 블로그도 그렇고 프론트엔드를 하면 엄청난 코드 수에 원하는 구역을 쉽사리 찾지 못하는 경우가 있다. F12를 누르면 개발자 도구 창이 뜨게 된다. 여기서 개발자 도구 창의 왼쪽 맨 위를 보면 사각형에 커서가 있는 아이콘이 있다. 이걸 누르고 원하는 부분에 마우스를 가져다 대면 그 부분과 관련된 HTML(파란색 원)과 바로 밑에 CSS(빨간색 원)가 보인다. 이렇게 쉽게 찾고 싶은 곳을 알 수 있다. 수정할 부분에 대해서 개발자 도구를 이용해 미리 적용시켜 보는것도 가능하다. 예를 들어, 구글의 배경색을 검은색으로 하고 Gmail 과 이미지의 글자를 바꾸고 싶다면 위의 방법으로 그 부분의 HTML과 CSS로 가서 코드를 더블클릭하고 수정하면 된다. 이전 1 다음
