Java 웹 개발
21.11.04 - 웹 개발 입문 59일차
개발이란
2021. 11. 4. 23:29
디자인 - float
inline은 기본적으로 요소 간에 간격이 존재한다.
= inline 형태로는 절대 2단, 3단 레이아웃을 구현할 수 없다.
해결책
1. float 속성을 사용하여 태그 배치 형태를 변경하는 방법
= 구현이 까다롭고, 신경써야 하는 부분이 많다.
= 거의 모든 브라우저에서 지원한다.
2. display를 flex 형태로 변경하는 방법
= 최신 기술이며, 사용 방법이 편리하다.
= 지원하지 않는 브라우저가 존재한다(특히 IE)
float에서 가장 주의해야 하는 점은 다른 일반 화면과의 조화를 위한 처리이다.
= float 영역이 끝나면 반드시 끝났음을 알리는 처리를 수행해야 한다.
= 비어있는 div를 하나 만들고 clear 속성을 설정
결론
1. float는 반드시 필요한 상황이 있다.
2. 기존 화면과 충돌이 나는 상황은 싫다.
3. float 전용 영역을 만들어서 모든 상황을 그 안에서 해결하도록 처리한다.
가상 선택자
= 존재하지 않는 영역을 가상으로 선택하여 디자인을 부여할 수 있다.
= 원래 없는 영역이기 때문에 내용을 뭐라도 적어야 한다(빈칸이라도)
- float 활용 예제 [1]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다단 레이아웃</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
.float-container::after {
content:"";
display: block;
clear: both;
}
.layer {
height:200px;
width:50%;
float:left;
}
</style>
</head>
<body>
<div style="background-color:tomato;">
<h1>상단 제목</h1>
</div>
<!-- float 전용 공간 -->
<div class="float-container">
<div class="layer">
<div class="row">1단 1줄</div>
<div class="row">1단 2줄</div>
<div class="row">1단 3줄</div>
</div>
<div class="layer">2단</div>
</div>
<div style="background-color: yellow;">
<h2>하단 내용</h2>
</div>
</body>
</html
- float 활용 예제 [2]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>menu 구현</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
.float-container > .float-item-left {
float:left;
}
.float-container > .float-item-right {
float:right;
}
.menu-wrapper {
background-color: black;
}
.menu-wrapper > a {
color:white;
text-decoration: none;
width:150px;
text-align: center;
padding:0.5rem;
font-size: 25px;
}
.menu-wrapper > a:hover {
background-color:#333333;
}
</style>
</head>
<body>
<div class="float-container menu-wrapper">
<a href="#" class="float-item-left">홈으로</a>
<a href="#" class="float-item-right">로그인</a>
<a href="#" class="float-item-right">회원가입</a>
<a href="#" class="float-item-left">게시판</a>
</div>
</body>
</html>
- float 활용 예제 [3]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
.list-card > .list-card-image {
width:30%;
}
.list-card > .list-card-image > img{
width:100%;
}
.list-card > .list-card-content {
width:70%;
padding:1rem;
}
</style>
</head>
<body>
<div class="container-400 container-center">
<div class="row">
<div class="float-container list-card">
<div class="float-item-left list-card-image">
<img src="https://via.placeholder.com/300x300?text=P" class="image image-round">
</div>
<div class="float-item-left list-card-content">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nullam non nisi est sit amet facilisis magna. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu.</p>
</div>
</div>
</div>
</div>
</body>
</html>
디자인 - flex
flex layout
= display:flex; 를 통해 영역 내부의 요소를 float처럼 처리할 수 있다.
= clear 처리가 필요하지 않다.
= 높이를 자동으로 맞춰준다.
= 비율 설정을 지원(flex-grow)
= 배치 순서 변경을 지원(flex-direction)
- flex 활용 예제 [1]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display flex</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
.flex-container {
display: flex;
flex-direction: row;
}
.a {
background-color: #ff7979;
/* width:33.3333%; */
flex-grow: 1;
}
.b {
background-color: #f6e58d;
/* width:33.3333%; */
flex-grow: 1;
}
.c {
background-color: #7ed6df;
/* width:33.3333%; */
flex-grow: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>
</body>
</html>
- flex 활용 예제 [2]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex menu</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
.menu-wrapper > a {
width:150px;
padding:0.5rem;
text-align: center;
text-decoration: none;
color:black;
font-size: 25px;
}
.menu-wrapper > a:hover {
color:red;
}
/*
이 스타일은 폭이 좁아져서 메뉴가 틀어지는 것을 방지하기 위해 특정 폭 이하에서만 생성되는 스타일
= 조건부 스타일
= @media 쿼리
= 많이 사용할 수록 어렵기 때문에 기본 스타일의 일부를 변경하는 형태로 작성
*/
@media screen and (max-width:600px){
.menu-wrapper {
flex-direction: column;
}
.menu-wrapper > a {
text-align: left;
}
}
</style>
</head>
<body>
<div class="flex-container menu-wrapper">
<a href="#">홈으로</a>
<a href="#">게시판</a>
<a href="#">회원가입</a>
<a href="#">로그인</a>
</div>
</body>
</html>
디자인 - position
Position 속성
= 요소들의 배치 방식을 결정하는 속성
일반적인 배치 = static, relative
특수한 위치에 배치 = absolute, fixed
- absolute : 문서상의 특정 위치를 지정하여 배치
- fixed : 화면(viewport)상의 특정 위치를 지정하여 배치
위치를 지정하는 속성 = top, bottom, left, right
표시순서를 지정하는 속성 = z-index
- position 활용 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position 이해</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
body {
width:5000px;
height:50000px;
}
.a, .b, .c {
width:100px;
height:100px;
position:absolute;
}
.a {
background-color: #fd9644;
top:20px;
left:20px;
z-index: 3;
}
.b {
background-color: #fed330;
top:80px;
left:80px;
z-index: 2;
}
.c {
background-color: #26de81;
top:140px;
left:140px;
z-index: 1;
}
</style>
</head>
<body>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</body>
</html>
디자인 - 화면 커버 구현 및 정중앙 영역 설정
(Q)
.screen-cover에 스타일을 부여하여
화면을 뒤덮도록 하여 링크 선택이 불가하도록 구현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
body {
width:5000px;
height:5000px;
}
.screen-cover {
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
}
</style>
</head>
<body>
<a href="https://www.google.com">구글</a>
<a href="https://www.naver.com">네이버</a>
<div class="screen-cover"></div>
</body>
</html>
디자인 - 체크 상태
디자인에서 두 가지 상태를 번갈아 보여주는 경우
= :hover , :focus , :checked , :active
:checked 를 이용한 디자인 토글(toggle) 구현
연계 선택자
+ 뒤에 있는 1개의 태그 선택
~ 뒤에 있는 모든 태그 선택
- 체크된 체크박스의 라벨은 파란색으로, 체크되지 않은 체크박스의 라벨은 빨간색으로 표시[1]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
.chk + label {
color:red;
}
.chk:checked + label {
color:blue;
}
</style>
</head>
<body>
<input type="checkbox" class="chk">
<label>1번 약관에 동의합니다</label>
<hr>
<input type="checkbox" class="chk">
<label>2번 약관에 동의합니다</label>
<hr>
<input type="checkbox" class="chk">
<label>3번 약관에 동의합니다</label>
</body>
</html>
라벨에는 입력창 참조 설정이 가능하다.
= 체크박스를 라벨로 참조하도록 구현한 뒤 체크박스를 숨겨버리면?
= display:none; 으로 설정
- 체크된 체크박스의 라벨은 파란색으로, 체크되지 않은 체크박스의 라벨은 빨간색으로 표시[2]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
.chk {
display: none;
}
.chk + label {
color:red;
}
.chk:checked + label {
color:blue;
}
</style>
</head>
<body>
<input type="checkbox" class="chk" id="ck-1">
<label for="ck-1">1번 약관에 동의합니다</label>
<hr>
<input type="checkbox" class="chk" id="ck-2">
<label for="ck-2">2번 약관에 동의합니다</label>
<hr>
<input type="checkbox" class="chk" id="ck-3">
<label for="ck-3">3번 약관에 동의합니다</label>
</body>
</html>
디자인 - 사이드바 만들기
- 사이드바 예제[1]
= 템포 조절 없는경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sidebar 만들기</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
/* 테스트를 위해 체크박스가 고정적으로 보이도록 표시 */
#sidebar-switch {
position:fixed;
top:5px;
left:5px;
z-index: 100000;
}
/* 체크박스(#sidebar-switch) 뒤에 있는 사이드바(.sidebar) 디자인 */
#sidebar-switch + .sidebar {
position: fixed;
top:0;
left:0;
bottom:0;
width:250px;
background-color: yellow;
z-index: 99999;
}
/* 체크박스(#sidebar-switch) 체크 시 뒤에 있는 사이드바(.sidebar) 디자인 */
#sidebar-switch:checked + .sidebar {
margin-left: -250px;
}
</style>
</head>
<body>
<input type="checkbox" id="sidebar-switch">
<div class="sidebar"></div>
</body>
</html>
- 사이드바 예제[2]
체크박스의 체크 여부에 따라서 현재 margin-left 이 변하고 있다.
= 애니메이션을 통해서 margin-left가 0.5초에 걸쳐서 변하도록 설정
= 타이밍 함수를 이용하여 애니메이션 템포 조절이 가능
= linear : 일정한 변화
= ease-in-out : 처음과 끝을 느리게 변화
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sidebar 만들기</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
/* 테스트를 위해 체크박스가 고정적으로 보이도록 표시 */
#sidebar-switch {
position:fixed;
top:5px;
left:5px;
z-index: 100000;
}
/* 체크박스(#sidebar-switch) 뒤에 있는 사이드바(.sidebar) 디자인 */
#sidebar-switch + .sidebar {
position: fixed;
top:0;
left:0;
bottom:0;
width:250px;
background-color: yellow;
z-index: 99999;
transition: margin-left 0.5s ease-in-out;
}
/* 체크박스(#sidebar-switch) 체크 시 뒤에 있는 사이드바(.sidebar) 디자인 */
#sidebar-switch:checked + .sidebar {
margin-left: -250px;
}
</style>
</head>
<body>
<input type="checkbox" id="sidebar-switch">
<div class="sidebar"></div>
</body>
</html>
- 사이드바 예제[3]
체크박스 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sidebar 만들기</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
/* 미관상 체크박스를 숨기고 라벨을 표시 */
.sidebar-button {
position:fixed;
top:15px;
left:15px;
z-index: 100000;
font-size: 30px;
border:1px solid black;
width:50px;
height:50px;
text-align: center;
cursor: pointer;
}
#sidebar-switch {
display: none;
}
/* 체크박스(#sidebar-switch) 뒤에 있는 사이드바(.sidebar) 디자인 */
#sidebar-switch + .sidebar {
position: fixed;
top:0;
left:0;
bottom:0;
width:250px;
background-color: yellow;
z-index: 99999;
transition: margin-left 0.5s ease-in-out;
}
/* 체크박스(#sidebar-switch) 체크 시 뒤에 있는 사이드바(.sidebar) 디자인 */
#sidebar-switch:checked + .sidebar {
margin-left: -250px;
}
</style>
</head>
<body>
<!-- <label for="sidebar-switch" class="sidebar-button">☰</label> -->
<label for="sidebar-switch" class="sidebar-button">≡</label>
<input type="checkbox" id="sidebar-switch">
<div class="sidebar"></div>
</body>
</html>
- 사이드바 예제[4]
체크박스 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sidebar 만들기</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
/* 미관상 체크박스를 숨기고 라벨을 표시 */
#sidebar-switch {
display: none;
}
#sidebar-switch + .sidebar-button {
position:fixed;
top:15px;
left:15px;
z-index: 100000;
font-size: 30px;
border:1px solid black;
width:50px;
height:50px;
text-align: center;
cursor: pointer;
}
#sidebar-switch + .sidebar-button::before {
content:"<-";
}
#sidebar-switch:checked + .sidebar-button::before {
content:"->";
}
/* 체크박스(#sidebar-switch) 뒤에 있는 사이드바(.sidebar) 디자인 */
#sidebar-switch ~ .sidebar {
position: fixed;
top:0;
left:0;
bottom:0;
width:250px;
background-color: yellow;
z-index: 99999;
transition: margin-left 0.5s ease-in-out;
}
/* 체크박스(#sidebar-switch) 체크 시 뒤에 있는 사이드바(.sidebar) 디자인 */
#sidebar-switch:checked ~ .sidebar {
margin-left: -250px;
}
</style>
</head>
<body>
<input type="checkbox" id="sidebar-switch">
<label for="sidebar-switch" class="sidebar-button"></label>
<div class="sidebar"></div>
</body>
</html>
- 사이드바 예제[5]
체크박스 변경 (체크 시 버튼을 180deg(180도) 회전)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sidebar 만들기</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
/* 미관상 체크박스를 숨기고 라벨을 표시 */
#sidebar-switch {
display: none;
}
#sidebar-switch + .sidebar-button {
position:fixed;
top:15px;
left:15px;
z-index: 100000;
font-size: 30px;
border:1px solid black;
width:50px;
height:50px;
text-align: center;
cursor: pointer;
}
#sidebar-switch + .sidebar-button {
transition: transform 0.4s ease-in-out;
}
#sidebar-switch + .sidebar-button:hover {
border-color: red;
color:red;
}
#sidebar-switch + .sidebar-button::before {
content:"\2190";
}
#sidebar-switch:checked + .sidebar-button{
/* 체크 시 버튼을 180deg(180도) 회전 */
transform: rotate(180deg);
}
/* 체크박스(#sidebar-switch) 뒤에 있는 사이드바(.sidebar) 디자인 */
#sidebar-switch ~ .sidebar {
position: fixed;
top:0;
left:0;
bottom:0;
width:250px;
background-color: yellow;
z-index: 99999;
transition: margin-left 0.5s ease-in-out;
}
/* 체크박스(#sidebar-switch) 체크 시 뒤에 있는 사이드바(.sidebar) 디자인 */
#sidebar-switch:checked ~ .sidebar {
margin-left: -250px;
}
</style>
</head>
<body>
<input type="checkbox" id="sidebar-switch">
<label for="sidebar-switch" class="sidebar-button"></label>
<div class="sidebar"></div>
</body>
</html>
디자인 - 슬라이드 메뉴
.slide-menu 에 대한 디자인
1. 최초에 모든 항목은 숨겨져 있어야 한다.
2. 메뉴 영역에 마우스가 올라가면 항목이 표시되도록 구현
- 슬라이드 메뉴 예제[1]
list 스타일링
(1) list에는 항목을 표시하는 기호가 있는데 이를 제거한다(list-style)
(2) ul, li에는 기본 여백이 존재하는데 이를 제거한다(padding, margin).
(3) .slide-menu에 배치된 1차 메뉴(li)는 flex 형태로 배치한다.
(4) .slide-menu에 배치된 1차 메뉴(li)에 간격(폭)을 설정한다.
(5) .slide-menu에 배치된 숨겨진 메뉴(ul)는 position을 absolute로 설정한다.
(6) 모든 메뉴항목(a)의 배치와 디자인을 변경하고 여백을 설정
(7) 색상이나 hover 설정등을 구현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>슬라이드 메뉴</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
.slide-menu, .slide-menu ul {/*(1)*/
list-style: none;
}
.slide-menu, .slide-menu ul, .slide-menu li {/*(2)*/
padding:0;
margin:0;
}
.slide-menu {/*(3)*/
display: flex;
}
.slide-menu > li {/*(4)*/
width:100px;
}
.slide-menu li {/*(5)*/
/*absolute의 기준점 설정을 위하여 position 설정*/
position:relative;
}
.slide-menu ul {/*(5)*/
position: absolute;
top:45px;
left:0;
}
.slide-menu li > a {/*(6) */
display: block;
width:100px;
text-decoration: none;
color:black;
padding:0.75rem;
}
/*(7)*/
.slide-menu , .slide-menu ul{
background-color: #EEEEEE;
}
.slide-menu li:hover > a {
background-color:#CCCCCC;
color:black;
}
.slide-menu > li.flex-right {
margin-left: auto;
margin-right:0;
}
/* 모든 서브메뉴를 숨겼다가 마우스 올라가면 표시되도록 설정 */
.slide-menu ul {
display:none;
}
.slide-menu li:hover > ul {
display:block;
}
</style>
</head>
<body>
<!-- 메뉴는 계층형 구조를 가지므로 list 태그로 구현하기에 적합하다 -->
<ul class="slide-menu">
<li>
<a href="#">메뉴1</a>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
<li><a href="#">항목3</a></li>
<li><a href="#">항목4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴2</a>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
<li><a href="#">항목3</a></li>
<li><a href="#">항목4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴3</a>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
<li><a href="#">항목3</a></li>
<li><a href="#">항목4</a></li>
</ul>
</li>
<li class="flex-right">
<a href="#">메뉴4</a>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
<li><a href="#">항목3</a></li>
<li><a href="#">항목4</a></li>
</ul>
</li>
</ul>
</body>
</html>
- 슬라이드 메뉴 예제[2]
list 스타일링
(1) list에는 항목을 표시하는 기호가 있는데 이를 제거한다(list-style)
(2) ul, li에는 기본 여백이 존재하는데 이를 제거한다(padding, margin).
(3) .slide-menu에 배치된 1차 메뉴(li)는 flex 형태로 배치한다.
(4) .slide-menu에 배치된 1차 메뉴(li)에 간격(폭)을 설정한다.
(5) .slide-menu에 배치된 숨겨진 메뉴(ul)는 position을 absolute로 설정한다.
(6) 모든 메뉴항목(a)의 배치와 디자인을 변경하고 여백을 설정
(7) 색상이나 hover 설정등을 구현
(8) 2차 항목부터는 우측에 표시되도록 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>슬라이드 메뉴</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<style>
.slide-menu, .slide-menu ul {/*(1)*/
list-style: none;
}
.slide-menu, .slide-menu ul, .slide-menu li {/*(2)*/
padding:0;
margin:0;
}
.slide-menu {/*(3)*/
display: flex;
}
.slide-menu > li {/*(4)*/
width:120px;
}
.slide-menu li {/*(5)*/
/*absolute의 기준점 설정을 위하여 position 설정*/
position:relative;
}
.slide-menu ul {/*(5)*/
position: absolute;
top:45px;
left:0;
}
.slide-menu li > a {/*(6) */
display: block;
width:120px;
text-decoration: none;
color:black;
padding:0.75rem;
}
/*(7)*/
.slide-menu , .slide-menu ul{
background-color: #EEEEEE;
}
.slide-menu li:hover > a {
background-color:#CCCCCC;
color:black;
}
/*(8)*/
.slide-menu > li > ul ul {
top:0;
left:120px;
}
.slide-menu > li.flex-right {
margin-left: auto;
margin-right:0;
}
/* 모든 서브메뉴를 숨겼다가 마우스 올라가면 표시되도록 설정 */
.slide-menu ul {
display:none;
}
.slide-menu li:hover > ul {
display:block;
}
</style>
</head>
<body>
<!-- 메뉴는 계층형 구조를 가지므로 list 태그로 구현하기에 적합하다 -->
<ul class="slide-menu">
<li>
<a href="#">메뉴1</a>
<ul>
<li>
<a href="#">항목1</a>
<ul>
<li>
<a href="#">서브항목1</a>
<ul>
<li><a href="#">서서브항목1</a></li>
<li><a href="#">서서브항목2</a></li>
<li><a href="#">서서브항목3</a></li>
<li><a href="#">서서브항목4</a></li>
</ul>
</li>
<li><a href="#">서브항목2</a></li>
<li><a href="#">서브항목3</a></li>
</ul>
</li>
<li>
<a href="#">항목2</a>
<ul>
<li><a href="#">서브항목1</a></li>
<li><a href="#">서브항목2</a></li>
<li><a href="#">서브항목3</a></li>
</ul>
</li>
<li><a href="#">항목3</a></li>
<li><a href="#">항목4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴2</a>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
<li><a href="#">항목3</a></li>
<li><a href="#">항목4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴3</a>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
<li><a href="#">항목3</a></li>
<li><a href="#">항목4</a></li>
</ul>
</li>
<li>
<a href="#">메뉴4</a>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
<li><a href="#">항목3</a></li>
<li><a href="#">항목4</a></li>
</ul>
</li>
</ul>
</body>
</html>