블로그 꾸미기 - 해커같은 배경 및 글자색 변경하기 CSS,HTML 편집 2

#블로그 꾸미기 - 해커같은 배경 및 글자색 변경하기 CSS,HTML 편집 2

 

저번 시간에 footer부분(웹 페이지중 아래 부분)의 배경색과 글자색을 바꾸는 작업을 했습니다.

그러나, 링크가 걸려있는 text는 적용이 되지 않았는데요.

이제 링크가 걸려있는 부분도 색깔을 바꿔 봅시다.

 

코드 :

 

#footer a[href], #footer-widget a[href]{ 
color:#00E6f9; 
}

 

코드해석 :

 

#(id를 만드는 겁니다. 원하는 디자인을 하고 이 디자인 모듈을 id로 만들어서 원하는 태그에 적용합니다. div태그에 적용하고 싶으면 div="footer" 라고 적용합니다.

footer (id 이름이 footer입니다.

a[href] (id d이름이 footer이고 그 아래 태그중에서 또 a태그라는 녀석에 스타일을 적용하는데 게다가, href라는 링크가 걸려있는 a태그에 적용합니다.

,(콤마는 뒤에 있는 녀석도 스타일을 적용하겠다는 의미 입니다.)

#

footer-widget 

a[href]

(footer-widget이라는 id를 만듭니다.(id에는 글자색을 변경하는 CSS 가 담겨있습니다. 이 footer-widget이란 id가 적용된 태그의 하위 태그중 a태그 중 href(링크)가 걸려 있는 태그에 적용합니다. )

{ 
color:#00E6f9;  (이런 색깔을..)
}

 

코드 부분을 복사 붙여 넣기 하고

HTML편집에서 CSS 페이지에 붙여넣기 하시면 됩니다.~~(단, 제가 쓰는 스킨만 가능해요)

 

다른 스킨을 사용하시는 분도 직접 footer부분의 요소를 찾아서 적용하실 수 있습니다.

 

 

요소찾는 방법1.

 

F12을 눌러 크롬 디버깅 창을 킵니다.

소스를 찾다보면 foot 과 footer-widget부분이 내가 바꿔야 되는 부분임을 알게 됩니다.

 

 

footer라는 id 요소에 해당 색깔을 적용해 줍니다.

여기서는 링크가 걸려있는 텍스트 이므로

a태그 중에서 href(링크가 있다)을 선택해 줍니다.

a:href라는 형식으로 선택이 가능 합니다.~

 

 

 

 

 

 

 

최종결과

 

 

#footer a[href], #footer-widget a[href]{
color:#00E6f9;
}

 

 

 

 

 

 

 

플라즈마 IT 블로그 - 코딩 공부 정리, IT 정보 공유

 

https://plasmacodeing.tistory.com/

 

조금이라도 도움이 되었다면 공감 및 댓글 주세요~~