자바스크립트 CSS 속성 추가
around |
exp |
find |
iat |
JavaScript |
mean |
sep |
sin |
square
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"] 앞서 이야기한 것입니다.
paddingBottom으로 시작하는 클래스 속성이 있는 각
사용자의 웹 브라우저는 클래스 이름이 "paddingBotto"로 시작하는 모든
CSS [속성 $ = "값"
L `연산자 $ =는 속성 값이 특정 값으로 끝나는 모든 요소를 선택하는 데 사용됩니다. 예를 들어, href 속성 값이 .app로 끝나는 모든 하이퍼텍스트 텍스트의 텍스트 색상을 회색으로 변경하려고 한다고 가정해 보겠습니다. 다음 코드를 사용하여 수행할 수 있습니다.
이 선택기는 href 값이 .app 로 끝나는 웹페이지의 모든 요소에 적용됩니다.
CSS [attribute * = "value"]
* = 연산자를 사용하면 값 `Äã`Äãd `속성에 특정 값이 포함된 모든 요소를 선택할 수 있습니다. 값. ~ = 연산자와 달리 이 속성 선택자는 한 단어가 아닌 클래스에서 특정 값을 찾을 수 있습니다.
Fo 예를 들어 클래스 속성에 allPadding이 포함된 모든
이 규칙은 allPadding이라는 용어를 포함하는 at class 속성을 사용하여 모든 HTML 요소 주위에 50px 패딩을 정의합니다. 따라서 클래스 이름이 new allPadding, surround allPadding red, allPaddingblue 및 allPadding-true인 요소는 모두 이 스타일이 적용됩니다.
결론
CSS 속성 선택기를 사용하면 개발자가 속성 값에 따라 요소를 선택하고 해당 요소에 특정 스타일을 적용할 수 있습니다.
p> 이 튜토리얼에서는 예제를 참조하여 속성 선택기의 기본 사항과 모든 유형의 CSS 속성 선택기를 사용하는 방법을 설명했습니다. 이제 전문가처럼 CSS 속성 선택기를 사용할 준비가 되었습니다.
CSS는 웹 개발에 사용되는 세 가지 주요 기술 중 하나입니다.앱 다운로드 무료 Python.Engineering 오늘 강연 웹 개발자로서의 경력을 쌓는 데 필요한 기술에 대해 조언해 줄 수 있는 경험 많은 경력 코치와 함께하십시오.
Shop
![]()
Learn programming in R: courses
$
![]()
Best Python online courses for 2022
$
![]()
Best laptop for Fortnite
$
![]()
Best laptop for Excel
$
![]()
Best laptop for Solidworks
$
![]()
Best laptop for Roblox
$
![]()
Best computer for crypto mining
$
Best laptop for Sims 4
$
Latest questions
NUMPYNUMPY
psycopg2: insert multiple rows with one query
12 answers
NUMPYNUMPY
How to convert Nonetype to int or string?
12 answers
NUMPYNUMPY
How to specify multiple return types using type-hints
12 answers
NUMPYNUMPY
Javascript Error: IPython is not defined in JupyterLab
12 answers
Wiki
Python OpenCV | cv2.putText () method
numpy.arctan2 () in Python
Python | os.path.realpath () method
Python OpenCV | cv2.circle () method
Python OpenCV cv2.cvtColor () method
Python - Move item to the end of the list
time.perf_counter () function in Python
Check if one list is a subset of another in Python
Python os.path.join () method
