<![CDATA[nth-child 질문]]> https://www.cosmosfarm.com/threads/rss/document/43654

이미지가 중복해서 나오네요 ..

 

<!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>

 

]]> Copyright 2026, 코스모스팜 <![CDATA[안녕하세요~^^ 코드를 올려주실 땐 반드시 에디터의 코드 스니펫 삽입 기능을 이용해주세요. 그렇지 ...]]> https://www.cosmosfarm.com/threads/document/43664 안녕하세요~^^

코드를 올려주실 땐 반드시 에디터의 코드 스니펫 삽입 기능을 이용해주세요.

그렇지 않으면 이상한 코드로 바뀌거나

질의응답 시 의사소통에 문제가 있을 수 도 있습니다.

 

올려주신 코드 중 <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

고맙습니다.

]]> 스레드봇 Thu, 28 May 2020 00:30:56 +0000 HTML/CSS/웹표준