• 북마크
  • 1:1문의
  • 새글
  • 회원가입
  • 로그인

팁 & 테크

  • Home
  • 스터디
  • 팁 & 테크

요소검사 활용하기

2,577 2015.03.08 11:35

짧은주소

본문

디자인적을 변경해 보거나 문제가 생겼을 경우 해당부분을 수정해서 바로 볼 수 있는 요소검사를 활용하는데요.

혹시나 모르시는 분들을 위해 예를 들어 간단하게 설명을 해 보겠습니다.

 

공지사항 말풍선 부분의 사각형을 둥글하게 만들어 보겠습니다.

 

해당 부분을 마우스 오른쪽 클릭해서 요소검사를 선택합니다.

 

그럼 위와 같은 요소검사 창이 생기는데요. (참고로 파이어 폭스이며 다른 브라우저도 거의 비슷합니다.)

왼쪽 창에 마우스를 가져가면 해당 부분이 아래와 같은 정보가 나옵니다. 

 

 

오른쪽 창에 해당 클래스에 border-radius: 5px !important; 를 넣어 줍니다.( 뒤에 !important 를 넣는 것은 이윰 기본 스타일이 '0 !important' 으로 강제 되어 있기 때문에 넣어주는 것입니다.) 

 

그럼 바로 브라우저에 적용된 모습을 보실 수 있으실 겁니다.

 

그럼 이것을 css파일에 수정을 해야 하는데요.

A부분에 마우스를 가져가면 css파일 경로가 나옵니다. 그 파일을 열어 주세요. (혹시나 원본을 건드리지 않고 싶은 분은 eyoom/theme/basic/css/custom.css에 적으면 될것 같습니다.)

B부분과 같은 이름을 찾습니다.

C부분을 추가합니다.

그리고 저장을 하고 새로고침을 하면 적용된 스타일을 보실 수 있습니다.

 

이상 간단하고 기초적인 요소검사 팁이었습니다.

요소검사가 다양한 기능이 있지만 초보라 디자인 수정할 때만 사용하는지라 

더 많은 기능은 고수분께서 알려주실 겁니다. 

 

 

0
좋아요!
2
- 곡우 메일보내기 아이디로 검색 - 회원등급 : 새싹/Level 7 - 포인트 : 26,877
레벨 7
경험치 5,006

Progress Bar 58%

- 가입일 : 2015-01-20 11:27:41
- 서명 :
- 자기소개 :
댓글목록

마틴님의 댓글

좋은 팁들 올려주셔서 많이 배우고 있습니다.

감사합니다.

축하합니다. 첫댓글 포인트 19포인트를 획득하였습니다.

곡우님의 댓글

저도 초보라 같이 배워나가는 거죠 :-)

김나리님의 댓글

좋은 공부 입니다.

축하합니다. 지뢰폭탄 포인트 50포인트를 획득하였습니다.

모기군님의 댓글

감사합니다

김군님의 댓글

좋은정보네요

boaee님의 댓글

정말 좋은 정보 입니다. 감사드립니다.

바다사나이님의 댓글

좋은 정보 감사합니다.

Total 123건 1 페이지
번호 제목 글쓴이 날짜 추천
123 이윰EGG 아이디로 검색 2016.08.24 3,794 0
122 절대섹쉬꽃미남 아이디로 검색 2016.08.12 3,064 1
121 그림자밟기 아이디로 검색 2016.03.26 1,656 0
120 그림자밟기 아이디로 검색 2016.03.26 1,508 1
119 l2zeo 아이디로 검색 2016.01.27 1,722 0
118 수퍼개미 아이디로 검색 2015.10.27 2,637 0
117 l2zeo 아이디로 검색 2015.10.26 9,605 0
116 l2zeo 아이디로 검색 2015.10.26 2,794 0
115 shadow 아이디로 검색 2015.10.06 5,423 1
114 shadow 아이디로 검색 2015.09.21 1,704 0
113 shadow 아이디로 검색 2015.09.20 1,763 1
112 l2zeo 아이디로 검색 2015.09.18 6,940 0
111 shadow 아이디로 검색 2015.09.17 1,294 1
110 shadow 아이디로 검색 2015.09.17 2,310 0
109 shadow 아이디로 검색 2015.08.17 3,372 1
108 shadow 아이디로 검색 2015.07.30 3,074 1
107 암스원 아이디로 검색 2015.07.20 3,829 1
106 이윰넷 아이디로 검색 2015.07.08 3,877 1
105 갓구운빵 아이디로 검색 2015.07.03 1,965 0
104 암스원 아이디로 검색 2015.07.01 3,544 2
LOGIN
사이드 메뉴

최신글이 없습니다.

최신글이 없습니다.

출석 랭킹

오늘의 랭킹

회원사진

닉네임

개근왕

최다1위

shadow shadow
Ranking

    출력할 랭킹이 없습니다.

  • 01 shadow
    674,374
  • 02 신비
    335,419
  • 03 가을하늘
    204,735
  • 04 mame
    202,630
  • 05 이윰MOUNT
    199,181
  • 06 미스코리아
    163,939
  • 07 레오나르도
    147,576
  • 08 테크니션
    142,655
  • 09 이윰IN
    135,258
  • 10 비온뒤맑음
    127,882
  • 01 shadow
    28,938
  • 02 joosam
    23,606
  • 03 티보리
    21,954
  • 04 홍인
    18,644
  • 05 레오나르도
    18,088
  • 06 이윰IN
    17,983
  • 07 도깨비
    16,614
  • 08 이윰EGG
    16,105
  • 09 자이언트
    14,698
  • 10 미스트
    14,379