물론 <head>안에 <style>을 넣어서 일괄적인 컬러 변경을 할 수 있지만, 개별적인 디자인을 원할 수도 있다.
이럴 때 우리는
<ol>
<li><a href="1.html" style="color:red">청춘</a></li>
<li><a href="2.html">고백</a></li>
<li><a href="3.html">비눈물</a></li>
</ol>이와 같이 코드 안에다가 넣는다. 하지만 그냥 style이라고 작성을 하면 에디터가 HTML언어인지 CSS언어인지 헷갈려 한다. 이런 경우 우리가 코드로 우리가 사용하는 것이 '속성'이라는 것을 알려줘야 한다.
style="color:red"
이것이 style이라는 CSS의 속성이다. 웹 브라우저는 CSS의 문법에 따라서 해석한다.
style="OO"는 사실 HTML의 속성이다. 다만 안에 들어오는 OO은 반드시 CSS의 값이 들어온다.
<style>
a {
color : red;
}
</style>위의 코드에서 style이라는 태그는 효과만 있어서는 이 효과를 누구에게 지정할지 설명할 수 없기 떄문에 a {}라는 코드가 추가적으로 더 필요한 것이다. 이 웹페이지에서 우리가 지금 주고 싶은 효과를 누구에게 줄 것인가를 선택하는지를 결정하기 때문에 선택자(selecter)라고 부른다. 괄호안에 들어가는 내용(color : red;)는 효과라고 부르며 영어로는 declaration(선언)라고 부른다.
<li><a href="1.html" style="color:red">청춘</a></li>이 declaration은 우리가 style 속성이 위치하고 있는 태그에게 효과를 주기 때문에 선택자를 사용할 필요가 없다.
이렇게 우리가 style을 사용하기 위해서는 두 가지 방법이 있다.
첫 번째는, <style> 태그를 선택자와 함께 쓰는 것.
두 번째는, style 속성을 태그 안에 쓰는 것이다. 이렇게 안에 쓰는 방법을 인라인(inline) 스타일이라고 한다.
<style>
a {
color : black;
text-decoration: none;
}
</style>이렇게 하면 링크가 걸리면서 자동으로 생성된 밑줄이 제거된다.
또한, 하나의 글에만 밑줄을 작성하고 싶을 때는
<li><a href="1.html" style="color:red; text-decoration:underline">청춘</a></li>을 작성해서 따로 속성을 추가해주면 된다. 참고로 세미콜론을 구분자로 해줘야한다.
그림으로 이해하자.
이제 어떤 프로퍼티가 있는지 어떤 value가 있는지를 알아보고, 어떻게 정확하게 효과를 주기 위해 선택자를 활용 하는지 알아보자.
'HTML & CSS > 생활코딩 - CSS' 카테고리의 다른 글
| CSS 기초 개념 - 그리드 #05 (0) | 2020.09.26 |
|---|---|
| CSS 기초 개념 - 박스 모델 활용 #04 (0) | 2020.09.25 |
| CSS 기초 개념 - 박스 모델 #03 (0) | 2020.09.24 |
| CSS 기초 개념 - 구글링 요령 #02 (0) | 2020.09.23 |
| CSS 기초 개념 - 탄생 배경 #00 (0) | 2020.09.21 |
