CSS의 정의, <!--, -->, <style>, a color:(color), 효율적인 코드

 

 

CSS: cascading style sheets (스타일 시트)

 

​기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 CSS이다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.

​

따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.

​

[네이버 지식백과] CSS [cascading style sheets] (두산백과)

 

 

<!-- text --> : <!--와 --> 사이에 입력된 것은 없는 셈 치게끔 하는 코드

 

이처럼 회색으로 처리되어 유효하지 않은 코드가 된다.

 

<style> text </style> : 웹 브라우저에게 태그 안쪽에 있는 내용을 HTML이 아닌 CSS의 문법으로 해석하게끔 명령함

 

위의 코드를 실행하였을 때 웹페이지는 이와 같이 변화가 생긴다. color:blue;가 적용되자 파란색으로 색이 입혀졌다.

 

HTML의 <font> : 실사용되지는 않음

<font color="red"> text </font>

​

text의 컬러를 빨간색으로 바꾸어주는 코드이나,

색을 바꾸어야 할 부분이 1억 개가 있다면 1억 번 입력해야 하므로

비효율적임.

-> 같은 내용을 CSS로 만들어낸다면?

​

 

"웹 페이지의 모든 <a> 태그를 붉은 색으로 하라"

모든 <a> 태그 : a

{ } : 영역

컬러 : color: red;

​

효율적인 코드 : 중복의 제거