HTML 목록을 이용한 세로 메뉴 만들기 예시
HTML의 <nav> 태그와 <ul> 태그를 이용하여 간단한 세로 메뉴를 만들 수 있습니다. 여기에 CSS를 적용하여 메뉴의 디자인을 세련되게 꾸밀 수 있습니다.
HTML 코드:
HTML
<!DOCTYPE html>
<html>
<head>
<title>세로 메뉴 예시</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">제품</a></li>
<li><a href="#">문의</a></li>
</ul>
</nav>
</body>
</html>
코드를 사용할 때는 주의가 필요합니다.
CSS 코드 (style.css):
CSS
nav {
width: 200px; /* 메뉴 너비 */
background-color: #f1f1f1; /* 배경색 */
padding: 20px;
}
nav ul {
list-style: none; /* 기본 목록 스타일 제거 */
padding: 0;
margin: 0;
}
nav li {
padding: 10px;
}
nav a {
text-decoration: none;
color: #333;
}
nav a:hover {
background-color: #ddd; /* 마우스 호버 시 배경색 변경 */
}
코드를 사용할 때는 주의가 필요합니다.
코드 설명
- HTML:
- <nav> 태그는 네비게이션 영역을 나타냅니다.
- <ul> 태그는 정렬되지 않은 목록을 생성합니다.
- <li> 태그는 각 목록 항목을 나타냅니다.
- <a> 태그는 링크를 생성합니다.
- CSS:
- nav 선택자는 전체 메뉴 영역에 스타일을 적용합니다.
- nav ul 선택자는 목록에 스타일을 적용하여 기본 목록 스타일을 제거하고 패딩을 설정합니다.
- nav li 선택자는 각 목록 항목에 패딩을 설정합니다.
- nav a 선택자는 링크에 스타일을 적용하여 밑줄을 제거하고 색상을 설정합니다.
- nav a:hover 선택자는 마우스가 링크 위에 올라갔을 때 배경색을 변경하여 활성화 상태를 표시합니다.
HTML 목록을 이용한 가로 메뉴 만들기 예시
HTML 코드/CSS 코드 (style.css)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>메뉴만들기</title>
<style>
/* nav{
display: flex; /*블록처럼 처리함*/
justify-content: center; /*가로정렬*/
align-items: center; /*세로정렬*/
} */
body{
text-align: center; /*화면중앙 정렬*/
}
a{
text-decoration: none; /* 링크 밑줄 없앰*/
}
ul {
list-style: none; /* 블릿을 없애기*/
}
li {
display: inline-block; /* 줄단위 블록으로 변경 */
border: 1px solid black; /*선 그리기*/
width: 150px; /*가로 넓이*/
padding: 20px; /* 글씨와 테두리 안쪽마진*/
margin: 5px; /*테두리 바깥쪽 마진*/
}
</style>
</head>
<body>
<h1> 그린컴퓨터</h1>
<nav>
<ul>
<li><a href="#"> 회사소개 </a></li>
<li><a href="#"> 도서 </a></li>
<li><a href="#"> 자료실</a></li>
<li><a href="#"> 동영상 강의</a></li>
</ul>
</nav>
</body>
</html>코드를 사용할 때는 주의가 필요합니다.
코드 설명
- HTML:
- <nav> 태그는 네비게이션 영역을 나타냅니다.
- <ul> 태그는 정렬되지 않은 목록을 생성합니다.
- <li> 태그는 각 목록 항목을 나타냅니다.
- <a> 태그는 링크를 생성합니다.
- CSS:
- nav 선택자는 전체 메뉴 영역에 스타일을 적용합니다.
- nav ul 선택자는 목록에 스타일을 적용하여 기본 목록 스타일을 제거하고, flexbox를 사용하여 가로로 정렬하고 가운데 정렬합니다.
- nav li 선택자는 각 목록 항목에 간격을 설정합니다.
- nav a 선택자는 링크에 스타일을 적용하여 밑줄을 제거하고 색상을 설정합니다.
- nav a:hover 선택자는 마우스가 링크 위에 올라갔을 때 배경색을 변경하여 활성화 상태를 표시합니다.
추가 기능 및 디자인
- 반응형 디자인: 미디어 쿼리를 사용하여 화면 크기에 따라 메뉴의 모습을 변경할 수 있습니다.
- 드롭다운 메뉴: JavaScript를 사용하여 하위 메뉴를 구현할 수 있습니다.
- CSS 프레임워크: Bootstrap, Bulma 등의 CSS 프레임워크를 사용하면 더욱 다양한 스타일의 메뉴를 쉽게 만들 수 있습니다.
- 아이콘 사용: 폰트 아이콘이나 이미지를 사용하여 메뉴 항목을 더욱 시각적으로 표현할 수 있습니다.
주의 사항
- 브라우저 호환성: 모든 브라우저에서 동일하게 보이도록 CSS를 작성해야 합니다.
- 접근성: 시각 장애인을 위한 스크린 리더가 메뉴를 인식할 수 있도록 aria 속성을 사용하는 것이 좋습니다.
'HTML_CSS' 카테고리의 다른 글
| 시멘틱 태그란 무엇일까요? (4) | 2024.11.06 |
|---|---|
| Border Styles (0) | 2024.11.04 |
| 목록 스타일 (List Style) (0) | 2024.11.04 |
| HTML에서 border 속성 (2) | 2024.11.04 |
| HTML 표 (Table)에 대한 자세한 설명 및 선 속성 (0) | 2024.11.04 |
