#블로그 꾸미기 - 해커같은 배경 및 글자색 변경하기 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/
조금이라도 도움이 되었다면 공감 및 댓글 주세요~~
'Web&Dev' 카테고리의 다른 글
리덕스는 왜 쓰는가? (0) | 2020.01.22 |
---|---|
React JS 개발일지 AntDesign 튜토리얼 CSS 프레임워크 시작 (0) | 2020.01.21 |
블로그 꾸미기 - 해커같은 배경 및 글자색 변경하기 CSS,HTML 편집 (0) | 2019.07.04 |