안녕하세요
CSS 1단계 CSS란 무엇인가? 시간이 돌아왔습니다.
이번시간부터는 CSS를 살펴볼껀데요.
오늘도 화이팅하며, 부담없이 봐주시면 감사하겠습니다.
자 그럼 CSS 1단계 CSS란 무엇인가? 를 시작해볼께요~
▣ CSS (Cascading Style Sheets)란?
CSS란 "Cascading Style Sheets" 의 약자로 웹 문서의 전반적인 스타일을 미리 지정해둔 '스타일시트'입니다.
문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 합니다.
지금까지 배우셨던 HTML로 웹 페이지를 만들고, CSS로 웹페이지를 꾸며줄 수 있습니다.
예를 들어, 제목은 글자 크기도 크고 두껍게 표시하고 내용은 작은 글자 크기에 얇게 표시하고 싶다면
HTML로 제목과 내용을 작성하고 CSS로 제목과 내용에 대한 스타일을 꾸밀 수 있답니다
웹 페이지를 만들다가 또 제목과 내용이 들어가야 한다면?
간단한 태그만 사용해서 앞서 지정한 CSS 스타일을 적용하여 사용할 수 있습니다.
HTML 문서에서 CSS를 사용하는 방법에는 크게 3가지로 나누어져 있습니다.
1. 외부 스타일 시트(External Style Sheet)
2. 내부 스타일 시트(Internal Style Sheet)
3. HTML 태그내에 스타일 지정(Inline Styles)
1. 외부 스타일 시트(External Style Sheet)
외부 스타일 시트(External Style Sheet)는 css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML문서에 연결하여 사용하는 방법입니다.
자 그럼 간단한 예문 소스를 살펴보겠습니다.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
외부 스타일 시트(External Style Sheet)의 가장 큰 장점은 홈페이지 전체의 스타일을 일관성 있게 유지하면서 추가, 수정, 삭제를 일괄적으로 적용할수 있어 홈페이지 제작시에 효율성을 극대화 할 수 있습니다.
다만, 외부 스타일 시트 파일을 계속적으로 관리해 주면서 HTML 문서를 만들어 나가야 하기 때문에 불편할 경우가 있습니다.
그리고 외부 스타일 시트 파일을 무분별하게 사용하다보면 지나치게 복잡해 지면서 곤란한 상황도 오게 되니 css파일을 관리하는 노하우가 필요합니다.
그럼에도 불구하고 전문적인 홈페이지를 만들려면 외부 스타일 시트를 적극적으로 활용해야 하며 대부분의 홈페이지 안에서 많이 사용되는 방법입니다.
2. 내부 스타일 시트(Internal Style Sheet)
내부 스타일 시트(Internal Style Sheet)은 css라는 확장자를 가진 스타일 시트 파일을 따로 만들지 않고 HTML문서에
<head>와 </head> 사이에 스타일을 사용하는 방법입니다.
자 그럼 간단한 예문 소스를 살펴보겠습니다.
<head>
<style type="text/css">
<!--
body {font-size:12px;}
//-->
</style>
</head>
내부 스타일 시트(Internal Style Sheet)는 HTML 문서마다 스타일을 매번 지정해 주어야 되며 한 문서에만 해당되는 스타일을 지정할때 사용하면 편리합니다.
3. HTML 태그내에 스타일 지정(Inline Styles)
외부 스타일 시트(External Style Sheet), 내부 스타일 시트(Internal Style Sheet)의 스타일을 지정하는 방법들에 비해서 적용범위가 더욱 작아진 형태입니다. 스타일을 적용하고 싶은 HTML 태그안에서 직접적으로 정의하는 방법입니다.
자 그럼 간단한 예문 소스를 살펴보겠습니다.
<p style="color:red;">해당글은 빨간색으로 지정됩니다.</p>
내용과 스타일의 분리 그리고 이로 인한 스타일 일괄변경의 효율성 측면으로 볼때는 바람직하지 않는 방법이지만 위의 소스에서도 보시다 싶이 직관적으로 사용이 가능하다는 장점이 있습니다.
어떠신가요? 이해가 잘 되시나요?
항상 드리는 말씀이지만 반복해서 연습하셔야 된다는건 필수인거 아시죠?ㅎ
다음시간에는 CSS의 문법에 대해서 포스팅 해볼껀데요. 많은 응원과 기대해주세요. 감사합니다.
'IT > HTML CSS' 카테고리의 다른 글
| CSS 2단계 - CSS 문법 (413) | 2020.12.15 |
|---|---|
| HTML 19단계 - 배경음악 (378) | 2020.12.14 |
| HTML 18단계 - 폼(Form) 6탄 (278) | 2020.12.13 |
| HTML 17단계 - 폼(Form) 5탄 (393) | 2020.12.13 |
| HTML 16단계 - 폼(Form) 4탄 (272) | 2020.12.12 |
댓글