깃허브 블로그 꾸미기 (2) 링크 밑줄 수정

깃허브 블로그 꾸미기 (2) 링크 밑줄 수정

Summary:

기존 템플릿의 링크에 들어가있던 밑줄 스타일을 수정했습니다.


기존 화면

지난 포스팅에서 여기까지 만들었다. 겁먹었던 것보다 훨씬 쉽게 속성을 바꿀 수 있길래 하나 더 건드려보기로 했다. 며칠 전 생활코딩의 겁나 빠른 웹 레시피 - 사진 중심의 웹사이트 만들기를 수강한 적이 있다. 거기서 예쁘게 밑줄을 긋는 방법을 배웠는데 이걸 써먹어보자.

기존 화면

PORTFOLIO를 주목!


생활코딩 복습

생활코딩의 겁나 빠른 웹 레시피 수업에서는 css를 사용해서 내 블로그에는 적용이 안 될 것 같기도 한데 일단 해보고 막히면 구글신의 도움을 받기로 했다. 웹 레시피 수업에서 배운 바에 의하면 PORTFOLIO<h1> 태그의 <a> 안에 들어있기 때문에 .css에서 헤더의 h1, a 안에 원하는 밑줄 속성을 넣으면 된다. 예제에서는 투명도 0.5 정도의 흰색 1픽셀 점선 밑줄을 그었다.

.html


/*.css*/

#header h1 a{
  color:rgba(255, 250, 250, 0.7);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.5);  /*이 부분!!*/
}


이 코드를 그대로 general.sass에 넣었을 때 어떤 변화가 있나 보기로 한다.

그 결과 아무 변화 없음

그럼 그렇지. 바로 될 리가.


구글신에게 도움 청하기

이제 와서 생각하니 당연한 얘기인데 css와 sass가 문법 차이가 있나보다. 구글에 sass underline style을 검색했다. 검색어를 바꾸면서 찾아봐도 사실상 css가 아닌 sass 코드는 잘 검색이 되지 않았다. @로 시작하는 되게 긴(10줄 이상의) 샘플코드는 있었는데 아예 이해가 되지 않는 부분이라 복붙하지 않고 하나씩 내 맘대로 바꿔가면서 예쁜 걸 찾아가기로 했다.

a
	color: $delta
	// text-decoration: underline
	text-decoration: none
	font-weight: 500

적용 결과

특별편 : 시행착오

처음에는 생활코딩처럼 dotted underline을 그리려고 했다. 그러나 .sass의 a 부분을 수정하니 기존에 밑줄이 없던 부분까지 밑줄이 생겨버렸다.

a
	color: $delta
	text-decoration: none
	font-weight: 500
	border-bottom: 1px dotted $delta   // 여기 수정함

애프터


과제

샘플 블로그 페이지를 볼수록 재미있는 게 많았다. 원래는 글자색만 달랐는데 커서를 댈 때 밑줄이 생긴다거나, 밑줄이 그어져 있었는데 커서를 대시 낱말 자체가 하이라이트된다거나 하는 것들. sass든 css든 공부해야겠다. 내년 이맘때쯤에는 나도 커서를 대면 휘양찬란하게 변하는 블로그 만들어야지! 그래도 오늘 이정도면 대만족이다. 예쓰!!!


Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora