CSS 실천(5) 「3개의 셀렉터를 사용할 수 있게 된다」

1. 소개

이 기사에서는 CSS
"3개의 셀렉터"
에 대해 설명한다.

2. 엘리먼트 셀렉터

엘리먼트 셀렉터란?

・여기는, 어느 요소(아이콘이거나 문자이거나 화상이거나)를 클릭되었을 때에, 태그가 반응하는지, 설정하는 장소의 일.
・쓰는 방법으로서, 대략적으로 설명하면 2개의 쓰는 방법이 있다.

①id 속성・class 속성에서의 설정
② 링크처에서의 설정

3. id 셀렉터

id의 역할

요소에 고유한 이름을 지정하는 데 사용됩니다.

고유 이름이기 때문에 id 속성의 값은 동일한 HTML 문서 내에서 중복되어 다른 요소에 설명 될 수 없습니다.

id 속성은 CSS에서 셀렉터에서 사용되는 것 외에 a요소의 링크처를 지정하는 경우 등에도 사용된다.

id 속성에 지정할 수 있는 값은
알파벳으로 시작하여 두 번째 문자 이후에는 알파벳,
숫자, 하이픈(-), 밑줄(_), 피리온(.), 콜론(:)
사용 가능.
대문자와 소문자는 구별된다.

【샘플】

index.html

<body>
  <h1>セレクター</h1>
  <p id="hello">セレクターのカリキュラムです。</p>
</body>

styles.css

body {
  background-color: #ccc;
}
#hello {
  color: blue;
}

【표시예】

4. class 셀렉터

클래스의 역할

요소에 대한 분류 지정

분류이므로, class 속성의 값은 HTML 문서내에서 복수의 요소에 동일한 값을 붙일 수 있다.

하나의 요소에 복수의 분류를 붙일 수도 있습니다.
(그 경우는 공백 문자로 단락지어 계속해서 기술하는 것.)

설명에 관한 주의점

・셀렉터에 붙일 수 있는 문자는
알파벳, 숫자, 하이픈(-), 밑줄(_) 사용 가능
첫 번째 문자에는 하이픈과 숫자를 사용할 수 없습니다.

공백은 값의 구분자로서 사용하고 있기 (위해)때문에 사용할 수 없다.

이하, 「태스크를 관리하는 ToDo 앱」을 예로 설명한다.
【샘플】

index.html

<body>
  <ul>
    <li><input type="checkbox">読書</li>
    <li class="completed"><input type="checkbox" checked>HTMLの学習</li>
    <li class="completed red"><input type="checkbox" checked>JavaScriptの学習</li>
  </ul>
</body>

styles.css

.completed{
  text-decoration: line-through;
}

·text-decoration: line-through
→체크 박스에 체크가 들어왔을 때에 타소선을 표시한다고 하는 것.
·completed
→ 태스크가 완료되었다는 클래스 이름.
【표시예】

5. 결론

다음 항목: CSS 실천 (6) 「결합자를 사용한 셀렉터의 지정」 다음.

Reference

이 문제에 관하여(CSS 실천(5) 「3개의 셀렉터를 사용할 수 있게 된다」), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Stack_up_Rising/items/6b1801c5e977a8ebea47

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)