CSS 기본 문법
CSS(Cascading Style Sheets)를 정의방법은 내부, 외부, 인라인 스타일시트 등이 있으며, 실제로는 외부 스타일 시트를 주로 사용하지만 간단한것은 내부만으로도 사용 가능하고 인라인은 대체로 사용하지 않지만 우선순위가 높음의 특성으로 인해 꼭 필요한 경우 편리하게 사용 가능합니다.
내부 스타일시트
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>Document</title>
<style type = "text/css">
p { color : red ; } /* p태그 안의 글자 색상을 빨간색으로 설정 */
</style>
</head>
<body>
<p>잠은 충분히 자야하며 밥을 먹은 직후 누워서 주무세요</p>
</body>
</html>
결과보기
외부 스타일시트
스타일 속성들을 따로 저장 후 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>
참고 : CSS 파일의 상단에 @charset "utf-8"; @charset "euc-kr"; emd html 문서에서 지정한 것과 동일한 문자셋을 지정합니다.
@charset "UTF-8";
p { color: red; }
결과보기
@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>
참고 : CSS 파일의 상단에 @charset "utf-8"; @charset "euc-kr"; emd html 문서에서 지정한 것과 동일한 문자셋을 지정합니다.
@charset "UTF-8";
p { color: red; }
결과보기
인라인 스타일
인라인 스타일은 태그에 직접 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' 카테고리의 다른 글
| 색을 정의하는 총 7가지의 다양한 방법! (6) | 2022.08.24 |
|---|---|
| 스프라이트/ir효과/백그라운드 표현 방법에 대하여 가~보자고~! (10) | 2022.08.20 |
| SCSS에 대해 알아봅시당~~ (6) | 2022.08.19 |
| 꼬리 흔드는 강아지를 만들어보자! (2) | 2022.08.18 |
| 미디어 쿼리...? (14) | 2022.08.15 |
댓글