[22/02/04] CSS 기초

CSS 기초

CSS란 cascading style sheet

cascading ?

정의된 세부적인 것이 있다면 그것을 쓰고 정의 된 것이 없다면 그 다음 기본으로 지정된 것을 사용
Author style - 개발자 정의
User style - 사용자 정의
Browser - 브라우저 정의
cascading의 연결고리를 모두 무시 : !important

labling이 잘되어 있으면 css 선택이 쉬워짐

selectors 선택자
universal *
type tag
id #id
class .class
state :
attribute []

/* selector {
    property : value;
} */

/* universal */
* {
    color : green;
}
/* tag */
li{
    color : blue;
}
/* id */
#special {
    color: pink;
}
/* class */
.red {
    background: yellow;
}
/* state */
button:hover {
    color: red;
    background: beige;
}
/* attribute */
a[href] {
    color: purple;
}

a[href="naver.com"] {
    color: purple;
}
/* 속성값 ^ 시작 $ 끝 */
a[href^="naver"] {
    color: rgb(196, 101, 196);
}
.red {
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 20px;
    border: 2px dashed red;
    /* 
    border-width: 2px;
    border-style: solid;
    border-color: pink; 
    */
    background: yellow;
}

• div에 아무것도 없으면 지정한 색이 보이지 않음