CSS정리

● div{display:in-line}(X) ->굳이 블록요소를 인라인화 해 줄 필요없다.

● text/font css

· 글자를 진하게 : font-weight

· 글자를 기울이기: font-style

· 폰트명 : font-family

· 글자색 : color

· 밑줄 : text-decoration : none underline line-through overline(강조)

· 행간 line-height

· 자간 : letter-spacing(+/-)

· 어간 : word-spacing

· 문단정렬 : text-align : left center right justify(인위적으로 조정)

font 함축형(fontfamiliy를 선언해야사용가능)

· font : style weight font-size /line-height font-family

​

​

● box-model CSS

· width / height / border / padding(내부여백) /margin(외부여백)

​

● background CSS -----> width height 가지고 있어야 한다.

· background-color

· background-image

· background-repeat

· background-position: left top right bottom center →(0 or 100% // 0 100px)

· background-attachment : scroll(기본값)/ fixed

· contain : 가로/세로 중 큰값 기준으로 채워줌

· cover : 선언한 영역 전체를 채울 때

· background함축형에서 size는 CSS5에서만 작동 그래서 / 해줌

· background 함축형

· background : color url(경로) repeat attachment position / size

​

● 가시성

· display : none / inline-block / block

· visibility : visible / hidden

*** display none : 요소의 영역도 사라짐

***visibility : hidden ->요소의 영역은 남음

​

● 흐름제어

· float : none /left / right(position 도 인라인)

· position : relative / absolute / fixed / static(기본값/포지션을 없애고 싶을때 사용)

​

● 기타

· z-index :position과 무조건 함께

· 요소의 불투명도 적용

***opacity : 0.1 → 하위요소 값도 같이 적용

***background-color : rgba(255,255,255,0.1) 그것만 적용

· 애니메이션 / 변형

***transform

· scale(크기)/rotate(회전)/skew(기울기)/translate(이동)

***transition : all 0.4s(기본시간)

***animation과 transition의 차이점

· transition : 마우스이벤트가 있어야한다.

· animation : 혼자돌아감.

​

· magin : 0 auto속성은 블록요소에만 된다.

​

​

​

● font Awsome(글자이모티콘)

-https://fontawesome.com/v4.7.0/

● background-image

-레이어를 하나더 얹질수있다.

-레이어조절가능

● img

-순서가있는속성은 1)---2)---3)---- 123 순번이 필요한이미지는 img를사용

​