웹 반응형 스킨 상단 내비게이션 기본 설정 잠깐이면 원하는 대로 만들 수 있다!!

마크쿼리 웹 반응형 스킨 상단 메뉴 수정

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

상단에 내비게이션에 수정? 꾸밀수 있는건 많은거 같습니다.
우선은 제가 수정한 거만 대충대충 적어볼까 합니다.
1번부터 조금씩 적을게요.
글 나눠서 포스팅거리 늘리기. '';;

1. 기본적이 인 부분.
2. 상단 메뉴에 검색폼 넣기.
3. 색상 등등.. 바꾸기.
4. 상단 내비게이션 두 개.?
5. 상단 메뉴 고정하기.
6. 모바일에서 메뉴 크기변경.?

그리고 위 그림은 블로그에서 보이는 부분이랑 코드 부분이 이 어느 것인지 대충대충 ;;

우선은 있는 대로만 카테고리랑 목록 제목 설정하는 방법이에요.

<header role="banner" class="container skeleton-nav">
	<nav id="menu" class="nav" role="navigation" aria-label="Main Navigation">
		<a rel="home" href="[**_blog_link_##]" class="nav-brand">[**_title_##]</a>
		<ul role="menubar">
		<li role="menuitem" aria-haspopup="true"><a href="/category">Category</a>
			<ul role="menu">
			<li role="presentation"><a role="menuitem" href="/category/book">Book</a></li>
			<li role="presentation"><a role="menuitem" href="/category/movie">Movie</a></li>
			<li role="presentation"><a role="menuitem" href="/category/music">Music</a></li>
			<li role="presentation"><a role="menuitem" href="/category/else">Else</a></li>
			</ul>
		</li>
		<li role="menuitem"><a href="/tag">Tags</a></li>
		<li role="menuitem"><a href="/guestbook">Guestbook</a></li>
		<li role="menuitem"><a href="/location">Location</a></li>
		</ul>
	</nav>
</header><!-- /.container skeleton-nav -->

<a rel="home" href="[**_blog_link_##]" class="nav-brand">[**_title_##]</a>
수정하셔도 되고 그대로 쓰셔도 상관없는 부분이에요.
저는 타이틀명 사용 안 하고 이미지를 넣었습니다.

<a rel="home" href="[**_blog_link_##]" class="nav-brand"><img class="img-responsive" src="이미지주소" alt="[**_title_##]"></a>

**로 표시된 부분은 ##으로 티스토리 치환자가 표시가 안되니 *로 대처한 겁니다.

<li role="menuitem"><a href="/category/movie">Tags</a></li>
href=" "는 주소 <a>제목</a> <a>..</a> 사이에 제목을 넣으면됩니다.

<li role="menuitem" aria-haspopup="true"><a href="/category">Category</a>
    <ul role="menu">
	<li role="presentation"><a role="menuitem" href="/category/book">Book</a></li>
	<li role="presentation"><a role="menuitem" href="/category/movie">Movie</a></li>
	<li role="presentation"><a role="menuitem" href="/category/music">Music</a></li>
	<li role="presentation"><a role="menuitem" href="/category/else">Else</a></li>
    </ul>
</li>

귀찮게 따로 만들 필요 없이 위에 부분을 복사해서 붙여 넣고 수정하면 하나 더 생깁니다.
저는 이렇게 구독하기로 사용하는데 나중에 버튼 형식으로 바꿀까도 생각 중입니다.

Plus

마크쿼리님이 스킨을 잘 만들어놔서 대충 보면 따라 할 수 있어요.^^
바로 위에 주소랑 카테고리나 사용할 이름만 바꾸면 되는데 제가 사용하는 거 대충대충 끄적 거려 봤습니다.

그리고, 저는 티스토리 블로그스킨은 대충대충 있는 대로 사용하자?
꾸미다가 귀찮거나 막히면 거기까지만 ...이라는 생각으로 스킨을 꾸미니 조금은 이해해주세요 ㅎㅎ