[CSS] 다양한 selector

CSS파일 만들기

@charset "UTF-8";

p{/*모든 <p> 요소*/
    font-family: 궁서체;
    font-size: 35px;
    font-weight: bold;
    font-style: italic}
    
div p {/*<div>안에 있는 모든 <p>*/
    background-color: chartreuse;}
    
h2, p {/*모든 <h2>, 모든 <p>*/
    color: deeppink;}
    
div h2 {/*<div>안에 있는 h2*/  
    text-shadow: 2px 3px tomato;}
    
dis>span>p {/*부모>자식 - 한양대학교/건국대학교 접근*/
    text-decoration-line: line-through;
    text-decoration-color: black;}

div>span>h2 {/*숭실대학교*/
    color: ivory;}
    
#mybox {/*Box Model*/
    width: 320px /*내용의 안쪽여백을 상하좌우 모두 10px*/
    padding: 10px;
    border: 5px solid black;
    margin: auto; /*수평을 기준으로 가운데 정렬*/}
    
#menu {
    width: 100px;
    height: 100px;
    color: blueviolet
    background-color: blanchedalmond;}
    
.hide {/*화면에 노출 안됨*/
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    font-size: 0;}
    
#nav {
    width: 300px;
    height: 500px;
    background-color: pink;
    margin: auto;}
    
#nav>ul {/*id=nav의 자식중에서 ul태그*/
    list-style: none;}
    
#nav .news {/*id=nav안에서 모든 class=news*/
    background: olive;
    font-weight: bold;}
    
#nav>ol>li:nth-child(2) {/*<li>요소 중에서 2번째*/
    font-weight: bold;}
    
#nav>ol>li> a {
    width: 200px;
    height: 150px;
    background-color: lavender;
    text-decoration-style: wavy;}
    
a:link {color: blue; text-decoration: none;}
a:visited {color: brown; text-decoration: none;}
a:hover {color: aque; text-decoration: underline;}
a:active {color: blueviolet; text-decoration: none;}

#nav ul.news {
    background-color: deepskyblue;}

 

- a:link : 일반적 링크 및 방문하지 않은 링크

- a:visited : 방문했던 링크

- a:hover : 마우스 올렸을 때 링크

- a:acitve: 마우스 누르는 순간의 링크

---

<p>대한민국</p>

<div>
    <p>무궁화 삼천리 화려강산</p>
</div>

<hr>

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

---

<div id="mybox">Box Model</div>

<hr>

<div id="menu">
    <ol class="hide">
        <li>국어</li>
        <li>영어</li>
        <li>수학</li>
    </ol>
</div>

<hr>

<div id="nav">
    <h1 class="hide">뉴스</h1>
    <ul>
            <li><a href="http://www.naver.com/">사회</a></li>
            <li><a href="http://www.naver.com/">정치</a></li>
            <li><a href="http://www.naver.com/">경제</a></li>
        </ul>
        <h1 class="hide">스포츠</h1>
        <ul class="news">
            <li><a href="http://www.naver.com/">축구</a></li>
            <li><a href="http://www.naver.com/">야구</a></li>
            <li><a href="http://www.naver.com/">골프</a></li>
        </ul>
        <h1 class="hide">연예</h1>
        <ul>
            <li><a href="http://www.naver.com/">노래</a></li>
            <li><a href="http://www.naver.com/">영화</a></li>
            <li><a href="http://www.naver.com/">다큐</a></li>
        </ul>

        <p class="news">세계</p>

        <ol>
            <li>사과</li>
            <li>딸기</li>
            <li>포도</li>
            <li><a href="http://www.itwill.co.kr/">아이티윌</a></li>
        </ol>
    </div>

    <p class="news">과학</p>
    <a href="http://www.daum.net/">다음</a>