출처 : 드림코딩
Cascading Style Sheet : 세부적인 정의가 있다면 스타일 적용을 하고 정의되어있는 게 없다면 다음 기본으로 지정된 스타일을 적용한다.
Author Style> User Style> Browser 순으로 스타일 우선순위가 적용된다.
!important: 위의 연결고리를 무시하고 이 코드가 적용된 스타일을 가장 중요한 정의로 한다. (쓰지 않는 것이 좋음)
기본 문법 : selector{property : value;}
ex)
*{color: green;}
div{
width: 100px;
height: 100px;
background: yellow;}
div자체는 비어있지만 width, height를 줌으로써 꾸밀 수
있음!
button:hover{
color:red;
background: beige;}
button:hover 띄어쓰기 하지 않음!
hover : 커서가 요소 위에 올라가 있으면 선택된다.
a[href^="naver"]{
color:purple;}
a[href$=".com"]{
color:black;}
a[href^="naver"] : naver로 시작하는 a tag
a[href$=".com"] : .com로 끝나는 a tag
li #special{
color: pink;}
li 내의 태그들 중 id가 special인 태그들을 선택한다.
padding : contents 안에 들어가는 공간
margin : contents 밖에 들어가는 공간.
<padding 문법>
padding (padding-top) (padding-right) (padding-bottom) (padding-left)
padding (padding-top,bottom)(padding-right,left)
div{padding 20px 20px 20px 20px};
span{padding 20px 0px};
참고) MDN css reference 에서 css 정보들 확인 가능!
display : inline => 문자 자체만 꾸며준다. 문자 자체의 공간만 차지한다. 한줄에 여러 item 들어갈 수 있다.
display : block => item 하나가 한줄 전체를 차지한다.
display : inline-block => 한줄에 item 전부 들어가지만, 지정한 style대로 표기가 가능하다.
position 의 기본값 : static
원래있던 자리에서 상대적으로 효과가 적용된다.
ex)
.container{
left:20px;
top:20px;
position:relative;}
원래있던 자리로부터 상대적으로 위치가 변경이 된다.
내 item과 가장 가까운 item 안에서 효과가 적용된다.
.container{
left:20px;
top:20px;
position:absolute;}
가장 가까이 있는 박스 내에서 위치가 변경이 된다.
container에서 완전에 벗어나 page상에서 효과가 적용이 된다.
.container{
left:20px;
top:20px;
position:fixed;}
원래 있던 자리를 고정한다. scrolling을 해도 위치가 고정이 된다.
.container{
position:sticky;}
참고)