개발자모드(F12)이용 CSS수정 사용방법 > 그누보드5 팁자료실

그누보드5 팁자료실

개발자모드(F12)이용 CSS수정 사용방법 정보

개발자모드(F12)이용 CSS수정 사용방법

본문

제목: 개발자모드(F12)이용 CSS수정 사용방법 

* 크롬브라우저 기준으로 설명드립니다.

(개인적으로 파이어폭스 개발자전용 브라우저가 사용하기 좋더라구요. 크롬은 캐시때문에..)

- 키보드의 [F12]키를 누르면 개발자모드가 열립니다. 

네! 그렇습니다. 저 또한 F12를 모를때는 이게 뭐지? 이상한글자들이 뜨네.. 소스보기인가? 라고 생각을 했습니다.

이 글을 보신다면 CSS기본속성 수정은 질문없이도 50% 이상은 할 수 있게 되십니다.

 

제일 실용성있는 핵심적인 (제가)자주쓰는 기능만 알려드리겠습니다.

★F12를 눌러 본적없는 분들을 위해 올립니다.

지금 개발자모드를 꾸준히 이용중이거나 고급사용자는 뒤로가기를 눌러주세요.

(사진1)

c92f4bbbb59b7cd128dd29c7856370e1_1497810390_4643.png
(사진1-1) 

c92f4bbbb59b7cd128dd29c7856370e1_1497810431_4134.png : 이 기능은 클릭하시고, 

 

아래 사진처럼 커뮤니티 최신글을 클릭하시면 그 부분의 사이즈가 나타나고, 우측 엘리먼트(소스보기)에는 많은 소스들 중에 커뮤니티 최신글의 직접적인 소스를 나타냅니다. 

그리고 아래 Styles 부분에는 커뮤니티 최신글과 관련된 CSS함수를 나타냅니다.

(사진1-2)
c92f4bbbb59b7cd128dd29c7856370e1_1497810546_4606.png
 

그 CSS 함수기능을 살펴보면, 아래사진의 background~중략~bold ; 부분까지가 위치한곳은 default.css 파일의 975번째 줄이라고 아래 사진에서 빨간사각형 안에서 설명되어 있습니다.

(사진1-3)

c92f4bbbb59b7cd128dd29c7856370e1_1497810995_0792.png

 

그리고 (사진1-4)의 빨간박스안에 마우스를 올려보시면 체크박스가 생기는 것을 보게됩니다.
(사진1-4)

c92f4bbbb59b7cd128dd29c7856370e1_1497811351_089.png
 

빨간박스안(사진1-4)의 체크박스 중에 임의로 두번째 체크박스인 border-top:2px solid...생략.. 부분의 체크박스(사진1-5)를 없애보면 커뮤니티 최신글의 상단에 #587ef6 색상의 border(테두리)가 사라진것을 볼 수 있습니다.

이런식으로 체크를 하나씩 풀어 보면서 해당하는 부분이 어딘지 쉽게 찾아 낼 수 있습니다.

(사진 1-5)

c92f4bbbb59b7cd128dd29c7856370e1_1497811484_5033.png
체크박스 없앤곳의 해당CSS인 default.css의 975번째 줄이 잘 변화되었는지 CSS를 확인 해 보실려면 체크박스 풀었던곳의 우측상단의 default.css?v=20170607-1:975 부분을 눌러보시면 아래사진(사진1-6)처럼 주석처리된 것을 볼 수 있습니다. 

 

하지만! 지금 우리가 하고 있는 것은 가상으로 해보는 것이고, 실제로 적용할려면 975번째줄을 복사해서 자신의 계정에 넣을 default.css파일의 975번째 줄에 그대로 붙여넣으셔야 상단파란테두리를 없애고 생긴 CSS주석이 적용되겠죠?

(사진 1-6)

c92f4bbbb59b7cd128dd29c7856370e1_1497811894_012.png
 

알고계신분들이 대부분이라고 저는 생각합니다.

하지만 모르실 분들을 위해 작성 해 봅니다.

 

라이센스안내: 

sir.kr 홈페이지 + 그누보드 관련 커뮤니티 외에는 게시를 불허하며, 

내용을 그대로 복사하실때는 아래에 출처: sir.kr 을 기입바랍니다.

sir.kr 홈페이지 + 그누보드 관련 커뮤니티 외 공유시에는 sir홈페이지로의 링크만 허용합니다.

스폰서링크

댓글 전체

전체 908 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

진행중인 포인트경매

  1. 라온보드 출시 기념 머그컵

    참여129 회 시작17.10.12 09:59 종료17.10.17 09:59

(주)에스아이알소프트 (06253) 서울 강남구 강남대로 310, 1312호 (역삼동, 유니온센터) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT