Post

[CSS] 스타일시트 개요

HTML이 웹 페이지의 뼈대를 구성한다면 CSS는 그 뼈대에 옷을 입혀주는 언어 입니다. 즉, 웹 페이지의 디자인을 구성하는데 사용됩니다.

Posted
Preview Image
By
11 min read
[CSS] 스타일시트 개요

#01. CSS 개요

HTML로 구성된 페이지 골격에 디자인을 입히는 언어.

CSS(Cascading Style Sheets)는 웹 페이지의 외관과 서식을 담당하며, HTML과 분리하여 관리할 수 있습니다.

CSS의 장점

  1. 유지보수성: HTML과 디자인을 분리하여 관리
  2. 재사용성: 하나의 CSS 파일로 여러 HTML 페이지 스타일링
  3. 일관성: 전체 웹사이트의 통일된 디자인 적용
  4. 효율성: 파일 크기 최적화 및 로딩 속도 향상

1) 서술 방법

a) HTML문서에 의존한다.

<head>태그 안에 <style>태그를 명시하고 그 안에 서술한다.

1
2
3
4
5

<head>
    <style [type="text/css"]>
        ... CSS 구문 ...
    </style>
</head>

b) CSS구문만을 별도로 저장한 외부파일을 참조.

<style>~</style> 안에 명시하는 CSS 구문을 별도의 파일에 작성해 두고 HTML에서 해당 파일의 경로를 참조한다.

1

<link rel="stylesheet" [type="text/css"] href="파일의경로" />

c) HTML태그의 style속성을 활용

거의 사용 안함.

1

<div style="CSS구문"></div>

2) CSS 구문 구조

1
2
3
4
5

    selector {
        속성: 값;
        속성: 값;
        ...
    }
  • selector (선택자) : 디자인이 적용될 대상을 지정한다.
  • 속성: 값; : 하나의 디자인 속성을 명시한다.

#02. selector (선택자)

CSS가 적용될 대상을 지정하는 방법.

1) 표현방법 구분

태그이름

현재 웹 페이지 안에서 지정된 모든 태그에 적용된다.

1

h1 { color: red; }

class

앞에 점을 포함한 단어를 사용하여 selector를 정의하고 HTML태그의 class속성에서 점을 제외한 단어를 사용하여 연결한다.

태그 종류에 상관 없이 여러번 재사용이 가능하다.

주로 비슷한 모양의 디자인에 복수 적용된다. (예: 상품, 덧글 리스트)

1
2

.hello { color: red; }
<div class="hello"> </div>

id

앞에 #을 포함한 단어를 사용하여 selector를 정의하고 HTML태그의 id속성에서 #을 제외한 단어를 사용하여 연결한다.

하나의 HTML문서 안에서 다른 요소와 중복될 수 없다.

1
2

#hello {color: red; }
<div id="hello"> </div>

2) 여러 개의 선택자 사용하기

콤마로 구분하여 선택자를 여러개 명시하면 동시에 여러 요소가 같은 디자인 속성을 공유할 수 있다.

콤마로 구분하면 AND의 의미가 있다.

h1, h2, .myclass, #myid {
    ...
}

3) selector 조합하기

특정 요소를 자세하게 명시하고자 할 때 사용한다. (띄어쓰기 X)

태그이름 + class

1

  div.hello

태그이름 + id

1

  div#hello

4) 자식셀렉터

HTML의 계층구조를 순차적으로 “>”를 사용하여 표현한 것.

div > span > input.form_control {
    ...
}

1
2
3

<div>
    <span><input class="form_control" /></span>
</div>

5) 자손셀렉터

HTML의 계층구조를 공백을 사용하여 표현한 것. 반드시 순차적일 필요는 없다.

div span input.form_control {
    ...
}

1
2
3
4
5

<div>
    ... ? ...
    <span> ...?... <input class="form_control" /> ...?... </span>
    ... ? ...
</div>

6) 속성셀렉터

HTML태그의 속성과 값을 [] 안에 표현함

셀렉터설명
a[href]href라는 속성을 갖는 a태그 (값은 상관 없음)
a[href=”#”]href속성값이 “#”인 a태그 (값이 반드시 일치해야 함)
#hello[method=’post’]method속성의 값이 post인, id값이 hello인 어떤 태그
.choose[value=’123’]value속성의 값이 123인, class값이 choose인 어떤 태그

이 외에도 여러가지 표현 방법들이 있다.

7) 가상클래스

HTML요소가 어떤 상황을 직면했을”때” 적용되는 selector (~~할 때)

대부분 링크에 대해 적용한다.

가상클래스설명
link링크의 기본 상태
visited방문한 경험이 있는 링크
hover마우스가 올라가 있는 요소
active마우스가 눌러져 있는 요소
1
2
3
4

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

