CSS 기본 문법

728x90

CSS 기본 문법

CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트만으로 사용할 수도 있습니다.

내부 스타일시트

CSS를 HTML 문서 안에 <style> 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>내부 스타일시트</title>
    <style type="text/css">
        p { color: red; }
    </style>
</head>
<body>
    <p>우리를 기쁘게 하는 것들.</p>
</body>
</html>

외부 스타일시트

스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되는 반면, 외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>외부 스타일시트</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>우리를 바라보게 하는 것들.</p>
</body>
</html>

@charset "utf-8";
p { color : blue };

@import

@import는 CSS 안으로 다른 CSS 파일을 불러들일 경우 사용합니다. CSS 맨 윗줄에 기술 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>스타일 시트 포함</title>
    <style type="text/css">
        @import url("style.css");
    </style>
</head>
<body>
    <p>우리를 머무르게 하는 것들.</p>
</body>
</html>

@charset "utf-8";
p { color : violet };

인라인 스타일(inline style)

인라인 스타일은 태그에 직접 CSS를 정의해주는 기법으로, 해당 요소에 style=" "형식으로 기술합니다. 내부스타일이나 외부스타일에서 기술된 속성보다 우선으로 적용되므로 우선순위가 절대적으로 높아야 할 경우에 사용할 수 있습니다. 다만, 일일이 html을 열어서 편집해야 하므로 일반적으로 많이 사용하지 않습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인라인 스타일</title>
</head>
<body>
    <p style="color:darkorange;">우리를 움직이게 하는 것들.</p>
</body>
</html>

'CSS' 카테고리의 다른 글

강아지 애니메이션 만들기 (4)	2022.08.18
SCSS (0)	2022.08.18
미디어쿼리(media query) (4)	2022.08.15
비트맵과 벡터의 차이점 (8)	2022.08.09
Layout만들기 (6)	2022.07.26

코딩을 먹어보자

CSS 기본 문법