728x90
CSS선택자에대한 정의
이번에는 html의 기본적인 요소에이어 CSS 선택자에대해서 설명해보려한다. 선택자selector는 html 문서 내부의 특정요소를 선택하는 방법이다. 반드시 작업하는데 있어서는 문서 내부의 특정요소를 선택할 수 있어야된다. 그래야 해당요소에 스타일을 적용하거나 기능을 입힐 수 있기때문이다. 사실상 CSS에서 선택자에는 답이없다는 말이있다. 예를들면 A라는쪽에서 B에게 어떠한 것을 시켰다고 가정해보자, 하지만 B는 그 지시를 그대로 따르지않고 한 가지로 다양하게 풀어 해석을 해보았다. 이러한방식으로 한가지에서 다양한 방법으로 풀어볼 수 있다는 것이다. 결국 실질적으로 다른 프로그래밍 언어에서도 웹의 데이터를 수집할 때 선택자를 많이 사용한다. 따라서 CSS선택자에대해 종류와 정의에대해서 분석할 필요가 있다.
CSS선택자는 무엇인가?
CSS선택자는 특정한 html태그를 선택할 때 사용하는 기능이라는 의미를 가지고있다. 이에 가장 큰 이유는 선택자를 사용하여 특정한 html태그를 선택하면 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있다는 것이다. 사실상 그냥 일반적으로 레이아웃 및 포멧만 구축하는 것이아니라 원하는 방향과 그대로 구축할 수 있어야 그만큼 더욱 더 가치있는 것이 아닐까 싶다. 그래서 먼저 설명하기에 앞서 CSS블록의 예시를 아래처럼 공유하려한다.
h1{color:red;} 이렇게 CSS블록을 예제로 들어볼 수 있다. 여기서 h1은 선택자를 의미하고 color는 스타일 속성, red는 스타일 값을 의미한다. 이러한 방식으로 짜는 것을 CSS블록이라고 부른다. 이에대한 코드는 style 태그내부에 입력하여 사용하게되는데 이때 style 태그 내부에 입력되는 코드를 스타일시트라고 부른다. 하므로 스타일시트 풀예제를 아래와같이 짜보려한다.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 selector basic</title>
<style>
h1 {
color: red;
background-color: orange;
}
</style>
</head>
<body>
<h1>CSS3 selector basic</h1>
</body>
</html>
따라서 선택자 종류 개요에 대해서 간단하게 알아보려한다. 선택자의 종류에는 이렇게 나열해볼 수 있다. 전체 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자, 후손 선택자, 자손 선택자, 속성 선택자, 동위 선택자, 구조 선택자, 반응 선택자, 상태 선택자, 링크 선택자, 문자 선택자, 부정 선택자 이렇게 구분해볼 수 있다. 이렇게 간략하게 정리해본데이어 구체적으로 선택자 형태와 선택자 예에 관련하여는 하나씩 상세히 보려한다.
전체 선택자란 무엇인가?
html문서 안에있는 모든 태그를 선택할 때는 전체 선택자를 사용한다. 전체 선택자의 예를 들어보면 선택자의 형태는 *, 설명은 html 페이지 내부의 모든 태그를 선택한다. 그러면 전체 선택자에 대해서는 아래처럼 간략하게 코드를 짜볼 수 있겠다.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 selector basic page</title>
<style>
/* 모든 태그의 color 속성에 red 키워드를 적용한다. */
* { color: red; }
</style>
이렇게 일반적으로 전체 선택자를 사용하게되면 body태그내부에 있는 요소에만 스타일 속성이 적용된 것처럼 보인다. 따라서 이렇게 body태그에만 적용되었다고 생각하기 쉬울 수 있기 때문에, head 태그, title 태그, style 태그까지 모두 선택하여 jQuery를 사용하여 적용해야한다. 따라서 전체선택자의 범위는 아래와 같이 정리해볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 selector basic page</title>
<script src="http://code,jquery.com/jquery-3.3.1.slim.min.js"></script>
<script>
/*웹 페이지가 모두 준비되면 */
$(document).ready(function () {
/* 모든 태그의 border 속성에 5px solid black을 적용합니다. */
$('*').CSS('border', 5px solid black');
이러한 방식으로 간단하게 정리를 해볼 수가 있다. 다음으로는 태그 선택자에대해서 간략하게 설명해보려한다.
태그 선택자는 html 페이지 내부에서 특정 종류의 태그를 모두 선택할 때 사용하게되는 선택자이다. 즉, 간단히 의미를 풀어보면 h1태그의 color 속성에 red키워드를 적용하고 p태그의 color 속성에 blue 키워드를 적용시키는 것이다. 따라서 아래와 같이 정리해볼 수있겠다.
<style>
/* h1태그의 color 속성에 red 키워드를 적용합니다. */
h1 { color: red; }
이런식으로 코드를 입력하면 h1 태그에는 빨간색이 적용되고 p 태그에는 파란색이 적용되는 것을 확인 할 수 있다. 다음으로는 아이디 선택자와 클래스 선택자를 간단히 설명해보려한다. 사실상 이 두가지 선택자는 스타일시트에서 가장 많이 사용되는 선택자이다. 대부분 웹페이지의 레이아웃을 구성하고 디자인을 적용할 때 사용되는 태그이므로 반드시 꼭 숙지해야할 필요가있다.
아이디선택자란 무엇인가?
특정한 id속성을 가지고있는 태그를 선택할 때 사용하는 선택자라고 이해하면 된다. 사실상 웹 표준에 id속성은 웹 페이지 내부에서는 절대 중복되면 안 된다라는 규정이있다. 그래서 아이디 선택자는 특정한 하나의 태그를 선택할 때 사용하는 것이다. 예를들면 선택자의 형태는 이러하다. #아이디, 설명은 아이디 속성을 가지고있는 태그를 선택한다. 아이디 선택자를 적용한 코드의 틀은 이러하다.
<style>
/* id 속성값으로 header를 가지는 태그의 스타일을 지정합니다. */
#header {
with: 400px; margin: 0auto;
background: red;
}
/* id 속성값으로 wrap을 가지는 태그의 스타일을 지정합니다. */
#wrap
이러한 방식으로 여러가지 자료를 조금 더 찾아보며 기본적인 내용을 적용시켜 계속해서 반복해볼 필요가있다. 실질적으로 웹사이트 구축할때 가장많이 사용되는 부분이므로 그냥 넘어가면 안되는 부분이다. 이렇게 아이디 선택자와 클래스 선택자의 심화과정 및 내용을 조금 더하여 나머지 선택자에 관련해서 다음편에서 구체적으로 정리해보려한다.
'IT_웹개발언어 > IT·HTML' 카테고리의 다른 글
| [IT·HTML+CSS] HTML에 필요한 기본적인 응용태그 정리9(4) (0) | 2021.07.07 |
|---|---|
| [IT·HTML+CSS] HTML에 필요한 기본적인 태그 의미와 사용법(3) (0) | 2021.07.04 |
| [IT·HTML+CSS] HTML에 필요한 각종 여러 태그 알아보기(2) (0) | 2021.07.02 |
| [IT·HTML+CSS] HTML5페이지 구조와 LANG 언어 속성/ 속성값 + 글자태그(1) (0) | 2021.07.01 |
| [IT·HTML+CSS] 웹의 역사:: 월드와이드웹(World Wide Web)을 자세히 파헤쳐보다. (0) | 2021.07.01 |