8) n번째 요소

CSS셀렉터가 복수 요소를 의미할 경우 그 중에서 몇 번째인지를 지정.

셀렉터설명
foo:first-childfoo라는 셀렉터를 갖는 요소 중에서 첫번째 요소
foo:last-childfoo라는 셀렉터를 갖는 요소 중에서 마지막 요소
foo:nth-child(2)foo라는 셀렉터를 갖는 요소 중에서 2번째
foo:nth-child(odd)홀수번째
foo:nth-child(2n)짝수번째
foo:nth-child(3n)3의 배수 번째
foo:nth-last-child(숫자)nth-child와 같은 규칙이지만 뒤에서부터 요소를 카운트

9) 최신 CSS 선택자 (CSS3+)

속성 선택자 고급 문법

선택자설명
[attr^="value"]attr 속성이 “value”로 시작하는 요소
[attr$="value"]attr 속성이 “value”로 끝나는 요소
[attr*="value"]attr 속성에 “value”가 포함된 요소
[attr~="value"]attr 속성에 “value”가 단어로 포함된 요소
1
2
3
4
5
6
7
8

/* 이메일로 시작하는 링크 */
a[href^="mailto:"] { color: blue; }

/* PDF 파일 링크 */
a[href$=".pdf"] { color: red; }

/* 전화번호 포함 */
a[href*="tel:"] { color: green; }

구조적 가상 선택자

1
2
3
4
5
6
7
8
9
10
11
12

/* 특정 타입의 첫 번째/마지막 */
p:first-of-type { font-weight: bold; }
p:last-of-type { margin-bottom: 0; }

/* 특정 타입의 n번째 */
h2:nth-of-type(2n) { color: blue; }

/* 유일한 자식 */
p:only-child { text-align: center; }

/* 빈 요소 */
p:empty { display: none; }

부정 선택자

1
2
3
4
5

/* class가 "special"이 아닌 모든 div */
div:not(.special) { opacity: 0.5; }

/* 첫 번째가 아닌 모든 li */
li:not(:first-child) { margin-top: 10px; }

10) 현대적 CSS 선택자

인접 형제 선택자

1
2
3
4
5

/* h2 바로 다음에 오는 p */
h2 + p { margin-top: 0; }

/* h2 이후에 오는 모든 p */
h2 ~ p { color: gray; }

CSS Grid와 Flexbox 관련 선택자

1
2
3
4
5
6
7
8
9

/* Grid 아이템 선택 */
.grid-container > :nth-child(3n) {
    grid-column: span 2;
}

/* Flex 아이템 선택 */
.flex-container > :last-child {
    margin-left: auto;
}

#03. CSS 구체성(Specificity) 계산

CSS 셀렉터에 id, class, tag이름이 갖는 점수를 계산하여 점수가 높은 selector가 우선 순위를 갖는다.

구체성 점수 계산법

  1. 인라인 스타일: 1000점
  2. ID: 100점
  3. 클래스, 속성, 가상클래스: 10점
  4. 태그, 가상요소: 1점

구체성 계산 예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* 점수: 1 (태그) */
h1 { color: red; }

/* 점수: 10 (클래스) */
.title { color: blue; }

/* 점수: 100 (ID) */
#main-title { color: green; }

/* 점수: 111 (ID + 클래스 + 태그) */
#main-title.highlight h1 { color: purple; }

/* 점수: 21 (클래스 2개 + 태그) */
.header.sticky h1 { color: orange; }

우선순위 규칙

  1. 구체성이 높을수록 우선 적용
  2. 구체성이 같으면 나중에 선언된 것이 우선
  3. !important가 있으면 최우선 (권장하지 않음)
1
2
3
4
5

.box { color: red !important; } /* 최우선 */
#container .box { color: blue; } /* 110점 */
.header .box { color: green; }   /* 20점 */
div.box { color: yellow; }       /* 11점 */
.box { color: purple; }          /* 10점 */

CSS 상속(Inheritance)

일부 CSS 속성은 부모 요소에서 자식 요소로 자동 상속됩니다.

상속되는 속성들

  • 텍스트 관련: color, font-family, font-size, line-height 등
  • 목록 관련: list-style 등
  • 테이블 관련: border-collapse 등

상속되지 않는 속성들

  • 박스 모델: margin, padding, border, width, height 등
  • 배경: background 관련 속성들
  • 위치: position, top, left 등

상속 제어하기

1
2
3
4
5

.child {
    color: inherit;    /* 부모의 color 값을 강제로 상속 */
    margin: initial;   /* 기본값으로 재설정 */
    padding: unset;    /* 상속되는 속성이면 inherit, 아니면 initial */
}
05.Frontend, HTML&CSS
Web Development Frontend CSS
This post is licensed under CC BY 4.0 by the author.