가운데 정렬
-margin-left:auto; , margin-right:auto;
position
-absolute(유령화) relative(사람화,유령을 가둠)
-fixed(유령화,스크롤바) static(사람화)
html 만들 때 $는 1,2,3.....~~~
$$는 01,02,03....~~~
html의 모든 엘리먼트에는 앞뒤로 before와 after가 존재한다
css에서 before와 after를 사용해 앞뒤로 꾸며줄 수 있다.
ex) div::before { content:"멋진"; }
div::after { content:"님" }
==div와 beofre,after 관계는 부모자식 관계
cf. before와 after일 때만 :: 두번 붙인다
before와 after는 inline이다
transition(지연효과)
ex) div { width:50%;}
div:hover { width:100%; transition:width 2s}
==div의 넓이가 50% ~ 100%까지 늘어나는데 2초가 걸린다.
*** div는 평소 상태 div:hover은 마우스를 올렸을 때의 효과
***넓이든 높이든 기본값을 확실히 해줘야 효과가 나타난다
***div { transition:width 1s; } ==이제 div는 넓이가 바뀔 순 있지만 1초가 걸린다
기본값이 auto로 됐다면 효과는 나타나지 않는다
opacity(불투명도)
opacity:0; 투명
opacity:0.5; 반투명
opacity:1; 불투명