티스토리 뷰
※html 파일
<!DOCTYPE html> <html lang="ko"> <head> <!--html 파일의 인코딩--><meta charset="utf-8"> <!--익스플로러를 최신으로--><meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!--사이트에 대한 설명--><meta name="description" content="CSS3 연습페이지 입니다."> <!--검색엔진을 위한 키워드--><meta name="keywords" content="HTML, Web, Markup, Design, Document"> <!--사이트 저작자 표시--><meta name="author" content="gruart"> <!--모바일 최적화--><meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../css/grammar.css" /> <script src="../js/grammar.js"></script> <title>HTML 연습</title> </head> <body> <form> <ul id="minitabs"> <li><a href="/lins/" >소개하고픈 링크</a></li> <li><a href="/books/" >즐겨읽는 책 </a></li> <li><a href="/movies/">좋아하는 영화 </a></li> <li><a href="/music/" >함께듣는 음악 </a></li> </ul> </form> </body> </html> | cs |
※CSS3 파일
#minitabs { margin: 0; padding: 0 0 20px 10px; /* 방향은 top - right - bottom - left */ border-bottom: 1px solid #9FB1BC; } #minitabs li { margin : 0; padding: 0; display: inline; /* 블록으로 표현 되는 리스트를 인라인 형태로 리스트 품목을 변경 */ list-style-type: none; /* 리스트의 블릿 모양을 없앤다.*/ } #minitabs a { float: left; line-height: 14px; font-weight: bold; font-size: 12px; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #minitabs a:active, #minitabs a:hover { color: #336633; border-bottom: 3px solid #9FB1BC; padding-bottom: 3px; /*background: url(tab_pyra1.gif) no-repeat bottom center;*/ } | cs |
'dev. > web' 카테고리의 다른 글
| [vue.js]라이프 싸이클 속성 (0) | 2019.02.10 |
|---|---|
| [CSS3] 머리말 디자인 (0) | 2018.12.04 |
| [CSS3]태그를 숨기는 3가지 (0) | 2018.12.04 |
| [css3] 선택자 (0) | 2018.12.02 |
| [html] meta 파일 설정 (0) | 2018.11.29 |