분류 css

CSS 선택기를 사용하여 웹 페이지 스타일을 지정하는 방법

컨텐츠 정보

  • 조회 241 (작성일 )

본문

CSS 선택기는 CSS에서 가장 중요한 부분 중 하나입니다. 스타일을 지정하려는 웹 페이지의 HTML 요소를 대상으로 지정하는 기능을 제공합니다.


CSS 선택기가 없으면 원하는 모양으로 페이지 스타일을 지정할 수 없습니다.


고맙게도 CSS 선택자는 한동안 사용되어 왔으며 원하는 대로 스타일을 지정할 수 있습니다.


하지만 정말로 CSS의 힘을 활용하고 놀라운 요소를 만들고 싶다면 CSS 선택기로 무엇을 할 수 있는지 이해해야 합니다. 즉, 고급 CSS 선택기로 작업하기 전에 기본 CSS 선택기를 이해해야 합니다.


이 게시물은 둘 다 살펴볼 것입니다. 결국, 자신 만의 놀라운 요소를 만들기 위해 CSS 선택기의 힘을 잠금 해제 할 수 있습니다. 이제 CSS 선택자가 무엇인지 살펴 보겠습니다.


CSS 선택기란 무엇입니까? 


이전에 CSS를 작성한 적이 있다면 CSS 선택기를 보셨을 것입니다. CSS 규칙의 첫 번째 부분입니다. CSS 선택기를 사용하여 스타일을 지정할 HTML 요소를 선택합니다.


CSS에서 선택자는 CSS 선택자 사양에 의해 정의됩니다. 즉, 실제로 작동하려면 각 선택기가 브라우저에서 지원되어야 합니다.


CSS 선택자는 5 가지 범주로 나뉘는 경향이 있습니다. 이 게시물에서는 기본 및 고급의 두 가지 주요 범주에서 이들을 살펴볼 것입니다. 다음은 다섯 가지 범주입니다.


  1. 간단한 선택자
  2. 조합 선택자
  3. 의사 클래스 선택자
  4. 의사 요소 선택자
  5. 속성 선택자

무언가를 잘하기 위해서는 기본 사항을 이해해야 하므로 여기서 시작하겠습니다.


기본 CSS 선택자 


스타일리시 한 웹 페이지를 구축하기에 충분한 기본 CSS 선택기인 여러 유형의 CSS 선택기를 보셨을 것입니다. 각각의 기본 CSS 선택기를 살펴보고 그들이 하는 일을 이해하도록 하겠습니다. 


CSS 요소 (유형) 선택기 


CSS 요소 선택기는 요소 이름을 기반으로 HTML 요소를 선택합니다. HTML 요소 이름에는 h1, p와 같은 것 또는 article 또는 footer와 같은 의미론적 이름이 있습니다. 따라서 요소 선택기는 선택한 이름을 가진 모든 HTML 요소를 선택합니다.


요소 선택기에 대한 CSS 선택기 예제를 살펴 보겠습니다.


/* selecting all h3 elements */
h3 {
	text-align: center;
	color: blue;
}

/* selecting all article elements */
article {
	font-size: 14px;
	line-height: 1.1px;
}


위의 예에서는 페이지에서 h3 및 article 유형의 모든 요소를 ​​선택하고 해당 요소에 스타일을 적용했습니다.


요소 선택기는 해당 유형의 페이지에 있는 모든 요소에 스타일을 적용하여 코드를 단순하게 유지하는 데 도움이 됩니다. 즉, 한 곳에서 해당 요소에 대한 스타일을 추적하기 만하면 됩니다.


CSS ID 선택기 


id 선택기는 선택기와 일치하는 id 속성이 있는 HTML 요소를 선택합니다. HTML 문서에서 동일한 ID를 가진 요소를 두 개 이상 가질 수 없으므로 이 선택기를 사용하면 개별 요소를 선택할 수 있습니다. 이는 선택한 요소의 스타일이 고유하다는 것을 의미합니다.


특정 ID가있는 요소를 선택하려면 #(해시) 문자 뒤에 HTML 요소의 ID를 사용합니다. 이 경우 #id-name과 유사합니다.


id 선택기에 대한 CSS 선택기 예제를 살펴 보겠습니다.


#projects-flex-container {
	width: 90vw;
	display: flex;
}


위의 예에서는 id가 #projects-flex-container 인 개별 HTML 요소를 선택하고 여기에 스타일을 적용했습니다. 이 스타일은 해당 개별 요소에만 적용됩니다.


그러나 한 가지 주목할 점은 id 선택자를 사용할 때 주의해야 한다는 것입니다. ID 선택기는 다른 요소에서 재사용 할 수 없으므로 요소를 대상으로 하는 ID 선택기를 사용해야 하는지 스스로에게 물어봐야 합니다.


