선택기를 사용하여 HTML 요소 스타일 지정하기

이 장에서는 CSS 선택기를 사용하여 불필요한 태그를 피하면서 HTML 요소의 스타일을 효율적으로 지정하는 방법을 설명합니다.

### 선택기를 사용하여 CSS에서 요소 스타일 지정하기
CSS 선택기는 웹 페이지의 요소를 보다 효율적으로 스타일 지정할 수 있는 방법을 제공합니다. <span> 태그는 특별한 의미나 기능 없이 CSS 스타일링을 위해 텍스트를 둘러싸는 무색 태그로 사용할 수 있습니다. <div>와 달리 <span>은 줄 바꿈을 만들지 않으므로 텍스트를 둘러싸는 데 적합합니다. CSS 선택기와 <span> 태그를 사용하면 웹 페이지의 텍스트를 굵게 표시하는 등의 스타일을 쉽게 지정할 수 있습니다.

### CSS를 사용하여 자바스크립트 스타일링 관리하기
특히 많은 위치에서 페이지의 JavaScript를 수동으로 바꾸거나 스타일을 지정하는 것은 비현실적입니다. CSS는 이 문제를 해결하는 데 도움이 되는 환상적인 기능을 제공합니다. CSS를 사용하면 자바스크립트의 스타일을 쉽게 관리하고 많은 위치에서 수동으로 교체해야 하는 어려움을 피할 수 있습니다.

### CSS를 사용하여 클래스별 요소 선택하기
CSS는 "class" 속성을 사용하여 특정 HTML 요소에 스타일을 선택하고 적용합니다. CSS 선택기에서 태그 이름을 사용하는 것만으로는 요소를 클래스별로 지정할 수 없습니다. CSS에서 클래스별로 선택하려면 클래스 이름 앞에 마침표(.)를 사용하고 그 뒤에 스타일 선언을 사용합니다. 주어진 예제에서 CSS 파일에 ".js"를 사용하면 클래스가 "js"인 모든 요소에 스타일이 적용됩니다.

### CSS를 사용하여 웹 페이지 스타일 지정하기
CSS는 클래스 값이 js인 모든 태그의 글꼴 굵기를 굵게로 쉽게 변경할 수 있습니다. CSS는 코드 한 줄을 반복하여 1억 개 위치의 글꼴 색상을 빨간색으로 바꾸는 등 수많은 요소에 변경 사항을 빠르게 적용할 수 있습니다. 이 장에서는 스타일을 속성과 태그로 사용하고 선택기를 사용하여 여러 태그를 선택하는 방법을 통해 CSS와 HTML의 통합을 설명합니다.

### CSS 선택기를 사용하여 웹 페이지 콘텐츠 스타일 지정하기
* 🎨 이 글에서는 개별 태그를 사용하는 것보다 웹 페이지 콘텐츠의 스타일을 지정하는 더 효율적인 방법으로서 **CSS 선택기의 개념**을 소개합니다.
* 🔤 이 예는 `<span>` 태그와 인라인 CSS를 사용하여 웹 페이지의 특정 텍스트(예: **"JavaScript"**)에 굵은 글씨로 스타일을 지정하는 방법을 보여 줍니다.
* 🚫 이 텍스트는 큰 웹 페이지에서 동일한 텍스트의 여러 인스턴스에 **스타일을 지정**해야 할 때 이 접근 방식의 한계를 강조합니다.
* 🎭 이 글에서는 CSS 클래스의 개념을 소개하면서 **"js"라는 이름의 CSS 클래스를 만들어 대상 텍스트의 모든 인스턴스에 적용**하는 방법을 설명합니다.
* 🎩 CSS 코드에서 **'.js' 선택기**를 사용하면 클래스가 'js'인 모든 요소에 개별적으로 스타일을 지정하지 않고 **한 번에 스타일을 지정**할 수 있습니다.
* 🌟 이 방법은 **CSS 클래스만 업데이트**하면 여러 요소에 걸쳐 쉽고 빠르게 스타일을 변경할 수 있어 효율적이라는 평가를 받고 있습니다.
* 📝 '스타일' 속성을 사용하는 방법과 선택기를 사용하여 여러 요소에 스타일을 적용하는 방법 등 웹 페이지에 CSS를 삽입하는 **두 가지 주요 방법**을 요약합니다.

WEB2 JavaScript - 10.CSS 기초 (style 태그)

일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다.

채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN2ydxOsrWe8JJUXzj5ovsUmjfBSwLjajT6SyO00ulne3zja2PzEZC2wnJCgvZ6lr/ZLvA9yUqmrKRNaPCfjS0OtBGosccoJssHdaB5i8H73dKI9jimeybLU11Hzb6a86EAaDFkM6bYaBwIDAQAB
