[CSS] 기본 문법

728x90

CSS 기본 문법 4가지

지금부터 CSS 기본 문법 4가지를 알아보도록 하겠습니다!😀

#1. 내부 스타일시트

HTML문서 안에 <style> 태그를 사용하여 css가 문서와 함께 저장되도록 합니다.

<!DOCUMENT html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>내부 스타일시트</title>
    <style type="text/css">
        p {
            color: red;   /* p 태그 안의 글씨 색상을 빨간색으로 설정합니다. */
        }
    </style>
<head>
<body>
    <p>이 문장의 색은 빨강입니다.</p>
</body>
</html>

#2. 외부 스타일시트

스타일 속성을 따로 저장하여 HTML문서와 연결할 수 있습니다.
파일의 확장명은 '.css'로 저장해주어야 하며 HTML문서에서는 <link> 태그를 사용하여 선언 합니다.

<!DOCUMENT html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>내부 스타일시트</title>
    <link rel="stylesheet" href="style.css"> <!-- CSS 파일 경로 선언 -->
<head>
<body>
    <p>이 문장의 색은 빨강입니다.</p>
</body>
</html>

style.css - 외부 경로

@charset "UTF-8";
p {
    color: red;
}

이처럼 내부 스타일시트와는 달리 외부 스타일시트는 html문서에 경로 선언만 해준다면 모든 페이지에서 동일한 시트를 적용할 수 있다.

#3. @import

css안으로 다른 css 파일을 불러올 수 있습니다.

여러개를 사용하면 복잡해져서 오히려 유지보수가 어렵기 때문에 되도록이면 하나 정도만 사용하는 것이 좋습니다.
또한 사용할 경우 css 가장 첫번째 줄에서 선언해주어야 합니다.

<!DOCUMENT html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>내부 스타일시트</title>
    <style>
        @import url("style.css");
    </style>
<head>
<body>
    <p>이 문장의 색은 빨강입니다.</p>
</body>
</html>

style.css - @import

@charset "UTF-8";
@import url("common.css");

#4. 인라인 스타일 (inline-style)

해당 태그에 직접 style속성을 부여하여 css를 정의해주는 방법이다.

! 주의 !우선순위가 절대적으로 높아야 할 경우 사용해야 합니다.

<!DOCUMENT html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인라인 스타일</title>
<head>
<body>
    <p style="color: red;">이 문장의 색은 빨강입니다.</p>
</body>
</html>

728x90

'CSS' 카테고리의 다른 글

[CSS] 이미지 스프라이트 기법 + ir효과 / 백그라운드 (3)	2022.08.22
[CSS] SCSS 실습01 : 움직이는 강아지 일러스트 🐶 (4)	2022.08.19
[CSS] SCSS 언어란? (3)	2022.08.19
[CSS] 미디어쿼리 (3)	2022.08.16
[CSS] 이미지 표현 방식 : 벡터와 비트맵 (6)	2022.08.10

🍅 토매토🍅 의 냠냠 코딩 🌱

[CSS] 기본 문법

CSS 기본 문법 4가지

#1. 내부 스타일시트

#2. 외부 스타일시트

style.css - 외부 경로

#3. @import

style.css - @import

#4. 인라인 스타일 (inline-style)

'CSS' 카테고리의 다른 글

댓글

JAVASCRIPT

HTML

CSS

티스토리툴바

[CSS] 기본 문법

CSS 기본 문법 4가지

#1. 내부 스타일시트

#2. 외부 스타일시트

style.css - 외부 경로

#3. @import

style.css - @import

#4. 인라인 스타일 (inline-style)

'CSS' 카테고리의 다른 글

관련글

댓글

JAVASCRIPT

HTML

CSS

티스토리툴바