CSS 기본 문법
CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일만으로도 가능합니다. 또한 인라인 스타일스트는 거의 사용하지 않지만, 우선순위가 가장 높아서 꼭 필요한 경우에 편리하게 사용할 수 있습니다. CSS에서 주석은 /* */로 표현합니다.
01. 내부 스타일시트
CSS 를 HTML 문서 안에 <style> 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다.
{
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부 스타일시트</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>안녕하세요 코딩대원 입니다.</p>
</body>
</html>
}
결과
03. @impot
@impot는 CSS 안으로 다른 CSS 파일을 불러들일 경우 사용합니다. CSS의 맨 윗줄에 기술합니다.
import는 공통으로 들어가야 할 스타일을 따로 저장하여 다른 CSS에 삽입시켜 사용할 수 있도록 해줍니다. 그러나 CSS 파일을 너무 여러 개로 분리하면 오히려 복잡해져서 유지보수하기 힘든 부분도 있으니 용 량이 적다면 하나의 파일로 저장하는 것이 좋습니다.
{
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일시트 포함</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<p>안녕하세요 코딩대원 입니다.</p>
</body>
</html>
}
결과
04. 인라인 스타일(inline style)
인라인 스타일은 태그에 직접 CSS를 정의해주는 기법으로, 해당 요소에 style="" 형식으로 기술합니다. 인라인 스타일은 내부스타일이나 외부스타일에서 기술된 속성보다 우선으로 적용되므로 우선순위가 절대적으로 높아야 할 경우에 사용할 수 있으나, 스타일을 공통 CSS로 수정할 수 없고 일일이 html을 열어서 편집 해야 하므로 일반적으로 많이 사용하지 않습니다.
{
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인라인 스타일</title>
</head>
<body>
<p style="color : red;">안녕하세요 코딩대원 입니다.</p>
</body>
</html>
}
결과
'CSS' 카테고리의 다른 글
| 이미지 스프라이트 / IR 효과 / 백그라운드 표현 (5) | 2022.08.20 |
|---|---|
| SCSS (3) | 2022.08.18 |
| SASS / Pug 강아지 애니메이션 (3) | 2022.08.18 |
| 미디어 쿼리(media query) (5) | 2022.08.15 |
| 비트맵 방식 / 벡터 방식 (8) | 2022.08.10 |
댓글