Published on

[2] 기초 웹 입문 가이드: CSS 기초

Authors
  • avatar
    Name
    Gecko Baem
    Twitter

CSS (Cascading Style Sheets)는 HTML로 작성된 웹 페이지의 모양과 레이아웃을 꾸며주는 스타일 시트 언어이다. 폰트, 색상, 여백, 배치 등을 자유롭게 조절하여 웹 페이지를 원하는 디자인으로 만들 수 있다.

CSS가 나온 뒤, UI/UX를 더욱 세심히 관리할 수 있게 되었다.

1. CSS 기본 문법

CSS는 선택자(selector)와 속성(property), 값(value)으로 구성된다.

CSS

선택자 {
    속성: 값;
    속성: 값;
    속성: 값;
}
  • 선택자: 스타일을 적용할 HTML 요소를 선택한다 (예: h1, p, div).
  • 속성: 요소의 어떤 부분을 변경할지 지정한다 (예: color, font-size, margin).
  • 값: 속성에 대한 구체적인 값을 설정한다 (예: red, 16px, 10px).

2. CSS 기본 적용 방법

CSS는 아래와 같은 방법으로 HTML에 적용할 수 있다.

  • 인라인 스타일: HTML 태그 안에 style 속성을 사용하여 직접 스타일을 지정한다.
  • 내부 스타일 시트: <head> 태그 안에 <style> 태그를 사용하여 스타일을 작성한다.
  • 외부 스타일 시트: 별도의 .css 파일을 만들어 <head> 태그 안에 <link> 태그로 연결한다. (일방적으로 가장 많이 채택됨)

3. CSS 기본 선택자

  • 태그 선택자: HTML 태그 이름을 그대로 사용하여 해당 태그에 스타일을 적용한다 (예: h1, p).
  • 클래스 선택자: .으로 시작하는 이름을 사용하여 여러 요소에 동일한 스타일을 적용한다 (예: .box, .highlight).
  • 아이디 선택자: #으로 시작하는 이름을 사용하여 특정 요소에 고유한 스타일을 적용한다 (예: #header, #footer).

4. CSS 박스 모델

모든 HTML 요소는 콘텐츠(content), 패딩(padding), 테두리(border), 여백(margin)으로 구성된 박스 형태로 생각할 수 있다. 이러한 박스 모델을 이해하면 요소의 크기와 간격을 조절하는 데 도움이 되기 때문에, 디자인을 더욱 다양하게 만들 수 있다.

5. CSS 기본 속성

  • 글꼴: font-family, font-size, font-weight, color
  • 텍스트: text-align, line-height, text-decoration
  • 배경: background-color, background-image
  • 박스: width, height, padding, margin, border
  • 레이아웃: display, position, float

CSS 학습 자료 추천

  • TCP School: 완전한 한국어 문서, 핵심 내용 제공
  • Codecademy: 인터랙티브한 CSS 학습 코스 제공
  • MDN Web Docs: CSS에 대한 상세한 설명과 예제 제공
  • edwith: CSS 강의 및 실습 자료 제공
View on GitHub