CSS

CSS란?

CSS(Cascading Style Sheets)는 웹 페이지의 문서가 사용자에게 어떻게 보일지를 기술하는 스타일 언어이다. CSS는 정보와 디자인을 분리하고, 문서의 레이아웃과 스타일을 정의하며 HTML로 작성된 정보를 꾸며주는 역할을 한다.
CSS의 한 속성(CSS Rule)은 다음으로 구성된다.

Selector(선택자){Property(속성):Property value(속성값)}

  • 선택자: 디자인을 적용할 HTML 영역을 정의한다.
  • 속성: 어떤 디자인을 적용할지 정의한다.
  • 속성값: 속성이 수행할 구체적인 역할을 명시한다 (세미콜론 필수 입력).
속성과 속성값을 합쳐 선언(declaration)이라고 한다.

CSS의 세 가지 적용 방법

  1. 인라인: <div style="..."></div>
  1. 인터널: <style></style> 내부에 작성
  1. 익스터널: <link rel='stylesheet' href='style.css'>
      2. → 각각의 문서가 따로 관리되어 상대적으로 가독성이 높고 유지보수가 쉽다.

Cascading의 조건

CSS 우선순위를 결정하는 세 요소는 다음과 같다.
  • 순서: 나중에 적용한 속성값의 우선순위가 높음 (!important로 우선순위를 변경할 수 있음).
  • 선택자 디테일: 더 구체적으로 작성할수록 우선순위가 높음.
  • 선택자 종류: 인라인 > ID > 클래스 > 타입

CSS 방법론

CSS의 작명 규칙

  • 유지 보수를 위해 해당 태그의 CSS에 명확한 의미를 드러낼 수 있도록 작명.
  • 소문자와 숫자만 이용하여 작명.
  • 여러 단어의 조합은 또는 _ 을 이용해 작명.

선택자(Selector) 유형

  • Type: 태그 선택자 (예: div).
  • Class: 태그의 별명 (예: .class).
  • ID: 태그의 이름 (예: #id).
  • ID 선택자: 그 페이지에서 해당 ID를 가진 유일한 요소를 선택 (#id {}).
  • 클래스 선택자: 그 페이지에서 해당 클래스를 가진 모든 요소를 선택 (.class {}).
  • 속성 선택자: 특정 속성을 가진 모든 요소를 선택 (img[src] {}는 <img src='...' >를 선택, <img>는 미지정).
  • 의사 클래스 선택자: 특정 상태의 요소를 선택 (a:hover는 <a> 중 hover 상태인 요소만 선택).

블록(Block)

  • 재사용할 수 있는 기능적으로 독립된 페이지 구성 요소.
  • HTML에서 블록은 클래스 속성으로 표시된다.
  • 각 블록은 형태나 속성이 아닌 목적에 맞게 결정해야 한다.
  • 각 블록은 환경에 영향을 받지 않아야 한다.

요소(Element)

  • 블록 내에서 특정 기능을 담당하는 부분.
  • block__element 형태로 네이밍.

수식어(Modifier)

  • 블록이나 요소의 모양 또는 상태를 결정한다.
  • block__element--modifier 형태로 네이밍.

CSS 속성

모던 웹 개발에서 주로 사용되는 CSS 속성에는 아래의 개념들이 포함된다.

position

  • relative: 상대 위치
    • 정적 위치(static)를 기준으로 위치를 변경하고 싶을 때.
  • absolute: 절대 위치
    • 특정 부모 요소를 기준으로 절대적인 위치에 두고 싶을 때.
    • 특정부모: position이 relative / fixed / absolute인 부모 요소.
    • 절대적 위치: top / bottom / left / right.
  • fixed: 고정 위치
    • 뷰포트를 기준으로 위치를 선정하여 스크롤과 상관없이 같은 위치에 고정.
  • static: 정적 위치
    • HTML의 기본 값으로, 우측 상단 정렬.
    • top / bottom / left / right가 적용되지 않음.
  • sticky
    • 상대 위치와 고정 위치의 중간. 웹 페이지에서 relative 상태로 있다가 유저의 스크롤에 반응하여 fixed.

display

요소를 어떻게 보여줄지 결정한다.
  • none: 요소를 보여주지 않고 삭제.
  • block: 가로 영역을 전부 차지. width, height를 지정할 수 있지만, 다음 요소는 개행되어 나타남 (예: div, p, h, li 등의 HTML 태그).
  • inline: 개행되지 않고 width, height를 지정할 수 없음 (예: span, b, strong, i 등의 HTML 태그).
  • inline-block: width, height는 지정할 수 있지만 개행되지 않음.

flex

flexible-box를 사용할 수 있는 display 속성. 각각의 요소를 item으로 보고 item들을 효과적으로 정렬하고 배치할 수 있도록 도와줌. flex는 부모 역할을 하는 container 관점과 자식 역할을 하는 item 관점에서 볼 수 있다.

Container 관점

  • flex-direction: 내부의 item들을 어떤 순서와 방향으로 정렬할지 선택
      • .container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • flex-wrap: flex는 item을 한 줄 정렬이 기본 값인데, 줄바꿈을 하고 싶을 때 사용
      • .container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • justify-content: 메인 축을 중심으로 여러 item들을 여백과 함께 정렬하는 방식 지정
      • .container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
  • align-content: flex-wrap을 사용하여 item이 여러 줄로 존재할 때 여백과 함께 정렬하는 방식 지정
      • .container {
  align-content: stretch | flex-start | flex-end | center | space-between | space-around | start | end;
}
  • align-items: container 안에서 item들 간의 세로 정렬을 하는 데 쓰인다.
      • .container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

Item 관점

  • order: 각각의 item은 HTML에 나열된 순서로 우선 순위가 매겨지는데, 이 순서를 지정하고 싶을 때 사용.
  • flex-grow: 각 item들이 공간을 차지할 비율을 결정한다.