마크쿼리 반응형 스킨 상단 메뉴바 색상, 글자 크기, 굵기 바꾸기?

마크쿼리 웹 반응형 스킨 상단 메뉴 색상? 꾸미기

Spider’s Web 3.0.5 기준으로 작성했습니다.

상단 메뉴 바를 색상을 바꾸는 방법? CSS 부분 설명을 해드릴게요.
그러면 조금이나마 꾸밀 때 도움이 될 거라고 생각이 듭니다.
bootstrap.css 안에 바꿔서 꾸미는 방법도 있지만.....

그동안 진행하지 못 했던 소스 코드 정리를 하겠습니다.
다음 업데이트는 HTML5 시맨틱 마크업을 보완하고, CSS를 줄이는 작업입니다.

다음 업데이트 때 먼가 바뀔 거 같으니 기본적인 거만 있는 부분에서만 대충대충 끄적거려볼게요.

우선이 이 부분이 쉽게 얘기해서 큰 덩어리라고 생각하면 될 거예요.

.skeleton-nav {
  *padding:0 20px 2px;
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;
  background-color:#fff;
  z-index:1030;
}

background-color:#fff; 에서 #fff부분을 원하는 색상 코드로 바꾸면 됩니다.

border-left:1px solid #ccc;에서 #ccc 부분을 원하는 색상 코드 바꾸고, border-left 왼쪽, border-right 오른쪽, border-bottom 아래쪽 이니 다른 색으로 표현하려면 다른게 바꾸셔도 됩니다.

/* site navigation */ 이 부분 밑으로 /* site cover */ 윗부분까지 가 쉽게 작은 부분? 세심한 부분?이라고 생각하면 돼요.

.nav {
  position: relative;
  font-size:14px;
  font-weight:900;
}

다른 거 일단 패스하고 이 부분이 상단 메뉴의 글자 크기랑 굵기 부분입니다.

font-size:14px;에서 14px를 숫자를 늘리거나 줄이면 됩니다.
그리고 다른 스타일 시트에서 사용하는 단위를 사용해도 돼요

참고

1. 절대 단위
   in : 인치
   cm : 센티미터
   mm : 밀리미터
   pt : 포인트(1포인트=1/72인치)
   pc : 파이카(1파이카=12포인트)
   
   
2. 상대 단위
   % : 기준이 되는 크기에 대한 비율
   px : 1픽셀을 1로 하는 단위(해상도에 따라 상대 적임?)
   ex : 범위에서 유효한 폰트의 소문자 x 높이를 1로 하는 단위
   em : 범위에서 유요한 폰트의 높이를 1로 하는 단위

font-weight:900; 에서 900를 바꾸면 되는데 제일 굵기 설정돼있습니다.
단위는 100, ... 900까지 있습니다. (100단위)

.nav ul li a:hover {
  background:#eee;
  text-decoration:none;
}

.nav ul li a:hover 이부분을 찾아서 background:#eee; 에서 #eee 부분을 원하는 색상 코드 바꾸면 됨.

색상 코드 16,777,216개나 많이 쓰는 거 말고 누가 외울까요 -0-
하지만 티스토리 블로거라면 다른 거 설치하고 할 필요 없을 거 같습니다.
글쓰기에서 글꼴 부분에 글자색을 누르고 찾으면 됩니다.

원하는 색을 찾고 입력 옆에 보면 위 경우 #632525라고 나옵니다.
하지만 다른부분에 같은 색을 사용할려면 색상추출 프로그램을 사용하세요 '';;

크롬이면 확장프로그램을 사용하면됩니다.
ColorZilla(Color Picke) 바로가기

Plus

정리해보면

다음 업데이트를 기대하고 있는데 언제쯤 될지 궁금하네요. -0-
암튼 대충대충 상단 메뉴 색상이랑 바꾸는 방법을 포스팅했다만... 별 내용 없어 보입니다. ㅎㅎ
궁금하면 댓글이나 방명록으로 문의하세요.^^