CSS 입문
개요
Cascading Style Sheets
HTML 입문 강의에서 HTML을 웹 사이트에서 화면에 표시되는 정보를 약속 한 것이라고 했는데요,
CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격이라고 할 수 있습니다.
초기의 웹은 HTML 하나로 문서의 뼈대도 만들고 꾸미기도 함께 하였지만,
공통적인 디자인을 갖는 문서가 여럿 존재 할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야 하는 등의 번거로움이 존재했죠.
CSS는 이런 문제를 해결함과 동시 웹페이지의 내용과 스타일(표현)을 분리해주어, 역할 분담도 되는 효과를 가지고 있습니다.
사용법
CSS 내부적으로 사용되는 문법은 동일하며, 어디에 기술하느냐의 차이가 존재합니다.
기술하는 방법은 아래의 3가지가 있습니다.
HTML태그의 style 속성을 이용<style>태그를 통해 HTML 문서 내부에 기술 (<style>태그는 주로<head>태그 내부에 사용합니다).css파일로 분리하여 HTML 문서에 연결
<!-- 1번 방법 -->
<div style="color: red"> this is red text </div>
<!-- 2번 방법 -->
<html>
<head>
<style type="text/css">
.my-text{ color: blue }
</style>
</head>
<body>
<div class="my-text">
this is red blue
</div>
</body>
</html>
1번 처럼 사용시 HTML과 CSS를 분리하는 장점이 없어지기 때문에 2,3번을 주로 활용합니다.
<style> 태그의 type="text/css"는 필수가 아니지만, 더 정확한 표현을 위해 함께 써주기도 합니다.
3번에 관해서는 CSS 파일 분리 문서를 참고해주세요.
주석
/*로 시작하여 */로 끝납니다.
#my-box{
/* color: red; */
color: blue;
}