[CSS] CSS의 등장배경(feat. HTML) 및 사용 방법 2가지

CSS의 등장 배경

 

HTML로 문서를 예쁘게 꾸미기 위해서는, 인라인 방식으로 각각의 태그에 속성을 추가해야 한다.

하지만, 조금 과장해서 코드가 몇 만줄 이상이라고 생각해보자. 어떻게 그 많은 내용을 추가 할 것인가? 또, 색상을 변경하고자 할 때는 어떻게 할 것인가? 똑같은 코드를 중복되게 일일이 다 작성할 것인가?

 

이러한 문제점 때문에 CSS가 등장했다. HTML은 정보 전달에만 집중하도록 하고, 모든 디자인과 관련된 내용은 <style>이라는 태그 내에 담는다. 웹페이지를 유지보수하는 측면에서 매우 편리하게 되고 가독성 또한 좋아지게 된다.

 

 

CSS를 사용하는 방법

1. <style> 태그를 쓴다.

이런 코드를, '어떤 대상에게 효과를 줄 것인지 선택한다'는 점에서 '선택자(selecotr)'라고 부른다. 아래의 예시에서 선택자는 'a' 이다. 속성은 'color', 'text-decoration' 이고 속성값은 'red', 'underline'이다.

<style>
	a {
    	color : red; // 속성이 여러개인 경우 반드시 세미콜론(;)을 끝에 붙여야 한다.
        text-decoration: underline;
    }
</style>

 

2. style 속성을 쓴다.

style = " " 은 HTML의 속성이다. style 이라는 속성은, 속성값으로 반드시 CSS 효과를 사용한다.

<li><a href = "index.html" style = "color:red"> HTML & CSS </a><li>

 

적용 순서

선택자 내에 선언한 내용들이 가장 먼저 적용된다. 이후에, 인라인 방식으로 각각의 태그 내에 적용한 style 속성값이 적용된다. 즉, 선택자로 전체적인 설정을 먼저 하고 style 속성을 통해 각각의 속성을 바꿀 수 있다.