-
CSS Navigation 만들기카테고리 없음 2024. 4. 25. 13:41
간단해 보이지만 navigation을 ui로 싸서 구현해 보고 싶어서 조금 버벅였다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>요소배치 다루기</title> <style> h1{ text-align: center; text-shadow: 3px 3px 5px grey;} .menu{ margin: auto; text-align: center;} ul{ padding-inline-start: 0px; } ul li { margin:0 auto; display: inline-block; padding: 0px 20px; } section{border-top: 1px solid black;}+ </style> </head> <body> <header> <h1>요소 배치 다루기</h1> </header> <nav><div class="menu"> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> </ul> </div> </nav> <section> <h3>본문</h3> <p>내용생략...</p> </section> </body> </html>