html 네비게이션 메뉴 만들기 ul 태그의 사용

html에서 네비게이션바 또는 메뉴를 만들 때 ul 태그를 사용한다. ul 태그는 목록을 만들어주는 태그로 주로 목차같은 요소로 사용된다. 쓰임새가 정갈하기에 익숙해지면 여러모로 편리한 태그이다. ul 태그는 ol 태그와 비교되며 unorderd list 의 약자이다.

html 네비게이션 메뉴 만들기 ul 태그의 사용

이제 메뉴를 만들차례다. 데이터베이스에 자료를 넣고 불러오면 좋겠지만 지금은 홈페이지 복구가 목적이기 때문에 이전에 만든 html5 템플릿을 그대로 사용하려고 한다.

메뉴의 구성은 ul 태그를 이용하여 제작할 것이며 4가지 정도만 넣어볼 생각이다.

뜻하지 않은 이유로 처음부터 다시 하려니 이것저것 손이 많이 가게 된다.

html5 템플릿은 이전에 작성한 내용을 참고해 본다.

아주 간단한 형태의 템플릿을 만들고 모든 요소의 여백을 없애는 초기화까지 진행했었다. 이것은 모든 웹브라우저에 동일한 코드의 다르게 보이는 현상을 없애기 위한 것이기도 하다.

html5 css3 웹페이지 초기화 모든 css 스타일 요소를 무효화

html5로 태그를 나열하기 전에 css3 를 사용하여 모든 여백을 초기화할 수 있다. 이것은 모든 웹브라우저가 가진 기본값이 조금씩 다르거나 같은 웹페이지라도 다르게 설정되기 때문이다. 초기화

lngnat.tistory.com

ul 태그를 사용해 보자.

웹사이트의 네비게이션을 구성하기 위해 ul 태그를 사용할 것이다.

ul 태그는 데이터를 나열하는 목록 태그로 사용되는데 자식 태그로 li 태그를 사용한다.

ul 내부에 여러개의 li 태그를 사용하면 메뉴를 목록으로 만들 수 있으며, css 스타일을 사용하여 정렬방법을 적용할 수 있다.

ul 태그의 사용법은 아래와 같다.

<ul>
	<li>메뉴1</li>
	<li>메뉴1</li>
	<li>메뉴1</li>
	<li>메뉴1</li>
</ul>

ul 태그 적용하기

이전에 초기화까지 진행했던 html5 템플릿 코드를 그대로 이용하여 위의 ul 태그로 만들어진 목록 코드를 넣을 것이다.

메뉴로 사용할 영역에 ul 태그를 이용해여 목록을 만들어 주었다.

볼품없고 단촐하다.

<!-- 네비게이션 -->
<div>
	<ul id="nav">
		<li>메뉴1</li>
		<li>메뉴2</li>
		<li>메뉴3</li>
		<li>메뉴4</li>
	</ul>
</div>
<!-- // -->

결과화면을 보면 다음과 같다.

모든 요소를 초기화 했기 때문에 여백도 존재하지 않고 다닥다닥 붙어 있고 이 부분을 css3 스타일을 이용하여 배치하면 된다.

전체 코드 보기

지금까지 진행한 전체 코드는 다음과 같다.

시멘틱을 사용하지 않았지만 마크업 태그 아이디에 시멘틱을 의미하도록 하였다.

css 스타일을 적용하면서 진행하고 싶지만 먼저 뼈대부터 완성하는 것이 목적으로 한다.

개인적으로 중간중간 css 스타일을 적용하면 꼬이는 일이 생겨서 조금 난처해 지기도 하기 때문.

프론트엔드 개발자들 진짜 존경합니다.

<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html>
	<head>
		<!-- 반응형 meta 명시 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			/** 비영어권 문자열 깨짐 방지 */
			@charset "utf-8";
			/** 모든 여백 제거 */
			* {
				margin: 0;  /* 바깥 여백 */
				padding: 0; /* 안쪽 여백 */
			}
		</style>
	</head>
	<body>
		<div id="header">웹사이트 이름</div>
		<hr/>
		<!-- 네비게이션 -->
		<div>
			<ul id="nav">
				<li>메뉴1</li>
				<li>메뉴2</li>
				<li>메뉴3</li>
				<li>메뉴4</li>
			</ul>
		</div>
		<!-- // -->
		<hr/>
		<div id="contents">컨텐츠</div>
		<hr/>
		<div id="footer">저작권 소유자</div>
	</body>
</html>

저작자표시 비영리 변경금지

'programming > TroubleShootInG' 카테고리의 다른 글

html5 css3 여백 주기 붙어있는 요소들에 간격 추가하기 margin padding 사용 (0)	2022.11.21
웹브라우저 해상도 크기 표시 너비와 높이 구하기 (0)	2022.11.20
html5 css3 웹페이지 초기화 모든 css 스타일 요소를 무효화 (0)	2022.11.19
노트패드++ 자동 줄바꿈 기능 문자열이 화면 넘어가지 않으니 좋다 (0)	2022.11.19
쿠팡 파트너스 api 이용 제한 답변 메일 내용 정책에 신경을 써야겠다. (0)	2022.11.18

html 네비게이션 메뉴 만들기 ul 태그의 사용