티스토리 스킨을 수정하면서 모르는 것들을 스스로 적어놓는 공간이다.
나 아닌 다른 누군가가 봐도 아 이건 이것을 수정하는 문구구나 했으면 하는 바램으로 하나하나 적어나가 보도록 하겠다.
그림도 하나하나 수정해가면서 쉽게 쉽게 나가보자.
먼저 블로그 메뉴란 무엇인지 사진부터 보자.
사진상의 빨간 화살표가 가리키고 있는 저 부분을 블로그 메뉴라고 한다.
이것을 수정하려면
관리모드로 들어가서 화살표가 가리키는 HTML/CSS 편집으로 들어가야 한다.
HTML/CSS 편집으로 들어가게 되면 아래와 같은 화면을 볼수 있다.
블로그 스킨을 자세히 편집 할 수 있는 창이 뜨게 되는데, 여기서 상단 우측 부분을 보면
CSS 라고 저것이 스킨 디자인의 전체적인 부분을 담당하는 것이다.
여기서 나는 블로그 메뉴에 대해 알아볼건데, 나도 사실 자세히는 모른다.
하나하나 숫자 바꿔가면서 알게된 것들만 공유하겠다.
블로그메뉴는
/* 블로그메뉴 */
#blogMenu {float:right; margin:0 0 3px 5px;}
#blogMenu ul li {
float:left;
background:url(images/menu_div.gif) no-repeat 0 3px;
}
#blogMenu li.first {
background:none;
}
#blogMenu a {
height:16px;
color:#707070;
font-family:arial;
font-size:12px;
padding:0 10px;
}
CSS의 하단에 있으며. Ctrl(컨트롤키) + F 를 눌러 블로그메뉴라고 적으면 바로 찾을 수 있다.
#blogMenu {float:right; margin:0 0 3px 5px;}
이부분은 float:right 우측정렬을 뜻하고 left 를 써서 정렬의 위치를 바꿀 수 있다.
left를 써서 좌측정렬로 바꾼모습
그옆의 margin이라는 것을 볼수 있는데 이것을 상하좌우의 공백을 뜻한다.
margin 속성
개체의 바깥쪽 여백을 지정하는 속성
개체의 기본크기는 유지되면서 바깥쪽으로 여백이 생긴다.
단 예외적으로 body 태그에서만 안쪽 여백을 지정하는 속성으로 쓰임
예1) margin : 값1(상하좌우) ;
값을 1개만 지정할 경우, 상하좌우에 모두 같은 여백을 설정
예2) margin: 값1(상하), 값2(좌우)
값을 2개 지정할 경우 값1은 상하의 여백을, 값2는 좌우의 여백을 설정
예3) margin : 값1(상하), 값2(좌우), 값3(하) ;
값을 3개 지정할 경우 값1은 위, 값2는 좌우, 값3은 아래 여백을 설정
예4) margin : 값1(상), 값2(우), 값3(하), 값4(좌);
값을 4개 지정할 경우, 상-우-하-좌의 순으로 값을 준 개체기준 시계방향으로 돌아가며 여백이 지정
그리고 나머지 부분의 설정은
#blogMenu a {
height:16px; 높이
color:#707070; 폰트컬러
font-family:arial; 글꼴타잎
font-size:12px; 폰트사이즈
padding:0 10px; 상하좌우 공백설정 (margin 과 의미가 조금 다름)
요렇게 수정하면 된다.
폰트컬러는 네이버에서 색상코드로 검색하면 쉽게 찾을 수 있다.
까먹지 말자 아는 것이 힘이다.
