웹사이트를 처음 만들다 보면 "왜 이렇게 생겼지?"라는 의문이 듭니다. 뭔가 밋밋한 느낌, 정돈되지 않은 레이아웃. 바로 그 원인을 해결해 주는 것이 바로 CSS입니다. 이번 글에서는 CSS의 기본 개념부터 실습 예제까지 폭넓게 다루어 웹디자인의 첫걸음을 함께 내딛어 봅니다. CSS, CSS디자인, 선택자, UXUI디자인 등 핵심 키워드를 중심으로 이해하기 쉽게 설명하겠습니다.
CSS 기초: 웹문서를 꾸며주는 디자인 언어
CSS의 개념과 역할
CSS(Cascading Style Sheets)는 HTML의 구조 위에 시각적 스타일을 입히는 언어입니다. HTML은 뼈대, CSS는 그 뼈대에 옷을 입히는 역할을 하죠. 색상, 폰트, 여백, 위치, 애니메이션까지 모두 CSS의 영역입니다.
CSS 적용 방식
CSS는 인라인, 내부 스타일, 외부 스타일시트 세 가지 방식으로 적용할 수 있습니다. 인라인은 HTML 내부에서 직접 스타일을 작성하고, 내부 스타일은 <style> 태그를 이용하며, 외부 스타일시트는 별도의 .css 파일을 만들어 <link>로 연결합니다. 일반적으로 유지보수와 확장성을 위해 외부 스타일시트를 권장합니다.
| 적용 방식 | 위치 | 장점 | 단점 |
| 인라인 스타일 | 태그 안 | 빠른 적용 | 반복 시 코드 지저분함 |
| 내부 스타일시트 | <head> 안 | 하나의 문서에 집중 가능 | 다른 문서와 공유 어려움 |
| 외부 스타일시트 | 별도 파일 | 재사용성 우수 | 파일 분리로 관리 필요 |
선택자 이해하기: 디자인의 타겟을 정하자
기본 선택자 사용법
선택자는 HTML 요소를 선택하여 스타일을 적용하는 도구입니다. h1, p, body와 같이 태그 이름을 그대로 사용하는 기본 선택자부터 시작합니다. 이 방식은 문서 전체에 공통된 스타일을 적용할 때 유용합니다.
class와 id 선택자의 차이
class 선택자는 .을 사용하며, 여러 요소에 공통 스타일을 적용할 때 사용합니다. 반면 id 선택자는 #을 사용하며 문서 내 단 하나의 요소만 지정합니다. class는 반복 스타일, id는 고유 요소 스타일에 적합합니다.
| 선택자 | 종류 예시 | 특징 |
| 기본 선택자 | p, h1 | 태그 전체 적용 |
| class 선택자 | .menu | 여러 요소에 동일 스타일 적용 가능 |
| id 선택자 | #header | 문서 내 유일한 요소 지정 |
CSS 스타일 속성 익히기: 디자인의 핵심은 속성이다
자주 사용하는 속성들
- color, background-color : 텍스트와 배경의 색상 지정
- font-family, font-size : 글꼴과 글자 크기 설정
- margin, padding : 요소 외부/내부 여백 지정
- border : 테두리 선 설정
레이아웃 관련 속성
- display, position, flex, grid 등의 속성은 요소의 배치와 정렬에 중요한 역할을 합니다.
- 예: display: flex를 활용하면 다양한 화면 크기에 유연한 반응형 디자인이 가능합니다.
| 속성 | 설명 | 예시 |
| color | 텍스트 색상 | color: red; |
| padding | 안쪽 여백 | padding: 10px; |
| border | 테두리 스타일 | border: 1px solid black; |
UX/UI 디자인을 위한 CSS 활용
사용자 경험을 높이는 CSS
단순히 예쁜 사이트를 넘어서 사용자가 편안하게 정보를 얻을 수 있도록 돕는 것이 UX입니다. 버튼의 호버 효과, 명확한 타이포그래피, 적절한 여백 등은 모두 사용자 경험을 좌우합니다.
UI를 정리하는 레이아웃 구성
CSS의 Flexbox나 Grid를 활용하면 반응형 레이아웃 구성이 쉬워집니다. 화면 사이즈가 바뀌어도 내용이 흐트러지지 않고 깔끔하게 유지되죠.
| 항목 | UX/UI 예시 |
| 버튼 hover 효과 | button:hover { background-color: #444; color: #fff; } |
| 반응형 레이아웃 | display: flex; justify-content: space-between; |
'창업' 카테고리의 다른 글
| HTML 기초 완전 정복: 웹 문서의 첫걸음 (7) | 2025.07.31 |
|---|---|
| Git과 GitHub 설치 및 사용법: 협업 개발 도구 툴의 초록빛 잔디 심기 (3) | 2025.07.30 |
| 네트워크 개발자를 위한 CLI 터미널 명령어 기초 정리 (1) | 2025.07.09 |
| 내일배움카드 HRD 활용한 풀스택 개발자 과정 : VSCode 설치 (0) | 2025.07.08 |
| SNS 셀러를 위한 수수료 0% 판매 플랫폼 마케팅 전략 (0) | 2025.07.07 |
