CSS 1차시

1. element selector : element 자체에 스타일 부여

    <style>

        ul{

            border: 2px solid;

        }

        li {

            text-decoration: line-through;

        }

    </style>

   

 

2. class selector : class를 만들어 옵션 집어넣듯이 스타일 부여

    <style>

        ul {

            border: 2px  double;

        }

        .line-through {

            text-decoration: line-through;

        }

        .gray {

            color: #888;

        }

    </style>

    <ul>

        <li class="line-through">list item</li>

        <li class="line-through gray">list item</li>

        <li>list item</li>

    </ul> 

 

3. id selection : class와 달리 다른 element와 공유할 수 없으며 한 element가 여러 id를 갖지 않는다.

     <style>
 ul {

            border: 10px double;

        }

        #first {

            text-decoration: underline;

        }

    </style>

    <ul>

        <li id="first">list item</li>

    </ul>

 4. children selector: 하위 element 전부에 스타일을 부여

  <style>
        ul {

            border: 1px solid;

        }

        li a {

            text-decoration: none;

            color: #789;

        }

    </style>

    <ul>

        <li><a href="#">list item</a></li>

        <li><a href="#">list item</a></li>
   </ul>

5. pseudo class: 가상의 class. 

    선택자 뒤에 붙는 키워드. 선택된 요소의 특별한 상태를 나타낸다.

        - nth-chile(2): 두번째 child

        - hover: 마우스가 위에 있을 때

   <style>

        li:nth-child(1) {

            font-weight: bold;

        }

        li:hover {

            text-decoration: underline;

        }

    </style>

6. pseudo element: 선택자 뒤에 붙는 키워드. 반복적으로 출력해야 하는 부분이 있을 때 사용

   <style>

        li::after {

            content: "★";

            color: red;

        }

        li::before {

            content: "☆";

            color: red;

        }

    </style>

- CSS 단위(Unit)

• px
• rem
• em
• %
• vw
• vh