[생활코딩] 4. CSS의 등장 & CSS의 문법

 

 

CSS의 등장

​
초기 HTML은 오직 검은색 글자로만 나열되었다.
그래서 사람들은 글씨 색을 바꾸는 등의 
더 다양한 기능들을 원했고,
HTML에 디자인 가능한 코드를 추가했다.
하지만 이는 웹의 가치를 퇴보시키고
근본적인 문제를 해결하지 못했다.
그리고 아예 새로운 언어를 만들기 시작했고,
그것이 CSS 이다.

​

 

 

특정한 태그를 대상으로 CSS를 통해

디자인하고 싶을 때는 <style> 이라는 태그를 쓰고

태그 안에 CSS 문법을 사용하면 된다.

 

문서 상에 <style> ~ </style>

이렇게 작성하는 것은 웹브라우저에게

" ~를 CSS 언어로 해석해서 처리해라 " 라고 

전달해주는 것이다.

 

그리고 CSS는 HTML보다 더 효율적으로

디자인 기능을 하도록 되어있다.

 

[예시]

 

 

<h1><a href="index.html"><font color="red">Xiubin world</font></a></h1>
<ol>
<li><a href="1.html">one</a></li>
<li><a href="2.html">two</a></li>
<li><a href="3.html">three</a></li>
</ol>

 

 

a 태그가 걸린 곳에 기존 HTML 문법을 사용할 경우

모든 a태그 위에 <font color="red"> ~ </font> 태그를 넣어줘야

디자인이 적용되는데,

CSS 는 굉장히 효율적으로 처리 가능하다.

 

 

 

 

<style> a { color:red; } </style>

 

 

이렇게만 태그를 넣어주면, 
이는 모든 a태그에 대해서 색깔을
빨간색으로 바꿔줘 라는 의미이다.
​
이처럼 CSS를 통해 중복태그를 제거함으로써
웹페이지 유지보수를 편리하게 할 수 있게 됐고,
코드의 가독성을 높일 수 있게 됐다.
그리고 디자인과 정보 코드를 분리함으로써
HTML이 정보에 더 집중할 수 있게 됐다.

 

 

 

CSS 삽입하는 방법

 

 

1. <style> ~ </style> 태그 활용

 

<style>

a {color:red;}
</style>

 

①  <style> ~ </style> [태그] 추가 
② selector[선택자]​ 지정 : a{  }
③ declaration[효과]​ 작성 : color:red;

 

 

선택자란 CSS를 적용할 대상을 설정하는 것이고,
효과는 원하는 디자인 효과를 작성하는 것이다.
여러 디자인 효과를 작성할 경우,
각 효과 뒤에 세미콜론(;) 을 붙여줘야한다.
세미콜론은 하나의 속성이 끝나는 것을 표시하는 용도이다.

​
그리고 color와 같이 CSS에는 다양한 디자인 효과가 있는데,
그러한 것을 속성 Property 라고 부른다.
그리고 그 속성에 해당하는 구체적인 것을
값 Value 라고 부른다. 

​
2. Style 속성 활용

​
style을 작성한 곳에 효과를 적용시킨다는
의미이므로 selector가 필요없다.
​

[예시]

 

3.html 링크가 첨부된 three 라는 글자에만
빨간색을 입힌다는 코드이다.
여기서  style=" " 는 HTML 이지만
color:red 는 CSS의 문법이다.
따라서 웹브라우저가 이 코드를 읽을 때
style 속성과 css 문법이 함께 있으면 이를
HTML이 아닌 CSS 로 읽을 수 있게 되는 것이다.

 

 

​
이와 같이 원하는 코드 위치에
style="color:red" 라고 
원하는 속성과 값을 적으면 된다.


property 와 value의 종류를 굳이
전부 외울 필요는 없다.
최근 프로그램들은 굉장히 잘 되어있어서
적당히 기초와 영단어만 알아두면 된다.
그리고 우리에겐 검색엔진이 있으니까!

​