이후로
"테두리색을 바꾸고 싶어요"

"글씨 크기 바꾸는 법 알려주세요"

등등의 질문은 받지 않습니다




1. 예를들어 썸네일 목록의 테두리 색상을 변화시키고 싶을때

구글 크롬 브라우저 우클릭-요소검사를 선택






2. 좌측의 html코드를 클릭해보면서 변경을 원하는 요소를 확인한다(파랑색으로 표시됨)

좌측 : HTML / 우측 : CSS

레이아웃틀 / 디자인 이라고 생각하시면 편합니다


html의 대표적인 셀렉터에는 idclass가 있는데, css에서 id는 #id / class는 .class 이렇게 쓰입니다

현재 변경을 원하는 <a href="/16">이라는 코드는 id가 masonry고 class가 flexible_img_col과 masonry인 div 아래의 a 코드입니다

따라서 CSS에서 .flexible_img_col aflexible_img_col이라는 class를 가지는 객체 아래의 모든 a 코드를 의미합니다


CSS에서는

.flexible_img_col a{

설정:값;

}

과 같이 사용하면 됩니다.





3. 변경 테스트

크롬에서 변경하는 것은 어디까지나 테스트입니다

실제로 변경하려면 skin.html이나 style.css를 변경하고 저장해야 합니다


CSS를 살펴보면

style.css? T =블라블라:942는 style.css 942번째 줄에 해당 코드가 있다는 의미입니다

display는 출력 형태입니다. 만일 어떤 객체를 지우고 싶으면 display:none; 을 입력하면 됩니다

marginpadding의 구분은 다음과 같습니다

우리가 수정하기 원하는 부분은 테두리이므로 border를 수정하면 됩니다

border:굵기 모양 색상헥사코드; 로 입력하면 됩니다

테스트 후 style.css에서 변경사항을 수정합니다

저작자 표시 비영리 동일 조건 변경 허락
신고

티스토리 툴바