Opkle(옵클) - 창작자를 위한 앱과 시스템

EDITOR

CLASS

BLOG

표현한다는 것의무한한 가능성,

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

Opkle은 코드 없이 웹을 마음껏 만들고, 누구나 자기 화면을 그릴 수 있도록 에디터를 만들고, 그 결과물을 어디서나 즐길 수 있게 돕는 팀입니다.

텍스트와 화면과의 조화를 통해, 웹을 짓는다는 것이 그저 단순한 코딩이 아닌, 상상을 펼치고 감각을 깨우는 과정이 될 수 있도록 좋은 도구를 만들어 냅니다.

body 태그: 독자와 만나는 웹문서의 본문

html

CSS는 왜 HTML과 나뉘어 있을까

css

CSS 선택자: 꾸밀 대상을 찾아 부르는 법

css

CSS 문법은 어떻게 HTML과 만날까

css

CSS 박스 모델: 태그가 화면의 자리가 되는 법

css

2 CSS 선택자: 꾸밀 대상을 찾아 부르는 법

한 페이지에는 제목도 있고, 본문도 있고, 사진 설명도 있고, 눌러야 할 버튼도 있습니다. CSS로 이 모든 것을 똑같이 꾸미면 페이지는 금세 방향을 잃습니다. 제목은 제목답게, 본문은 편안하게, 중요한 안내는 조금 더 또렷하게, 버튼은 누를 수 있다는 사실이 드러나게 보여야 합니다. 이때 CSS가 먼저 해야 할 일은 색이나 크기를 고르는 것이 아닙니다. 문서 안에서 ‘누구를 꾸밀 것인가’를 정확히 찾아내는 일입니다.

이 대상을 고르는 말을 선택자라고 합니다. CSS는 “이 문단들을 골라 주세요”, “important라는 이름표를 단 안내문만 꾸며 주세요”, “이 버튼 위에 마우스가 올라갔을 때만 변화를 주세요”처럼 선택자를 통해 대상에게 말을 겁니다. 선택자는 마치 도서관에서 원하는 책을 찾는 검색 조건, 또는 무대 위에서 특정 배우에게만 조명을 비추는 지시와 닮았습니다. 문서 전체를 바꾸지 않고도 필요한 곳에만 표현을 더할 수 있게 합니다.

선택자를 이해하면 CSS가 작동하는 방식도 훨씬 선명해집니다. CSS는 무작정 화면에 색을 칠하지 않습니다. 먼저 HTML 문서 안에서 조건에 맞는 요소를 찾고, 그 요소에만 정해 둔 꾸밈을 적용합니다. 그래서 좋은 선택자는 짧은 문법 요령을 넘어, HTML 문서의 역할과 관계를 읽는 방법입니다.

1.선택자가 CSS에서 하는 첫 번째 일을 알아봅니다.

2.태그 이름, class, id로 대상을 고르는 기본 방법을 살펴봅니다.

3.여러 대상을 함께 고르거나 문서 안의 관계로 좁혀 가는 방법을 이해합니다.

4.선택자를 너무 넓거나 복잡하게 쓰지 않고 문서의 뜻을 지키는 방법을 생각해 봅니다.

선택자는 ‘누구에게 적용할까요?’라는 질문입니다

CSS 규칙은 크게 두 부분으로 생각할 수 있습니다. 앞부분은 대상을 고르고, 뒷부분은 그 대상에게 어떤 모습을 줄지 말합니다. 예를 들어 `p { color: … }`에서 `p`는 문단을 고르는 선택자이고, 중괄호 안은 고른 문단에 적용할 약속입니다. 처음에는 중괄호 안의 세부 문법보다, 선택자가 먼저 대상을 찾아 준다는 흐름을 이해하는 편이 중요합니다.

웹페이지는 HTML 태그들이 나무처럼 연결된 구조입니다. html 안에 body가 있고, body 안에 header와 main이 있으며, 그 안에 제목과 문단과 링크가 들어갑니다. 선택자는 이 구조를 훑으며 ‘이 조건과 맞는 요소’를 찾습니다. W3C의 선택자 표준도 선택자를 문서의 요소 구조에서 맞는 대상을 찾는 패턴으로 설명합니다. CSS는 이 패턴을 이용해 표현 규칙을 특정 요소와 연결합니다.

