클라스를 통한 CSS 속성 적용 방법 ✔️

2021. 12. 31. 00:50·개발/CSS

지난 글에서는 HTML 문서의 기본 요소에 CSS를 적용하는 방법에 대해 살펴봤습니다. 선택자를 사용하여 간단하게 문서의 h1 태그나 p 태그에 CSS를 적용할 수 있었는데요.

 

각 요소마다 서로 다른 스타일을 적용하려면 어떻게 해야 할까요? 이 때는 HTML 요소에 클라스(class)를 부여하여 CSS를 적용할 수 있습니다.

CSS와 클라스

다음과 같은 목록이 있다고 해보겠습니다. 이 중에서 두 번째 목록에만 특정한 스타일(오렌지 색으로 변경)을 부여하고 싶다면 어떻게 해야 할까요?

<ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>

다음과 같이 두 번째 요소에 클라스 속성을 부여하면 됩니다.

<ul>
    <li>Item One</li>
    <li class="decoration">Item Two</li>
    <li>Item Three</li>
</ul>

다음으로 CSS에서 해당 클라스를 선택하여 속성을 부여합니다. . 이후에 해당 클라스 이름을 입력하면 문서 내의 동일한 모든 클라스를 선택합니다.

.decoration {
    color: orange;
}

이제 브라우저를 새로고침하면 두 번째 목록만 주황색으로 변경된 것을 확인할 수 있습니다.

특정 요소의 클라스에 속성 부여하기

만약 다음과 같이 li 태그와 span 태그에 동일한 클라스 이름인 decoration이 존재한다고 해보겠습니다. 각각에 서로 다른 CSS를 적용하려면 어떻게 해야 할까요?

<ul>
    <li>Item One</li>
    <li class="decoration">Item Two</li>
    <li>Item Three</li>
</ul>

<span class="decoration">Blue Storage</span>

이때는 li.decoration과 span.decoration을 따로 선택하면 됩니다.

li.decoration {
    color: orange;
}

span.decoration {
    color: blue;
}

결과적으로 목록의 두 번째 아이템은 오렌지 색으로, 본문의 Blue Storage의 색은 파랑색으로 변경됩니다.

심화 학습1

그리고.. 공부하며 알게 된 것인데 이런 것도 되는 군요. h1 태그 이후에 나오는 문단 p에만 특정 속성을 적용하는 방법입니다.

<h1>Hello World!</h1>
<p>Welcome to my Blog!</p>
<p>Thank you.</p>
h1 + p {
    color: skyblue;
}

이렇게 하면 제목 이후 첫 번째 문단에만 skyblue 속성이 부여됩니다.

심화 확습2

<article> 안의 <p> 태그 내 <span>을 선택할 수도 있습니다.

article p span { ... }

앞의 방식을 활용하여 h1 이후 ul 바로 다음의 p를 선택할 수도 있습니다.

h1 + ul + p { ... }

'개발 > CSS' 카테고리의 다른 글

CSS 포지션 속성 설명: absolute, fixed, relative 차이 설명 ✔️  (0) 2021.12.31
CSS 뜻 역할과 적용 방법, 호환성 확인 ✔️  (0) 2021.11.25
HTML 문서에 CSS 연결하는 세 가지 방법과 장단점 ✔️  (0) 2021.05.14
'개발/CSS' 카테고리의 다른 글
  • CSS 포지션 속성 설명: absolute, fixed, relative 차이 설명 ✔️
  • CSS 뜻 역할과 적용 방법, 호환성 확인 ✔️
  • HTML 문서에 CSS 연결하는 세 가지 방법과 장단점 ✔️
  • RGB에서 HEX로 변환하기: 웹 컬러 코드 표현에 대한 이해
휘Hwi
휘Hwi
여행, 사진, 개발, 책 이야기를 기록하는 여행자 휘의 블로그 𓂍
마이리얼트립 프로모션 할인 🏝️
마이리얼트립 호텔 예약 배너
※ 배너를 클릭하여 상품 구매 시, 파트너스 활동에 대한 소정의 수수료를 지급받습니다. 구매자에게 추가로 부과되는 수수료는 없습니다.
  • 휘Hwi
    휘: 끝나지 않은 이야기
    휘Hwi
  • 전체
    오늘
    어제
    • 분류 전체보기 N
      • 기록
        • 일상 에세이
        • 인사이트
        • 투자와 재테크
        • 코인 이야기
        • 아카이빙
        • 집무실 레터
        • 사랑에 대하여
        • 번역 이야기(完)
        • 프리랜서 일지(完)
      • 여행 N
        • 🌎 세계 여행기 S1 (完)
        • 🌊 삼삼한 여행기 (完)
        • 🚶 온더로드
        • 🇯🇵 일본
        • 🏝️ 발리
        • 🇻🇳 베트남 N
        • 🇱🇰 스리랑카
        • 🇮🇳 인도
        • 🇹🇭 태국
        • 🇸🇬 싱가포르
        • 🇦🇺 호주
        • 🇭🇰 홍콩
        • 🇰🇷 한국
        • 🍚 여행자의 한 끼
        • ℹ️ 여행 정보
      • 사진
        • 사진가
        • 사진 이론과 생각
        • 사진 관련 정보
      • 영상
        • 파이널컷 모션 공부
        • 고프로 GoPro
        • 영상 관련 정보
      • 책
        • 책 읽고 쓰기
      • 개발
        • 티스토리
        • Internet
        • HTML
        • CSS
        • JavaScript
        • Typescript
        • React
        • Node.js
        • Express
        • NestJS
        • Python
        • Django
        • MySQL
        • MongoDB
        • AWS
        • Deployment
        • Terminal
        • Git
        • Glossaries
        • Articles
        • Projects
        • TIL;
      • 미분류
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
휘Hwi
클라스를 통한 CSS 속성 적용 방법 ✔️
상단으로

티스토리툴바