문제 1
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>네비게이션</title>
<style>
.navi>li{
background-color: black;
list-style-type: none;
width: 100px;
height: 50px;
text-align: center;
}
.navi>li>a{
color: white;
text-decoration: none;
line-height: 50px;
width: 100%;
height: 100%;
}
.navi>li>a:hover{
font-size: 1.2em;
font-weight: bold;
}
</style>
</head>
<body>
<ul class="navi">
<li><a href="/html5.html">HTML5</a></li>
<li><a href="/css3.html">CSS3</a></li>
<li><a href="/javascript.html">JavaScript</a></li>
<li><a href="/jQuery.html">jQuery</a></li>
</ul>
</body>
</html>이 문제는 CSS를 수정하는 문제로 네비게이션 바가 한줄이 아니라 여러줄로 출력되는 문제를 가지고 있다.
.navi>li{
background-color: black;
list-style-type: none;
width: 100px;
height: 50px;
text-align: center;
**float:left;**
}
.navi>li>a{
color: white;
text-decoration: none;
line-height: 50px;
width: 100%;
height: 100%;
**display: block;**
}
.navi>li>a:hover{
font-size: 1.2em;
font-weight: bold;
}- li의 float을 left로 바꾸어주면 한줄로 정상 출력된다.
- 메뉴에 마우스를 올리면 글씨크기가 바뀌는 효과가 현재는 글씨가지 가야 바뀌기 때문에 메뉴로만 가도 바뀔수 있도록 a태그에 display:block을 선언해준다
문제2
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>갤러리</title>
<style>
.img-box{
margin: 0 auto;
width: 365px;
height: 400px;
}
.img-box>img{
position: absolute;
width: 200px;
height: 200px;
top: 50px;
z-index: 10;
}
#first{
left:20px;
}
#second{
left:80px;
}
#third{
left:140px;
}
.img-box>img:hover{
z-index: 50;
}
</style>
</head>
<body>
<div class="img-box">
<img id="first" src="img/flower1.PNG">
<img id="second" src="img/flower2.PNG">
<img id="third" src="img/flower3.PNG">
</div>
</body>
</html>- 마우스를 올린 그림이 위로 올라오고 그림을 가운데 정렬해야하는 문제이다
- 기본적으로 두번째 그림이 가장 위로 올라온다
.img-box{
margin: 0 auto;
**position:relative;**
width: 365px;
height: 400px;
}
.img-box>img{
position: absolute;
width: 200px;
height: 200px;
top: 50px;
z-index: 10;
}
#first{
left:20px;
}
#second{
left:80px;
**z-index:40**
}
#third{
left:140px;
}
.img-box>img:hover{
z-index: 50;
}- secnddml z-index를 10보다 높게하여 다른 그림보다 먼저 올라오게 한다
- hover가 z-index를 올리기때문에 hover의 z-index보다는 낮아야 핝다.
- img의 포지션이 absolute로 되어있어서 가운데 정렬이 되지 않고 절대값을 기준으로 움직인다
- img의 부모태그인 div를 relative로 변경하여 div를 기준으로 absolute가 위치가 변동되도록한다.
- 지금 부모태그는 margin 0 auto로 가운데 정렬이 선언되었으나 그림들이 absolute이기때문에 부모태그가 없어 절대값을 기준으로 좌측 정렬되었다,
- 부코태그를 relative로 바꿔주면 그림태그들은 relative를 부모태그로 위치값을 갖는다
hello world