본문 바로가기
  • 紹睿: 자유롭고 더불어 사는 가치있는 삶
Play/끄적끄적

[스킨만들기] 3) 사이드 메뉴 만드는중

by 징여 2018. 7. 3.
반응형

3. 사이드 메뉴 만들기

계속해서 디자인을 수정해가고있다.

 

대충 지금 그림은 이런식으로 되었고,

 

skin.html

<div id="sidebar">
    <s_sidebar>
        <s_sidebar_element>
            <div class="category">
              <h1>CATEGORY</h1>
                

            </div>
        </s_sidebar_element>
    </s_sidebar>
</div>
 

을 사용하면, list형식으로 나오고

분류 전체보기
Data
Project
Study
Play
Archived
를 이용하면, 폴더 형식으로 나오는데, 리스트가 더 마음에 든다.

 

skin.css

#sidebar .category ul{ margin: 0; padding:0; text-align: left;}
#sidebar .category ul li{ list-style: none; }
#sidebar .category ul li a{ text-decoration: none;}

이렇게 설정하면, 

1) 왼쪽에 쫮 붙음

2,3) 일단 앞에 붙는 li 모양이나, a아래 밑줄이 사라진다. 

#sidebar .link_tit {
    font-size: 18px;
    color: #6E7783;
}

#sidebar .category_list li{
    font-size: 15px;
    padding: 5px 0 0 0;
}

#sidebar .category_list li a{
    color: #a3c9c7;
}

#sidebar .sub_category_list li{
    margin-left: 1em;
    font-size: 13px;
    border-bottom: 1px solid #efefef;
}

#sidebar .sub_category_list li a{
    color: #6E7783;
}

#sidebar .c_cnt {
    font-size: 8px;
    color: #444f59;
}

 

1) .link_tit: 공부하자

2) .category_list li:인공지능 머신러닝 등 큰 카테고리

2-1) .category_list li a: 색설정

3) .sub_category_list li: AI, tensorflow 등 세부 카테고리

3-1) border-bottom: 밑줄 설정

3-2) .sub_category_list li a: 색설정

4) .c_cnt: (숫자)

 

색사용

#6E7783

#EFEFEF

#A3C9C7

#444F59

 

font사용

<head>
    <link href="https://fonts.googleapis.com/css?family=Gothic+A1" rel="stylesheet">
</head>

css에서 font-family: 'Gothic A1'; 입력하면 사용가능하다.

반응형
저작자표시 비영리 변경금지

'Play > 끄적끄적' 카테고리의 다른 글

[일기] 공부하기 싫어서 새로운 스킨을 만듬  (3) 2018.08.21
[스킨만들기] 4) 새로운 메뉴모양  (0) 2018.07.09
[스킨만들기] 2) 반응형 웹  (0) 2018.07.02
[스킨만들기] 1) 컨셉을 정해보자  (0) 2018.07.02
[일기] 2018/6/26/목 - tistory 스킨을 제작하고싶다...  (1) 2018.06.28

관련글

댓글

티스토리툴바