WEB2 - 04 CSS의 기본 문법
웹 페이지 안에 CSS를 삽입하는 두 가지 방법이 있는데, 첫 번째 방법은 "<style> 태그를 쓴다"이고 두 번째 방법은 "style 속성을 쓴다"입니다.
style 속성을 이용해 글자 색을 빨간색으로 변경
...
<li><a href="2.html" style="color:red">CSS</a></li>
...↓
위 코드를 넣고 페이지를 새로고침하면 'CSS'란 글씨가 빨간색이 됩니다. 방금 <a> 태그에 지정한 style이라는 속성은 HTML과 CSS의 사용 설명서에 적혀 있습니다. style이라는 속성을 쓰면 그 속성의 값을 웹 브라우저가 CSS 문법에 따라 해석해서 그 결과를 style 속성이 위치한 태그에 적용합니다.
style=""은 HTML의 속성입니다. 그리고 style이라는 속성은 값으로 반드시 CSS 효과가 들어온다고 약속돼 있습니다. 그리고 아래의 <style>이라는 태그는 효과만 있어서는 누구에게 지정할지를 설명할 수 없기에 앞에서 살펴본 '(대상) { }'과 같은 코드가 더 필요합니다.
<style>
a {
color: black;
}
</style>이러한 코드를 이웹 페이지에서 주고 싶은 효과를 누구에게 줄 것인가를 선택한다는 점에서 선택자(selector)라고 합니다. 그리고 선택자에 지정될 효과를 효과 혹은 delaration이라고 부릅니다. declaration은 한국어로 '선언'이라는 뜻이 있습니다. 그런데 style 속성을 직접 사용한 경우에는 style 속성이 위치한 태그에 효과를 적용하기 때문에 선택자라는 것을 사용할 필요가 없습니다.
CSS를 이용해 링크에 밑줄 없애기
...
<style>
a {
color: black;
text-decoration: none;
}
</style>
...↓
텍스트를 꾸미는 장식을 넣는 속성은 text-decoration입니다. 따라서 text-decoration: none;이라고 작성하면 웹 페이지의 모든 a 태그에 대해 밑줄이 없어짐을 확인할 수 있습니다.
그리고 각 줄의 끝에 붙이는 세미콜론(;)은 구분자로서, 세미콜론이 없을 때 한 줄로 쓰면 각 줄을 서로 구분할 수 없습니다. 따라서 효과를 지정한 다음 항상 세미콜론을 적어야합니다.
현재 선택된 웹 페이지에만 링크에 밑줄 긋기
...
<li><a href="2.html" style="color:red; text-decoration:underline;">CSS</a></li>
...↓
현재 선택된 웹 페이지만큼은 링크에 밑줄을 긋고 싶다면 다음과 같이 코드를 작성하고 확인하면 원하는 결과를 얻을 수 있습니다.
정리하면 웹 페이지에 CSS를 삽입하는 방법으로 <style> 태그와 style 속성을 쓰면 된다는 것과 효과라는 것이 있다는 것, 그리고 하나의 선택자에 대해 여러 개의 효과를 지정할 수 있는데 그 경우에는 세미콜론으로 구분한다는 가장 기본적이고 중요한 문법을 살펴 봤습니다.
