CSS-SELECTOR

임재헌·2023년 3월 24일

CSS

목록 보기

5/23

<!DOCTYPE html>
<html lang="ko">
  
<head>
    <title> 셀렉터 </title>
    <link rel="stylesheet" href="../css/mystyle05.css">
</head>

<body>

    <h3>다양한 셀렉터 연습</h3>

    <p>대한민국</p>

    <div>
        <p> 오필승코리아</p>
    </div>

    <h1>종로구</h1>
    <h2>무궁화</h2>
    <div>
        <h2>개나리</h2>
        <span>
            <p>라일락</p>
            <h2>해바라기</h2>
        </span>
    </div>
    <hr>

    <div>
        <span>
            <p>진달래</p>
        </span>
        <div>
            <p>봉선화</p>
        </div>
    </div>
    <hr>
    <!--참조 https://www.w3schools.com/css/css_boxmodel.asp-->
    <div id="mybox"> boxModel</div>
    <hr>
    <div id="menu">
        <ol class="hide">
            <ul>국어</ul>
            <ul>영어</ul>
            <ul>수학</ul>
        </ol>
    </div>
    <hr>
    <div id="nav">
        <h1 class="hide">뉴스</h1>
        <ul>
            <li><a href="">사회</a></li>
            <li><a href="">정치</a></li>
            <li><a href="">경제</a></li>
        </ul>
        <h1 class="hide">스포츠</h1>
        <ul class="sports">
            <li><a href="">축구</a></li>
            <li><a href="">야구</a></li>
            <li><a href="">골프</a></li>
        </ul>

        <h1 class="hide">연예</h1>
        <ul>
            <li><a href="">TV</a></li>
            <li><a href="">포토</a></li>
            <li><a href="">투표</a></li>
        </ul>
        <p class="sports">세계</p>
    
        <ol>
            <li>손흥민</li>
            <li>김연아</li>
            <li>박지성</li>
            <li><a href="https://www.itwill.co.kr/"> 아이티윌</a></li>
        </ol>
    </div>
    <p class="new">과학</p>
    <a href="https://www.naver.com/">네이버</a>
    </body>

</html>

@charset "UTF-8";
/*mystyle05.css*/

/*참조 05_다양한selector.html */

p {
    /*모든 p 요소*/
    font-family: 궁서체;
    font-size: 40px;
    font-weight: bold;
    font-style: italic;

}

div p {
    /*div 내부의 모든p */
    background-color: crimson;
}

h2,
p {
    /* 모든 h2 모든p */
    color: chocolate;
}

div h2 {
    text-shadow: 2px 2px green;
}

/*부모 > 자식 접근*/
div>span>p {
    text-decoration-line: line-through;
    text-decoration-color: darkblue;
}

div>span>h2 {
    color: darkgreen;
}

#mybox {
    /* boxmodel*/
    /* 상하좌우 여백을 모두 10px */
    width: 320px;
    padding: 10px;
    border: 5px solid maroon;
    margin: auto;
    /* 수평을 기준으로 가운데 정렬*/
}

#menu {
    width: 100pt;
    height: 100pt;
    background-color: blueviolet;
}

.hide {
    /* 화면에 노출 안됨*/
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    font-size: 0;
}

#nav {
    width: 300px;
    height: 300px;
    background: brown;
    margin: auto;
}
#nav>ul {
   /* id= nav의 자식중에서 ul태그*/
    list-style: none;

}
#nav>.sports{ /*id =nav안에서 모든 class= sports*/
    background: wheat;
    font-weight: bold;
 }



#nav>ol>li:nth-child(2){/* li요소 중에서 2번째 */
    font-weight: bold;
}
/* 링크만 css적용*/
#nav>ol>li>a {
    width: 200px;
    height: 100px;
    background-color: chartreuse;
    text-decoration-style: wavy;
 }
 /*
   참조 https://www.w3schools.com/cssref/sel_active.asp
   a:link     - 일반적 링크 및 방문하지 않은 링크
   a:visited  - 방문했던 링크
   a:hover    - 마우스 올렸을 때 링크
   a:active   - 마우스 누르는 순간의 링크
*/
a:link     {color: black; text-decoration: none;}
a:visited  {color: black; text-decoration: none;}
a:hover    {color: black; text-decoration: none;}
a:active   {color: black; text-decoration: none;}

#nav ul.sports {/* id=sport 해당하는 리스트만 변화*/
    background-color: yellow;
 }

임재헌

이전 포스트

CSS-External CSS

다음 포스트

CSS-SELECTOR

CSS

CSS-External CSS

CSS-RESET.CSS

0개의 댓글