기본문법
<style>
a(선택자 또는 selector){
color(property) : black(property value);
}(선언 또는 declaration)
</style>
style테그 안쪽에 원하는 속성 작성, style 테그는 head테그 안쪽에 작성.
style = "" : style을 html 속성 값으로 지정하여 사용할 수도 있음. 이때는 selector 필요없음.
Property
text-decoration : none; 테그에 있는 모든 텍스트 데코 없앰.
; : 여러개의 효과를 적용할때 세미콜론으로 구분함.
font-size : 글씨 크기 조정
text-align : center : 가운데 정렬
Selector
class : 같은 class인 테그들을 묶어서 selector로 만들 수 있음(.으로 class선택자 표현)
여러개의 값이 들어올 수 있고 띄어쓰기로 구분함.
ex. .saw{
color : gray;
}
.active{
color : red;
}
class = "saw active"
id : #으로 표현 id선택자 표현
테그 선택자 < class선택자 < id선택자
이유 : 일반적으로 웹에서 id의 값은 단 한번만 등장한다. 구체적인 것을 포괄적인 것보다 더 우선순위를 높인 경우.
Box model
html 테그들은 각 테그들의 성격에 따라 화면 전체를 쓰는 테그와 자신의 크기만큼의 부피를 가지는 테그들이 있다.
block level element : 화면 전체를 쓰는 테그
inline element : 자신의 크기만큼 부피를 갖는 테그
display : inline 또는 display : block을 통해 테크의 크기를 조절가능.
display : none을 통해 화면에서 안보이게 할 수 있음.
border-width : 선 너비
border-color : 선 색깔
border-style : 선 종류
border : 5px solid red 이런식으로 한꺼번에 쓰기 가능.
padding : 컨텐트와 테두리에 간격을 줌.
margin : 테두리와 테두리 사이에 간격을 정함.
width : element의 양옆 픽셀 크기를 제한함.
그리드
div : 아무런 의미가 없는 테그, 디자인에 사용됨. block level.
span : div와 같이 사용되지만 line 테그임.
display : grid
grid-template-columns : 10px 1fr, 한개는 10px 나머지는 가변적인 모양을 가지게 되면서 양옆으로 나열되게 해줌.
미디어 쿼리
ex.
@media(min-width:800px){
div{
display:none;
}
}
css 중복제거
link테그를 통해서 css파일을 불러와서 사용가능.
ex. <link rel = "stylesheet" href ="style.css">
