CSS 기본 문법에 대해 알아봅시다 !
CSS(Cascading Style Sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 그 중 외부 스트일시트를 많이 사용하는 편이지만 간단한 작업은 내부 스타일시트를 활용할 수 있습니다. 인라인 스타일시트는 거의 사용하지 않지만, 가장 우선순위가 높아서 꼭 필요한 경우 편리하게 사용할 수 있습니다.
[ 내부 스타일시트 ]
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>
* p { color: red;}의 의미는 p 태그 안의 글자 색상을 빨간색으로 설정하라는 뜻
[ 외부 스타일시트 ]
따로 저장한 스타일 속성을 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 파일 상단에는 @chardet "utf-8"; 등 html 문서에서 지정한 것과 동일하게 지정
[ @import ]
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");
공통으로 들어가야 할 스타일을 따로 저장하여 다른 CSS에 연결하여 사용 하지만 너무 여러개로 분리하여 사용할 경우 복잡하여 유지보수가 힘든 점이 있기 때문에 용량이 적다면 하나의 파일로 저장하는 게 좋음
[ 인라인 스타일(inline style) ]
태그에 직접 CSS를 정의해주는 기법으로 해당 요소에 style=" " 형식으로 적용합니다. 인라인 스타일은 내부스타일이나 외부스타일에서 적용한 것보다 우선적으로 적용되기 때문에 우선순위가 절대적으로 높아야 할 경우에 사용해야 합니다. 인라인으로 적용한 스타일에 경우 공통 CSS로 수정할 수 없고 일일이 수정해야 하기 때문에 잘 사용하지 않습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>스타일시트 포함</title>
</head>
<body>
<p style="color: red;">우리를 기쁘게 하는 것들.</p>
</body>
</html>
'CSS' 카테고리의 다른 글
| CSS | 이미지 스프라이트(image sprite) / ir 효과와 background 표현까지 (4) | 2022.08.20 |
|---|---|
| CSS | 움직이는 강아지 만들기 (8) | 2022.08.18 |
| CSS | SCSS (4) | 2022.08.18 |
| CSS | 미디어쿼리(media query) (4) | 2022.08.15 |
| CSS | 벡터(Vector)와 비트맵(Bitmap) (10) | 2022.08.10 |
댓글