CSS 클래스 선택기 


클래스 선택기는 선택기와 일치하는 클래스 속성이 있는 HTML 요소를 선택합니다. 클래스 선택기는 일치하는 스타일을 가지려는 카드 나 이미지와 같은 여러 요소를 대상으로 하는 데 유용합니다.


특정 클래스가 있는 요소를 선택하려면. 문자 (마침표)를 입력하고 그 뒤에 클래스 이름을 입력합니다.


클래스 선택기에 대한 CSS 선택기 예제를 살펴 보겠습니다.


.project-card {
	color: #badA55;
	padding: 5px;
	border-radius: 5px;
}


위의 예에서는 CSS 클래스 선택기를 사용하여 클래스 이름이 project-card 인 모든 요소를 ​​선택했습니다. 클래스 프로젝트 카드가 있는 모든 요소에는 나열된 스타일이 적용됩니다.


범용 선택기 


범용 선택기는 모든 HTML 요소를 선택합니다. 이것은 머리글에서 바닥 글에 이르기까지 페이지의 모든 단일 요소를 의미합니다. 페이지의 여백과 패딩을 일관되게 만들거나 제로 아웃으로 알려진 작업을 수행하는 데 자주 사용합니다.


범용 선택기의 구문은 * 문자 (별표)입니다.


* {
	margin: 0;
	padding: 0;
}


위의 예에서는 범용 선택기를 사용하여 전체 페이지의 여백과 패딩을 제로화 했습니다.


CSS 선택기를 그룹화 하는 방법 


고급 CSS 선택기에 들어가기 전에 CSS 선택기를 그룹화 하는 방법을 빠르게 살펴봐야 합니다. 이것은 야생에서 보게 될 일반적인 관행이며 코드를 깨끗하고 읽기 쉽게 만드는 데 도움이 됩니다.

그룹화를 사용하면 한 번에 여러 HTML 요소를 선택하고 스타일 정의를 한 번만 지정할 수 있습니다.


설명 할 그룹화 선택기의 예를 살펴 보겠습니다.


h1 {
	text-align: left;
	letter-spacing: 3px;
	color: #111111;
}

h2 {
	text-align: left;
	letter-spacing: 3px;
	color: #111111;
}

h3 {
	text-align: left;
	letter-spacing: 3px;
	color: #111111;
}


위의 CSS 코드에는 h1, h2 및 h3의 세 가지 요소가 있으며 이러한 각 요소는 동일한 스타일 정의를 갖습니다. 결과적으로 선택자를 그룹화하여 코드를 정리할 수 있습니다.


선택자를 그룹화 하기 위해 각 선택자를 , 문자 (쉼표)로 구분합니다.


h1, h2, h3 {
	text-align: left;
	letter-spacing: 3px;
	color: #111111;
}


스타일 정의가 동일하기 때문에 이제 한 번만 작성하면 됩니다.


그룹화 선택기는 이 문서에서 언급 한 모든 선택기에 사용할 수 있습니다. 즉, 선택기가 일치 할 필요가 없습니다.


스타일 정의를 공유하려면 클래스 선택자를 id 선택 자로 그룹화 할 수 있습니다. 그리고 일치하는 스타일 속성과 값을 그룹화 한 다음 각 요소에 대해 다른 정의를 정의 할 수 있습니다.


이 개념을 이해하기 위해 예제를 확장 해 보겠습니다.



/*group the selectors and state definitions that are the same*/

h1, h2, h3 {
	text-align: left;
	letter-spacing: 3px;
	color: #111111;
}

/*apply individual styles to selectors*/

h1 {
	font-size: 72px;
}

h2 {
	font-size: 48px;
}

h3 {
	font-size: 32px;
}


여기에 모든 기본 CSS 선택기가 있습니다. CSS를 잘하고 싶다면 각각의 기능을 이해해야 합니다. 그 지식이 있었으므로 이제는 그렇게 할 수 있습니다.


CSS 레벨을 높이고 싶다면 고급 CSS 선택기를 이해해야 합니다.


고급 CSS 선택기 


고급 CSS 선택기를 사용하면 CSS의 경계를 넓힐 수 있습니다. 타겟팅 하려는 요소와 해당 요소를 타겟팅 할 때 해당 요소의 상태를 매우 구체적으로 파악하는 데 도움이 됩니다.


속성 선택기를 살펴보면서 고급 CSS 선택기에 대해 알아 보겠습니다.


CSS 속성 선택자 


속성 선택기를 사용하면 특정 속성의 존재 여부에 따라 요소를 선택할 수 있습니다. 다시 말하면 이 CSS 선택기는 특정 속성이 있는 페이지의 모든 요소와 일치합니다.


