본문 바로가기
CSS

CSS 기본 문법 : 스타일 작성의 4가지 방법

by 코딩 척척학사 2022. 8. 14.
728x90

CSS 기본 문법

CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트로 작성하기도 합니다. 인라인 스타일시트는 거의 사용하지 않지만, 우선순위가 가장 높아서 꼭 필요한 경우엔 편리하게 사용할 수 있습니다. 추가로, CSS에서의 주석 처리법은 /* */ 입니다.

▶ 내부 스타일시트

내부 스타일시트는 CSS를 HTML 문서 안에 <style> 태그로 작성하여, HTML 문서 안에 CSS가 함께 저장되도록 하는 방법입니다.

[ 예제 ]

<head>
    <meta charset="utf-8">
    <title>내부 스타일시트</title>
    <style>
        p { color: red; }
        /* p요소의 텍스트 색을 red로 변경하는 css */
    </style>
</head>

▶ 외부 스타일시트

외부 스타일시트는 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 CSS파일을 연결하는 방법입니다. 이때 스타일은 *.css 확장자를 가진 별도의 파일로 저장하고, HTML 문서에서는 <link> 태그를 이용하여 불러옵니다.

[ 예제 ]

<head>
    <meta charset="utf-8">
    <title>외부 스타일시트</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- style이라는 이름의 css파일을 연결함 -->
</head>

/* css 파일의 상단에는 HTML 문서의 문자셋과 동일한 문자셋을 지정해 줍니다. */
@charset "utf-8";
p { color: red; }

▶ @import

@import는 CSS 안으로 다른 CSS 파일을 불러들일 경우 사용합니다. CSS의 맨 윗줄에 작성합니다. 또한 @import는 어떤 css 파일 안에 공통 css를 불러들일 경우에도 사용할 수 있습니다. 그러나, CSS 파일을 너무 여러개로 분리할 경우 유지보수가 어려울 수 있으니 용량이 적다면 하나의 파일로 사용하는 것이 좋습니다.

[ 예제 ]

<head>
    <meta charset="utf-8">
    <title>스타일시트 포함</title>
    <style type="text/css">
        @import url("style.css");
        /* style.css라는 css를 불러들임 */
    </style>
</head>

▶ 인라인 스타일

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

[ 예제 ]

<body>
    <p style="color: red;">우리를 기쁘게 하는 것들.</p>
    <!-- p 요소의 텍스트 색을 red로 변경함 -->
</body>
728x90

'CSS' 카테고리의 다른 글

SCSS : 기본 문법 알아보기  (8) 2022.08.18
애니메이션 : 강아지 애니메이션  (7) 2022.08.18
미디어쿼리 알아보기  (4) 2022.08.14
이미지 표현 방식 : 벡터와 비트맵의 차이  (10) 2022.08.09
레이아웃을 만들기  (11) 2022.07.25

댓글


HTML이 적힌 썸네일 이미지
CSS가 적힌 썸네일 이미지
JAVASCRIPT가 적힌 썸네일 이미지

JAVASCRIPT

자세히 보기