loading
본문 바로가기

etc

CSS 선택자와 선언, 선택자의 종류와 활용

@tech_imgo 2020. 1. 14. 16:34

 

1. 선택자와 선언

지난 시간 HTML문서에 CSS를 넣는 방법을 살펴보았습니다.

이번 시간에는 선택자와 선언에 대해 알아보겠습니다.

CSS는 무엇을 어떻게 스타일하느냐에 대한 언어로,

'무엇'에 해당하는 것이 선택자이고

'어떻게'에 해당하는 것이 선언입니다.

먼저 리스트 3개를 만들고 그 리스트의 단어들을 붉게 만들어봅시다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      li{
        color:red
      }
    </style>
  </head>
  <body>
    <ol>
      <li>3log2</li>
      <li>LOG STUDY</li>
      <li>STORY LOG</li>
    </ol>
  </body>
</html>

 

head의 스타일태그를 이용해 li태그가 있는 모든 글자가 붉게 변했습니다.

 

이번에는 붉게 만들어주는 선언에 밑줄 선언까지 추가해보겠습니다.

text-decoration:underline을 입력해주세요.

이때, 속성과 속성를 구별하기 위해서는 중간에 세미콜론(;)을 넣어주셔야 합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      li{
        color:red;
        text-decoration:underline
      }
    </style>
  </head>
  <body>
    <ol>
      <li>3log2</li>
      <li>LOG STUDY</li>
      <li>STORY LOG</li>
    </ol>
  </body>
</html>

 

색깔 선언과 밑줄 선언이 모두 적용된 모습입니다.

 

여기에서 선택자와 선언을 파악할 수 있습니다.

 

2. 선택자의 종류

(1) 태그 선택자

지금까지 사용한 태그 선택자는 그 태그로 감싸진 모든 내용에 선언이 적용되게 하는 것이었습니다.

그렇다면 특정 내용에만 선언을 할 수 있게 하는 선택자는 없을까요?

 

(2) 아이디 선택자

ID 선택자를 이용하면 특정 내용이 있는 특정 태그에 아이디를 부여해서 그 아이디에만 선언을 적용할 수 있게 해 줍니다.

두 번째 리스트의 시작 태그에 ID=""을 입력하고 큰따옴표 사이에 원하는 이름을 지어주세요.

그리고 헤드의 스타일태그에 그 이름 앞에 #을 붙여 그 아이디가 붙은 태그에 대해서만 별도의 효과를 지정할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      li{
        color:red;
        text-decoration:underline
      }
      #Tistory{
        font-size:30px
      }
    </style>
  </head>
  <body>
    <ol>
      <li>3log2</li>
      <li id="Tistory">LOG STUDY</li>
      <li>STORY LOG</li>
    </ol>
  </body>
</html>

 

ID 선택자를 사용함으로써 두 번째 리스트만 폰트 사이즈가 30픽셀로 커진 결과가 나왔습니다.

여기서 아이디는 고유해야 합니다.

마치 사람마다 주민등록번호가 다르듯이 말이죠.

 

(3) 클래스 선택자

그렇다면 전체 li 태그는 아니지만, 둘 이상의 li 태그에 대해서 효과를 줄 수 있는 방법은 없을까요?

반을 뜻하는 CLASS 선택자를 사용하면 둘 이상의 태그에 대해 효과를 줄 수 있습니다.

body에서 원하는 태그의 시작 태그에 class=""을 입력하고 원하는 이름을 지어주세요.

(단, 클래스명이 숫자로 시작해선 안 됩니다.)

head의 스타일 태그에선 클래스 명 앞에 점(.)을 붙여주시면 됩니다.

 

ID 선택자 실습에서 두 번째 리스트를 사용했으므로, 나머지 리스트를 클래스에 넣어보겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      li{
        color:red;
        text-decoration:underline;
      }
      #Tistory{
        font-size:30px;
      }
      .original{
        text-decoration:overline underline;
      }
    </style>
  </head>
  <body>
    <ol>
      <li class="original">3log2</li>
      <li id="Tistory">LOG STUDY</li>
      <li class="original">STORY LOG</li>
    </ol>
  </body>
</html>

 

original이라고 이름을 부여한 class에 overline underline이라는 속성값이 적용된 것을 볼 수 있습니다.

* 속성값을 text-through로 바꾸면 취소선이 그어집니다.

 

이 클래스 선택자를 이용하면 서로 다른 태그에도 같은 효과를 줄 수 있습니다.

