웹마스터 팁

  2. Support
  3. 웹마스터 팁

레이아웃 css 쉽게 수정하는 방법 (개발자모드 이용)

2013.12.29 16:35

멀티비타민

대부분 각 브라우저의 개발자모드 잘 이용하실거라고 생각됩니다.


처음이라 모르시는 분을 위해 팁을 적겠습니다.


ie,크롬,파이어폭스 이 세가지 브라우저를 많이 쓰시죠


각 브라우저에서 f12버튼으로 개발자 모드를 이용할수 있습니다.


여기선 크롬 개발자모드로 설명하겠습니다.


개발자.jpg



위와 같이 f12를 누르게되면 하단에 개발자모드가 뜨는데


왼쪽에 Elements 부분에서 현재 페이지의 html을 볼수있고


오른쪽 style부분에서 css가 어떻게 작용하는지 편하게 파악할수있습니다.


제일 매력적부분은 개발자모드에서 css를 고쳐서 어떻게 바뀔건지 미리보기식으로 파악한 다음에


편하게 css파일을 수정 할수있다는 점입니다.


그리고 특정 부분을 바로 알고싶으면


요소검사.jpg


이와 같이 오른쪽마우스 - 요소검사를 클릭하면


바로 해당 html부분을 개발자모드에서 찾을수있습니다.


이 게시물을
좋아요(+1)
목록
제목 글쓴이 날짜
[수정] 댓글 삭제 간략화하기 [9] XE만세 2013.11.26
SSL 적용시 작은 iframe 없애기 [1] file explode 2013.11.28
누리CMS 에디터 잡 버그 있으신 분들 보세요. [2] explode 2013.12.03
구글 네이버 검색 방지 로봇 robots.txt meta 태그 jiom 2013.12.05
검색 로봇 막기 (검색 bot 막기) jiom 2013.12.05
[속도UP팁] 최근게시물 위젯 속도개선 [5] 소렌트. 2013.12.09
XE 코어 1.7 버전에서 최근이미지 출력하기 [1] file 때린데 또때려 2013.12.14
레이아웃 css 쉽게 수정하는 방법 (개발자모드 이용) [1] file 멀티비타민 2013.12.29
에디터로 글 작성시 폰트 크기가 12px로 변경되는 현상 해결방법 [7] file jambox 2013.12.31
나만의 익명게시판에서 닉네임 확인하는 방법(꼼수라고 밝힙니다.) [5] 착한부산남자 2014.01.03
홈페이지 접속자, 글(댓글) 작성자 국가 국기 표시 적용 방법 [19] file 라싸 2014.01.08
XE 전체 타이틀(title) 수정하기 [3] pezex 2014.01.16
메뉴추가가 안돼요. [2] file 궁굼자 2014.01.20
회원도 모듈별 적용된 포인트 보게하는 방법. [11] :DunhillBoy 2014.02.01
관리자화면 상단의 업데이트 해야할 항목 안내문구 안 나오게 하는 방법 [1] sejin7940 2014.02.04
통합검색할때 회원별 권한에 따라 내용 보여주기 garnecia 2014.02.07
1.7.4 - 페이지나 게시판 생성 후 설정화면에 가면 '사이트기본스킨사용' 이 적용되지 않는 버그 해결법 sejin7940 2014.02.08
그룹아이콘 모바일에서 표시하기 잉카러부 2014.02.09
마우스드래그금지 레치에스 2014.02.11
2014년 2월 12일부터 갑자기 사이트(관리자 페이지)가 깨지는 경우. 새하나모 2014.02.12
태그 쓰기