1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>공지</title> <style> .site h1 a{color:black; text-decoration:none} .site h1 {margin:0; font-size:30px} .site p {margin:0; font-size:12px} .menu ul{ list-style:none} .menu li a{color:black; font-size:14px; text-decoration:none; display:block; padding:5px} .menu li a:hover{ background-color:#eeeeee} .menu ul:after{content:""; display:block; clear:both} .menu ul li{float:left; width:auto} .story h1{font-size:36px; margin-top:0; margin-bottom:20px;} .story p{margin-top:0; margin-bottom:20px;} .copyright p{ margin:0; color:#666666; font-size:14px} </style> </head> <body> <div class="site"> <h1><a href="#">만나 공지사항</a></h1> <p>매일 기독자료와 관련된 소식을 드립니다</p> </div> <div class="menu"> <ul> <li><a href="#">메인</a></li> <li><a href="#">회사</a></li> <li><a href="#">상품</a></li> <li><a href="#">자료</a></li> <li><a href="#">공지</a></li> <li><a href="#">문의</a></li> </ul> </div> <div class="story"> <h1>만나홈페이지가 새롭게 개설되었습니다.</h1> <p>한국 최초의 전도형 주문QT책자 만나홈페이지가 새롭게 탄생했습니다. 앞으로 주보시안,캘린더,소식지,QT책자 등 다양한 문서자료를 업로드할 예정입니다. 자주 방문하셔서 퀄리티 높은 자료들 많이 받아가시고 문서선교를 통해 큰 부흥이 있길 바랍니다.</p> </div> <div class="copyright"> <p>만나는 기독교 문서와 관련된 정보와 자료를 공유합니다.</p> <p>Copyright © MANA</p> </div> </body> </html> | cs |
사이트 제목
text-decoration:none 는 라인제거
.site h1 a{color:black; text-decoration:none}
.site h1 {margin:0; font-size:30px}
.site p {margin:0; font-size:12px}
기사내용
margin-top:0 위의 공백 제거
.story h1{font-size:36px; margin-top:0; margin-bottom:20px;}
.story p{margin-top:0; margin-bottom:20px;}
list-style:none은 메뉴 앞에 * 검은점 제거
padding:5px 내부에 공백 좀 적용
text-decoration:none 밑줄 제거
display:block 링크가 가능하는 범위를 가로 방향으로 늘려준다.
.menu li a:hover 메뉴에 마우스 올리면 이벤트 발생
.menu ul:after{content:""; display:block; clear:both} li 를 감싸고 있는 ul 태그가 li를 그룹화 했다.
.menu ul li{float:left; width:auto} li는 하나의 박스들이 되는데 float 때문에 왼쪽 정렬이 된다. 메뉴가로정렬
.menu ul{ list-style:none}
.menu li a{color:black; font-size:14px; text-decoration:none; display:block; padding:5px}
.menu li a:hover{ background-color:#eeeeee}
.menu ul:after{content:""; display:block; clear:both}
.menu ul li{float:left; width:auto}
'매일코딩 > HTML&CSS3' 카테고리의 다른 글
| 11.웹페이지제작 - 완성 (0) | 2016.11.03 |
|---|---|
| 10.웹페이지제작 - 컨텐츠 페이지 (0) | 2016.11.02 |
| 8.웹페이지제작 - 준비1 (0) | 2016.11.02 |
| 7.레이아웃 - 박스 겹치기 (2) | 2016.11.02 |
| 6.레이아웃 - 박스 정렬 순서 (0) | 2016.11.02 |
댓글