css문법 (font나머지~ transition초반)

float나머지 

• 요소는 항상 수직으로 쌓이려고한다. float의 경우 수평정렬로 만들어지며, float:right 는 우측부터 3, 2, 1의 형태로 배열되고, float:left의 경우 좌측부터 1, 2, 3의 형태로 쌓이게 된다. 해제의 경우 clear를 입력하고 left는 left로 right는 right로 작성하여 해제한다. 그러나 구별하기 어렵거나, 유지보수의 문제로 clear:both를 사용한다. 해제를 하지않고 작성시에 요소는 중복되어 사용된다. 
• float의 속성이 적용된 요소의 주위로 다른요소들이 흐르게 되는데 이를 방지하기 위해 속성을 '해제;해야한다. 
• 해제의 방법은 

1. 다음형제 요소에 clear:left,right,both를 추가한다. 
2. 부모요소에 overflow:hidden,auto를 추가한다. (추천X) = 특정요소가 와도 불필요한 형제를 입력하지 않아, 용이하다. 그러나 관련없는 클래스를 작성하고 emmet하기 때문에 편법으로 사용하여 추천하지 않는다.
3. 부모요소에  clearfix클래스를 추가하여 해제한다 (추천!!) = .clearfix::after의 가상요소를 첨가하여 content:""; clear:both;display:block로 미리css를 정의하고, 필요한곳에 div class="clearfix"를 첨가한다. 1개의 class를 가지고 있어서 보수에 용이하도록 작성하는 방법이다. 

• float의 속성이 추가된 요소는 display가 대부분 block으로 수정된다. 그렇기 때문에 강제적으로 설정할 필요가 없다. inline과 table의 속성들이 수정되며, display값이 flex와 inline-flex인경우 효과가 없다 

clear : float의 속성이 적용되지 않도록 지정하는 해제의 기술이다. 

• none : 기본값으로 요소띄움을 허용시킴
• left,right,both(양쪽모두)

position =  요소의 위치지정 방법의 기준을 설정

• static :기본값으로 기준없음, 배치 불가
• relative :요소의 자신을 기준으로 배치
• absolute: 구조적이 아닌 위치상의 부모요소의 기준으로 배치
• fixed : 브라우저(뷰포트)의 기준으로 배치
• sticky:스크롤 영역으로 기준으로 배치, position의 경우 top, bottom, right, left 중 적어도 1개이상과 함께 사용하여야한다.

• 방향	%
  top(height) = y축	요소의 position 기준의 위쪽으로 거리를 설정, 부모요소의 세로너비의 비율 음수값을 허용함
  bottom(height)= y축	요소의 position 기준의 아래으로 거리를 설정, 부모요소의 세로너비의 비율 음수값을 허용함
  right(width) = x축	요소의 position 기준의 오른쪽으로 거리를 설정, 부모요소의 가로너비의 비율 음수값을 허용함
  left(width) = x축	요소의 position 기준의 왼쪽으로 거리를 설정, 부모요소의 가로너비의 비율 음수값을 허용함

• relative는 조심해서 사용하여야한다. absolue를 추천한다. {position:relative;}의 경우 스스로를 기준으로 삼고있기 때문에, 이동하기 위해서는 자기자신의 위치가 필요하기 때문에 형제 요소에 영향이 간다. 
• absolute는 위치상의 부모요소를 기준으로 하고 있어 부모요소의 설정을 위치상으로 지정을 안해둘 경우 body태그를 올라가 시스템을 부모요소로 하여 view포트가 부모요소의 역활을 하게 된다. 그렇기 때문에 부모요소에 따로 작성이 안되있을 경우 기계적으로 position:relative;를 입력하면 된다. 
• fixed는 viewport를 기준으로 배치된다. body의 height를 4000px로 설정하였다면, 스크롤이 생기는데 스크롤이 되더라도 설정한 위치에 고정된다. 예를 들면 쇼핑몰 고객상담과 동일하게 움직인다. 
• sticky는 스크롤 영역 기준으로 배치된다. 앞서 이야기한것처럼 top,bottom,left,right 중에서 적어도 1개이상은 입력을 해야한다. internet explorer에서는 사용이 불가하다. 일부분이 고정되어 스크롤 영역과 연관이 높다. 

요소 쌓임 순서 (stack order) = 자바의 정석에서 배웠던 main -> 1-> 2->3의 순서로 요소가 쌓이는 부분을 생각하면 쉽다. 요소가 쌓여있는 순서를 통해 어떤요소가 사용자와 가깝게 있는지(위로 쌓이는지)를 결정한다. ( Z축)

1.  static 을 제외한 position 속성의 값이 있을 경우 가장위에 쌓인다. 값은 무관하다. ( static : 없음이란 의미기 때문)
2.  position이 모두 존재할 경우, z-index속성의(유효값) 숫자값이 (특정값) 높을 수록 위에 쌓인다. 
3.  position의 속성값이 있고, z-index 속성의 숫자값이 같다면, html 의 마지막 코드 일수록 위에 쌓임( 나중에 작성한 코드(요소))

