웹 페이지에 CSS 문법을 포함시키는 법(웹페이지에게 CSS범위 알려주기)
1. style 태그 사용하기 <style> Selector {Declaration;} </style>
- 웹페이지에서 한 태그와 관련 된 모든 글씨 스타일을 바꾸고 싶을 경우 style 태그를 사용한다.
- style태그는 head태그에 포함시킨다.
- <style> 지정 할 태그 { Property:Property Value; }</style>
- 여러가지 효과를 동시에 사용하기 위해서 ;(세미클론)으로 구분 지어준다.
<head>
<style>
a {
color:black;
text-decoration: none;
}
</style>
</head>
2. style 속성 사용하기 <태그 style="Declaration">
- 웹페이지에서 특정 문장에만 효과를 주고 싶을 경우 style 속성을 사용한다.
- <태그 style="Property:Property Value">
- 2가지 이상의 효과를 주고 싶으면 효과 끝에 ;(세미콜론)으로 마무리 해준다.
<li><a href="2.html" style="color:red;text-decoration:underline">CSS</a></li>
css의 문법
a {
color:black;
}- Selector : 선택자, 이 웹페이지에서 지정한 모든 태그를 선택한다. (위에서는 'a'가 선택자)
- Declaration : 선언, 효과, 선택자가 지정하는 태그들에 대해서 어떤 효과를 줄 것인지 말한다. (중괄호({})안에 있는 것들로 위에서는 'color:black;'가 효과 )
- Property : 속성(위에서는 'color'가 속성)
- Property Value : 속성 값(위에서는 'black'이 속성 값)
css문법 공부 방법
무슨 선택자와 무슨 속성인지 몰라도 선택자와 속성이라는 것을 알게 됐다.
필요하거나 모르겠는 선택자와 속성을 검색 할 수 있게 됐다.
웹페이지를 디자인 하는 어떠한 Property(속성)가 존재하는지 알아가는 과정.
그 효과를 정확하게 선택해서 지정하기 위해서 다양한 선택자(Selector)를 알아가는 과정.
'프로그래밍언어 > CSS' 카테고리의 다른 글
| [CSS] Grid(그리드) (0) | 2020.12.01 |
|---|---|
| [CSS] 박스모델 (0) | 2020.11.25 |
| [CSS] 선택자들 (0) | 2020.11.21 |
| [CSS] Property(속성) 검색 하는 법(+폰트 크기 속성, 글 정렬 속성) (0) | 2020.11.20 |
| [CSS] CSS언어의 등장 전과 후 (0) | 2020.11.18 |
