[생활코딩] WEB2(CSS_01) CSS의 등장

* Windows 운영체제 기준으로 작성되었습니다.

* vs code editor를 사용합니다.

 

§ CSS의 등장 → Click!

 

CSS는 HTML과는 완전히 다른 언어이기 때문에 CSS를 사용해주기 위해서는 <style></style>란 태그를 사용해주어야 합니다. <style> 태그는 html 문법이면서 동시에 웹 브라우저에게 <style> 태그의 안 쪽의 내용은 css 문법에 맞게 처리하라고 알려주는 역할을 합니다. <a>태그의 색을 모두 빨간색으로 바꾸고 싶을 때 원래라면 <font color="red"></font>이런 식으로 모든 문장에 직접 써주어야 하지만 CSS를 이용하면 훨씬 빠르고, 간단하게 할 수 있으며, 중복된 태그들을 제거할 수 있습니다. 링크의 underline을 없애주거나, underline해주고 싶은 경우 text-decoration이란 declaration을 사용해 바꾸어줄 수 있습니다. css를 사용하면, html로부터 design에 대한 내용을 분리할 수 있으며, css를 통해 웹 페이지를 디자인하는 것이 html을 이용해 디자인하는 것보다 훨씬 효율적입니다.

<style>
	a {
    	color:red;
        text-decoration: none;
    	}
</style>

<style>이라는 태그는 속성의 효과만 있어서는 효과를 어느 태그에 지정해야하는지 알 수 없기 때문에 앞에 적용되어야 하는 태그 + { }를 사용해 css의 효과를 지정할 태그를 선택할 수 있습니다. 위의 예시에서 css의 효과가 적용되는 태그인 a는 선택자(selector)라고 하며, 선택자에게 지정될 효과 color:red;와 text-decoration: none;를 declaration으로 부르며, color나 text-decoration는 property(속성)이라 부르고, red나 none의 경우 property의 값이란 뜻으로 value라고 부릅니다, 여기서 ;(세미콜론)은 구분자로서, 하나의 declaration이 끝났음을 표시해줍니다.

<a href="링크" style="color:red";text-decoration:underline;>" 링크가 연결될 문구 "</a>

html의 style이란 속성을 사용하면 반드시 값으로 css의 효과가 들어온다고 되어있습니다. 따라서 웹 브라우저는 css의 문법에 따라 해석하여, 그 결과를 속성이 위치하고 있는 태그에 적용합니다. 또한 속성으로서 직접 태그에 css 효과를 주고 있으므로, selector는 필요 없습니다. 또한 속성을 적어줄 때도, 여러개를 작성할 시 세미콜론을 이용해 구분해주면 됩니다!

 

따라서 html에 css를 사용하고 싶을 때는, <style>태그를 사용해 selector와 declaration으로 표현을 해주거나, html 태그 안에 style 속성을 활용하여 직접 태그에 css의 효과를 주면 됩니다.