개발자 도구로 css 편집하기

개발자 도구로 css 편집하기

개발자 도구로 적용된 css를 확인하는것뿐만 아니라 실제로 편집해 어떻게 변하는지도 확인할 수 있습니다.

지금까지 설명한 순서대로 확인해 보고 싶은 부분을 클릭해 style탭에 적힌 값을 클릭한 후 변경할 수도 있습니다.

 

예를 들어 색상이나 글꼴을 바꾸면 어떻게 보이는지 확인 하는것입니다.

이를 가장 잘 활용할 수 있는것은 바로 미세한 수치조정입니다. maring, padding, 위치 등을 세세하게 변경해야 한다면 css 파일을 편집하고 미리 보기로 확인하는것보다 개발자 도구에서 값을 변경하면서 확인하는것이 훨신 빠르고 편합니다. 그리고 화살표 상/하 키를 사용해 1씩 수치를 변경할수도 있습니다.

 

스타일 추가

수정하고 싶은 요소에 새로운 스타일을 추가할 수도 있습니다.

sylte탭에서 css가 끝나는곳의 오른쪽 부분을 클릭하면 속성을 직접 입력하는칸이 생성되고 속성과 값을 추가할 수 있습니다. 

 

마우스 오버할때의 스타일

우측상단의 ':hov'를 클릭하면 ':acive', ':hover', ':focus', ':visited' 등 여러 항목이 나타납니다.

이 중  ':hover'를 체크하면 마우스 오버했을때의 스타일을 확인 및 편집할 수 있습니다. 

 

 

 

다른 디바이스의 사이즈 확인

개발자 도구를 활용해 모바일 사이즈에서 어떻게 보이는지도 확인할 수 있습니다.

사각형과 화살표로 조합된 아이콘 바로 옆의 사각형 두개가 겹친 아이콘을 클릭하면 표시가 바뀝니다. 

확인하고자 하는 디바이스명을 클릭해 다른 디바이스에서는 화면이 어떻게 보이는지 볼수 있습니다. 

 

모바일 사이즈는 세로가 길기 때문에 개발자 도구에서 레이아웃을 변경하면 더 편리하게 확인이 가능합니다.

 

개발자 도구 우측 상단에 있는 세개의 점을 클릭하면 'dock side'가 나옵니다. 브라우저 화면과 개발자 도구 화면 분할을 변경 할 수 있습니다.

 

 

 

 

개발자 도구로 편집한 스타일을 저장하는법

개발자 도구는 어디까지나 검증하기 위한 툴이므로 페이지를 새로고침하면 앞서 편집한 스타일을 초기화 됩니다.

개발자 도구에서 스타일을 작성할때마다 css파일에 복사,붙여넣기하여 저장해야 합니다. 

 

'style'탭에서 보이는 css는 일반적인 텍스트처럼 드래그,선택,복사가 가능하므로 검증 및 수정이 끝난 텍스트는 잊지 말고 css파일에 저장하도록 합시다.