6 min to read

[CSS] CSS 기초 정리

CSS의 기초를 정리하여 HTML의 디자인하기

Featured image

목차

CSS 기본 개념

CSS(Cascading Style Sheets)

스타일 지정 방식

스타일의 지정 방식으로는 세 가지 방법이 있다.

인라인 스타일(Inline style)

특정 태그에 style 속성을 사용하여 정의하는 방법으로 해당 요소에만 적용 가능하다.

<p style = 'color: green; text-decoration: underline'>본문 내용</p>

내부 스타일 시트(Internal style sheet)

<head>태그 내에 태그를 사용하여 문서의 전체적인 스타일을 정의한다.

<!DOCTYPE html>
    <html>
        <head>
            <meta charset ='utf8'>
            <title>HTML 실습</title>

            <style>
                body { background-color: yellow; }
                p { color: red; text-decoration: underline; }
            </style>
        </head>
        
        <body>
            <p>Hello World</p>
        </body>
    </html>

외부 스타일 시트(External style sheet)

스타일과 관련된 코드를 별도로 파일로 관리하며, 각 문서에서는 해당 파일을 읽어 들여 사용

html에서 불러오기

<link rel = 'stylesheet' href = '/style/style1.css'>

style1.css

body { background-color: green; }
p { color: white; text-decoration: underline; }

세 가지 방법 중 스타일 적용 우선 순위

  1. 인라인 스타일
  2. 내/외부 스타일 시트
  3. 웹 브라우저의 기본 스타일

선택자

선택자는 스타일 적용 범위를 선택하는 도구이다.

기본 선택자(Basic selectors)

* (Universal selector) 전체 요소에 적용
* {color: blue;}

태그명 (Type selector)
p {font-size: 15px;}

.클래스명 (Class selector)
.s1 {font-weight: bold;}

#id명 (ID selector)
#adress {color: grey;}

[속성명] (Attribute selector)
[uid] {text-decoration: overline;}

복합 선택자(Combinators)

A B (Descendant combinator)

A>B (Child combinator)

A~B (General sibling combinator)

A+B (Adjacent sibling combinator)

가상클래스 선택자(Pseudo classes selectors)

:link 방문하지 않은 링크
:visited 방문한 링크
:hover 마우스를 위로 올렸을 때
:active 클릭 했을 때
:focus 포커스가 들어왔을 때

CSS 속성

CSS의 속성은 매우 많기에 기본적인 것들 혹은 자주 사용하는 것들을 알아놓고 나머지는 검색으로 찾는것이 좋다.

색상

배경

텍스트

글꼴

링크

리스트

테이블

크기

박스모델

테두리

border-style: 테두리의 스타일 설정

border-width: 테두리의 두께 설정

border-color: 테두리의 색상 설정 (Color 속성과 같음)

줄 바꿈

display: 줄 바꿈 설정

위치