[CSS] CSS, 그리고 스타일 시트

💻 Programming/HTML, CSS

[CSS] CSS, 그리고 스타일 시트

Jiwon() 2023. 2. 20. 21:38

📌 CSS란?

Cascading Style Sheets의 약자로, 웹페이지를 보기 좋게 꾸미기 위해 작성하는 코드

HTML이 웹문서의 뼈대를 이룬다면, CSS는 근육이라고 볼 수 있음 (나중에 배우게 될 JS는 동적인 웹사이트 구현하는 뇌의 역할)

/* 선택자 { 속성1: 속성값, 속성2: 속성값2} */
p {
  text-align: center;
  color: red;
}

📌 스타일 시트

스타일 시트는 크게 '브라우저 기본 스타일'과 '사용자 스타일'로 나뉘고, 여기서 사용자 스타일은 다시 '인라인 스타일', '내부 스타일 시트', '외부 스타일 시트' 세 가지로 나뉘는데 이 중에서 내부 스타일 시트와 외부 스타일 시트에 대해 정리해보려고 한다.

1. 내부 스타일 시트

: 같은 HTML 웹문서 안에 작성하는 경우를 말하며, <head> 태그 안에서 <style></style> 태그 사이에 작성하여 정의

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>내부 스타일 시트</title>
    <style>
        p {
            color: #434cb0;
            background-color: #c4c4c4;
        }
    </style>
</head>
<body>
    <p> '내부 스타일 시트'란 웹문서 안에서 사용할 스타일을 같은 HTML 웹문서 안에 작성한 것을 말한다. </p>
</body>
</html>

2. 외부 스타일 시트

: .css 라는 확장자를 사용하여 스타일 시트를 따로 파일로 저장하고, <link> 태그를 이용하여 웹문서에 연결하는 방법

p {
    color: #434cb0;
    background-color: #c4c4c4;
}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>외부 스타일 시트</title>
    <link rel="stylesheet" href="p.css">
</head>
<body>
    <p> '외부 스타일 시트'란 웹문서 안에서 사용할 스타일을 외부 파일로 작성하여 웹문서와 연결하는 경우이다. </p>
</body>
</html>

저작자표시