CSS 기본 문법에 대해 알아봅시다!
★CSS 정의하는 방법★
01. 내부 스타일시트 : 간단한 스타일 사용시
02. 외부 스타일시트 : 많이 사용하는 편
03. 인라인 스타일시트 : 거의 사용하지 않지만 우선순위가 가장 높기에 꼭 필요한 경우 편리하게 사용 가능
※ CSS 주석 : /* */
01. 내부 스타일시트
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>
결과보기
02. 외부 스타일시트
스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다.
스타일은 *.css확장자를 가진 별도의 파일로 저장하고, HTML에서는 <link> 태그를 이용하여 선언합니다.
예제
<!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>
CSS 파일의 상단에는 @charset "utf-8";, @charset "euc-kr"; 등 html 문서에서 지정한 것과 동일한 문자셋을 지정합니다.
@charset "utf-8";
p {color: red;}
결과보기
03. @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("common.css");
@import는 공통으로 들어가야 할 스타일을 따로 저장하여 다른 CSS에 삽입시켜 사용할 수 있도록 해줍니다.
※ CSS 파일을 너무 여러 개로 분리하면 복잡해질 수 있으니 용량이 적다면 하나의 파일로 저장하는 것이 좋음!
04. 인라인 스타일(inline style)
인라인 스타일은 태그에 직접 CSS를 정의해주는 기법으로, 해당 요소에 style=""형식으로 기술합니다.
인라인 스타일은 내부스타일이나 외부스타일의 속성보다 우선으로 적용되기 때문에 우선순위가 절대적으로 높아야 할 경우에 사용할 수 있습니다.
그러나, 공통CSS로는 수정할 수 없으며 일일이 html을 열어서 수정해야 하므로 많이 사용하지는 않습니다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>인라인 스타일</title>
</head>
<body>
<p style="color: red;">우리를 기쁘게 하는 것들.</p>
</body>
</html>
결과보기
'CSS' 카테고리의 다른 글
| [CSS] PUG와 SCSS를 활용하여 강아지 애니메이션을 만들어 봅시다! (4) | 2022.08.18 |
|---|---|
| [CSS] "SASS ⊃ Sass, SCSS" 에 대해 알아봅시다! (2) | 2022.08.18 |
| [CSS] 미디어쿼리에 대해 알아보자! (4) | 2022.08.16 |
| [CSS] 비트맵(Bitmap)방식과 벡터(Vector)방식에 대해 알아보자! (9) | 2022.08.09 |
| [CSS] 레이아웃(layout)에 대해 알아보자! (6) | 2022.07.25 |
댓글