개발자모드(F12)이용 CSS수정 사용방법
제목: 개발자모드(F12)이용 CSS수정 사용방법
* 크롬브라우저 기준으로 설명드립니다.
(개인적으로 파이어폭스 개발자전용 브라우저가 사용하기 좋더라구요. 크롬은 캐시때문에..)
- 키보드의 [F12]키를 누르면 개발자모드가 열립니다.
네! 그렇습니다. 저 또한 F12를 모를때는 이게 뭐지? 이상한글자들이 뜨네.. 소스보기인가? 라고 생각을 했습니다.
이 글을 보신다면 CSS기본속성 수정은 질문없이도 50% 이상은 할 수 있게 되십니다.
제일 실용성있는 핵심적인 (제가)자주쓰는 기능만 알려드리겠습니다.
★F12를 눌러 본적없는 분들을 위해 올립니다.
지금 개발자모드를 꾸준히 이용중이거나 고급사용자는 뒤로가기를 눌러주세요.
(사진1)
(사진1-1)
: 이 기능은 클릭하시고,
아래 사진처럼 커뮤니티 최신글을 클릭하시면 그 부분의 사이즈가 나타나고, 우측 엘리먼트(소스보기)에는 많은 소스들 중에 커뮤니티 최신글의 직접적인 소스를 나타냅니다.
그리고 아래 Styles 부분에는 커뮤니티 최신글과 관련된 CSS함수를 나타냅니다.
(사진1-2)
그 CSS 함수기능을 살펴보면, 아래사진의 background~중략~bold ; 부분까지가 위치한곳은 default.css 파일의 975번째 줄이라고 아래 사진에서 빨간사각형 안에서 설명되어 있습니다.
(사진1-3)
그리고 (사진1-4)의 빨간박스안에 마우스를 올려보시면 체크박스가 생기는 것을 보게됩니다.
(사진1-4)
빨간박스안(사진1-4)의 체크박스 중에 임의로 두번째 체크박스인 border-top:2px solid...생략.. 부분의 체크박스(사진1-5)를 없애보면 커뮤니티 최신글의 상단에 #587ef6 색상의 border(테두리)가 사라진것을 볼 수 있습니다.
이런식으로 체크를 하나씩 풀어 보면서 해당하는 부분이 어딘지 쉽게 찾아 낼 수 있습니다.
(사진 1-5)
체크박스 없앤곳의 해당CSS인 default.css의 975번째 줄이 잘 변화되었는지 CSS를 확인 해 보실려면 체크박스 풀었던곳의 우측상단의 default.css?v=20170607-1:975 부분을 눌러보시면 아래사진(사진1-6)처럼 주석처리된 것을 볼 수 있습니다.
하지만! 지금 우리가 하고 있는 것은 가상으로 해보는 것이고, 실제로 적용할려면 975번째줄을 복사해서 자신의 계정에 넣을 default.css파일의 975번째 줄에 그대로 붙여넣으셔야 상단파란테두리를 없애고 생긴 CSS주석이 적용되겠죠?
(사진 1-6)
알고계신분들이 대부분이라고 저는 생각합니다.
하지만 모르실 분들을 위해 작성 해 봅니다.
라이센스안내:
sir.kr 홈페이지 + 그누보드 관련 커뮤니티 외에는 게시를 불허하며,
내용을 그대로 복사하실때는 아래에 출처: sir.kr 을 기입바랍니다.
sir.kr 홈페이지 + 그누보드 관련 커뮤니티 외 공유시에는 sir홈페이지로의 링크만 허용합니다.
댓글 16개
감사합니다.
읽어주셔서 감사합니다.
익스텐션인가요?
변경내용 고정되게 할 수 없나여?
F5 누르면 초기화 되는거같던디