속성은 HTML 요소의 여는 태그에 추가 된 내용입니다. ID, name 또는 value과 같은 것이 될 수 있습니다.


<a title="Learn to code for free!" href="https://www.freecodecamp.org/">Learn to code</a>

title은 요소의 속성입니다.


속성의 존재 여부와 값에 포함될 수 있는 내용에 따라 요소를 찾을 수 있는 7 개의 속성 선택기가 있습니다.


  1. Present selector
  2. Equals selector (=)
  3. Begins with selector (^)
  4. Ends with selector ($)
  5. Contains selector (*)
  6. White space selector (~)
  7. Hypen selector (|)


이러한 선택기의 일반적인 구문은 선택자 다음에 찾고 있는 내용을 나타내는 [] (대괄호)입니다. 선택자는 클래스 선택자 또는 범용 선택자와 같은 것이 될 수 있습니다.


오늘 우리는 가장 일반적인 5 가지 속성 선택자를 살펴볼 것입니다. 이 다섯 가지 속성 선택기를 이해하기 위해 각각의 예를 살펴 보겠습니다.


Present attribute selector 


이 속성 선택기는 속성이 포함 된 위치에 따라 모든 요소를 ​​찾습니다.


설명 할 현재 선택기의 예를 살펴 보겠습니다.


a[title] {
	color: khaki;
	background: grey; 
}


위의 예에서 현재 선택기는 title 속성이 있는 요소를 찾아서 스타일 정의를 적용합니다. 제목 속성이 없는 다른 모든 요소는 위와 같이 스타일이 지정되지 않습니다.


Equals attribute selector 


이 속성 선택기는 정확히 일치하는 속성 값이 있는 요소를 찾습니다. 이 선택기를 사용하려면 속성 이름 뒤에 = (같음)을 지정하여 값과 정확히 일치하는 항목을 찾습니다.


설명 할 같음 선택기의 예를 살펴 보겠습니다.


a[href="<https://peterlunch.com/>"] {
	color: purple;
} 

위의 예에서 같음 선택기는 정확한 값이 "https://peterlunch.com/"인 href 속성이 있는 요소를 찾습니다.


Begins with attribute selector 


이 속성 선택기는 지정한 값으로 시작하는 모든 요소를 ​​찾습니다. 이 선택기를 사용하려면 찾고 있는 속성, ^ 및 = 문자, 일치하려는 값을 차례로 지정합니다.


설명 할 선택 자로 시작하는 예제를 살펴 보겠습니다.


a[href^="https"] {
	color: yellow;
	text-decoration: none;
}


위의 예에서 starts with selector는 href 속성이 있고 "https"로 시작하는 요소를 찾습니다.


Ends with attribute selector 


begin with selector와 매우 유사하게 이 속성 선택기는 반대로 수행하고 지정한 값으로 끝나는 모든 요소를 ​​찾습니다.


이 선택기를 사용하려면 찾고 있는 속성, $ 및 = 문자, 일치하려는 값을 차례로 지정합니다.


설명 할 선택자가 있는 끝의 예를 살펴 보겠습니다.


