tag

선택자 부분에 특정 태그를 입력하면 문서의 모든 태그에 적용이된다.

class

공통된 성질을 갖은 부분을 클래스로 묶어서 CSS가 모두 같이 처리할 수 있도록 할 수 있다.

class로 설정하고 싶은 부분에 class = "이름" 을 넣어준다. 그리고 style태그에 가서 .클래스이름 을 선택자로 넣으면 된다.

클래스를 여러개 지정하고 싶으면 class = "이름1 이름2" 이렇게 띄어쓰기로 구분한다.

id선택자

class보다 더 우선순위가 높은 선택자이다. 예외로서 생각하는게 좋으며 id하나당 하나만 사용해야 된다.

선택자 우선순위

id > class > tag
같은 선택자이면 가장 마지막 선택자가 우선순위가 높다.

<!DOCTYPE html>
<html>

<head>
    <title>미국 지수 추종 ETF</title>
    <meta charset="utf-8">
    <style>
        **h1 {
            color: darkgreen;
            text-decoration: underline;
            font-size: 60px;
            text-align: center;
        }

        .stock {
            color: darkslateblue;
            font-size: 19px;
        }

        #active {
            color: darkred;
            font-size: 36px;
            /* font-weight: 200; */
        }**
    </style>
<body>
    <h1>미국의 지수추종 ETF</h1>
    <h3><strong>기본 지수 추종</strong></h3>
    <ol>
        <li class="stock">IVV</li>
        <li class="stock">QQQ</li>
        <li class="stock">SOXX</li>
    </ol>
    <h3><strong>레버리지 ETF</strong></h3>
    <ol>
        <li class="stock">SPXL</li>
        <li class="stock" id = "active">QLD</li>
        <li  classs="stock">SOXL</li>
    </ol>

    <a href="<https://kr.investing.com/>" , target="_blank">
        <h5> &lt 인베스팅닷컴으로가기 &gt </h5>
    </a>
</body>

</html>

Back_To_Top