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

EDITOR

CLASS

BLOG

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

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

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

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

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

html

CSS는 왜 HTML과 나뉘어 있을까

css

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

css

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

css

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

css

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

CSS를 처음 열면 짧은 영어 단어 뒤에 콜론과 세미콜론, 중괄호가 이어지는 모습을 만나게 됩니다. `p { color: …; }`처럼 보이는 이 형태는 낯설지만, 하고 싶은 말은 단순합니다. “p라는 문단을 골라서, 글자색을 이 값으로 보여 주세요.” CSS는 긴 문장으로 설명하지 않고, 누구를 고를지와 어떻게 보이게 할지를 정해진 순서로 적는 언어입니다.

앞선 글에서 선택자가 꾸밀 대상을 찾는다고 배웠습니다. 이제 그 선택자가 고른 대상에게 어떤 약속을 건네는지 살펴볼 차례입니다. CSS 규칙은 선택자로 시작해 중괄호 안에 여러 약속을 적습니다. 약속 하나는 ‘무엇을 바꿀까’와 ‘어떤 모습으로 바꿀까’로 나뉩니다. 그리고 이 규칙은 HTML 문서와 연결되어야 비로소 화면에서 움직이기 시작합니다.

CSS는 HTML 태그 안에 늘 직접 쓰는 것이 아닙니다. 보통은 별도의 CSS 파일에 꾸밈 규칙을 모아 두고, HTML의 head에서 그 파일을 불러옵니다. 필요에 따라 한 문서 안의 style 태그에 적거나, 아주 특별한 한 요소에만 style 속성으로 덧붙일 수도 있습니다. 이 세 가지 길을 이해하면 ‘CSS는 어디에 쓰고, HTML은 어디에서 그것을 만나는가’가 한 번에 정리됩니다.

1.CSS 규칙을 이루는 선택자·중괄호·속성·값의 순서를 알아봅니다.

2.콜론과 세미콜론이 여러 약속을 구분하는 이유를 살펴봅니다.

3.외부 CSS 파일, style 태그, style 속성으로 HTML과 연결하는 세 가지 길을 이해합니다.

4.브라우저가 HTML과 CSS를 만나 화면을 만드는 흐름을 정리합니다.

CSS 한 줄은 선택과 약속으로 이루어집니다

가장 기본적인 CSS 규칙의 모습은 `선택자 { 속성: 값; }`입니다. 선택자는 앞에서 배운 것처럼 꾸밀 대상을 찾는 말입니다. 중괄호는 그 대상에게 건넬 약속들을 담는 상자입니다. 그리고 상자 안의 `속성: 값;`은 한 가지 약속입니다. CSS 문법은 이 네 가지 자리를 정해 둠으로써, 짧은 기호만으로도 분명한 지시를 만들 수 있게 합니다.

예를 들어 `p { color: navy; }`라는 규칙을 천천히 읽어 봅니다. `p`는 문단 태그를 고릅니다. `{ }` 안에는 선택된 문단에게만 적용할 말이 들어갑니다. `color`는 글자의 색에 관해 이야기하겠다는 속성이고, `navy`는 그 색을 짙은 남색으로 정한 값입니다. 마지막의 세미콜론은 이 약속이 여기서 끝났다고 알려 줍니다.

이 형태는 HTML과 역할을 나누는 방식이기도 합니다. HTML의 p 태그는 그 내용이 문단이라는 뜻을 남깁니다. CSS의 `p` 선택자는 그 뜻을 읽고 문단들을 찾아갑니다. 그 뒤 color라는 약속이 문단의 보이는 모습을 정합니다. HTML이 ‘누구인가’를 말하고 CSS가 ‘어떻게 보일까’를 말하는 관계가, 가장 작은 CSS 규칙 안에도 들어 있습니다.

CSS 규칙을 네 조각으로 읽기

선택자: 꾸밀 대상을 고릅니다. 예를 들어 `p`, `.notice`, `#signup`이 있습니다.

