CSS 기초 문법

CSS란?

Cascading Style Sheets는 documents가 사용자에게 어떻게 보여질까를 기술하는 언어이다. HTML이 정보를 표현한다면 CSS는 HTML문서를 시작적으로 이쁘게 꾸며주는 역할을 합니다.

CSS 주석 표시

CSS에서 주석을 표시할 때 다음과 같이 사용합니다.

/* CSS 주석 */

CSS 선언 방법

내부 스타일

HTML 파일 안에 <style> 태그로 스타일을 작성하는 방식입니다. 이 방식은 번들링 하지 않는 프로젝트에서는 대부분 HTML, CSS, JS 파일을 나누어 관리하는 것이 일반적 이므로 번들링하지 않는다면 자주 사용되지 않는 방식입니다.

<style>
    div {
        color : red;
        margin : 20px;
    }
</style>

외부 스타일

link태그를 이용하여 외부 CSS문서를 가져와서 연결하는 방식입니다. 실무에서 주로 사용하는 방식으로 대부분의 프로젝트에서 이방식을 사용하고 있습니다.

<link rel="stylesheet" href="../css/main.css">

인라인 스타일

요소의 style 속성에 직접 스타일을 작성하는 방식입니다. 우선순위상 우선하기 때문에 공통기능에 대해서 따로 파일로 관리하는 경우 변경이 불가능하기 때문에 유지보수에 어려움이 있는 방식입니다. 그렇기 때문에 권장하지 않는 방식입니다.

<div style="color:red; margin:20px;">
....
</div>