HTML&CSS 시작하기
CSS 시작하기
CSS
CSS는 Cascading Style Sheets의 약자로
HTML 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다.
HTML이 뼈대라면 CSS는 이 문서를 꾸미는 옷입니다.
예를 들어, 글꼴, 색상, 여백, 배경 이미지 등을 지정하여 웹페이지를 디자인할 때 사용됩니다. 이 글에서는 CSS를 작성하는 세 가지 방법과 기본 문법, 그리고 가장 자주 쓰는 속성들을 정리합니다.
CSS 작성하기 - 세 가지 방식
CSS를 HTML에 적용하는 방법은 세 가지가 있습니다.
1. 인라인 방식
요소 안에 style 속성으로 직접 추가합니다.
<p style="color: red">안녕하세요</p>
color는 '글씨 색상'을 주는 CSS 속성입니다. 가장 간단하지만, 태그마다 일일이 적어야 하고 나중에 고치기도 어려워서 실무에서는 잘 쓰지 않습니다.
2. 내부 스타일 시트
head의 style 태그 안에 작성합니다.
<style> p { color: red; } </style>
한 파일 안에서 스타일을 모아 관리할 수 있지만, 페이지가 여러 개라면 같은 스타일을 매 페이지마다 복사해야 합니다.
3. 외부 스타일 시트 (임포트 방식) — Best!
CSS 파일을 따로 생성하여 HTML에 연결합니다. 실무 표준 방식입니다.
- title 아래에 자동 완성 코드
link:css입력 후Tab키 - 생성된 코드의 style.css 부분을
Ctrl+ 클릭 - 파일 만들기 버튼 클릭
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head>
외부 방식이 Best인 이유는 분업 때문입니다. 구조(HTML)와 스타일(CSS)을 파일로 분리하면, 하나의 CSS 파일을 여러 HTML 페이지가 공유할 수 있습니다. 색상 하나를 바꿔야 할 때 CSS 파일 한 곳만 수정하면 사이트 전체에 반영됩니다.
CSS 작성법 - 선택자, 속성, 값
CSS 문법은 세 부분으로 이루어집니다.
h1 { color: red; }
- 선택자 — 스타일을 적용할 HTML 요소를 선택 (
h1) - 속성 — 요소의 특정 스타일을 지정 (
color) - 값 — 값의 종류 정의 (
red)
속성과 값 사이는 콜론(:)으로 구분하고, 문장의 끝은 세미콜론(;)으로 마칩니다. 초보 단계에서 스타일이 적용되지 않는 원인 1순위가 이 세미콜론 누락입니다. 한 줄이 끝날 때마다 세미콜론을 찍는 습관을 들이세요.
이렇게 style.css에 작성하면, link로 연결된 index.html의 모든 h1이 빨간색이 됩니다.
Width & Height - 너비와 높이
div { width: 970px; height: 450px; }
- width — 너비 (px, %, vw...)
- height — 높이 (px, %, vh...)
피그마에서 프레임을 선택하면 보이는 W, H 값과 정확히 같은 개념입니다. px은 고정 크기, %는 부모 요소 대비 비율, vw/vh는 화면(뷰포트) 대비 비율입니다.
VSCode에서는 축약 입력으로 빠르게 작성할 수 있습니다. w + Tab → width, h + Tab → height.
Color 와 Background
- color — 글씨색
- background (background-color) — 배경색
두 속성 모두 color name / HEX code / rgba 세 가지 방식으로 값을 지정합니다.
color: red; /* color name */ color: #FF3797; /* HEX code */ color: rgba(255, 255, 255, 0.5); /* rgba */ background: red; background: #FF3797; background: rgba(255, 255, 255, 0.5);
rgba의 네 값은 순서대로 red, green, blue, alpha(opacity)입니다. 각 색상 값은 0~255, 마지막 alpha는 0(완전 투명)부터 1(완전 불투명) 사이의 숫자로, 반투명한 색을 만들 때 사용합니다. 피그마에서 복사한 HEX 코드를 그대로 붙여넣으면 되기 때문에 실무에서는 HEX를 가장 많이 씁니다.
축약 입력: c + Tab → color, bg + Tab → background.
border - 테두리
테두리는 세 가지 속성으로 이루어집니다.
- 테두리의 너비(굵기) —
border-width: 1px - 테두리 선 스타일 —
border-style: solid - 테두리 색상 —
border-color: #00FF00
세 줄을 각각 쓰는 대신 한 줄로 축약할 수 있습니다.
border: 1px solid #00FF00;
굵기, 스타일, 색상 순서로 띄어쓰기로 구분해 적습니다. 피그마의 Stroke 패널에서 색상, 두께, Stroke style(Solid)을 지정하는 것과 일대일로 대응합니다. solid 자리에 dashed(점선), dotted(점 점선)를 넣으면 선 모양이 바뀝니다.
축약 입력: bd + Tab → border.
부모-자식 관계를 가지는 요소들의 계층 구조
html은 부모, 자식 관계가 있습니다.
들여쓰기/내어쓰기로 정리할 수 있고,
피그마의 레이어 구조와 비슷합니다.
<body> <div> <p>안녕하세요</p> </div> </body>
- body의 자손은 div, p
- div의 자식은 p
- p의 부모는 div
- p의 조상은 body
피그마에서 프레임 안에 프레임을 넣듯, HTML도 태그 안에 태그가 중첩되며 트리 구조를 이룹니다. 바로 한 단계 아래면 자식, 그 아래까지 전부 포함하면 자손입니다.
이 관계를 알아야 하는 이유는 CSS 때문입니다. CSS의 C가 Cascading(폭포처럼 흐르는)인 것처럼, color 같은 속성은 부모에 지정하면 자식에게 상속되어 내려갑니다. 또한 "div 안의 p만 선택"처럼 관계를 이용한 선택자를 쓰게 되므로, 부모/자식/자손이라는 용어는 앞으로 계속 등장합니다.