o 기본 입력 형식
선택자 { 속성1 : 값1; 속성2: 값2 }
o css의 인코딩 방식 설정: 문서 맨 위에 @charset "utf-8"; 입력
o 적용방식
*{} : 전체 스타일 적용
태그{} : 태그 내부에 스타일 적용
.이름{} : <태그 class="이름">에 스타일 적용
#이름 : <태그 id="이름">에 스타일 적용
o css파일 html에 불러오기
<link rel="stylesheet" href = "파일명.css">
o 여백 스타일
div {
margin: 20px 50px 75px 100px; <!--사이즈값은 시계방향으로 위오아왼-->
margin: 20px 50px 75px 100px; <!--사이즈값은 시계방향으로 위오아왼-->
margin: auto;/*수평을 기준으로 가운데 정렬*/
border: 1px dotted #4CAF50;
}
*margin 부모자식 위치 확인해야(부모블럭 안의 자식블럭에 적용된 경우 부모블럭과의 여백이 됨)
o selector
부모태그a>자식태그b {}
태그1,태그2{} <!--두 태그 모두에 스타일 적용-->
태그.클래스명{}
<!--id nav의 하위 ol의 하위 li에 있는 자식요소 중 두번째-->
#nav>ol>li:nth-child(2){}
o position(배치 방법의 지정)
1) absolute(본래 자신 위치 버리고 부모를 기준으로 상대적 위치 결정)
-이때 부모에 position: ralaative; 주어야
o fixed (브라우저 전체 기준 위치 고정)
o sticky (fixed와 달리 다른 요소 덮지 않고 고정)
o z-index (내림차순의 레이어 순서 정하기)
o float (블럭요소의 세로 배치를 가로 배치로 변경)
div {border:1px solid blue; width: 100px; height: 100px; float: left;}
/*float속성은 전 요소 속성을 상속받는 특징이 있음.
/* 6)에서 상속받은 float:left속성을 지워야 함*/
/**/
/*footer { border: 5px solid orange; height: 100px; clear: left; --clear:rigth;}*/
/*cler:both는 left, right 모두 해제*/
o box-sizing: border-box;
/*선 굵기나 여백 등으로 인해 늘어난 부분은 부모 크기에 맞게 알아서 해결하라*/
o css에 이미지삽입
/*background-image로 넣고 백그라운드 사이즈와 이미지사이즈 일치시켜야*/
#menu>.gear:nth-child(2) {
position: absolute;
background-image: url(../images/gear-gray.png);
background-size: 80px 80px;
width: 80px;
height: 80px;
left: 123px;
top: 95px;
transform: rotate(25deg);
o transition(움직임)과 transform(변화)
#menu:hover>.gear:nth-child(1) {
transition: .4s linear; /*천천히 4초간 움직임*/
transition: .4s ease; /*빠르게 4초간 움직임*/
transform: rotate(-180deg); /*반시계 반바퀴 회전*/
}
o transform
<!--2D transforms -->
<!--translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()-->