왕초보 웹 프로그래밍 9 – CSS 기초 사용법 2

안녕하세요. Codinglee입니다.
왕초보도 이해할 수 있는 웹 프로그래밍 시간입니다.
이번 내용은 지난 번 CSS 기초 에 이어지는 내용입니다.
CSS를 사용하는 방법에 대해서 더 자세하게 설명드리겠습니다.

---

이전 시리즈 보기

시리즈 1. 챗지피티 활용 프로그래밍 1 – 계산기 만들기 (준비)
시리즈 2. 챗지피티 활용 프로그래밍 2 – 계산기 만들기
시리즈 3. 챗지피티 활용 프로그래밍 3 – 계산기 만들기
시리즈 4. 챗지피티 활용 프로그래밍 4 – 계산기 만들기(완료)
시리즈 5. 왕초보 웹 프로그래밍 1 – HTML CSS JAVASCRIPT
시리즈 6. 왕초보 웹 프로그래밍 2 – 인터넷, 웹브라우저
시리즈 7. 왕초보 웹 프로그래밍 3 – DNS(Domain Name System)
시리즈 8. 왕초보 웹 프로그래밍 4 – 서버, 클라이언트
시리즈 9. 왕초보 웹 프로그래밍 5 – 개발자 도구 살펴보기
시리즈 10. 왕초보 웹 프로그래밍 6 – HTML 태그
시리즈 11. 왕초보 웹 프로그래밍 7 – HTML 사용법, CSS
시리즈 12. 왕초보 웹 프로그래밍 8 – CSS 사용법

---

오늘의 학습 순서입니다.

[CSS 사용법2 : 선택자 심화 내용]

1. 선택자 (Selector)

– 그룹 선택자

– 결합자

• 자손 결합자
• 자식 결합자
• 일반 형제 결합자
• 인접 형제 결합자
• 열 결합자

– 의사 클래스/요소

• 의사 클래스
• 의사 요소

---

그럼 CSS 기초 에 이어 심화 내용 시작하겠습니다.

[CSS 사용법2 : 선택자 심화 내용]

CSS는 웹 페이지의 스타일을 정교하게 조정할 수 있는 도구입니다.
다양한 선택자를 사용하면 HTML 구조에서 특정 요소를 정확하게 타겟팅하여
스타일을 지정할 수 있습니다.
어제 학습한 CSS 기초 유형(태그) 선택자, 클래스 선택자, 아이디 선택자, 특성(속성) 선택자에 이어
이번 시간에는 그룹 선택자, 결합자, 의사 클래스/요소에 대해 설명하고,
왜 이러한 CSS 사용법이 중요한지 이야기해보겠습니다.

1. 선택자 (Selector)

선택자를 사용하면 HTML 요소에 쉽게 스타일을 적용할 수 있습니다.
기본 선택자 외에도 그룹 선택자와 결합자를 사용하면 코드의 가독성을 높이고,
반복적인 스타일 작성을 줄일 수 있습니다.

1.1 그룹 선택자

그룹 선택자는 여러 요소에 동일한 스타일을 적용할 때 사용합니다.
그룹 선택자는 쉼표( , )를 사용하여 여러 선택자를 그룹화 할 수 있으며
동일한 스타일을 여러 요소에 한 번에 적용할 수 있습니다.
이 방식은 코드 중복을 줄이고, 유지 보수를 쉽게 만들어 줍니다.

h1, h2, h3 {
    color: blue;
    font-family: Arial, sans-serif;
}

위 코드는 문서 내에 있는 h1, h2, h3 태그를 모두 선택하는 그룹 선택자입니다.
각 태그에 개별적으로 스타일 지정할 필요없이, 간편하게 적용할 수 있습니다.
그룹 선택자를 사용하지 않는다면 아래 코드처럼 작성됩니다.

h1 {
    color: blue;
    font-family: Arial, sans-serif;
}

h2 {
    color: blue;
    font-family: Arial, sans-serif;
}

h3 {
    color: blue;
    font-family: Arial, sans-serif;
}

길어질 수 있는 코드가 짧아졌죠?
그룹 선택자도 꼭 기억해 두셨다가 효과적으로 사용하시길 바랍니다.

1.2 결합자(Combinators)

CSS 결합자는 HTML 요소 간의 관계를 기반으로 스타일을 적용할 수 있게 해 줍니다.
결합자를 활용하면 보다 구체적인 조건을 만족하는 요소에만 스타일을 적용할 수 있어,
복잡한 레이아웃에서도 효율적으로 스타일을 지정할 수 있습니다.

2. 결합자의 종류

2.1 자손 결합자 (Descendant Combinator)

자손 결합자는 특정 요소 안에 있는 모든 자손 요소에 스타일을 적용합니다.
공백 ( )을 사용하여 결합자를 정의하며, HTML 구조셍서 깊숙한 곳에 있는 자손 요소까지 타겟팅할 수 있습니다.

div p {
    color: green;
}

위 예시는 div 태그 내에 있는 모든 p 태그의 글씨를 초록색으로 적용하는 코드입니다.
즉, div 내부의 자손 요소라면 p 테그가 어디에 있든 스타일이 적용됩니다.

2.2 자식 결합자 (Child Combinator)

자식 결합자는 부모 요소의 직계 자식 요소에만 스타일을 적용합니다.
자식 결합자는 > 기호를 사용합니다.

