html5 css3 네비게이션 메뉴 목록 태그 ul 초기화 하기

홈페이지를 만들 때 메뉴를 추가할 때 목록 태그인 ul 을 할 수 있다. ul 태그는 목록을 나타낼 때 사용되는 태그로 메뉴나 페이징과 같은 간단하고 연속적인 데이터를 표현할 때 사용한다. 목록 태그는 기본적으로 점이나 숫자가 붙는데 이것은 list-style-type 을 사용하여 초기화하고 목록 태그에 붙는 스타일을 나타나지 않도록 할 수 있다.

html5 css3 네비게이션 메뉴 목록 태그 ul 초기화 하기

목록 태그 ul 은 화면에 표시되는 문자열 데이터를 목록처럼 만들어 준다.

형태는 책의 목차와 비슷한 성격을 보인다.

위에서 아래로 일정한 간격으로 표시되기 때문에 간단한 목록이나 메뉴와 같은 네이게이션 페이징 등과 같은 기능에 사용된다.

단지, ul 태그는 점이 하나씩 붙는데 기본값으로 표시되는 것으로 이것을 제거할 필요가 있다.

수정할 코드 준비

ul 태그를 초기화하고 스타일을 제거하기 위해 css3의 list-style-type 속성을 사용한다 .

목록을 만드는 ul 태그나 비교가 되는 ol 태그 앞에는 점이나 숫자 등이 표시되는데 홈페이지를 만들 때 특별한 경우가 아니라면 표시되는 것이 불편하다.

ul 태그를 초기화하기 위해 필요한 코드를 준비해 보도록 한다.

html5 css3 여백 주기 붙어있는 요소들에 간격 추가하기 margin padding 사용

초기화를 진행한 html5 태그들은 서로 붙어있고 보기가 불편하다. 여백은 가시성을 높여지고 화면에 표시되는 콘텐츠들의 구역을 구분짓는 역할을 한다. 초기화 되어 서로 붙어있는 태그들에 여

lngnat.tistory.com

위의 코드에 대한 이미지는 아래와 같다.

네비게이션 메뉴는 ul 태그와 자식요소로 li 태그를 사용하였다.

점이 붙은 것이 불편하다. 메뉴를 만들 것이기 때문에 점은 필요가 없다.

화면에 표시되는 점을 없애기 위해 목록 태그인 ul 에 list-style-type 속성을 설정해 보기로 한다.

목록 태그 li 스타일 초기화하기
list-style-type: none

이전의 코드는 기본적인 것만 되어 있지만 쓸데없이 깨끗하고 깔끔하다.

네비게이션 메뉴 부분의 공간 부분이 너무 낭비가 심한 것도 있다.

이것을 가로로 정렬하면 보기 좋을 것이다.

정렬을 하기 전에 먼저 목록 태그의 스타일을 초기화하여 ul 태그에 표시되는 점을 없애보도록 한다.

이것은 목록 스타일인 list-style-type 에 none 속성을 주면 된다.

.nav ul {
	list-style-type: none;
}

지금까지의 결과는 다음과 같다.

목록 태그에 기본적으로 붙어있던 점이 사라졌다.

전체 코드 보기

이전의 내용부터 지금까지 했던 과정의 전체 코드는 다음과 같다.

눈에 거슬렸던 목록 태그 ul 에 표시된 점이 사라졌다.

그럼에도 주변이 너무 깨끗하고 공간 낭비가 심하다.

네비게이션 메뉴를 수평 정렬하면 좋을 것 같다는 생각이 든다.

<!-- 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>
		<style>
			/** class 공통 */
			.debug, .header, .nav, .contents, .footer {
				border:0px solid black;
				margin: 1rem;
				padding: 1rem;
			}
		</style>
		<style>
			/** 네비게이션 메뉴 */
			.nav ul {
				list-style-type: none;
			}
		</style>
	</head>
	<body>
		<!-- 디버깅 표시 -->
		<div class="debug">
			<span id="screenW"></span>
			<span id="screenW">X</span>
			<span id="screenH"></span>
		</div>
		<hr/>
		<!-- 웹사이트 설명 -->
		<div class="header">웹사이트 이름</div>
		<hr/>
		<!-- 네비게이션 -->
		<div class="nav">
			<ul>
				<li>메뉴1</li>
				<li>메뉴2</li>
				<li>메뉴3</li>
				<li>메뉴4</li>
			</ul>
		</div>
		<hr/>
		<!-- 콘텐츠 -->
		<div class="contents">콘텐츠</div>
		<hr/>
		<!-- 웹사이트 정보 -->
		<div class="footer">저작권 소유자</div>
	</body>
	<!-- jquery cdn -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script>
		$(document).ready( function() { /* Load Comp. without resources */ });
		$(window).on('load', function() { /* Load Comp. with resources */ fnBrowserInnerSize(); });
	</script>
	<script>
		/** 웹브라우저 크기 변경 이벤트 */ 
		window.onresize = function() { fnBrowserInnerSize(); };
		/** 웹브라우저의 문서 크기 화면 표시 */ 
		var fnBrowserInnerSize = function() { $("#screenW").text(window.innerWidth); $("#screenH").text(window.innerHeight);};
	</script>
</html>

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

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

html5 css3 홈페이지 메인 콘텐츠 영역 만들기 콘텐츠는 왕이다 contents is king (0)	2022.11.23
html5 css3 네비게이션 메뉴 수평 정렬 하기 display flex 사용 (0)	2022.11.22
html5 css3 여백 주기 붙어있는 요소들에 간격 추가하기 margin padding 사용 (0)	2022.11.21
웹브라우저 해상도 크기 표시 너비와 높이 구하기 (0)	2022.11.20
html 네비게이션 메뉴 만들기 ul 태그의 사용 (0)	2022.11.20

html5 css3 네비게이션 메뉴 목록 태그 ul 초기화 하기