중괄호 `{ }`: 고른 대상에게 적용할 약속을 담는 상자입니다.

속성: 무엇을 정할지 말합니다. 예를 들어 color는 글자색에 관한 속성입니다.

값: 그 속성을 어떤 모습으로 정할지 말합니다. 예를 들어 navy는 색의 값입니다.

콜론과 세미콜론은 약속을 또렷하게 나눕니다

CSS의 중괄호 안에는 약속을 하나만 적을 필요가 없습니다. 글자색을 정한 뒤 글자 크기와 줄 간격, 문단의 여백도 함께 정할 수 있습니다. 이때 콜론은 속성과 값을 잇고, 세미콜론은 한 약속과 다음 약속을 나눕니다. 문장에서 콜론이 ‘이제 설명할 내용을 말합니다’라고 알려 주고, 마침표가 한 문장을 끝내는 것과 비슷합니다.

가령 `p { color: navy; line-height: 1.7; }`라고 적으면 두 가지 약속이 들어 있습니다. 첫 번째는 문단의 글자색이고, 두 번째는 줄과 줄 사이의 간격입니다. 둘은 같은 p 선택자에게 적용되지만 서로 다른 속성입니다. 세미콜론이 없으면 브라우저는 어디까지가 첫 번째 값이고 어디부터가 다음 약속인지 판단하기 어려워집니다.

CSS는 한 줄로 쓸 수도 있고, 약속마다 줄을 나누어 쓸 수도 있습니다. 브라우저는 줄바꿈보다 문법 기호를 더 중요하게 읽습니다. 하지만 사람이 나중에 다시 읽고 고치기에는 속성마다 새 줄로 적는 편이 좋습니다. CSS는 컴퓨터가 읽을 규칙이면서, 미래의 내가 다시 만나 편집할 문서이기도 하기 때문입니다.

CSS 표준은 선택자 뒤의 중괄호 안에 이름·콜론·값으로 이루어진 약속들이 들어가며, 이 약속들을 세미콜론으로 나눈다고 설명합니다. 처음에는 이 네 기호만 정확히 구분해도 CSS의 기본 문법은 충분히 읽을 수 있습니다. 중괄호는 규칙의 경계를, 콜론은 질문과 답의 연결을, 세미콜론은 약속 하나의 끝을 알려 줍니다.

속성과 값은 ‘무엇을’과 ‘어떻게’를 나누어 말합니다

CSS의 속성은 화면에서 조절할 수 있는 항목의 이름입니다. color는 글자색, font-size는 글자 크기, margin은 바깥 여백, background-color는 배경색을 다룹니다. 속성을 볼 때에는 영어 단어를 하나씩 번역하기보다 ‘CSS가 어떤 부분을 바꾸려 하는가’를 생각하면 좋습니다. 속성은 질문의 제목과 같습니다.

값은 그 질문에 넣는 구체적인 답입니다. color에 navy를 넣으면 남색, font-size에 18px를 넣으면 18픽셀 크기, margin에 1rem을 넣으면 정해진 기준에 따른 여백을 뜻합니다. 같은 속성도 값에 따라 아주 다른 모습을 만들 수 있습니다. CSS를 배운다는 것은 속성 목록을 무조건 외우는 것보다, 하나의 속성이 어떤 종류의 값을 받아들이는지 조금씩 익히는 과정에 가깝습니다.

여기에서 HTML 속성과 CSS 속성은 이름이 비슷해도 다른 일이라는 점을 잠시 기억해 두면 좋습니다. HTML의 `href`나 `src`는 태그에 필요한 정보와 주소를 적는 속성입니다. CSS의 color나 margin은 이미 선택된 요소의 표현을 정하는 속성입니다. 둘 다 ‘속성’이라고 부르지만, HTML은 문서의 의미와 연결을, CSS는 문서의 모습을 다룹니다.

속성과 값을 읽는 질문

`color: navy;`는 ‘글자색을 무엇으로 할까요?’라는 질문과 답입니다.