이 방식은 같은 규칙을 여러 번 적지 않게 해 줍니다. 문단이 열 개 있어도 `p`라는 선택자 하나로 모두에게 기본 글꼴과 줄 간격을 줄 수 있습니다. 반대로 특별한 문단 하나만 다르게 보여 주고 싶다면, 그 문단에 이름표를 붙이고 더 좁은 선택자로 찾아낼 수 있습니다. 선택자는 CSS의 모든 표현이 시작되는 주소입니다.

선택자가 하는 일

HTML 문서에서 꾸밈을 받을 대상을 찾습니다.

한 요소만, 같은 성격의 여러 요소를, 또는 특정 상황의 요소를 고를 수 있습니다.

선택자 뒤에 그 대상에게 적용할 색·크기·여백 같은 규칙이 이어집니다.

CSS는 선택자가 찾은 대상에게만 약속을 적용합니다.

태그 이름으로 고르면 같은 역할을 함께 꾸밉니다

가장 단순한 선택자는 HTML 태그의 이름을 그대로 쓰는 방법입니다. `p`라고 적으면 문서 안의 모든 p, 곧 문단 태그를 고릅니다. `h1`은 가장 큰 제목을, `a`는 링크를, `button`은 버튼을 고릅니다. HTML이 이미 ‘이것은 문단입니다’, ‘이것은 링크입니다’라고 역할을 표시했기 때문에, CSS는 그 역할 이름으로 대상을 찾을 수 있습니다.

이 선택은 같은 역할의 요소를 한결같이 보여 주고 싶을 때 좋습니다. 한 편의 긴 글에서 모든 문단에 읽기 편한 줄 간격을 주고, 모든 링크에는 링크답게 알아볼 수 있는 표현을 더하는 경우가 그렇습니다. 각각의 문단을 따로 고르지 않아도 되므로 문서가 길어질수록 더 편리합니다.

하지만 모든 문단이 늘 같은 모습이어야 하는 것은 아닙니다. 본문 문단과 중요한 공지 문단의 역할이 다르다면, p만으로 고르는 선택자는 너무 넓을 수 있습니다. 이때는 HTML에 붙여 둔 class나 id를 이용해 선택의 범위를 좁힙니다. 태그 이름은 ‘문단이라는 큰 부류’를 고르는 방법이고, class와 id는 그 안에서 더 구체적인 대상을 찾는 방법입니다.

class 선택자는 같은 이름표를 단 여러 대상을 고릅니다

HTML의 class는 비슷한 성격을 가진 요소에게 붙이는 공통 이름표였습니다. CSS에서는 이 이름 앞에 점을 붙여 선택자로 씁니다. 예를 들어 HTML에서 중요한 안내문 여러 개에 `class="notice"`를 붙였다면, CSS의 `.notice`는 그 이름표를 단 요소들을 모두 고릅니다. 태그의 종류가 문단이든 상자든, notice라는 공통점을 가진 대상은 함께 같은 꾸밈을 받을 수 있습니다.

class 선택자의 장점은 반복입니다. 사이트의 여러 페이지에서 같은 모양의 안내 상자, 인용문, 강조 버튼을 써야 한다면 같은 class 이름을 붙여 두고, CSS에서 한 번만 정하면 됩니다. 페이지를 새로 만들 때에도 이미 정한 이름표를 붙이기만 하면 같은 분위기를 이어 갈 수 있습니다. CSS가 한 페이지의 장식이 아니라, 여러 문서의 일관성을 만드는 도구가 되는 이유입니다.

class 이름은 무엇처럼 보이는지보다 어떤 역할을 하는지 떠올리게 붙이는 편이 좋습니다. `.red-text`보다 `.warning`이나 `.notice`가 더 오래 이해하기 쉬운 경우가 많습니다. 언젠가 색을 빨강에서 다른 색으로 바꾸어도 경고라는 역할은 남기 때문입니다. 선택자는 꾸밈을 고르지만, 좋은 선택자의 이름은 문서의 뜻을 놓치지 않습니다.

class 선택자를 읽는 법