h1 태그를 하나 만들어 original 클래스에 넣어보겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      li{
        color:red;
        text-decoration:underline;
      }
      #Tistory{
        font-size:30px;
      }
      .original{
        text-decoration:overline underline;
      }
    </style>
  </head>
  <body>
    <h1 class="original">3log2's works</h1>
    <ol>
      <li class="original">3log2</li>
      <li id="Tistory">LOG STUDY</li>
      <li class="original">STORY LOG</li>
    </ol>
  </body>
</html>

 

orignal 클래스에 소속된 세 개의 텍스트가 모두 같은 효과를 받고 있는 걸 볼 수 있습니다.

 

3. 선택자의 활용

지금까지 선택자와 선언, 그리고 선택자의 종류로 태그 선택자와 ID 선택자, CLASS 선택자를 공부했습니다.

이 세 선택자는 다음과 같이 대표적인 세 유형으로 활용할 수 있습니다.

ol li는 ol의 li 밑의 모든 태그를 선택할 때 쓰이는 조상-자손 선택자입니다.

ol>li는 ol 바로 밑에 있는 li 태그를 선택할 때 쓰이는 부모-자식 선택자입니다.

ol,li는 ol과 li를 대등하게 선택할 때 쓰이는 친구 선택자입니다.

 

다음의 선언을 이용해 선택자를 다양하게 활용해보세요!

border:1px solid red;

background-color: powderblue;

 

4. 선택자 연습하기

보다 넓은 활용을 하기 위해서 다음의 CSS CHEAT SHEET (SELECTOR)를 참고하여 CSS DINER라는 게임을 통해 선택자 연습을 해보세요!

div all DIV tags
div,span all DIV tags and all SAPN tags (친구 선택자)
div span all SPAN tags inside DIVs (조상-자손 선택자)
#content element with ID "content"
.box all elements with CLASS "box"
ul#box UL tag with ID "box"
span.box all SAPN tags with CLASS "box"
* all elements
#box * all elements inside #box
a:link, a:active, links in normal state, in clicked state,
a:visited and in visited state
a:hover link with mouse over it
div>span all SAPNs one-level deep in a DIV (부모-자식 선택자)

생소하실 수 있는 내용은 파란색으로 표시하였고

링크와 관련된 것은 초록색으로 표시하였습니다.

 

* 링크 (가상선택자)

상태에 따라 맥락적으로 선택된다고 하여 가상 선택자라고 부르는 것들입니다.

대표적으로 네 가지가 있습니다.

1) :link 방문하기 전의 상태를 나타냅니다.

2) :active 클릭되었을 때의 상태를 나타냅니다.

3) :visited 방문한 후의 상태를 나타냅니다.

4) :hover 마우스 포인터가 올라갔을 때의 상태를 나타냅니다.

 

[참고] :focus

focus를 사용하여 Tap키를 눌렀을 때 링크와 input이 어떻게 바뀌는지 관찰해보세요!

<!doctype html>
<html>
<head>
	<meta carset="utf=8">
	<style>
		a:focus{
		color: red;
		}
		input:focus{
		background-color:black;
		color:white;
		}
	</style>
</head>
<body>
	<a href=https://3log2.tistory.com>3log2</a>
	<input type="text">
</body>
</html>

 

[참고] 썸네일의 .log8 li{} 예제

오늘 배운 내용에 몇 가지 선언을 더하여 다음과 같은 CSS 디자인을 할 수 있습니다.

소스코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1{
        text-decoration:overline underline;
        color:orange;
      }
      .log8 li{
        font-size:20px;
        color:green;
        background-color:powderblue;
        list-style:none;
        width:200px;
      }
      .log8{
        padding-left:0px;
      }
    </style>
  </head>
  <body>
    <h1>오늘의 공부</h1>
      <ul class="log8">
        <li>오늘의 수학</li>
        <li>오늘의 과학</li>
        <li>오늘의 제2외국어</li>
      </ul>
  </body>
</html>
저작자표시 비영리 동일조건

'etc' 카테고리의 다른 글

모르면 손해! 전세 계약 필수상식 (주택임대차보호법)  (0) 2020.07.24
줌 화상회의 사용법 총정리! 원격강의, 원격회의에 참고하세요!  (5) 2020.03.20
HTML에 CSS 삽입하는 방법  (0) 2020.01.14
티스토리 WHATEVER 스킨 슬라이더 크기 조절 방법  (1) 2020.01.13
꿀잼 온라인 플래시게임 테리토리워3의 기본 플레이 방법  (0) 2019.02.15

👏완독을축하합니다!

'etc' Related Articles

티스토리툴바