반응형
크롬 개발자모드 CSS 코드 추가하기
이해되지 않는 CSS 코드가 있는 경우 크롬 브라우저에서 테스트 코드를 작성하는 편 입니다. 직접 눈으로 보며 CSS 코드를 적용하다 보면 브라우저에서 CSS 코드를 적용할 때 불편한 부분이 몇 가지 있지만 개발자 도구를 잘 활용하면 좀 더 편해집니다. 크롬 개발자 도구 오른쪽 부분에는 현재 웹페이지의 CSS 코드가 표시됩니다. 이미 기존에 표시된 CSS 코드의 아이디, 이름, 태그를 직접 수정해 CSS 코드를 수정해서 테스트해 봐도 되지만 기존 CSS를 수정하지 않고 CSS 코드 라인을 추가하는 방법이 있습니다.
CSS 코드가 표시된 영역을 자세히 보시면 +로 표시된 아이콘이 하나 있습니다. 해당 버튼을 눌러 보시면 현재 웹페이지에서 선택한 태그를 기준으로 새로운 CSS 코드를 작성할 수 있는 영역이 새롭게 생겨 CSS 코드를 테스트할 때 기존 코드를 수정하지 않고 CSS 코드를 추가할 수 있는 큰 장점이 있습니다.
중요도가 높거나 특별한 팁은 아니지만, 크롬 개발자 도구를 사용하며 해당 버튼이 작게 표시되어 있어 혹시라도 못 보고 지나치신 분들은 해당 기능도 활용해 보시면 좋을 것 같아 관련 내용을 작성해 보았습니다.
반응형