`.notice`의 점은 ‘notice라는 class 이름표를 가진 대상’을 뜻합니다.

같은 class는 문서 안의 여러 요소에 반복해서 붙일 수 있습니다.

태그 종류와 상관없이 같은 성격의 요소를 한꺼번에 고를 수 있습니다.

이름은 현재 색이나 위치보다 역할을 설명할수록 나중에 바꾸기 쉽습니다.

id 선택자는 한 곳만 정확히 가리킵니다

id는 문서 안에서 한 번만 쓰는 고유한 이름입니다. CSS에서는 이름 앞에 `#`을 붙여 그 한 자리를 찾습니다. 예를 들어 `#signup`은 `id="signup"`을 가진 요소, 곧 가입 영역처럼 페이지 안에서 단 하나인 대상을 가리킵니다. class가 같은 동아리 배지라면, id는 정확한 사물함 번호에 가깝습니다.

id 선택자는 한 곳을 확실하게 꾸며야 할 때 사용할 수 있습니다. 그러나 모든 요소에 각각 id를 붙여 CSS를 쓰는 습관은 좋지 않습니다. 문서가 조금만 바뀌어도 이름이 늘어나고, 같은 모양을 다른 곳에서 다시 쓰기 어려워지기 때문입니다. 반복되는 카드나 안내문에는 class가 더 자연스럽고, id는 링크의 도착점이나 특정한 하나의 영역처럼 정말 고유한 자리에 아껴 두는 편이 좋습니다.

처음에는 점과 #의 차이를 이렇게 기억하면 됩니다. 점으로 시작하는 `.name`은 같은 이름표를 단 여러 대상을 부르고, #으로 시작하는 `#name`은 문서 안의 한 대상을 부릅니다. 둘 다 대상을 선택하지만, 선택할 수 있는 범위가 다릅니다. 이 차이를 지키면 CSS도 HTML도 훨씬 정돈됩니다.

여러 대상을 함께 고르고 관계로 범위를 좁힐 수 있습니다

제목과 소제목에 같은 글꼴을 쓰고 싶을 때는 `h1, h2`처럼 쉼표로 선택자를 나란히 적을 수 있습니다. 쉼표는 ‘또는’을 뜻합니다. h1도 고르고 h2도 고르라는 말입니다. 서로 다른 대상을 한 규칙으로 함께 다루고 싶을 때, 같은 내용을 두 번 적지 않아도 됩니다.

문서 안의 위치 관계로 대상을 고를 수도 있습니다. `article p`처럼 띄어쓰기로 이어 쓰면, article 안에 들어 있는 모든 문단을 고릅니다. 이것은 ‘article 안의 p’라는 뜻입니다. 예를 들어 페이지 바깥의 짧은 문단은 그대로 두고, 글 본문 안의 문단에만 다른 줄 간격을 주고 싶을 때 도움이 됩니다. 부모와 자식, 이웃처럼 문서 안의 관계를 활용해 선택을 더 정확하게 만드는 것입니다.

사용자의 행동이나 현재 상태에 따라 선택하는 방법도 있습니다. `a:hover`는 마우스가 링크 위에 올라가 있는 순간의 링크를, `input:focus`는 사용자가 글자를 입력하려고 선택한 입력칸을 가리킵니다. 이런 선택자는 한 요소의 정체성만 보는 것이 아니라, 지금 어떤 상태에 있는지도 살핍니다. 버튼과 링크가 반응하는 화면은 자바스크립트만의 일이 아니라, CSS 선택자가 상태를 알아보는 것에서 시작되기도 합니다.

처음에는 태그 이름, class, id로 충분히 많은 것을 할 수 있습니다. 관계와 상태를 이용한 선택은 문서가 커지거나 더 섬세한 표현이 필요해질 때 하나씩 더해도 늦지 않습니다. 중요한 것은 문법의 길이가 아니라, 선택자가 실제로 어느 대상을 가리키는지 머릿속에 그릴 수 있는가입니다.

선택의 범위를 조절하는 표기

`h1, h2`: h1과 h2를 함께 고릅니다. 쉼표는 ‘또는’입니다.

`article p`: article 안에 있는 문단을 고릅니다. 띄어쓰기는 ‘안에 있는’을 뜻합니다.

