스타일링을 한 단계 더 발전시키다

안녕하세요. Learn As You Code: HTML & CSS에 다시 오신 것을 환영합니다! 오늘은 스타일링의 세계에 대해 좀 더 깊이 살펴보겠습니다. 지금까지 우리는 요소를 직접 스타일링해왔습니다. 하지만 두 개의

각 요소가 다르게 보이길 원하시나요? CSS 선택자를 입력하세요!

요소 선택기

이미 잘 알고 계시겠지만 요약하자면 다음과 같습니다.

h1 {
  font-size: 32px;
  font-family: Arial;
  font-weight: 500;
}

이 규칙 세트는 모든

요소, 글꼴 크기, 계열 및 가중치를 설정합니다. 요소 선택기는 전체 페이지에 대한 스타일 가이드 설정과 같은 광범위한 스트로크에 적합합니다. 하지만 현실을 직시하자면, 모든

태그는 동일하게 표시되어야 합니다. 좀 더 구체적인 스타일링을 위해서는 승부욕이 필요해요!

클래스 선택자

구조 수업! 두 개를 원합니다

태그가 다르게 보이나요? 수업 추가:

<p class="big red">This text is BIG and red.</p>
<p class="small blue">This text is small and blue.</p>

각

태그에는 두 가지 클래스가 있습니다. CSS에서 다음 클래스를 .:
으로 타겟팅하세요.

.big {
  font-size: 100px;
}

.small {
  font-size: 9px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

붐! 스타일이 적용되었습니다. "스타일을 더 적은 수의 클래스로 결합하면 어떨까요?"라고 물을 수도 있습니다. 좋은 질문입니다! 나는 수업을 유연하게 진행하는 것을 좋아합니다. 언제 파란색 없이 작게 재사용하고 싶을지 모릅니다.

ID 선택기

고유한 요소에는 ID를 사용하세요. 다음을 확인하세요:

<p id="name">My Name is Nolan!</p>

ID는 페이지당 한 번만 아껴 사용하세요. #:
을 사용하여 CSS에서 타겟팅합니다.

#name {
  text-decoration: underline;
}

간단하죠?

상충되는 스타일

이제 요소에 클래스와 ID가 모두 있으면 어떻게 될까요? 이렇게:

<p id="red" class="blue">Will I be red or blue?</p>

빨간색이겠죠! 왜? ID는 클래스보다 더 구체적이기 때문입니다. 간단한 예는 다음과 같습니다.

<p id="red" class="underline">I’m styled by three rulesets!</p>

p {
  font-size: 12px;
  color: black;
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

#red {
  color: red;
}

텍스트가 빨간색으로 바뀌고 밑줄이 그어지며 글꼴 크기는 12px입니다. ID는 클래스보다 우선하며, 클래스는 요소 선택기를 재정의합니다. 이러한 일련의 스타일은 반복되는 코드 없이도 페이지를 세련되게 보이게 합니다.

도전

내 소개 페이지를 한 단계 더 발전시킬 시간입니다! 당신의 임무는 다음과 같습니다:

• ,

  및

  에 대한 기본 스타일을 설정합니다. 요소 선택기를 사용합니다.

• 당신의 이름 아래에

  태그라인을 추가하세요. ID를 사용하여 태그를 지정하고 스타일을 지정하세요.

• 클래스 선택기를 사용하여 다른 텍스트를 멋지게 꾸며 보세요.

상충되는 스타일을 실험해보고 어떤 규칙이 승리하는지 확인하세요. 이유를 알 수 있나요?

읽어주셔서 감사합니다! 이 시리즈에서 탐구했으면 하는 다른 주제가 있으면 댓글로 알려주시거나 시리즈가 어떻게 즐기고 있는지 알려주시기 바랍니다!

위 내용은 스타일링을 한 단계 더 발전시키다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!