`font-size: 18px;`는 ‘글자를 얼마나 크게 보여 줄까요?’라는 질문과 답입니다.

`margin: 1rem;`는 ‘요소 바깥에 어느 정도 숨 쉴 틈을 둘까요?’라는 질문과 답입니다.

하나의 선택자 아래에는 서로 다른 속성과 값을 여러 개 이어 적을 수 있습니다.

가장 일반적인 연결: CSS 파일을 head에서 불러옵니다

CSS를 HTML과 연결하는 가장 일반적인 방법은 별도의 `.css` 파일을 만드는 것입니다. 예를 들어 `style.css`라는 파일에 CSS 규칙을 모아 두고, HTML 문서의 head에 `〈link rel="stylesheet" href="style.css"〉`를 적습니다. link 태그의 rel은 이 파일이 문서와 어떤 관계인지 알려 주고, stylesheet는 ‘이것은 모습을 정하는 규칙 파일입니다’라는 뜻입니다. href는 그 파일이 있는 주소를 가리킵니다.

브라우저는 HTML의 head를 읽다가 이 link를 만나면 style.css를 찾아옵니다. 그 안에 적힌 선택자를 HTML 문서의 요소와 비교하고, 맞는 요소에 CSS 규칙을 적용합니다. HTML 파일은 글의 구조를, CSS 파일은 표현의 약속을 각각 맡은 채 link 태그가 둘 사이에 다리를 놓는 셈입니다.

외부 파일로 나누는 방식은 여러 페이지가 같은 CSS를 함께 쓸 수 있다는 점에서 특히 좋습니다. 사이트의 모든 글에서 제목의 글꼴과 기본 여백을 같게 하고 싶다면, 각 HTML 파일에 같은 규칙을 반복해서 넣을 필요가 없습니다. style.css 한 파일을 고치면 연결된 여러 페이지의 모습이 함께 바뀝니다. 문서와 디자인을 나누어 관리하려는 CSS의 처음 생각과도 가장 잘 어울리는 방식입니다.

한 페이지 안에 적는 방법: head의 `style` 태그

아주 짧은 문서이거나 그 페이지에만 필요한 꾸밈이라면, head 안에 `〈style〉` 태그를 두고 그 사이에 CSS 규칙을 직접 적을 수 있습니다. 이때 style 태그 안에는 `p { color: navy; }`처럼 선택자와 중괄호를 갖춘 온전한 CSS 규칙이 들어갑니다. HTML 문서 안에 CSS를 함께 두되, body의 본문과 섞지 않고 준비실인 head에 정리하는 방식입니다.

style 태그는 외부 파일을 찾아갈 필요가 없어 한 페이지의 작은 실험이나 특별한 인쇄용 문서에는 편리할 수 있습니다. 하지만 같은 규칙을 여러 페이지에서 써야 한다면, 각 문서의 style 태그를 모두 고쳐야 합니다. 따라서 공통 디자인에는 외부 CSS 파일을 연결하고, style 태그는 그 문서에만 꼭 필요한 규칙을 적을 때 고려하는 편이 자연스럽습니다.

style 태그 안의 글은 body의 문장처럼 화면에 나타나지 않습니다. CSS 규칙 자체가 독자에게 읽히는 본문이 아니라, 브라우저가 화면을 준비하는 약속이기 때문입니다. 앞서 head가 보이지 않는 준비실이라고 했던 이유가, CSS를 연결하는 자리에서도 다시 드러납니다.

한 요소에만 적는 방법: HTML의 `style` 속성

마지막 방법은 HTML 태그 자체에 style 속성을 붙이는 것입니다. `〈p style="color: navy;"〉`처럼 한 문단의 여는 태그 안에 바로 적습니다. 이 방식에서는 선택자가 필요 없습니다. 이미 그 태그 하나를 직접 가리키고 있기 때문입니다. 중괄호도 쓰지 않고, `color: navy;`처럼 속성과 값의 약속만 적습니다.

