자바스크립트 CSS 속성 추가

Michael Zippo

CSS 선택기를 사용하면 웹 개발자가 웹페이지의 특정 요소 또는 요소 집합의 스타일을 지정할 수 있습니다.

선택기로 작업할 때 특정 속성이 있는 요소만 대상으로 지정할 수 있습니다. 여기에서 CSS 속성 선택기가 필요합니다. 속성 선택기를 사용하면 특정 속성이 있는 요소에만 특정 스타일을 적용할 수 있습니다.

이 튜토리얼에서는 요소의 스타일을 지정할 때 CSS 속성 선택기를 사용하는 방법을 설명합니다. 이 튜토리얼을 마치면 속성 선택기를 사용하여 요소를 정의하는 방법을 충분히 이해하게 될 것입니다.

HTML 속성

HTML에서 속성은 추가 요소를 정의하는 데 사용됩니다. 요소의 특성 또는 속성. 예를 들어 height 속성은 이미지의 높이를 정의하고 title 속성은 웹 요소의 제목을 정의합니다.

이름/값 쌍 구조를 사용하여 속성을 선언하세요. 즉, name = "value"와 같은 속성이 HTML 파일에 나타납니다. HTML 속성에 대한 자세한 내용은 HTML 속성 가이드를 참조하십시오.

CSS 속성 선택기

사이트를 디자인할 때 속성 값에 따라 요소의 스타일을 지정하거나 지정하지 않을 수 있습니다. 이렇게 하려면 CSS 속성 선택기를 사용합니다.

속성 선택기를 사용할 때 따라야 할 두 단계는 다음과 같습니다.

Wrap attribute ` s는 대괄호로 묶습니다.
이 이름으로 속성에 적용할 스타일을 지정합니다.

CSS 속성 선택기가 작동하는 몇 가지 예를 살펴보겠습니다.

CSS [속성]

선택자 속성의 가장 기본적인 형식은 [속성]입니다. 즉, 속성 이름을 대괄호로 묶습니다.

title 속성이 있는 각 요소의 글꼴 크기를 16px로 설정한다고 가정해 보겠습니다. 다음 코드를 사용하여 수행할 수 있습니다.

CSS 규칙 코드는 제목 속성이 있는 요소에만 적용됩니다. title 속성이 지정된 모든 요소의 글꼴 크기는 속성에 저장된 값에 관계없이 위의 규칙에 따라 16px로 변경됩니다.

다음을 만들 수 있습니다. 다음 중 하나 또는 둘 다를 지정하여 보다 정확한 속성 선택기:

규칙을 적용해야 하는 요소의 특정 유형
속성 id 값( 예: 텍스트의 경우 "title", 링크의 경우 "href", 요소의 경우 "class").

예를 들어, 단락의 모든 텍스트 크기를 설정하려는 경우 헤더를 16px로 설정합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

selector 속성의 시작 부분에 있는 문자 p는 브라우저가

태그에만 글꼴 스타일을 적용하도록 지시합니다. . 선택기의 [title] 부분은 브라우저에

지정된 title 속성이 있는 태그에만 경찰 스타일을 적용하도록 지시합니다.

T 따라서 이 코드를 읽은 후 브라우저는 모든 단락 제목(p)의 글꼴 크기를 16px로 변환합니다. 이 코드는 페이지의 다른 텍스트에는 영향을 미치지 않습니다.

[attribute = "value"] 속성 선택기를 사용하면 프로그래머가 요소에만 스타일을 적용할 수 있습니다. 값이 선택기에 지정된 값과 같은 속성.

Python.Engineering 홈페이지에 있는 모든 링크의 배경색을 주황색으로 설정하려고 한다고 가정합니다. 이 스타일은 a 요소의 배경색을 주황색으로 설정해야 합니다. 다음 CSS 코드를 사용하여 이 작업을 수행할 수 있습니다.

이 규칙은 href 속성이 python.engineering과 같은 웹 페이지의 모든 요소를 선택합니다. 그런 다음 이 모든 요소의 배경색을 주황색으로 설정합니다.

CSS [속성 ~ = "값"]

[속성 ~ = & ldquo 선택기 ; value "]를 사용하면 특정 단어를 포함하는 속성 값이 있는 요소를 선택할 수 있습니다.

예를 들어, 모든 p에 스타일을 적용하려고 한다고 가정합니다. 제목이 blue에 해당하는 요소. 이 스타일의 경우 이러한 요소의 텍스트 색상을 파란색으로 변경해야 합니다.

우리는 다음을 사용할 수 있습니다. 이를 수행하기 위한 다음 규칙:

이 규칙은 "blue"라는 단어를 포함하는 제목과 관련된

모든 태그를 찾고 이러한 태그

blue에 있는 텍스트의 색상을 정의합니다. 따라서 ,

태그에 제목이 color blue 또는 color blue인 경우 이 스타일이 적용됩니다. 그러나 이 규칙은 아닙니다 은 b lue라는 단어가 속성에 독립적으로 존재하지 않기 때문에 제목이 blueColor인

태그에 적용됩니다.

다음과 다릅니다. * = selector는 속성에서 특정 단어를 찾을 수 있을 뿐만 아니라 속성에서 특정 값을 찾을 수도 있습니다.

CSS [속성 | = "값"]

[속성 | = "value"] 선택기를 사용하면 속성이 특정 값(예: "Top")으로 시작하는 요소를 선택할 수 있습니다. 여기에는 지정된 값으로 시작하고 하이픈 뒤에 추가 텍스트가 포함된 속성이 있는 요소가 포함됩니다(예: "top-style" 및 기타 "top-" 값). 코드에는 " Class.‚"

예를 들어, 로 시작하는 class 속성을 사용하여 각 에 10픽셀의 상단 패딩을 할당한다고 가정합니다. > top, 하이픈으로 구분된 다른 값 포함 다음 코드를 사용하여 수행할 수 있습니다.

이 규칙은 각 < 클래스 이름이 top-으로 시작하는 요소를 포함하여 클래스 이름이 top으로 시작하는 div> 요소.

지정된 값은 하나의 전체 단어이거나 단어 뒤에 하이픈이 와야 합니다. 즉, 위의 스타일은 클래스 이름이 top style 및 top-style인 요소에는 적용되지 않습니다. name topstyle.

CSS [attribute ^ = "value‚"]

The [attribute ^ = & ldquo 선택기; value ‚"]는 속성 값이 특정 값으로 시작하는 요소를 선택하는 데 사용됩니다. 지정된 값은

[attribute | = "value"] 앞서 이야기한 것입니다.

사용자의 웹 브라우저는 클래스 이름이 "paddingBotto"로 시작하는 모든

CSS [속성 $ = "값"

L `연산자 $ =는 속성 값이 특정 값으로 끝나는 모든 요소를 선택하는 데 사용됩니다. 예를 들어, href 속성 값이 .app로 끝나는 모든 하이퍼텍스트 텍스트의 텍스트 색상을 회색으로 변경하려고 한다고 가정해 보겠습니다. 다음 코드를 사용하여 수행할 수 있습니다.