Html로 네비게이션 바를 만들고 싶다면 아래에 주어진 단계를 따라야 합니다. 이러한 단계를 사용하면 탐색 모음을 쉽게 만들 수 있습니다.
1 단계: 먼저 텍스트 편집기에 Html 코드를 입력하거나 탐색 모음을 만들려는 텍스트 편집기에서 기존 Html 파일을 열어야 합니다.
Make a Navigation Bar
2 단계: 이제 막대를 만들려는 태그에 태그를 정의해야 합니다.
You are at JavaTpoint Site.....
3단계: 그 후에는 다음을 정의해야 합니다.
- tag - 순서가 지정되지 않은 목록을 표시하는 데 사용됩니다. 그런 다음 목록 항목을 정의해야 합니다.
- 꼬리표. 탐색 모음에 표시하려는 항목을 정의해야 합니다.
<ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site.....
4단계: 그런 다음 제목 태그를 닫은 직후에 커서를 놓아야 합니다. 그런 다음 태그를 정의해야 합니다. 4단계: 그런 다음 제목 태그를 닫은 직후에 커서를 놓아야 합니다. 그런 다음 태그를 정의해야 합니다.
Make a Navigation Bar
5단계: 이제 탐색 모음의 위치와 색상을 설정하는 데 사용되는 다양한 id 속성을 지정해야 합니다. 따라서 head 태그에 다음 코드를 사용해야 합니다. 요구 사항에 따라 속성 값을 변경할 수도 있습니다.
body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } 6단계: 그런 다음 여는 태그 바로 앞에 태그를 입력해야 합니다. 그리고 이 태그도 닫아야 합니다. 그리고 마지막으로 HTML 파일을 저장한 다음 브라우저에서 파일을 실행해야 합니다.
Make a Navigation Bar body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site..... 지금 테스트해보세요 위 HTML 코드의 출력은 다음 스크린샷에 표시됩니다.
