공부동기
지난주부터 자바스크립트를통해 DOM등을 이용해 HTML요소를 조작하는방법을 공부하고 있다.
이중에 자바스크립트가 querySelector를 통해 HTML에 접근할때, 인자를 CSS 선택자로 받아들이는것을 보고
한번쯤은 CSS 선택자를 정리할 필요를 느껴 포스팅을 작성한다.
이 글의 목차
1. CSS개념: HTML요소 스타일링하기
2. 기본 CSS 선택자
3. CSS 선택자 우선순위
4. CSS 선택자 결합하기
1. CSS개념: HTML요소 스타일링하기
CSS (Cascading Style Sheets)란?
CSS는 HTML과 같은 웹페이지 문서의 디자인에 사용되는 언어이다.
Cascading은 상하식, 계단식이란 뜻이다.
CSS를 사용하여 디자인을 지정하는 HTML, XML, XHTML 등의 언어로 작성된 문서들이
전부 계층구조로 되어있다.
CSS 코드도 문서의 요소에 접근할때 상위요소부터 타겟요소까지 계단식으로
접근한다. 아마도 그때문에 붙여진 이름같다.
(순전히 제 추측이니 정답을 알고있는사람은 댓글로 알려주세요)
<!--HTML 의 계층구조-->
<body>
<div>
<p>1번</p>
</div>
<p>2번</p>
</body>/*
CSS 코드. CSS는
상위 계층부터 접근한다
body -div - p
body - p
*/
/*1번*/
body div p {
color: red;
}
/*2번*/
body p {
color: green;
}CSS로 HTML 태그의 스타일을 번경하는 법.
1. HTML파일에서 번경하기:
현대 프론트엔드 웹개발에선 한페이지에 적용되는 코드 파일을 자바스크립트, HTML, CSS 세개로 분리해놓았다.
하지만 CSS 코드를 입력하기위해 꼭 CSS 파일이 필요한것은 아니다.
그저 HTML요소 태그에 style 속성을 추가한 후,
원하는 스타일의 CSS코드를 입력하는것으로 HTML 문서 내부에서도 스타일을 번경할 수 있다.
예시
<h1 style="color: red">Hello</h1>
2. CSS 파일을 통해 HTML요소 디자인하기:
HTML문서와 분리된 CSS 파일에 코드를 입력하는 방식이다.
CSS 선택자를 통해 디자인을 번경할 타깃 HTML 요소를 지정하고,
중괄호 {} 내부에 CSS 언어를 입력하면 된다.
/*html 코드
<h1>Hello</h1>
*/
/*css 코드*/
h1 {
color: red;
}
/*h1이 바로 선택자이다.*/
2. 기본 CSS 선택자
CSS Selector(CSS 선택자)?
CSS 파일에서 스타일을 번경하기 위한 타깃 (HTML 요소)
을 선택하기 위해 사용되는 키워드들을 일컫는다.
기본 CSS 선택자
기본선택자의 종류는 다음과 같다.
| 종류 | Tag Name: 태그이름 | class Attribute: class속성, | id Attribute: id속성 |
| 예시 | h1 | .class | #id |
다음의 HTML 코드와 함께 세 가지 기본 선택자를 살펴보자.
<h1>Hello</h1>
<p class="greenP">초록1</p>
<h3 class="greenP">초록2</h3>
<i id="italic">파랑</i>
- 1. 태그이름:
태그를 입력한다.
h1 {
color: red;
}- 2. class:
. (온점, 마침표) 뒤에 클래스 속성을 입력한다.
.greenP {
color: green;
}- 3. id:
# 샵(우물정) 기호 뒤에 id속성을 입력한다.
#italic {
color: blue;
}
예제코드의 출력결과
3. CSS 기본 선택자 우선순위
선택자에는 우선순위가 존재한다.
태그와 class 속성으로 스타일을 번경하다 보면,
하나의 HTML 요소에 여러 개의 CSS 언어가 적용되는 경우가 있다.
이러한 경우에는 미리 정해진 "우선순위"에 따라 적용될 CSS 가 결정된다.
1. 하나의 중괄호{} 내부에 같은 속성이 지정되어 있는 경우:
맨 아래의 CSS스타일이 적용된다.
h1 {
color: red;
color: blue;
}
/*
위의 경우엔 h1 태그를 갖는 HTML 요소는 blue 색으로 스타일링된다.
*/
2. 여러 개의 CSS선택자에 의해 지정된 경우:
CSS 선택 자별로 정해져 있는 우선순위에 따라 스타일이 정해진다.
| style 속성 | #id 선택자 | .class 선택자 | tag 선택자 |
| 0 | 1 | 2 | 3 |
선택자 우선순위표
밑의 HTML 요소에 CSS 스타일을 중복지정하여
어떤 선택자에 의한 디자인이 출력되는지 확인해보자.
<!--
html 코드
-->
<h1 class="greenP">Hello</h1>
/* css 코드 */
/*h1태그를 가진 텍스트는 "붉은색"이 된다.*/
h1 {
color: red;
}
/*greenP 클래스를 갖는 태그의 텍스트는 "초록색"이된다.*/
.greenP {
color: green;
}
클래스 선택자의 우선순위(2)가 tag 선택자(3) 보다 높으므로
위의 HTML은 초록색으로 스타일링 된다.
우선순위가 한눈에 보이는 예제
*예제코드를 위해 두 HTML 요소의 id를 같은 값으로 설정했다.
하지만 HTML 요소가 중복되는 id속성을 갖는 것은 피해야 한다.
4. CSS 선택자 결합하기
기본 선택자를 결합하면
좀 더 정교한 기능을 갖는 선택자를 만들 수 있다.
- 1. multiple Selector(다중 선택자):
한 번에 여러 개의 HTML 요소를 선택하기 위해 사용된다.
선택자를 쉼표로 나열한다.
h1, h2, .red {
color: red;
}
- 2. hierarchical Selector (계층 선택자):
HTML의 계층구조를 이용하여 HTML 요소를 정밀하게 선택하기 위해 사용된다.
선택자 사이에 공백을 넣어 나열한다.
이때, 앞에 오는 선택자가 뒤에 오는 선택자의 부모(상위) HTML요소이어야 한다.
HTML 예제코드
<!-- 포함관계가 있을시, 포함하는 요소가 부모, 포함되는 요소가 자식이된다.>
<!--div가 부모(상위)요소, p가 자식(하위)요소이다. -->
<div>
<p class="red">!!!!</p>
</div>CSS예제코드
/*태그 명만을 이용*/
div p {
color: red;
}
/*태그명, 클래스속성 선택자를 이용 */
div .red {
color: blue;
}
위의 예시에선 p 태그명이나. red 클래스 둘 다
div 태그의 HTML요소의 자식을 가리키는 선택자이다.
이렇게 부모> 자식의 계층 순서를 제대로 입력해야 CSS 코드가 적용된다.
만일 순서가 잘못되면 지정에 오류가 생기므로 디자인이 변하지 않는다.
위의 CSS 코드가 제대로 동작을 하기 위해선
class="red" 속성을 갖는 HTML요소의 div태그 자식요소가 존재해야 한다.
작동하는 예시
- 3. combinded Selector (조합 선택자)
하나의 HTML 요소의 선택자를 여러 개 나열하여, 정밀하게 선택하기위해 사용된다.
선택자 사이는 공백으로 만든다. 다시말하자면 선택자를 빈틈없이 나열한다.
이때, 모든 선택자는 동일한 HTML요소를 가리켜야 한다.
/*띄어쓰기가 없다.
선택자들은 전부 공통의 HTML요소를 가리켜야한다.*/
div.red {
color: blue;
}
공통이라고 꼭 하나의 HTML요소만 설정이 가능한 것은 아니다.
이외에도 자식선택자, 속성선택자, 자손선택자, 형제 선택자 등
DOM 트리구조를 이용한 여러 가지 선택자가 존재한다.
그러나 이 포스팅은 기본 선택자와 그 조합법에 대해 다루는 글이므로,
이만 줄인다.
딱히 글솜씨도 없고 길기만 한 제 글을 전부 읽으신 분들은 끈기가 대단한 사람들임이 분명합니다.
다들 성공하실 거라 믿습니다.
읽어주셔서 감사합니다.
오탈자나 오류 혹은 궁금한 점이 있을 시 댓글로 남겨주세요.
'it공부 (개념) > HTML, CSS' 카테고리의 다른 글
| BEM: CSS를 위한 HTML 클래스 명명규칙 (2) | 2023.03.07 |
|---|---|
| HMTL 태그: <video>비디오</video> (0) | 2023.02.24 |
| CSS의 Box Theory(박스이론)이란? content, padding, border, margin 알아보기 (0) | 2023.01.12 |
| CSS MEDIA QUERY(미디어쿼리)란? 개념 및 사용법 (1) | 2023.01.11 |
| HTML(Hyper Text Markup Languange)이란? + 간단한 태그 (2) | 2023.01.11 |