728x90
안녕하세요 오늘은 html css 기본만으로 상단바 만드는 법을 구현해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>간단한 상단바 예제</title>
<style>
/* 상단바 스타일 */
nav {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 16px;
}
nav ul li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#services">서비스</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</body>
</html>
결과물은 다음과 같습니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] Position 속성에 대한 가이드 (0) | 2024.07.01 |
|---|---|
| [HTML/CSS] 버튼 클릭으로 하단 메시지 띄우기 (0) | 2024.05.25 |
| [HTML/CSS] Tailwind로 검색이 가능한 드롭다운 구현하기 (0) | 2024.05.13 |
| [HTML/CSS] Tailwind로 비밀번호 일치 여부 확인하기 (0) | 2024.04.24 |
| [HTML/CSS] @keyframes 활용 마우스 클릭 이벤트 (0) | 2024.04.20 |
