기초문법 : CSS

CSS 기초 문법

CSS란?

캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 웹페이지를 꾸미려고 작성하는 코드로 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)입니다. 마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있습니다. HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있습니다. 기본 파일명은 style.css입니다.

HTML 입문 강의에서 HTML을 웹 사이트에서 화면에 표시되는 정보를 약속 한 것이라면 CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격이라고 할 수 있습니다. 초기의 웹은 HTML 하나로 문서의 뼈대도 만들고 꾸미기도 함께 하였지만, 공통적인 디자인을 갖는 문서가 여럿 존재 할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야 하는 등의 번거로움이 존재 했습니다. CSS는 이런 문제를 해결함과 동시 웹페이지의 내용과 스타일(표현)을 분리해주어, 역할 분담도 되는 효과를 가지고 있습니다.

CSS 주석 표시

/* CSS 주석 */

CSS 선언 방법

내부 스타일

웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다. 모든 스타일 정보는 <head>태그와 </head>태그 안에서 정의해야 하고 <style>태그와 </style>태그 사이에 작성합니다.

<head>
        <style>
            //CSS 속성 예시
            body { 
                background-color: lightyellow; 
            }
        </style>
</head>

외부 스타일

'(파일명).css'라는 외부 스타일 시트 파일로 저장한 후 <link>태그를 이용해 링크한 것입니다.

<head>
    <link rel="stylesheet" href="css파일 경로.css">
</head>

인라인 스타일

스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style속성을 사용하여 style="속성:속성 값;" 형태로 스타일을 바꿀 수 있습니다.

<body>
    <h1 style="color:blue;">예시</h1>
</body>