html 목차 만들기, CSS 목록 디자인 스타일 태그적용

by

보통 목차(목록)은 블로그나 웹사이트에 주로 사용하기도 하며 무엇보다 SEO(최적화)에 도움이 되는 기능으로 메뉴를 생성하는데에 사용이 되기도 합니다.

html 태그를 사용해서 목차를 만들기가 가능하며 CSS 스타일시트를 적용하여 디자인 스타일을 꾸밀수가 꾸미고 목록 ul 또는 ol 태그를 이용하여 목차를 디자인하여 깔끔하게 꾸며보고자 합니다.

링크 목차 만들기.

ul. li 목록 태그를 사용하여 리스트 목차를 만들수가 있으며 a 태그에 #list1 를 적용하여 목차를 클릭시 소제목으로 바로 이동하게 됩니다.

<BODY>
<ul class="mylist">
<h2>== 목차 ==</h2>
<li><a href="#list1">1. 소제목 목차 입니다.</a></li>
<li><a href="#list2">2. 소제목 목차 입니다.</a></li>
<li><a href="#list2">3. 소제목 목차 입니다.</a></li>
<li><a href="#list2">4. 소제목 목차 입니다.</a></li>
<li><a href="#list2">5. 소제목 목차 입니다.</a></li>
</ul>
</BODY>

소제목 태그 적용

목차의 링크를 클릭시 소제목으로 이동하기 위해서는 h 태그에 id=”list1″ 속성을 적용합니다.

<BODY>
<h2> 소제목 이동 </h2>
<h2 id="list1">첫번째, 소제목으로 목차링크에서 넘어옵니다.</h2>
<h2 id="list2">두번쨰, 소제목으로 목차링크에서 넘어옵니다.</h2>
<h2 id="list3">세번쨰, 소제목으로 목차링크에서 넘어옵니다.</h2>
<h2 id="list4">네번쨰, 소제목으로 목차링크에서 넘어옵니다.</h2>
<h2 id="list5">다섯번째, 소제목으로 목차링크에서 넘어옵니다.</h2>  
</BODY>

목차 CSS 간격, 글자 크기

스타일시트(style)를 적용하여 font-size 글자 크기, padding, margin 값을 적용하여 간격과 border-bottom 보드값을 적용하였습니다.

<style>
ul.mylist li, ol.mylist li {
    padding: 5px 0px 5px 5px;
    margin-bottom: 1px;
    border-bottom: 1px solid #efefef;
    font-size: 12px;
}
h2{font-size: 13px;
    margin-bottom: 5px;
	padding: 1px;
}
</style>

CSS 목차 바탕화면 테두리적용

전체 목차의 background-color 를 적용하였으며 border 값으로 테두리와 content 속성으로 목록앞에 아이콘을 적용해 보았습니다.

<style>
.mylist{
	border:1px solid gray;
	background-color: #f6f6f6;	
}
ul.mylist li:before,
ol.mylist li:before {
    content: ">";
    display: inline-block;
    vertical-align: middle;
    padding: 0px 5px 6px 0px;
}
a{
text-decoration: none;
color: #353535;}
</style>

▤ 목차 목차 보이기

Leave a Comment