[Web Design] 디자인이 직접 구현되는 언어: CSS 기초 용어 완벽 정리

웹의 뼈대와 옷, HTML과 CSS의 관계

웹 사이트를 만드는 과정은 건물을 짓는 것과 비슷하다. HTML이 건물의 구조를 잡는 뼈대라면, CSS(Cascading Style Sheets)는 그 건물에 색을 칠하고 조명을 다는 인테리어 작업이다. 인터랙티브 미디어 디자인을 전공하며 시각적인 결과물을 만들어낼 때, CSS는 디자이너의 의도를 웹 브라우저에 투영하는 가장 강력한 도구가 된다. 수업 시간에 배운 내용을 바탕으로 CSS의 가장 기본적인 구성 요소와 용어들을 다시 한번 자세히 짚어보려고 한다. 

 

1. CSS 구문의 기본 구조 (Rule Set)

CSS는 브라우저에게 스타일 규칙을 전달하는 일종의 매뉴얼 북 같은 개념이다. 하나의 규칙은 다음과 같은 요소들로 구성된다. 이러한 요소들이 모여 하나의 스타일 규칙을 완성하며, 각 선언 끝에는 반드시 세미콜론(;)을 붙여 문장의 마침표 역할을 하게 해야 한다.

• 선택자 (Selector): 스타일을 적용할 대상을 지정한다. h1, p와 같은 HTML 태그가 대표적이다.
• 속성 (Property): 바꾸고 싶은 디자인 요소를 말한다. color, font-size 등이 여기에 해당한다.
• 값 (Value): 속성에 부여할 구체적인 수치나 설정이다. red, 16px 등이 값이다.
• 선언 (Declaration): 속성과 값을 합친 형태(color: blue;)를 선언이라 부른다.

HTML내에서 css reset 하는 과정

2.  브라우저 식별 기호 자세히 알아보기

Step 1: Syntax Parsing - 브라우저 식별 메커니즘

CSS 선택자 앞에 점(.)을 찍는 것은 브라우저에게 이 단어가 HTML 태그가 아닌 사용자 정의 별명(클래스) 임을 알려주는 필수적인 약속이다. 즉, 브라우저가 CSS 문서를 해석(Parsing)할 때, 선택자의 첫 글자를 보고 어떤 검색 방식을 사용할지 결정하기 때문에 식별 기호는 매우 중요하다. 

• 기호 없음: p, div, h1 등 표준 HTML 태그를 찾으라는 명령.
• 점(.) 사용: HTML 문서 내에서 class="이름" 속성을 가진 모든 요소를 찾으라는 명령.
• 샵(#) 사용: HTML 문서 내에서 id="이름" 속성을 가진 단 하나의 고유 요소를 찾으라는 명령.

Step 2: Conflict Resolution - 태그와 클래스 간의 충돌 방지 

만약 점(.)과 같은 식별자가 없다면 브라우저는 클래스 이름과 HTML 태그 이름을 구분할 수 없게 된다.

• 논리적 충돌: 개발자가 특정 영역에 main이라는 이름을 붙이고 싶을 때, .main이라고 쓰지 않고 main이라고만 쓰면 브라우저는 이를 HTML5의 <main> 태그로 인식하여 디자인을 적용한다.
• 구문 규칙: 점(.)을 접두사로 사용함으로써 사람이 임의로 만든 이름임을 명확히 구분한다. 이는 프로그래밍 언어에서 변수 명명 규칙과 유사한 논리적 장치이다.

Step 3: Practical Utility - 디자인의 반복과 통일성 유지하기

인터랙티브 미디어 디자인 과정에서 강조되는 디자인 원칙인 반복(Repetition)과 통일성(Unity)을 웹 환경에서 효율적으로 구현하기 위해 클래스 선택자는 핵심적인 역할을 한다.

• 다중 적용의 유연성: 태그 선택자는 해당 태그를 사용하는 모든 곳에 일괄적으로 영향을 주지만, 클래스는 디자이너가 원하는 특정 요소들에만 선택적으로 적용할 수 있다.
• 디자인 시스템 구축: Montserrat와 같은 특정 폰트 스타일이나 수업에서 배운 컬러 스와치를 클래스로 만들어 두면, 필요한 곳마다. font-style 또는 .brand-color와 같이 클래스만 추가하여 일관된 시각적 계층 구조를 유지할 수 있다.

실제 웹페이지 만드는 과정에 쓰인 css 기호들

 

3. 대상을 찾는 법: 선택자 (Selectors)의 종류

작업하면서 가장 헷갈리기 쉬운 부분 중 하나가 바로 선택자이다. 어떤 대상을 정교하게 고르느냐에 따라 디자인의 효율성이 달라진다.

• 요소 선택자 (Type Selector): p, h2 처럼 HTML 태그 이름을 그대로 사용한다. 해당 태그를 사용하는 모든 요소에 스타일이 적용된다.
• 클래스 선택자 (Class Selector): 특정 그룹에만 스타일을 주고 싶을 때 사용한다. HTML에서 class="name"으로 정의하고 CSS에서는 .name 처럼 앞에 점(.)을 찍어 표시한다.
• 아이디 선택자 (ID Selector): 페이지 내에서 단 하나뿐인 고유한 요소에 스타일을 적용한다. 이름 앞에 샵(#)을 붙여 #header 와 같이 표기한다.

 

4. 웹 디자인의 핵심: 박스 모델 (Box Model)

모든 HTML 요소는 사실 사각형 모양의 박스 안에 들어있다. 이 박스의 구조를 이해하는 것이 레이아웃 디자인의 핵심이다. 디자인 접근성(Accessibility)을 고려할 때도 이 박스 모델의 간격을 적절히 조절하여 사용자에게 충분한 시각적 여유를 주는 것이 중요하다.

• 콘텐츠 (Content): 텍스트나 이미지가 실제로 들어있는 영역이다.
• 패딩 (Padding): 콘텐츠와 테두리(Border) 사이의 안쪽 여백이다.
• 테두리 (Border): 패딩과 마진 사이의 경계선이다.
• 마진 (Margin): 테두리 밖의 바깥쪽 여백으로, 다른 요소와의 간격을 결정한다.

 

5. 타이포그래피 제어 (Typography Styles)

폰트에 관심이 많은 디자이너로서 CSS의 폰트 관련 속성들은 특히 흥미롭다.

• font-family: 글꼴을 지정한다. 선호하는 서체를 우선순위로 두고 시스템 기본 서체를 보조로 설정하는 방식을 취한다.
• font-size: 글자의 크기를 결정한다. 가독성을 위해 적절한 크기를 설정하는 것이 필수적이다.
• line-height: 행간을 조절한다. 인디자인의 리딩(Leading) 기능과 유사하며, 글의 가독성에 직접적인 영향을 미친다.

 

기초가 탄탄한 디자인을 향하여

수업 시간에 쏟아지는 새로운 용어들이 처음에는 너무 낯설고 수업을 따라가기에만 바빴다. 하지만 CSS의 기본 구문과 박스 모델의 원리를 이해하는 것만으로도 웹 페이지가 구성되는 방식을 훨씬 깊이 있게 파악할 수 있다는 걸 새삼 배웠다. 아직까지도 외워야 할 것도 능숙해지도록 익혀야 할 것도 많지만, 이번에 직접 웹사이트를 만들어보는 과정이 많이 CSS 사용의 중요성이 많이 와닿았다. 앞으로 진행될 프로젝트에서도 CSS의 다양한 속성들을 실험하며 사용자에게 최적화된 인터랙티브 미디어를 구현해 나갈 계획이다.