전통적으로 캐스캐이딩 스타일 시트(CSS)를 적용하는 것은 개발자에게 힘든 작업이었습니다. 하지만 CSS 전처리기는 루프 기능, 믹스인이라고 하는 재사용 가능한 코드 세그먼트, 기타 고급 기능 등 향상된 기능을 제공함으로써 활용도를 높였습니다. 그 결과, 시간이 지남에 따라 CSS는 ‘중첩 스타일링’이라는 개념을 비롯하여 CSS 전처리기를 통해 처음 도입된 여러 속성을 통합하도록 발전해 왔습니다.
중첩 스타일링을 활용하면 개발자는 HTML 컴포넌트의 배열을 반영하여 CSS 규칙을 서로 캡슐화할 수 있습니다. 결과적으로 이 방법을 사용하면 HTML 엔티티 간의 상호 연결과 각 디자인 측면이 명확하게 표시되어 보다 간소화되고 이해하기 쉬운 코드 레이아웃을 생성할 수 있습니다.
중첩 스타일링: 기존 방식
Sass, Stylus, Less와 같은 CSS 전처리기에서 중첩 스타일링은 다른 태그 안에 중첩된 HTML 태그에 특정 스타일을 적용할 수 있는 널리 액세스 가능한 기능입니다. 이러한 전처리기마다 구문은 다양하지만 기본 원칙은 변하지 않습니다. 중첩 스타일링을 활용하면 다음 CSS 코드를 사용하여 클래스 속성이 “container”인 div 요소 안에 포함된 모든 h1 요소에 스타일 향상을 적용할 수 있습니다:
.container {
background-color: #f2f2f2;
}
.container h1 {
font-size: 44px;
}
Less CSS와 같은 CSS 전처리기에서 중첩 스타일링을 구현하려면 JavaScript 객체 표기법과 유사한 구문을 활용합니다. 스타일 속성을 중괄호로 묶고 중괄호로 묶인 다른 블록 안에 중첩하면 전체 프로젝트에서 쉽게 유지 관리하고 재사용할 수 있는 계층적 스타일 구조를 만들 수 있습니다.
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
앞서 언급한 코드 스니펫은 기존 CSS 코딩과 비슷한 결과를 보여주면서 소스 코드를 읽는 개발자가 직관적으로 이해할 수 있도록 도와줍니다. “계층 구조”로 알려진 이 접근 방식의 독특한 측면은 CSS 전처리기가 개발되고 널리 채택된 주요 동기가 되었습니다.
트리 구조 내 중첩 수준에는 본질적인 제한이 없지만, 극단적인 수준의 중첩은 지나치게 장황하고 복잡한 코드를 생성할 수 있으므로 이 기능을 구현할 때는 주의가 필요합니다.
CSS의 네이티브 중첩 스타일링
모든 브라우저에서 네이티브 중첩 스타일링을 지원하는 것은 아닙니다. 사용할 수 있나요… 웹사이트를 통해 대상 브라우저가 이 기능을 지원하는지 확인할 수 있습니다.
CSS 내에서 네이티브 중첩 스타일링을 구현하는 프로세스는 CSS 전처리기와 유사한 방식으로 작동하므로 모든 선택기를 다른 선택기 안에 묶을 수 있습니다. 그러나 본질적인 차이점을 인식하는 것이 중요합니다. 제공된 예시를 다음과 같이 고려하십시오:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSS</title>
</head>
<body>
<div class="container">
<h1>Hello from the children of planet Earth!</h1>
</div>
<style>
.container {
background-color: red;
h1 {
color: yellow;
}
}
</style>
</body>
</html>
‘.container’ 선택자 안에 포함된 CSS 규칙은 `h1` 요소의 글꼴 색상이 노란색이어야 한다고 지정합니다. 그러나 웹 브라우저에서 실행하면 `container` 클래스가 있는 `div` 요소의 적용된 배경색이 실제로 빨간색이지만 `h1` 태그가 예상한 스타일 속성을 나타내지 못하는 것이 관찰됩니다.
CSS에서 스타일을 중첩하는 프로세스는 Less와 같은 CSS 전처리기에서 관찰되는 것과 약간 다를 수 있습니다. 한 가지 중요한 차이점은 기존 CSS 구문을 사용하여 중첩된 계층 구조 내에서 HTML 요소를 직접 참조할 수 없다는 것입니다. 대신 앰퍼샌드 기호(&)를 사용하면 제공된 예시에서 볼 수 있듯이 이 제한을 해결하는 해결 방법으로 사용할 수 있습니다.
.container {
background-color: red;
& h1 {
color: yellow;
}
}
앰퍼샌드 기호를 “h1” 지정 앞에 배치하면 상위 선택기를 표시하는 역할을 합니다. 이 표기법을 사용하면 포괄된 “div” 엔티티 내에 있는 모든 하위 “h1” 요소를 선택할 수 있습니다. 웹 브라우저에서 코드를 실행하면 이후의 시각적 결과에는 여러 개의 “h1” 제목이 연속적으로 표시됩니다.
부모 요소를 참조할 때 앰퍼샌드 기호를 사용하면 아래 제공된 예시에서 볼 수 있듯이 해당 요소와 관련된 의사 클래스 및 의사 요소를 지정할 수 있습니다:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
미디어 쿼리 중첩
중첩 스타일링의 CSS 이전 시대에는 브라우저 너비에 따라 조건부 스타일 조정을 구현하기 위해 다음과 같은 기술을 사용해야 했습니다:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
웹페이지 렌더링 시 브라우저는 브라우저 창의 너비에 따라 P 요소의 색을 식별합니다. 브라우저 너비가 750픽셀을 초과하면 회색 음영을 색상으로 사용하고, 그렇지 않으면 표준 색조인 검은색을 적용합니다.
실제로 이러한 접근 방식은 기능적일 수 있지만, 스타일 변형의 수가 증가함에 따라 점점 더 번거롭고 관리하기 어려워지는 코드의 확산을 초래할 수 있습니다. 다행히도 최신 CSS 기능의 등장으로 개별 요소의 스타일 속성 자체에 미디어 쿼리를 통합할 수 있게 되어 프로세스가 간소화되고 전반적인 가독성이 향상되었습니다.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
본 코드 블록은 브라우저에서 지정된 기준에 따라 해당 스타일 조정을 구현하는 것을 쉽게 인식할 수 있는 복잡하지 않은 구조를 통해 이전 코드 블록과 차별화되는 이해성 측면에서 상당한 이점을 제공합니다.
CSS 중첩 스타일로 웹사이트 스타일링하기
지금까지 습득한 지식을 적용하기 위해서는 CSS의 고급 스타일링 기능을 활용하여 기본 웹 페이지를 구성하는 것이 필수적입니다. 이 과정을 시작하려면 디렉토리를 설정하고 원하는 제목을 지정합니다. 이 지정된 영역에 “index.html”이라는 레이블이 붙은 파일과 “style.css”라는 레이블이 붙은 파일 두 개를 생성합니다.
웹 페이지의 일관된 구조와 레이아웃을 설정하기 위해 index.html 파일에 다음 템플릿 코드를 통합하는 것을 고려하세요:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Simple Website</title>
</head>
<body>
<div class="container">
<div class="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<div class="meta-data">
<span class="author">David Uzondu</span>
<span class="time">3 hours ago</span>
</div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
quae laudantium.
</div>
</div>
<div class="sidebar">
<h2>Trending Articles</h2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!</h4>
</div>
</div>
</body>
</html>
앞서 언급한 코드 블록은 모방 뉴스 포털의 구문을 설정합니다. 그런 다음 style.css 파일에 액세스하여 아래와 같이 후속 지시문을 삽입합니다:
.container {
display: flex;
gap: 25px;
@media(max-width:750px) {
flex-direction: column;
}
.article{
width:90%;
}
& div:nth-child(3) {
text-align: justify;
}
& span {
color: rgb(67, 66, 66);
&:nth-child(1)::before {
font-style: italic;
content: "Written by ";
}
&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}
.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
CSS 중첩 구조를 활용하여 기본 컨테이너 요소는 ‘.container’ 클래스로 표현됩니다. 이 특정 클래스는 다른 캐스케이딩 스타일 규칙 내에서 “&” 기호를 사용하여 액세스할 수 있습니다. 인터넷 브라우저에서 실행하면 웹 페이지의 후속 시각적 모양을 관찰할 수 있습니다:
CSS 전처리기가 여전히 필요하신가요?
네이티브 CSS 내 중첩 기능의 등장으로 CSS 전처리기의 필요성에 의문을 가질 수 있습니다. 하지만 이러한 전처리기는 루프, 믹스인, 함수 등 단순한 중첩 스타일링 이상의 다양한 기능을 제공한다는 점을 인식하는 것이 중요합니다. 따라서 CSS 전처리기를 사용할지 여부는 개별 요구사항과 선호도에 따라 달라질 수 있습니다.