`a:hover`: 마우스가 올라간 링크처럼 특정 상태의 대상을 고릅니다.

`input:focus`: 입력을 받기 위해 선택된 입력칸을 고릅니다.

좋은 선택자는 정확하지만 지나치게 복잡하지 않습니다

선택자는 대상을 정확히 찾을수록 좋아 보입니다. 하지만 너무 긴 조건을 겹겹이 쓰면, 나중에는 왜 이 규칙이 이 요소에만 적용되는지 알아보기 어려워집니다. `main article section .notice p`처럼 문서 구조를 지나치게 많이 따라가며 고르면, 중간 상자 하나를 바꾸는 일만으로도 CSS가 예상과 다르게 움직일 수 있습니다. 길고 복잡한 선택자가 언제나 더 정밀한 선택자는 아닙니다.

처음에는 ‘이 규칙이 문단 전체에 필요한가’, ‘notice라는 같은 역할의 요소들에 필요한가’, ‘정말 한 곳만 가리켜야 하는가’를 차례로 물어보면 좋습니다. 답에 따라 태그 선택자, class 선택자, id 선택자를 고르면 됩니다. 관계 선택자는 이 기본 선택만으로 범위가 충분히 좁혀지지 않을 때 사용합니다.

또한 선택자는 HTML의 구조와 뜻을 거슬러서는 안 됩니다. 단지 특정 색을 칠하려고 의미 없는 상자를 계속 만들거나, 위치가 바뀔 때마다 이름을 고치기 시작하면 문서는 읽기 어려워집니다. HTML은 내용의 역할을 먼저 정하고, CSS 선택자는 그 역할을 존중하며 필요한 대상을 찾아야 합니다. 선택은 꾸밈의 출발이지만, 동시에 문서의 질서를 다시 읽는 일입니다.

선택자는 CSS가 문서에게 말을 거는 방식입니다

CSS는 모든 문장에 똑같은 목소리로 말하지 않습니다. 선택자를 통해 제목에게는 제목다운 표현을, 본문에게는 편안한 리듬을, 안내문에게는 필요한 주의를 줍니다. HTML이 요소에게 역할을 붙여 두었다면, CSS 선택자는 그 역할을 알아보고 알맞은 표현을 건네는 통로입니다.

그러니 선택자를 배운다는 것은 기호를 외우는 일만이 아닙니다. 내가 지금 꾸미려는 대상은 누구인지, 그 대상은 다른 요소와 어떤 관계인지, 같은 역할을 가진 대상은 또 어디에 있는지를 살피는 일입니다. 이 질문이 선명해질수록 CSS는 화면 위의 마술이 아니라, 문서 안의 의미를 골라 더 잘 보이게 하는 언어가 됩니다.

이 글의 핵심

선택자는 CSS가 꾸밈을 적용할 HTML 요소를 찾는 조건입니다.

태그 이름 선택자는 같은 역할의 요소를, class 선택자는 같은 이름표를 단 여러 요소를 고릅니다.

id 선택자는 문서 안의 고유한 한 대상을 가리킬 때 사용합니다.

쉼표·관계·상태 선택자로 범위를 조절할 수 있지만, 처음에는 짧고 역할이 분명한 선택자가 좋습니다.

목록으로

저작권 고시

본 웹사이트의 모든 디자인 결과물 및 영상에 대한 저작권은 Abstract Cloud에 있으며, 저작권법 및 관련 법령에 의해 보호받습니다. 웹, 영상, 본문, 표지, 내지 디자인을 포함한 모든 콘텐츠는 저작권자의 자산으로, 사전 동의 없이 무단 복제, 배포, 2차 저작물 제작, 온라인 공유 등을 금지합니다. 이를 위반할 시, 저작권법에 따라 민형사상 책임을 질 수 있습니다. 정당한 구매와 저작권 보호는 창작자의 권리를 지키며, 더 나은 작품으로 보답할 힘이 됩니다.

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

상호 :추상적 형상 디자인(Abstract cloud) | 대표자 :배창규

사업자등록번호 :249-74-00533

통신판매업 신고번호 :2025-의정부송산-0634

주소 :경기도 의정부시 부용로 49, 108동 402호