🖍

CSS?


CSS(Cascading Style Sheets)는 HTML 같은 문서를 화면이 어떻게 표시하는지 기술한 언어다. 즉, CSS를 사용하면 웹 페이지에 스타일과 레이아웃을 적용할 수 있다.

HTML5 이전 버전에서는 style을 작성할 수 있는 태그(font, center)가 존재해서 CSS 없이도 어느 정도 스타일 표현이 가능했다. 하지만 이렇게 작성된 HTML은 정보와 구조만을 나타내지 않고 본래 역할과 동떨어진 기능이 추가되어 혼란스럽게 됐다.

이를 해결하기 위해 HTML5에서는 HTML은 정보와 구조화, CSS는 스타일 정의라는 각각 임무의 명확한 구분이 이루어졌다.

기본 문법

CSS는 HTML 요소를 꾸미는 데 목적을 둔다. 따라서, 어떤 HTML 요소를 선택할 수 있어야 할 것이다. 이때 사용하는 것이 'selector(선택자)'다.

1h1 {
2 color: red;
3 font-size: 12px;
4}

위 예제에서 선택자는 h1이며, 선택자에 적용할 스타일은 선언 블록에서 정의한다. 위와 같은 구문을 'rule set'이라고 하며, rule set의 집합을 '스타일 시트'라고 한다.

선택자로 사용할 수 있는 것은 요소, 클래스, 아이디, 속성 등과 이를 같이 쓰는 복합 선택자도 있다. 더 다양한 선택자에 대한 자세한 내용은 MDN에서 확인하자.

선언 블록 안에서 스타일은 <속성>: <값>; 형태로 정의한다. 속성은 표준 스펙으로 이미 지정되어 있는 것만 사용가능하다.

CSS 적용 방법

일반적으로 HTML에 CSS를 연동하는 방법에는 3가지가 있다.

Link style

HTML 외부에 있는 CSS 파일을 로드하는 방식으로 가장 많이 사용된다.

1<!DOCTYPE html>
2<html>
3 <head>
4 <link rel="stylesheet" href="css/style.css">
5 </head>
6 <body>
7 <h1>Hello World</h1>
8 <p>This is a web page.</p>
9 </body>
10</html>

Embedding style

HTML 내부에 CSS를 포함시키는 방식이다. 사용에는 문제가 없지만, 이렇게 사용하면 HTML과 CSS를 분리한 이유가 없어지니 link style을 사용하는 것이 권장된다.

1<!DOCTYPE html>
2<html>
3 <head>
4 <style>
5 h1 { color: red; }
6 p { background: aqua; }
7 </style>
8 </head>
9 <body>
10 <h1>Hello World</h1>
11 <p>This is a web page.</p>
12 </body>
13</html>

Inline style

HTML 요소의 style 속성에 CSS를 작성하는 방식이다. 이것 또한 별로 권장되지 않는다.

1<!DOCTYPE html>
2<html>
3 <body>
4 <h1 style="color: red">Hello World</h1>
5 <p style="background: aqua">This is a web page.</p>
6 </body>
7</html>
8

CSS 적용 순위

요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. 여러 선언으로 인한 충돌을 방지하기 위해서는 CSS가 적용되는 우선순위가 필요하다. 이렇게 적용된 우선순위를 캐스캐이딩(cascading order)라고 한다.

캐스캐이딩은 세가지 규칙을 가진다.

  • 중요도: CSS가 어디에 선언 되었는지에 따라 우선순위가 달라진다.

    1. head 안의 style 요소
    2. head 안의 style 요소 안의 @import
    3. <link>로 연결된 CSS 파일
    4. <link>로 연결된 CSS 파일 안의 @import
    5. 브라우저 디폴트 스타일시트
  • 명시도: 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.

1!important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 > 전체 > 상속된 속성
  • 선언순서: 나중에 선언된 스타일이 우선 적용된다.

Default 스타일

모든 웹 브라우저는 브라우저가 내장하고 있는 기본 스타일을 가지고 있다. 따라서, 같은 CSS 파일이라도 브라우저마다 렌더 결과가 달라질 수도 있다.

이를 방지하기 위해서는 기본 스타일을 초기화하는 것이 필요하다. 이때 'Reset CSS'를 사용할 수 있다.

Reset CSS는 말 그대로 HTML 요소의 CSS를 초기화하는 용도로 사용한다. 브라우저 별 디폴트 스타일을 하나의 스타일로 통일시켜 렌더 결과를 통일시킬 수 있다.

Reset CSS를 직접 작성하여 사용할 수도 있겠지만... 그건 너무 귀찮다. 이미 잘 만들어진 것을 사용하도록 하자.

참고로 이 블로그에는 'normalize.css'를 사용했다.

박스 모델

모든 HTML 요소는 박스 형태의 영역을 가지고 있다.

박스는 content, padding, border, margin으로 구성된다.

  • Content: 실질적인 내용 부분
  • Padding: 내용과 테두리 사이 간격
  • Border: 내용과 패딩을 감싸는 테두리
  • Margin: 테두리와 이웃하는 요소 사이의 간격

CSS에 요소의 width를 지정하면 content만을 대상으로 한다. 따라서 요소의 넓이는 width, margin, padding, border의 값을 모두 더해 구해야한다.

display 속성: 블록과 인라인

HTML 요소는 기본적으로 block 또는 inline 특성을 가진다.

block 요소는 아래와 같은 특성을 가진다.

  • 항상 새로운 라인에서 시작한다.
  • 화면 크기 전체의 가로폭을 차지한다.
  • width, height, margin, padding 속성 지정이 가능하다.
  • block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다.

inline 요소는 아래와 같은 특성을 가진다.

  • 새로운 라인에서 시작하지 않는다.
  • content의 너비만큼 가로폭을 차지한다.
  • width, height, margin-top, margin-bottom 속성을 지정할 수 없다.
  • inline 레벨 요소 내애 block 레벨 요소를 포함할 수 없다.
  • a, img, span 등이 대표적인 인라인 태그다.

position 속성

position 속성으로 요소의 위치를 정의할 수 있다.

  • static(기본)
    기본적인 요소의 배치 순서에 따라 위에서 아래로, 왼쪽에서 오른쪽으로 순서에 따라 배치된다. 부모 요소가 있다면, 부모 요소의 위치를 기준으로 배치된다.

  • relative(상대위치)
    기본 위치를 기준으로 좌표 속성(top, bottom, left, right)를 사용해 위치를 이동한다.

  • absolute(절대위치)
    부모 요소 또는 가장 가까이 있는 조상 요소(static 제외)를 기준으로 위치한다. 만일 부모 또는 조상 요소가 static이면 document body를 기준으로 위치한다. absolute 선언 시 block 레벨 요소의 넓이는 inline 요소와 같이 content에 맞게 변화되기 때문에 적절한 width를 지정해야 한다.

  • fixed(고정위치)
    부모 요소와 관계없이 브라우저의 viewport를 기준으로 위치한다. 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다. fixed 선언 시 block 레벨 요소의 넓이는 inline 요소와 같이 content에 맞게 변화되기 때문에 적절한 width를 지정해야 한다.


참조:
https://poiemaweb.com/
https://developer.mozilla.org/ko/docs/Web/CSS