<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
display : inline : 블록 요소를 인라인 요소로 변경 */
li {
border: 2px solid black; /* 테두리 스타일 */
}
.v_munu {
list-style: none; /* 목록 항목의 스타일 기호를 없앰 */
}
.h_menu {
display: inline; /* inline 속성으로 변경 */
}
</style>
</head>
<body>
<!-- 속성을 변경하지 않은 세로 메뉴 -->
<ul>
<li class="v_munu">세로메뉴01</li>
<li class="v_munu">세로메뉴02</li>
<li class="v_munu">세로메뉴03</li>
<li class="v_munu">세로메뉴04</li>
</ul>
<!-- inline 속성으로 변경된 가로 메뉴 -->
<ul>
<li class="h_menu">네이버</li>
<li class="h_menu">다음</li>
<li class="h_menu">쿠팡</li>
<li class="h_menu">구글</li>
</ul>
</body>
</html>
