CSS 셀렉터 활용하기
- IT/web&dev
- 2021. 8. 20.
CSS 이해하기에 이어서 CSS 셀렉터를 알아보고 활용하는 방법을 함께 알아보겠습니다. 예제를 따라서 작성해보고 브라우저에서 확인해보는 방법으로 하시면 쉽게 이해하실 수 있을 것 같아요.
아래는 샘플 html 입니다. 이 문서에 CSS 를 적용해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" contnt="width=device-width">
<title>test</title>
<style type="text/css">
<!--
//-->
</style>
</head>
<body>
<h1>CSS TEST</h1>
<p>간단히 CSS 요소에 대해 알아봅니다.</p>
<ul>
<li>첫번째 리스트 요소입니다.</li>
<li>두번째 리스트 요소입니다.</li>
</ul>
</body>
</html>
CSS는 지난번 CSS 이해하기에서 잠깐 말씀드린 것처럼 selector { } 형식으로 되어 있습니다. 각각의 태그에 직접 적용하는 경우는 제외하고 문서 내 별도 영역에 CSS 처리하는 경우나 별도의 파일을 연결하는 경우는 모두 이와같이 되어 있다고 할 수 있습니다.
selector {
property:value;
}
셀렉터의 종류
- universal (전체선택자) *
- type tag
- ID #
- Class .
- Attribute [ ] (태그나 아이디, class가 아닌 태그 내에 있는 특정 요소에 적용하는 선택자입니다 : 예 / a[href] : background:yellow)
- state : (해당 셀렉터에 대한 상태를 나타낼 때)
이 외에도 여러가지 셀렉터 요소들이 있는데요 실제로 사용을 하는 예제에서 설명을 개별적으로 해도 될 것같고 이정도면 기본적인 것은 알 수 있을 것 같습니다.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" contnt="width=device-width">
<title>test</title>
<style type="text/css">
<!--
h1 {color:blue;}
#testdescription {font-size:12px;color:skyblue;}
.testp {font-size:14px;line-height:20px;color:grey;text-decoration:none;}
.testp a:link {color:#000; text-decoration:none;}
.testp a:hover {color:red; text-decoration:none;}
.testp a:visited {color:#000; text-decoration:none;}
//-->
</style>
</head>
<body>
<h1>CSS TEST</h1>
<p id="testdescription">간단히 CSS 요소에 대해 알아봅니다.</p>
<ul>
<li class="testp">첫번째 리스트 요소입니다.</li>
<li class="testp"><a href="#">두번째 리스트 요소입니다.</a></li>
</ul>
</body>
</html>위의 html을 브라우저로 확인하면 아래와 같이 적용된 것을 확인할 수 있습니다. 마지막 li 요소에 적용된 a(링크) 요소에 state가 적용되어 마우스를 가져갔을 때 빨간색 컬러로 변경됩니다.
위에 적용된 STATE인 link, hover, visited 는 이외에도 focus, active 요소도 함께 쓰입니다. hover는 특정 엘리먼트 위에 마우스 등이 올라갔을 때의 액션이고 link는 링크된 상태로 아직 어떤 요소들과 인터랙션이 없는 상태입니다. visited는 링크를 방문했을 때(클릭했을 때) 이후에 어떻게 표현될 것인지를 나타냅니다. 대부분 link 와 visited를 동일하게 맞춰두는데요, 방문했던 것을 사용자가 인지하게 하기 위해서는 달리해주는 것도 좋습니다. 구글이나 일반적인 포털들은 방문전 링크를 파란색, 방문후 링크를 보라색으로 기본 형태로 놔둠으로써 방문여부에 대해 인지가 쉽도록 하고 있습니다.
참고로 CSS 선택자 중 Universal (전체선택자)는 적용해도 로컬에서 테스트할 때는 되지만 서버에 올리면 적용이 안될 수 있고, 전체 적용을 하면 로딩이 느려지는 경우도 있어서 사용하지 않는 것이 좋습니다. 각각의 선택자 요소에 따로따로 속성을 적용하는 것이 번거롭더라도 더 나은 방법입니다. 이것이 CSS 의 단점이기도 해서 LESS 라는 다른 방법으로 CSS를 적용하기도 하니 다음 번에 설명드리도록 하겠습니다.
마치며,
CSS의 셀렉터(선택자)의 간단한 활용 방법을 살펴봤습니다. CSS SELECTOR 중에서 TYPECSS 대한 기본적인 설명은 CSS 이해하기를 참고해주시기 바랍니다.
CSS 이해하기
HTML퍼블리싱에서 빼놓을 수 없는 것이 CSS입니다. 사이트를 꾸밀려면 반드시 필요한 요소이며 규칙인데요. CSS를 먼저 이해하고 자주 쓰이는 요소들도 살펴보겠습니다. CSS란 Cascading style Sheet의 약
sensepress.tistory.com
감사합니다.
'IT > web&dev' 카테고리의 다른 글
| CSS 애니메이션 만들기 (1) 준비 / 기초 (2) | 2021.08.24 |
|---|---|
| 어도비 XD 제플린 연동하기 (4) | 2021.08.21 |
| CSS 이해하기 (0) | 2021.08.20 |
| 파이썬 아나콘다 / 차이 / 설치 / 사용법 (0) | 2021.08.19 |
| [파이썬 퀴즈] 사이트별 패스워드 자동생성기 만들기(문자열, 슬라이싱) (0) | 2020.09.02 |