img[src$="/blog-imgs"] {
	border-radius: 4px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


위의 예에서 end with selector는 src가 "/blog-imgs"로 끝나는 모든 img 요소를 찾습니다. 이것은 실제로 내 웹 사이트에 사용하는 것입니다.


Contains attribute selector 


이 속성 선택기는 속성 값에서 찾고 있는 값이 포함 된 모든 요소를 ​​찾습니다. 이는 값에 하나 이상의 값이 포함되어야 함을 의미합니다.


이 선택기를 사용하려면 찾고 있는 속성, * 및 = 문자, 검색하려는 값을 차례로 지정합니다.


설명 할 포함 선택기의 예를 살펴 보겠습니다.


a[href*="peterlunch"] {
	color: green;
}


위의 예에서 contains 속성 선택기는 "peterlunch"값을 포함하는 href가 있는 요소를 찾습니다.


이것이 속성 선택기입니다. 다음 고급 CSS 선택기로 넘어가겠습니다.


조합 선택기 


다음 고급 CSS 선택기는 조합 선택기입니다. 이러한 선택기는 둘 이상의 CSS 선택기를 결합 할 수 있습니다. CSS에는 네 가지 유형의 조합 선택기가 있습니다.

  1. Descendant selectors
  2. Child selectors
  3. Adjacent sibling selectors
  4. General sibling selectors

이러한 선택기가 어떻게 작동하는지 이해하려면 먼저 HTML이 패밀리 트리 계층 구조를 따른다는 것을 이해해야 합니다. 이것은 자식을 포함 할 수있는 부모 요소가 있고 자식은 자식을 가질 수 있다는 것을 의미합니다.


<div> <!--parent-->
	<p> <!--div child-->
	<article> <!--div child, parent to h1 & p-->	 
		<h1>
			<p></p>
		</h1>
	</article>
	<article>	
		<h1>
			<p></p>
			<p></p>
		</h1>
	</article>
</div>

위의 예에서 div는 부모이고 자식은 article 요소이고 article은 h1 및 p 자식의 부모입니다.


이러한 지식을 염두에 두고 각 조합 선택기를 예제와 함께 하나씩 살펴보고 작동 방식을 이해해 보겠습니다.


Descendant combination selector 


하위 조합 선택기는 지정된 요소의 하위 요소 인 모든 요소와 일치합니다.


설명 할 하위 조합의 예를 살펴 보겠습니다.


div p {
	line-height: 2em;
}


위의 예는 div 요소 내의 모든 p 요소를 선택합니다.


Child combination selector 


하위 조합 선택기는 특정 요소의 하위 인 모든 요소와 일치합니다. 이는 상위 요소의 직계 하위 항목 만 선택하므로 하위 조합 선택기와 다릅니다.


자식 선택자는 > 문자로 표시됩니다.


설명 할 하위 조합 선택기의 예를 살펴 보겠습니다.


div > p {
	color: aquamarine;
}


위의 HTML 계층 구조 예를 참조하면 이 선택기는 기사 태그 내의 p 태그가 아닌 첫 번째 p 태그 만 찾습니다. 부모 div 요소의 직계 자식이 아니기 때문에 이를 수행합니다.


Adjacent sibling combination selector 


인접한 형제 선택자는 두 선택자를 구분하고 첫 번째 요소 바로 뒤에 오는 경우에만 두 번째 선택자 요소와 일치하는 +를 사용하여 표시됩니다.


이에 대한 좋은 실제 예는 이미지 바로 뒤에 오는 텍스트를 캡션처럼 스타일링 하는 것입니다.


img + p {
	font-size: 10px;
	color: grey;
	font-style: italic;
}


위의 예에서 이미지 뒤에 오는 모든 p 요소는 위의 정의로 스타일이 지정됩니다.


General sibling combination selector 


일반 형제 선택기는 요소의 형제 요소를 선택합니다. 일반 형제 선택자는 ~ 문자로 표시됩니다.


설명 할 일반적인 형제 선택기의 예를 살펴 보겠습니다.


article ~ h1 {
	font-weight: 900;
}


위의 예에서는 article 요소의 형제 인 모든 h1 요소를 선택합니다.


Pseudo-selectors 


의사 선택기는 두 개의 버킷으로 나뉩니다. 첫 번째는 의사 클래스 선택자이고 두 번째는 의사 요소 선택자입니다.


이러한 선택기는 복잡하고 많은 옵션이 있습니다. 그것들을 이해하려면 그 자체로 복잡한 주제이기 때문에 별도의 게시물을 읽는 것이 좋습니다. 하지만 여기서는 둘 다 간단히 다룰 것입니다.


첫째, 의사 클래스 선택기는 특정 상태에 따라 요소를 선택합니다. : hover 또는 : active와 같은 것을 보았을 것입니다. 페이지에 있는 요소의 상태입니다. 해당 요소가 지정된 상태에 있는지 여부에 따라 요소를 선택할 수 있습니다.


간단한 예는 다음과 같습니다.


button:hover {
	background: red;
}


위의 예에서 사용자가 버튼 위로 마우스를 가져 가면 배경색이 빨간색으로 변경됩니다.


의사 클래스 선택자를 더 잘 이해하고 싶다면 Nash Vail의 이 게시물을 읽어 보시기 바랍니다. Nash Vail은 환상적인 설명을 제공합니다.


다음은 내가 여기에 작성한 의사 요소 선택자입니다. 이러한 선택기는 요소의 일부를 선택합니다. 요소의 일부는 요소의 첫 글자이거나 요소 앞뒤의 내용 일 수 있습니다.


의사 요소 선택기를 사용하면 의사 클래스처럼 : :( 이중 콜론) 대 :( 단일 콜론)을 사용한다는 점에 유의해야 합니다.


p {
  width: 600px;
  line-height: 1.5;
  font-weight: 500;
}

p::first-letter {
  color: white;
  background-color: rgb(55, 97, 117);
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgb(212, 173, 81);
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}


요약 


이제 CSS 선택기와 이를 사용하여 웹 페이지에서 HTML 요소를 찾는 방법을 잘 이해해야 합니다.


https://www.freecodecamp.org/news/use-css-selectors-to-style-webpage/