💅Decorate from CSS : 부모 자식 선택자

Notice

Recent Posts

Recent Comments

Link

« 2025/03 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Tags more

Archives

Today

Total

관리 메뉴

C-log

💅Decorate from CSS : 부모 자식 선택자 본문

💅CSS/⚡ver.0

💅Decorate from CSS : 부모 자식 선택자

4:Bee 2024. 2. 13. 13:30

728x90

이번 포스팅에선 html의 부모 자식 선택자를 css로 선택하는 방법을 배워 볼 것이다. 여러 방법들이 있고 어떻게 어떤 태그에 접근하냐에 따라 선태자를 선택하는 방식이 달라진다. 우선 html 코드는 아래와 같다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

<li>JavaScript</li>

</ul>

<li>CSS

<ol>

<li>selector</li>

<li>declaration</li>

</ol>

</li>

<li>JavaScript</li>

</ol>

</body>

</html>

우선 우리는 ul태그의 글자들을 모두 빨간색으로 선택하고 싶다. 그렇다면 stye.css에 아래와 같이 코드를 작성하면 된다.

ul li {

color: red;

}

이렇게 하면 ul의 li코드들이 모두 붉은 색이 될 것이다. 이번엔 ol태그의 li들과 구별 짓기위해서 파란색으로 ol태그에 영역을 구분 짓는 선을 만들고 싶다면 아래와 같이 하면 된다.

ol li {

border: 1px solid blue;

}

그렇다면 아래의 모든 ol태그의 li들이 푸른색 선으로 표기가 될 것이다. 이번엔 id가 있는 ol태그들의 li태그들만 붉은색으로

<li>CSS

<ol>

<li>selector</li>

<li>declaration</li>

</ol>

</li>

<li>JavaScript</li>

</ol>

표기하고 싶다면 아래와같이 표기하면 된다. 이를 자식 선택자라고 한다. 이전에 우리가 li태그를 선택하는 방식은 후손 선택자 방식이라고 한다.

#lecture>li {

border: 1px solid red;

color: blue;

}

더 해서 class와 id의 차이를 설명하자면 우선 유일성의 차이가 있다. class는 여러 요소에 적용될 수 있는 스타일을 정의하는데 사용된다. 즉, 비슷한 스타일을 가진 요소들을 그룹화하고 스타일을 한번에 적용할 수 있다. id는 동일한 페이지에서 동일한 아디를 가진 요소는 하나만 있어야한다. 마지막으로 적용범위의 차이가 있다. class는 여러 요소에 적용될 수 있는 스타일을 정의하는데 사용되고 비슷한 스타일을 가진 요소들을 그룹화하고 스타일을 한 번에 적용 할 수 있다. id는 특정요소에 대한 고유한 식별자로 사용되며 JS에[서 특정 요소를 찾거나 조작하는데 사용된다.

728x90

저작자표시

'💅CSS > ⚡ver.0' 카테고리의 다른 글

💅Decorate from CSS : 다양한 선택자들 #12 (0)	2024.02.13
💅Decorate from CSS : 다양한 선택자들 #7 (0)	2024.02.13
💅Decorate from CSS : font-size (0)	2024.02.13
💅Decorate from CSS : 가상 클래스 선택자 (0)	2024.02.13
💅Decorate from CSS : 시작하기 앞서 (0)	2024.02.13

'💅CSS/⚡ver.0' Related Articles

Comments

C-log

💅Decorate from CSS : 부모 자식 선택자 본문

💅Decorate from CSS : 부모 자식 선택자

'💅CSS > ⚡ver.0' 카테고리의 다른 글

티스토리툴바