ul > li {
    list-style-type: square;
}

위 예시는 ul 태그의 직계 자식인 li 태그에 스타일을 적용하여 네모 리스트 스타일을 만듭니다.
자식이 아닌 li 태그는 적용받지 못합니다.

2.3 일반 형제 결합자 (General Sibling Combinator)

일반 형제 결합자는 동일한 부모를 가진 형제 요소 중 특정 요소 뒤에 나오는 모든 형제 요소에 스타일을 적용합니다.
( ~ ) 기호를 사용하여 정의합니다.

h2 ~ p {
    color: red;
}

위 예시는 h2 태그 뒤에 나오는 모든 p 태그에 빨간색을 적용합니다.
h2 태그가 여러개일 경우에는 각 h2 뒤에 나오는 모든 p 태그가 스타일 적용 대상입니다.

2.4 인접 형제 결합자 (Adajacent Sibling Combinator)

인접 형제 결합자는 특정 요소와 바로 인접한 형제 요소에만 적용됩니다.
+ 기호를 사용하여 정의합니다.

h2 + p {
    color: orange;
}

위 코드는 h2 태그 바로 뒤에 오는 p 태그에만 적용됩니다.
일반 형제 결합자와는 다르게 h2 바로 뒤에 있는 첫 번째 p 태그만 적용됩니다.

2.5 열 결합자 (Column Combinator)

열 결합자는 테이블 구조에서 col 태그와 td 태그에 사용해 특정 열에 스타일을 적용합니다.
주로 표(table태그)에서 열에 대한 스타일을 지정할 때 사용됩니다.

col:first-child {
    background-color: lightgray;
}

td:first-child {
    background-color: lightgray;
}

위 코드는 표 안에서 첫번 째 열에 회색 배경을 적용합니다.
:first-child 대신 nth-child로 수열을 이용해 다양하게 적용할 수 있습니다.

3. 의사 클래스 및 의사 요소

의사 클래스와 의사 요소는 특정 상태나 위치에 있는 요소에 스타일을 적용할 때 사용합니다.
이 기능을 사용하면 동적 스타일을 구현할 수 있어,
사용자의 상호작용에 반응하는 스타일을 쉽게 적용할 수 있습니다.

3.1 의사 클래스 (Pseudo-Classes)

의사 클래스와 의사 요소는 특정 상태의 요소에 스타일을 적용하는 선택자입니다.
가장 많이 사용되는 의사 클래스는 hover와 active입니다.

• hover : 사용자가 요소 위에 마우스를 올렸을 때 적용되는 스타일
• active : 사용자가 요소를 클릭할 때 적용되는 스타일

button:hover {
    background-color: lightblue;
}

button:active {
    background-color: darkblue;
}

위 코드는 버튼에 마우스를 올렸을 때에는 밝은 파랑 배경색으로 바뀌고,
버튼을 클릭하는 동안에는 진한 파랑 배경색이 적용되는 코드입니다.

3.2 의사 요소 (Pseudo-Elements)

의사 요소는 특정 요소의 부분에 스타일을 적용할 때 사용됩니다.
예를 들어, 첫 글자와 첫 줄에만 스타일을 적용할 수 있습니다.
가장 많이 사용되는 의사 요소는 ::before ::after 가 있습니다.

• ::before : 요소의 내용 앞에 가상 요소를 생성하고 스타일을 적용합니다.
• ::after : 요소의 내용 뒤에 가상 요소를 생성하고 스타일을 적용합니다.

p::first-letter {
    font-size: 24px;
    font-weight: bold;
}

p::before {
    content: "👉 ";
}

위 코드는 첫 번재 문단의 첫 글자를 크게하고 굵게 만들고,
문단 앞에 손가락 화살표 아이콘을 삽입합니다.

[왜 이런 다양한 CSS 사용법이 필요할까?]

CSS 선택자를 효과적으로 사용하는 것은 웹 개발에서 중요합니다.
선택자를 적절하게 사용하면 HTML 구조를 효율적으로 관리할 수 있습니다.
그리고 정확한 부분에 스타일을 적용할 수 있습니다.
특히 복잡한 구조의 페이지에서 다양한 결합자를 사용하면 보다 구체적인 적용이 가능합니다.

• 그룹 선택자는 코드 중복을 줄여 가독성과 유지보수를 쉽게 해줍니다.
• 결합자는 요소 간의 관계를 기반으로 스타일을 적용해, 페이지의 구조에 맞는 세밀한 디자인을 가능하게 합니다.
• 의사 클래스와 의사 요소는 사용자의 상호작용에 따라 동적 스타일을 생성할 수 있습니다.

이번 포스팅에서는 그룹 선택자, 결합자, 그리고 의사 클래스와 의사 요소에 대해 알아보았습니다.
웹 페이지를 스타일링할 때, 이러한 선택자를 잘 활용하면 구체적이고 정교한 스타일링이 가능합니다.
이를 통해 CSS 코드를 더 효율적으로 작성하고, 웹페이지의 유지 보수를 쉽게 할 수 있습니다.

지금까지 CSS 기초 CSS 심화 선택자까지 알아보았습니다.
오늘은 여기까지 입니다.
감사합니다. Codinglee였습니다.

2024. 10. 23. (수) 판교 직장에서 씀.