그림이 튀어나와 보이게 만드는 설정으로 1. html의 마지막 코드에 따라 튀어나와보이는 효과를 주고 , 2. position을 작성하고, 모두가 작성이 되어있다면(static제외) 3.z-index:100;의 수치를 통하여 튀어나와보이게 하는 효과를 줄수 있다.

display의 속성은 absolute, fixed의 속성값이 적용된 요소는 display 속성값이 대부분 block으로 변경된다. flex와 inline-flex의 경우 효과 X

Background = 요소의 배경을 설정

• background-color : 배경색상 기본값: transparent
• background-image: 하나이상의 배경을 이미지로 사용 기본값:none
• background-repeat: 배경이미지의 반복 기본값: repeat
• background-position : 배경이미지의 위치 기본값: 0 0;
• background-attachment 배경이미지의 스크롤 여부 (특성) 기본값: scroll
• background: 색상, 이미지 경로, 반복, 위치, 스크롤특성; 으로 단축입력 가능함.

background-color = 개별속성으로 색상을 입력함 기본값은 transparent로 투명함을 의미, 요소는 존재하지만 투명이라 티가 안남

background- image = 배경을 1개이상의 이미지 삽입이 가능함

• none : 이미지가 없음, 기본값
• background:url("이미지의 경로"-인수인자) no-repeat , url(2번째이미지경로에 대한 인수인자) repeat ,.....; 여러가지의 이미지를 혼합하여 사용가능, 처음에 입력한 1번의 값이 맨위로 올라와있고 그뒤로 쌓인다. 
• background-image는 사이즈가 정해져야 그범위내에서 설정한다. block요소의 경우 width :100%이고 height는 0이기때문에 입력을 해야한다. 
• 배경이미지보다 더 큰 크기를 설정하면 반복적으로 출력된다. 

background-repeat = 반복적으로 출력되는 이미지를 설정함

• repeat : 기본값으로 수식과 수평으로 반복된다. 
• no-repeat : 반복 중지 
• repeat-x : x축으로 (수평으로) 반복한다. 
• repeat-y : y축으로 (수직으로) 반복한다. 

background-position = 배경이미지 어디에 위치할지 설정

• 0% 0%;기본값 ( X% Y% )
• 방향을 입력하여도 좋고, 단위로도 가능하다.
• 왼쪽 상단 위치는 0% 0% , 오른쪽 하단은 100% 100% 이다.
• 값이 방향일 경우 방향1 방향2; 로 순서를 뒤바뀌어 작성하여도 된다. 
• 단위로 작성시 X축:100px Y축:200px 순서는 뒤바뀌어 작성할 수 없다. 
• 방향과 단위를 함께 작성할 경우 입력방법

• X축	Y축
  left	top
  right	bottom

background-attachment

• scroll : 기본값으로 요소가 스크롤 진행시 같이 움직여 배경이미지가 사라지게 된다
• fixed : 배경이미지가 뷰포트에 고정되어 요소와 같이 스크롤 되지않는다. 스타벅스 홈페이지처럼
• local : 요소내 스크롤시 배경이미지가 같이 이동된다. 같이 스크롤이 가능한 것은 흔치 않은 개념이다. 

background-size = 배경이미지의 크기

• auto : 이미지의 원래 크기 
• 단위 : background-size : width , height ; 으로 입력, width만 입력시 비율에 맞게 지정이 가능하다. 
• cover : 비율을 유지하며, 요소의 더 넓은 너비에 맞춰져 이미지가 잘릴 수 있다. 긴 너비
• contain : 비율을 유지하며 요소의 더 짧은 너비에 맞춰져 이미지가 잘리지 않지만, 여백이 생길 가능성이 있다. 짧은 너비
• 배경이미지의 크기를 잘 모르면 그냥 가로만 넣는게 크기가 조절 됨

Transitions(css 속성의 전환 효과) = css 속성의 시작과 끝을 지정해 애니메이션 효과를 주는 방법 , 항상 입력은 바뀌기전의 속성에 작성해야 함 1s=1000ms

• transition-property : 전환효과를 사용할 속성 이름 기본값 : all
• transition-duration : 지속시간의 설정 기본값 : 0s(sec)
• transtion-timing-function : 타이밍 함수 지정 기본값 : ease : 전환방법, 빠르다가 느리게, 느리다가 빠르게, 그냥지속적으로
• transition-delay : 대기시간 설정 기본값 : 0s
• transition: 속성 지속시간, 속성 지속시간; 으로 입력  

transition-property

• all : 기본값으로 모든속성을 적용함, 따로 속성을 입력하지 않고 s(sec)만 작성해도 가능함, 개별로 입력을 원할 때 속성의 이름을 작성하여 지정할 수 있다. 

transition-duration =전환효과의 지속시간을 설정함 기본값은 0s

transition-timing-function 구글에 검색하여 전환 효과를 설정할 수 있다. 

용어	효과
ease	빠르고 느리게
linear	일정하게
ease-in	느리고 빠르게
ease-out	빠르고 느리게
cubic-bezier	자신만의 값을 정의
steps(n)	n번째마다 끊어서 효과를 보여줌

transition: 시간 ease함수;

transition-delay = 전환효과의 대기시간 (s ,ms) 

transition : (전환시간 대기시간)으로 입력한다. 2s 2s;많이 사용되는 속성