새소식
반응형
WEB/CSS
[CSS] Selector(ID) / Selector(Class) CSS선택자 알아보기!
- -
반응형
2020-10-03
우선 Selector의 의미는 말 그대로 자신이 원하는 특정 태그를 선택할 수 있는 기능입니다.
그중에서 ID의 사용법을 먼저 알아보도록 하겠습니다.
소스코드
<!DOCTYPE html>
<html>
<head>
<title>selector Css</title>
<meta charset="UTF-8">
<style>
#Only{
color:red
}
/*id 선택자는 오직 한 가지만 쓰도록 유념해야 한다. */
</style>
</head>
<body>
<h1>Css</h1>
<ol>
<li id = "Only">길동</li>
<!--바꾸고 싶은 태그 위치에 id를 만들어주어 쉽게 검색할 수 있게 해준다. -->
<li>짱구</li>
<li>철수</li>
</ol>
<!--우선적으로 정렬된 리스트를 하나 만들어주었다. -->
</body>
</html>
먼저 자신이 바꾸고자 하는 태그의 여는 부분에 id를 만들어주어야 합니다.
위와 같이 정렬된 첫 번째 리스트인 길동에게 변화를
주고 싶어 id = "Only" 를 선언해 주었습니다.
다음에는 해당 태그를 원하는 값으로 변경해 주기 위해서
head 태그 안에 style태그를 선언해주고
이후 id의 불러오기 위한
selcetor인 #뒤에 해당 id(Only)를 적어주면 됩니다.
(이후 저는 색깔을 빨강으로 바꾸기 위해
중괄호 후 color : red를 선언해 주었습니다.)
그러면 아래와 같이 id selector가 적용된 부분만
바뀐 것을 알 수 있습니다.
바로 다음은 Class Selctor를 알아보도록 하겠습니다.
쉽게 표현하면 동일한 속성을 가진 태그들을
그룹핑하여 변화를 주고 싶을때 사용합니다.
소스코드
<!DOCTYPE html>
<html>
<head>
<title>selector Css</title>
<meta charset="UTF-8">
<style>
.name{
color:blue;
font-size:25px;
}
</style>
</head>
<body>
<h1>Css</h1>
<ul>
<li class = "name">길동</li>
<li class = "name">짱구</li>
<li class = "name">철수</li>
</ul>
<!--리스트 안에 내용은 모두 이름이기 때문에
저는 name으로 변수를 선언했습니다. -->
</body>
</html>제가 만든 리스트의 내용은 모든 이름이라는
공통적인 속성으로 이루어져 있어,
class의 변수를 name으로 설정해주었습니다.
이후 id와 마찬가지로 style 태그 안에
class 변수를 select하기 위해서 해당 변수 앞에
. 을 붙인 후 중괄호 안에 원하는
변경사항을 적어 넣어주면 됩니다.
<ul class = "name">
<li>길동</li>
<li>짱구</li>
<li>철수</li>
</ul>위와 같이 class를 선언해도 동일한 결과가 나오니
참고하셔도 좋을 것 같습니다.
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] CSS text-align 을 통한 데이터(텍스트)정렬 방법 알아보기 (0) | 2021.03.11 |
|---|---|
| [CSS] CSS white-space 개행문자를 처리하는 방법 알아보기. (0) | 2021.03.10 |
| [CSS] CSS 백그라운드 이미지 가운데 정렬하는 / 반복없애는법 (0) | 2021.03.09 |
| [CSS] CSS 포지션(position) Relative / Absolute 알아보자! (0) | 2020.10.15 |
| [CSS] CSS 캐스케이딩Cascading에 대하여 쉽게 알아보자! (0) | 2020.10.11 |
Contents
소중한 공감 감사합니다