[CSS] 6~7 id class 선택자

아이엠제니 2022. 1. 26. 14:11

생활코딩 [WEB2 - CSS] STUDY 기록

6. CSS 속성을 스스로 알아내는 방법

검색
글씨 크기
css text size property
=> font-size 속성 사용

가운데 정렬
css text center property
=> text-align 속성 사용

    h1 {
      font-size: 45px;
      text-align: center;
    }

글씨 크기가 커지고, 가운데 정렬 되었다.

7. CSS 선택자의 기본

<head>
  <title>별 헤는 밤</title>
  <meta charset="utf-8">
  <style>
a {
  color: black;
  text-decoration: none;
}
.saw {
color: gray;
}
h1 {
  font-size: 45px;
  text-align: center;
}
  </style>
</head>

<body>
  <h1><a href="index.html">윤동주 시인 시</a></h1>
  <ol>
    <li><a href="1.html" class="saw">서시</a></li>
    <li><a href="2.html" class="saw">별 헤는 밤</a></li>
    <li><a href="3.html">쉽게 쓰여진 시</a></li>
  </ol>

.saw

이 선택자는 이 웹페이지에서 class가 saw인 것을 가르킴.

    <li><a href="2.html" class="saw active">별 헤는 밤</a></li>

class의 값은 여러 개 들어올 수 있다.

값이 2개일 때는 나중에 입력한 선택자가 우선순위를 가짐.

    <li><a href="2.html" class="saw" id="active">별 헤는 밤</a></li>

우선순위를 확실하게 하기 위해 id 선택자를 사용한다.

class 보다 id가 먼저이다.

id 값은 중복되면 안 됨.

id>class>tag

google 검색
css selector