CSS 기본 규칙

728x90

기본 규칙

CSS를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지하고 CSS를 공부하세요!

CSS란

CSS는 Cascading Style Sheets의 약자로 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다.
HTML이 정보를 표현한다면 CSS는 HTML문서를 시작적으로 이쁘게 꾸며주는 역할을 합니다.
CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다.

1. 내부 스타일시트

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>

우리를 기쁘게 하는 것들.

2. 외부 스타일시트

스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 <link>태그를 이용하여 선언합니다.
내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되는 반면, 외부 스타일시트는 그 스타일을 선언한 모든 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: red; }

CSS파일 상단에는 @charset "UTF-8"; @charset "euc-kr"; 등 html 문서에서 지정한 것과 동일한 문자셋을 지정합니다.

우리를 기쁘게 하는 것들.

3. @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>

우리를 기쁘게 하는 것들.

또한, @import는 어떤 CSS 파일 안에 공통 CSS를 불러들일 경우에도 사용할 수 있습니다.

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

4. 인라인 스타일

인라인 스타일은 직접 CSS를 정의해주는 기법으로, 해당 요소에 style="" 형식으로 기술합니다. 인라인 스타일은 내부스타일이나 외부스타일에서 기술된 속성보다 우선으로 적용되기 때문에 우선순위가 절대적으로 높아야 할 경우 사용됩니다. 스타일을 공통 CSS로 수정할 수 없기 때문에 많이 사용되지는 않습니다.

CSS파일 상단에는 @charset "UTF-8"; @charset "euc-kr"; 등 html 문서에서 지정한 것과 동일한 문자셋을 지정합니다.

우리를 기쁘게 하는 것들.

728x90

'CSS' 카테고리의 다른 글

이미지 표현 (3)	2022.08.22
Scss로 강아지 만들기 (7)	2022.08.18
Scss (5)	2022.08.18
미디어 쿼리 (5)	2022.08.16
01. 비트맵과 벡터 (9)	2022.08.10

🎆Youcodein🎇

CSS 기본 규칙

기본 규칙

CSS란

1. 내부 스타일시트

2. 외부 스타일시트

3. @import

4. 인라인 스타일

'CSS' 카테고리의 다른 글

댓글

HTML

CSS

JAVASCRIPT

티스토리툴바

CSS 기본 규칙

기본 규칙

CSS란

1. 내부 스타일시트

2. 외부 스타일시트

3. @import

4. 인라인 스타일

'CSS' 카테고리의 다른 글

관련글

댓글

HTML

CSS

JAVASCRIPT

티스토리툴바