Cascading Style Sheets
1. 선택자 O
<style>
a { // a {~} : '선택자(Selector)'
color:red; // 'declaration'(color : property / red : value)
}
</style>
2. 선택자 X
<a href="~~" style="color:red"> // style은 html의 속성이며, style안으로 CSS 설명이 들어온다.
<style>
.saw { // class가 saw인 태그를 가리키는 명령어
color:gray;
}
#active {
color:red;
}
</style>
<a href="~" class="saw">~~</a>
<a href="~" class="saw">~~</a>
<a href="~" class="saw" id="active">~~</a>
element는 block level element, inline element로 나눠진다.
h1{
display : inline // 원래 block인데 inline으로 바꾼 경우
}
a{
display : block // 원래 inline인데 block으로 바꾼 경우
}
h1 {
border-width:5px;
border-color:red;
border-style:solid;
border:5
}
a {
border-width:5px;
border-color:red;
border-style:solid;
border:5
}
--------------------
h1, a {
border:5px solid red; // 위와 같다.
}
#grid ol { // grid 안의 ol을 지정하는 선택자.
~
}
<div id="grid">
<ol>
...
</ol>
</div>
<ol> ~ </ol>
<style>
div{
~
}
@media(max-width:800px) { // 800픽셀 이상부터는 display가 none!
div{
display:none;
}
}
</style>