4_css3_(기본정리)

------------ 01. 개념 ------------
@CSS3 : Cascading Style Sheet 
HTML 같은 마크업 언어에 종속되어
레이아웃과 스타일을 정의하는 자유도 높은 마크업언어
------------ 02~03. 선택자 --------------
@선택자 : 특정한 HTML태그를 선택할때 사용하는 기능
원하는 태그를 선택하여 스타일, 기능을 적용할수있음

@동위선택자 : 동위 관계에서 뒤에 위치한 태그 선택

@p:[]-child{} : 같은 형제타입만
@p:[]-of-type{} : 같은 형제타입만(다른타입섞여도됨)
@p:not(:속성)){} : 부정 선택자

--------------04. 선택자 우선순위----------

!importmant>인라인스타일>#아이디>.클래스>태그

---------------05. 글꼴  -------------
@font-family : 텍스트의 글꼴지정 속성

@font-weight : 글꼴두께 (lighter, bold, bolder)

@글꼴크기 : px, em, %;

---------------06. 텍스트스타일 ----------------
@16진수 숫자 : {color : #ff0000}
@ rgb값 : {color : rgb(255,0,0);}
@ 텍스트 밑줄 없애기 : {text-decoration: none;}
@ 텍스트 밑줄 : {text-decoration:underline;}
@ 텍스트 윗줄 : {text-decoration:overline;}
@ 삭제선 : {text-decoration: line-through;}

--------------07. 문단 스타일 -----------------
@text-align : center , left, right , justify

--------------08. 목록스타일 ------------
list-style-type : circle, none; url("~~~");
--------------11. 레이아웃스타일 -------------
@display : inline 
인라인요소는 width, height 요소가 무시됨
@display : inline-block
인라인요소로 변경되지만 width, height 요소 적용가능
@display : block

-------------13. 레이아웃스타일3 -------------
@padding : 테두리와 속성사이의 간격을 조정하는 속성
@margin : 다른요소들간의 간격을 조정하는 속성

-------------14. 레이아웃스타일4 -------------
@position : relative 
속성이 설정된 요소 내 하위요소들은 top, bottom, 
left, right 속성을 이용하여 위치를 지정할수 있음

@position : absolute 
속성은 기본적인 요소의 배치 순서를 무시하고 지정된
절대 위치(절대좌표)에 요소를 표시하게 하는 속성
단, 상위요소가 relative 또는 absolute 속성을 가지고
있는 경우 상위요소를 기준으로 상대적인 위치를 가지게됨

@position : fixed
고정위치(fixed)는 브라우저 창을 기준으로 요소가 항상
고정된 위치를 가지게 하는 속성

@z-index
요소가 쌓이는 순서를 지정하는 속성
지정된 숫자가 클수록 위쪽에 쌓임
# z-index는 relative, absolute, fixed position이 설정된
요소에만 정상 동작함
# z-index를 사용하였는데 정상동작하지않은 경우
상위요소에 position:relative를 추가하면 해결될 가능성이
높음

@visibility : hidden
요소는 보이지 않지만 페이지 공간을 차지하고 있음

@display : none
요소도 보이지 않고 공간도 차지하지 않음

@float : 요소를 띄어서 정렬하는 속성
요소들이 float로 설정된 방향으로 흐르듯이 정렬되어 배치됨

@clear : float로 인해 요소들이 띄어져 흐른느 상태를
해제하는 속성 (양쪽모두 : both)

----------------15.변형----------------
transform : translate(??px); 
좌 우 대각선 이동
transform : scale(?);
확대
transform : rotate(??deg);
회전
transform : skew(??deg); 
뒤틀기

----------------18.트랜지션--------------
시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는것

---------------html 구조 ---------------
@box-sizing
width, height 설정 시 기본적으로 content 영역의크기만
설정됨
box-sizing은 width, height가 설정하는 영역을 지정해주는
속성
------------------ style 따로 빼기 (----------
< link rel = "stylesheet" href="sytle.css" type="text/css"