특별한 한 요소를 잠시 다르게 보여 줘야 할 때에는 편리해 보일 수 있습니다. 그러나 이런 방식이 많아지면 HTML 태그 안에 문서의 구조와 꾸밈 규칙이 다시 섞이기 시작합니다. 같은 표현을 다른 곳에서 재사용하기 어렵고, 나중에 디자인을 한꺼번에 바꾸기도 힘듭니다. 그래서 일반적인 페이지의 꾸밈은 외부 CSS 파일이나 head의 style 태그에 두고, style 속성은 정말 한 요소에만 필요한 예외일 때 조심스럽게 쓰는 편이 좋습니다.

세 방법은 모두 CSS를 HTML에 적용할 수 있지만, 규칙을 두는 장소가 다릅니다. 외부 파일은 여러 문서의 공통 약속, style 태그는 한 문서의 약속, style 속성은 한 요소의 예외 메모에 가깝습니다. 이 구분을 알면 CSS가 어디에 있어야 하는지 매번 더 쉽게 판단할 수 있습니다.

CSS가 HTML에 닿는 세 가지 길

외부 CSS 파일: head의 `〈link rel="stylesheet" href="style.css"〉`로 연결합니다. 여러 페이지의 공통 디자인에 알맞습니다.

style 태그: head의 `〈style〉…〈/style〉` 안에 CSS 규칙을 적습니다. 한 문서에만 필요한 규칙에 쓸 수 있습니다.

style 속성: `〈p style="color: navy;"〉`처럼 태그 안에 선언만 적습니다. 한 요소의 드문 예외에 어울립니다.

브라우저는 HTML의 구조를 읽고 CSS의 약속을 적용합니다

브라우저가 웹페이지를 열면 먼저 HTML을 읽으며 제목, 문단, 링크, 이미지 같은 구조를 파악합니다. head에서 CSS 파일이나 style 태그를 만나면 CSS 규칙도 함께 읽습니다. 이어서 각 CSS 선택자가 HTML 요소 가운데 누구를 고르는지 확인하고, 맞는 요소에 속성과 값으로 적힌 표현을 적용합니다. 그래서 HTML과 CSS는 따로 적혀 있어도 화면 위에서는 하나의 페이지로 만납니다.

이 흐름을 알면 CSS가 적용되지 않을 때도 어디를 살펴야 할지 감이 생깁니다. CSS 파일의 주소가 HTML의 link 태그와 맞는지, 선택자가 실제 HTML 요소를 고르는지, 속성과 값 사이의 콜론과 세미콜론이 제자리에 있는지를 차례로 보면 됩니다. 문제를 만났을 때 모든 코드를 한꺼번에 의심하기보다, ‘연결되었는가, 선택했는가, 약속을 바르게 적었는가’를 나누어 확인할 수 있습니다.

다음에는 서로 다른 CSS 규칙이 같은 요소를 고를 때 어떤 약속이 남는지, 왜 CSS 이름에 ‘Cascading’이라는 말이 들어 있는지를 더 살펴볼 수 있습니다. 지금은 한 규칙이 어떤 모양으로 이루어지고 어떻게 HTML에 닿는지 이해하는 것만으로 충분합니다. CSS의 기호는 복잡한 암호가 아니라, HTML 문서에게 보이는 모습을 건네는 짧고 분명한 문장입니다.

이 글의 핵심

CSS의 기본 규칙은 `선택자 { 속성: 값; }`의 흐름으로 읽습니다.

선택자는 대상을 고르고, 속성은 무엇을 바꿀지, 값은 어떻게 바꿀지 말합니다.

콜론은 속성과 값을 잇고, 세미콜론은 여러 약속을 구분합니다.

CSS는 외부 파일을 link로 연결하거나, head의 style 태그와 HTML의 style 속성으로 적용할 수 있습니다.

브라우저는 HTML 구조와 CSS 규칙을 함께 읽어 화면을 만듭니다.

목록으로

저작권 고시

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

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

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

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

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

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