현재 사용하고 있는 블로그의 CSS를 분석해보기로 했다. 얼마나 공부가 될지는 잘 모르겠지만 CSS를 분석하다보면 어느정도 사이트를 변경 할 수 있지 않을까하는 기대감도 있다. 솔직히 명령어를 하나하나 공부하면서 하는 것 보다는 좀 더 현실적인 면을 공부하는 것이 낫다는 것이 결론이고, 점점 4clojure의 문제가 어려워지고 있어서 4clojure의 문제 풀이의 압박을 조금이나마 해소를 하고 싶기도 하다. 점점 컨텐츠도 늘려가는 것이 목적이기도 하고, 점점 내가 할 수 있는 것을 늘리고 싶은 목적이 더 크다.

base.html이 가장 중심이 되는 파일이므로 여기에서 사용하는 CSS를 분석 해보기로 한다.

우선은 중심이 되는 navbar 관련 css이다.

.navbar {
    border-radius: 0;
    box-shadow: 0 0 0 0,0 6px 12px rgba(34,34,34,0.3);
}

.navbar-default {
    background-color: #428bca;
    border: none;
}

.navbar-default .navbar-brand {
    color: #fff;
    font-family: 'Alegreya';
}

위 3가지의 CSS는 아래의 부분에서 사용한다.

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{index-uri}}">{{title}}</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li {% if home %} class="active" {% endif %}><a href="{{index-uri}}">Home</a></li>
                <li
                {% if archives %} class="active" {% endif %}><a href="{{archives-uri}}">Archives</a></li>
                {% for nav-page in navbar-pages %}
                <li
                {%ifequal page.uri nav-page.uri %} class="active" {% endifequal %}>
                <a href="{{nav-page.uri}}">{{nav-page.title}}</a>
                </li>
                {% endfor %}
            </ul>
        </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
</nav>

navbar-default가 메인이 되고 navbar는 그림자를 만든다. 없애고, 확인을 했을 때 확연한 차이가 있었다. 그리고 중요한 것은 navbar-default가 없는 경우에는 font도 적용이 안되는데 그건 navbar-brand가 font를 적용을 하고 있기 때문에 navbar-default가 없을 경우에는 font가 적용되지 않는다.