안녕하세요, 오늘은 CSS의 표현 방법들을 알아보겠습니다~!
총 4가지가 있더군요~
일단 CSS를 정의하는 방법을 알아야하는데요~
내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다.
실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 건 내부 스타일 시트로만으로 사용할 수 있습니다.
또한, 인라인 스타일시트는 대체로 사용하진 않지만, 가장 우선순위가 높아 꼭 필요할 경우엔 편리하게 사용 가능합니다.
참고로 CSS에서의 주석은 /* */로 표현한다는 것!
이제 차근차근 하나씩 살펴볼게요~
💥내부 스타일시트
CSS를 HTML 문서 안에 <style> 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다.
예제1)
<!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: blue; }
</style>
</head>
<body>
<p>Web2023_기초부터 쌓는 CSS</p>
</body>
</html>
💥외부 스타일시트
스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 .css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 <link> 태그를 이용하여 선언합니다.
내부 스타일시트는 그 사티일이 기술된 페이지만 적용되는 반면, 외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다.
예제2)
<!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>Web2023_기초부터 쌓는 CSS</p>
</body>
</html>@charset "utf-8";
p { color:green; }
💥@import
@import는 CSS 안으로 다른 CSS 파일을 불러들일 경우 사용합니다.
CSS 맨 윗줄에 기술합니다.
예제3)
<!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>Web2023_기초부터 쌓는 CSS</p>
</body>
</html>
💥인라인 스타일(inline style)
인라인 스타일은 태그에 직접 CSS를 정의해주는 기법으로, 해당 요소에 style=" "형식으로 기술합니다.
인라인 스타일은 내부스타일이나 외부스타일에서 기술된 속성보다 우선으로 적용되므로 우선순위가 절대적으로 높아야할 경우에 사용할 수 있으나, 스타일을 공통 CSS로 수정할 수 없고 일일히 html을 열어서 편집해야 하므로 일반적으로 많이 사용하지는 않습니다.
예제4)
<!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 : midnightblue;">Web2023_기초부터 쌓는 CSS</p>
</body>
</html>
오늘은 이렇게 CSS의 표현 방법 네가지에 대해 알아봤습니다!
CSS의 스타일을 잘 이해하고 상황에 맞게 쓰면 편리하지 않을까요?!
도움이 되셨다면 공감, 덧글 많이 많이 부탁드려용(●'◡'●)
