웹 개발 필수 기술 CSS의 기본 개념

CSS(Cascading Style Sheets)는 웹 페이지의 외관과 레이아웃을 정의하기 위해 사용되는 스타일시트 언어입니다. HTML이 문서의 구조와 콘텐츠를 정의하는 데 사용된다면, CSS는 그 문서를 꾸미고 사용자에게 더 나은 시각적 경험을 제공하는 데 중점을 둡니다. CSS의 기본 개념과 기능을 자세히 설명하면 다음과 같습니다.

1. CSS의 기본 문법

CSS는 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 선언 블록은 중괄호 {}로 둘러싸여 있으며 스타일 속성과 그 값을 포함합니다. 예를 들면:

h1 {
  color: blue;
  font-size: 24px;
}

위 코드에서 h1은 선택자이고, color: blue;와 font-size: 24px;는 선언입니다.

2. 선택자(Selectors)

선택자는 스타일을 적용할 요소를 지정합니다. 다양한 선택자가 있으며, 다음은 주요 선택자의 종류입니다.

- 기본 선택자: HTML 요소를 직접 선택합니다.

p {
  color: red;
}

- 클래스 선택자: 특정 클래스 속성을 가진 요소를 선택합니다. 클래스는 점(.)으로 시작합니다.

.highlight {
  background-color: yellow;
}

- 아이디 선택자: 특정 아이디 속성을 가진 요소를 선택합니다. 아이디는 샵(#)으로 시작합니다.

#header {
  text-align: center;
}

- 속성 선택자: 특정 속성을 가진 요소를 선택합니다.

input[type="text"] {
  border: 1px solid black;
}

- 자손 선택자: 특정 요소의 자손 요소를 선택합니다.

div p {
  font-size: 16px;
}

- 후손 선택자: 특정 요소의 직접 자식 요소를 선택합니다.

ul > li {
  list-style-type: none;
}

3. 상속(Inheritance)

CSS에서 일부 속성은 부모 요소에서 자식 요소로 상속됩니다. 예를 들어, 텍스트 관련 속성(color, font-family)은 상속됩니다. 상속되지 않는 속성도 있는데, 예를 들어 border, margin, padding 등 레이아웃 관련 속성은 상속되지 않습니다.

4. 상충(Cascade)과 우선순위(Specificity)

CSS는 '계단식(Cascading)'이라는 특성을 가지며, 여러 스타일 규칙이 동일한 요소에 적용될 때 우선순위를 따져 스타일을 결정합니다. 우선순위는 다음 순서로 결정됩니다:

인라인 스타일: HTML 요소의 style 속성에 직접 작성된 스타일이 가장 높은 우선순위를 가집니다.
아이디 선택자: #id 형태의 선택자가 두 번째로 높은 우선순위를 가집니다.
클래스, 속성, 가상 클래스 선택자: .class, [attr=value], :hover 형태의 선택자가 그 다음 우선순위를 가집니다.
요소 선택자: div, p와 같은 요소 선택자가 가장 낮은 우선순위를 가집니다.
스타일 시트의 위치: 스타일 시트가 HTML 문서에 포함된 위치에 따라 우선순위가 달라집니다. 나중에 작성된 스타일이 먼저 작성된 스타일을 덮어씁니다.

5. 박스 모델(Box Model)

CSS에서 모든 HTML 요소는 박스 모형(Box Model)으로 표현됩니다. 박스 모델은 다음 네 가지 구성 요소로 이루어져 있습니다:

- 콘텐츠(Content): 요소의 실제 콘텐츠가 위치합니다.

- 패딩(Padding): 콘텐츠 주위의 여백으로, 배경색이 적용됩니다.

- 테두리(Border): 패딩 외부의 경계선입니다.

- 마진(Margin): 테두리 외부의 여백으로, 배경색이 적용되지 않습니다.

박스 모델은 요소의 전체 크기를 계산하는 데 중요한 역할을 합니다. 예를 들어, 요소의 너비와 높이를 설정할 때 패딩과 테두리를 고려해야 합니다.

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

위 예시에서 요소의 전체 너비는 150px (100px + 10px + 10px + 5px + 5px + 20px + 20px)입니다.

6. 레이아웃(Layout)과 배치(Positioning)

CSS는 다양한 방식으로 요소를 배치할 수 있는 기능을 제공합니다:

- 정적 배치(Static Positioning): 기본 배치 방식으로, 요소가 문서 흐름에 따라 배치됩니다.

- 상대 배치(Relative Positioning): 요소를 자신의 기본 위치를 기준으로 이동시킵니다.

- 절대 배치(Absolute Positioning): 요소를 문서 흐름에서 제거하고, 가장 가까운 위치 조상 요소를 기준으로 배치합니다.

- 고정 배치(Fixed Positioning): 요소를 문서 흐름에서 제거하고, 뷰포트를 기준으로 고정합니다.

- 플렉스 박스(Flexbox): 일차원 레이아웃 모델로, 컨테이너 내의 항목을 효율적으로 배치하고 정렬할 수 있게 합니다.

- 그리드 레이아웃(Grid Layout): 이차원 레이아웃 모델로, 행과 열을 사용하여 요소를 배치합니다.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

7. 미디어 쿼리(Media Queries)

미디어 쿼리는 반응형 웹 디자인을 가능하게 하는 기능으로, 디바이스의 너비, 높이, 해상도 등에 따라 다른 스타일을 적용할 수 있습니다.

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

위 예시는 화면의 너비가 600px 이하일 때 배경색을 바꿉니다.

8. CSS 전처리기(Preprocessors)

CSS 전처리기는 CSS를 더 효율적으로 작성하고 관리할 수 있게 도와주는 도구입니다. SASS, LESS 등이 대표적인 전처리기입니다. 이들은 변수, 중첩 규칙, 믹스인, 상속 등의 기능을 제공합니다.

$primary-color: blue;

body {
  color: $primary-color;
}

위 SASS 코드는 전처리 후 일반 CSS로 변환됩니다.

결론

CSS는 웹 페이지의 스타일을 정의하고, 사용자 경험을 향상시키는 데 필수적인 도구입니다. 선택자, 상속, 우선순위, 박스 모델, 레이아웃, 미디어 쿼리 등 다양한 개념을 이해하고 활용하면 더 나은 웹 디자인을 구현할 수 있습니다. 또한 CSS 전처리기를 사용하면 코드의 재사용성과 유지 보수성을 높일 수 있습니다.

다음 포스팅은 웹 개발의 필수 기술인 JavaScript에 대한 기본 개념을 자세하게 설명해드리겠습니다.

저작자표시 비영리 변경금지

Tomtomi's blog