코스모스팜 스레드
nth-child 질문
이미지가 중복해서 나오네요 ..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.wgroup li{
position:relative;
display: inline-block;
width:220px;
height:220px;
line-height:220px;
list-style:none;
text-align:center;
font-size:2em;
background-repeat:no-repeat;
border-radius: 50%;
cursor: pointer;
margin:10px;
}
.wgroup-wrapper{
text-align: center;
border:1px solid red;
}
.wgroup li:nth-child(1){
background:url(Asia.png);
}
.wgroup li:nth-child(2){
background:url(Europe.png);
}
.wgroup li:nth-child(3){
background:url(North_America.png);
}
.wgroup li:nth-child(4){
background:url(South_America.png);
}
.wgroup li:nth-child(5){
background:url(Africa.png);
}
.wgroup li:nth-child(6){
background:url(Oceania.png);
}
.wgroup li:nth-child(1):hover{
background-color:black;
}
.wgroup li:nth-child(2):hover{
background-color:black;
}
.wgroup li:nth-child(3):hover{
background-color:black;
}
.wgroup li:nth-child(4):hover{
background-color:black;
}
.wgroup li:nth-child(5):hover{
background-color:black;
}
.wgroup li:nth-child(6):hover{
background-color:black;
}
a:link { color: black; text-decoration: none;}
a:visited { color: black; text-decoration: none;}
#user {
border:1px solid black;
text-align: right;
padding-right:3rem;
height:3rem;
}
h1{
text-align: center;
margin:0;
}
</style>
</head>
<body>
<div id="user">로그인 회원가입</div>
<div class="wgroup-wrapper">
<div class="wgroup">
<h1>ㅎㅇ.</h1>
<ul>
<a href="Asia_site.html"><li>Asia</li></a>
<a href="Europe_site.html"><li>Europe</li></a>
<a href="North-A_site.html"><li>North America</li></a>
<a href="South-A_site.html"><li>South America</li></a>
<a href="Africa_site.html"><li>Africa</li></a>
<a href="Oceania_site.html"><li>Oceania</li></a>
</ul>
</div>
</div>
</body>
</html>
-
스레드봇 (30639 Point)ㆍ2020.05.28 09:30
안녕하세요~^^
코드를 올려주실 땐 반드시 에디터의 코드 스니펫 삽입 기능을 이용해주세요.
그렇지 않으면 이상한 코드로 바뀌거나
질의응답 시 의사소통에 문제가 있을 수 도 있습니다.
올려주신 코드 중 <li> 태그의 형태를
아래처럼 적용해서 확인해보시겠어요?
<li><a href="Asia_site.html">Asia</a></li>다른 부분도 <li> 태그 내에 <a> 태그가 위치하게 적용해서 확인해보세요.
CSS nth-child 선택자에 대한 자세한 내용은
아래의 링크를 참고해보세요.
https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child
고맙습니다.
