이번 글에서는 CSS 선택자의 다양한 종류를 살펴보겠습니다. 뉴스 웹사이트 비슷한 웹페이지를 예시로 다양한 선택자를 이용하여 스타일을 입혀보겠습니다.
헤드라인 기사는 네이버 뉴스 (6/16일 자)에서 가져왔습니다.
[HTML는 밑에 더보기로]
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="news.css"> <title>IT 뉴스</title> </head> <body> <nav> <input type="text" placeholder="search"> <button>로그인</button> <button>회원가입</button> </nav> <main> <h1>헤드라인 뉴스</h1> <section> <span>연합뉴스</span> <h2>드론이 밝혀준 범고래 사회 생활…"더 친한" 개체 존재 포토 <span>과학 일반</span></h2> <button>추천</button> <hr> </section> <section> <span>조선일보</span> <h2> “크리에이터가 돈이야” 애플도 유료 팟캐스트 출시 <span>모바일</span></h2> <button>추천</button> <hr> </section> <section> <span>조선비즈</span> <h2> 한국, 세계에서 두번째로 SNS 많이 한다 <span>인터넷/SNS</span></h2> <button>추천</button> <hr> </section> </main> <footer> <nav> <ul> <li> <a href="#이용약관">이용약관</a> </li> <li> <a href="#고객센터">고객센터</a> </li> </ul> </nav> </footer> </body> </html>전체 선택자 Universal Selector
페이지의 모든 요소를 선택하는 선택자(*)입니다.
아래 코드로 모든 요소를 선택해 color (글꼴 색)을 보라색으로 지정해보겠습니다.
*{ color: purple; }
<h1>, <h2>, <button> 등 모든 요소의 글씨 색을 보라색으로 지정하였습니다.
요소 선택자 Type/Element Selector
<p>, <button>, <h1> 등등 요소를 한꺼번에 선택하는 선택자입니다.
button{ background-color: green; color: white; }위와 같이 요소 이름 button의 스타일을 바꿔주면 페이지에 있는 모든 버튼에게 스타일 (배경색: 초록, 글꼴 색: 흰색)이 지정됩니다.
', '를 이용하여 하나 이상의 요소에게 같은 스타일을 지정할 수 있습니다.
h1, h2 { color:palevioletred }
클래스 선택자 Class selector
. class 선택자는 같은 class 속성을 가지고 있는 모든 요소를 선택합니다.
'마침표(.)+클래스 이름' 형식으로 사용 가능합니다.
HTML 요소에 클래스를 먼저 추가해보겠습니다. 뉴스 소분류인 '과학 일반', '모바일', '인터넷/SNS'에게 클래스를 지정한 후 한꺼번에 선택하여 스타일을 바꿔보겠습니다.
<span class='topic'>과학 일반</span>
그리고 CSS에서. topic 클래스를 선택하여 스타일을 지정해보겠습니다.
.topic{ display: inline-block; height: 24px; line-height: 24px; margin: 0 16px 8px 0; padding: 0 10px 0 12px; background: #777; color: white; border-radius: 3px; box-shadow: 0 1px 2px black; font-size: 12px; }
아이디 선택자 ID Selector
아이디 값을 사용해서 스타일을 선택하는 방식입니다.
#아이디 { 스타일 속성 } 이 문법으로 작성합니다.
예를 들어 페이지에 있는 모든 버튼의 스타일을 지정하는 게 아니라 '로그인'버튼만 바꾸고 싶을 경우 HTML 요소에 id를 지정해주고 그 id 값을 CSS에서 지정해주면 됩니다.
HTML에서 로그인 버튼에 id값을 추가해줬습니다.
<button id='login'>로그인</button>
CSS "# + id값"을 선택해서 로그인 버튼만 스타일을 지정해보겠습니다.
#login{ padding: 10px 20px; background-color: #FFE800; box-shadow: -6px 6px 0 #404040; }
속성 선택자, 복합 선택자, 가상 클래스 선택자 등등 다른 선택자는 다음 글에서 정리해보겠습니다.
'Web development' 카테고리의 다른 글
| [웹개발] HTML 기본 문법 총정리 (0) | 2023.08.01 |
|---|---|
| [CSS] 박스 모델 Box model (0) | 2021.07.05 |
| [CSS] 색상 바꾸기 (색상 이름, RGB, Hex 색상 코드) (0) | 2021.06.14 |
| [웹 개발] CSS 기초: CSS란?, HTML에 CSS 적용하는 방식 (0) | 2021.06.10 |