CSS 시~작!

 

 

 

CSS 등장

 

이제부터 CSS가 등장하게 된다.

CSS의 역할은 HTML을 스타일링해주는 HTML의 전담 스타일리스트다.

HTML 구조는 그대로여도 CSS 파일에 따라 전혀 다른 웹 사이트처럼 꾸밀 수 있다.

HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며, HTML은 CSS를 포함한다.

 

 

 

 

CSS 문법

CSS 기본 구조

기본적인 문법은 이렇다. 우리가 잘 알아야 할 것은 선택자(Selector)와 속성(Property)이다.

선택자는  HTML 요소 중 누구를 꾸밀 것인지를 알 수 있게 해주고, 속성은 그 누구의 어떤 부분을 꾸밀 것인지를 지정해준다.

속성+값 하나의 세트를 선언(Declaration)이라고 한다.

값은 속성에 대한 값이고, 중간에 있는 세미콜론(;)은 선언들을 구분하게 해준다.

마지막은 언제나 세미콜론(;)으로 끝나야 한다.

 

 

 

 

CSS 적용

1. HTML 태그의 style 속성에 CSS 코드를 넣는 방법

<h1 style="font-size: 12px; color: red">Songheroine</h1>

 

2. HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법

<style>
    h1 {
        font-size: 12px;
        color: red;
    }
</style>

 

3. 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법

<link rel="stylesheet" href="style.css">

 

 

 

---

간단하지만 중요한 내용이였다.

선택자와 속성의 종류는 엄청나게 많아서 아직도 볼 때마다 새롭다.

공부가 더 필요한 것 같다.