① CSS 란?
유튜버 '생활코딩'의 CSS 수업 커버 페이지를 보면 'CSS는 HTML을 아름답게 꾸며주는 디자이너의 언어'라고 소개되어 있다. 그럼 CSS는 어떤 역할을 하고, 어떻게 사용되는 것일까?
CSS는 'Cascading Style Sheets'의 약자로 HTML과 같은 마크업 언어가 웹사이트의 몸체를 담당한다면, CSS는 옷이나 액세서리와 같이 몸체를 꾸미는 역할을 담당한다.
이는 HTML 구조는 그대로 두고 CSS 파일만 변경하더라도 전혀 다른 웹사이트처럼 꾸밀 수 있다는 뜻이다.
HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며 HTML은 CSS를 포함할 수 없다.
그러나 HTML 없이 단독으로 존재하는 CSS는 의미가 없다.
② CSS3의 용어
1. 셀렉터 (Selector)
셀렉터는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단.
아래와 같은 이미지를 Rule Set(Rule)이라고 하며
HTML 페이지 안의 특정 요소들을 어떻게 렌더링 할 것인지 브라우저에게 알려주는 CSS 문장.
Rule Set의 집합을 스타일시트(Style Sheet)라고 함.
2. 속성 (Property)
셀렉터로 HTML 요소를 선택하고 { } 내에 속성값을 지정하는 것으로 다양한 style을 정의할 수 있음.
3. 값 (Value)
p {
color: orange;
font-size: 16px;
} // color, font-size는 속성이고- orange,16px는 속성값4. HTML과 CSS의 연동 방법
1) link style
외부에 있는 css 파일을 로드하는 방식. 일반적으로 사용.
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
</html>2) Embedding Style
HTML 내부에 CSS를 포함시키는 방식. 추천하지 않음.
<head>
<style>
h1 { color: red; }
p { background: aqua; }
</style>
</head>3) Inline Style
HTML 요소의 style 속성에 CSS를 기술하는 방식.
<html>
<body>
<h1 style="color: red">Hello World</h1>
<p style="background: aqua">This is a web page.</p>
</body>
</html>5. Reset CSS
웹 브라우저마다 각기 다른 디폴트 스타일이 지정되어 있어, 이를 초기화함으로써 다양한 웹 브라우저에서도 동일한 스타일이 적용되도록 하는 설정.
즉, Reset CSS는 기본적인 HTML 요소의 CSS를 초기화하는 용도로 사용.
자주 사용되는 Reset CSS 목록
🎁 참조 및 출처
