티스토리 뷰

코딩

CSS - 클래스

남평HILL 2024. 4. 20. 17:06

일부 문단은 파란색으로 다른 문단은 빨간색으로 지정하려면 어떻게 할 것인가? 유형으로만 지정하는 것보다는 좀 더 세부적으로 구성요소를 선택할 수 있는 방법이 필요하다.

구성요소에 클래스 어트리뷰트를 추가하는 것은 간단하다. 첫번째 문단의 코드를 다음과 같이 바꿔라

이제 우리는 해당 문단에 'red'클래스를 적용했다. 이제 아래 코드를 웹페이지의 스타일 부분에 추가하라.

.red {

color: red;

}

주의 : 'red'앞의 구두점(.)은 브라우저에게 우리가 클래스를 찾고 있다는 것을 말해준다. 구두점은 CSS의 클래스를 이르는 약칭이다.

p {
color: green;
}

.red {
color: red;
}

  </style>
  </head>

  <body>

<p> 12345 </p>

<p class="red"> abc</p>
   </body>
</html>

왼편코드의 결과값

코딩이 해석이 되시나요?

red 라는 클래스를 style 안에 만들어 놓고 문장에서 <p>태그를 이용해 클래스를 red를 적용하도록 설정해 주면 그내용대로 색깔이 빨갛게 변합니다.