21.07.15

키즈가오 실습이 마무리에 접어들었다
어제 적었던 일지를 이어 어제 헷갈리고 모르는것들 정리해보았다
어제와 오늘 헷갈리는게 같기에,.,.

position

position : static; 기본값

position : relative; 는 static의원래 위치부터 계산하며 top, bottom, right, left값 사용가능함

position : absolute; 문서의 원래 위치와 상관없이 위치를 지정할수있음
가장 가까운 부모 포지션을 기준으로 위치가 결정됨
부모가 없으면 html기준으서 설정 relative와 같이 top, bottom, right, left값 사용가능함

부모 position : relative; 자식 position : absolute;이 가장 일반적임

---

float

이미지 주변 텍스트를 감싸기 위한 용도
만들어진 속성을 컨테이너 안에서 대상의 좌우 배치를 결정함 left, right, none(default), inherit(부모를 상속)

주의점 : 자신이 속한 컨테이너의 높이를 인지하지 못해 범위를 벗어나느 ㄴ경우가 발생하는데 이때 flexbox를 사용하거나 float의 바깥을 감싸고 있는 컨테이너에 overflow:hidden을 주는 방법이 있음 (다양한 해결방법이 많음!)

---

margin

마진값을 어떡해 측정하는 지 몰라 질문할려고 질의응답란에 들어가보니 이미 같은 질문을 한 학우분이 있었다. ㅎㅎ 나혼자만 모르는게 아니구나 라는 안도감과 정해진 기준은 없고 혼자서 여러 값을 대입하면서 위치를 찾아가야한다고,., 앞으로 열심히 여러가지 값을 넣어가면서 익혀보자!ㅇㅁㅇ)99

---

animation

계속 한줄로 써서 이제 뭐였지하는데 다시 한번 정리하고 갑세

#night2 .moon {
	animation: moveMoon linear 10s infinite;
}

@keyframes moveMoon {
	from {
		margin-left: -135px;
	}
	to {
		margin-left: 110%;
	}
}

-animation-name: moveMoon
name은 @keyframes 속성에서 설정한 애니메이션의 이름이다. 이름을 설정해야 애니메이션을 재생할 수 있다 이름을 정의해야 애니메이션을 재생(호출)할 수 있습니다.

-animation-delay : 로드되고 나서 언제 시작할지

-animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정( normal,reverse,alternate,alternate-reverse,initial,inherit )

-animation-duration : 애니메이션이 진행시간 (3초 = 3s 으로 표시)

-animation-iteration-count : 몇 번 반복 (infinite : 계속반복)

-animation-play-state : 애니메이션 시작 또는 정지 상태 (running , paused )

-animation-timing-function : 애니메이션 속도(가속/감속 시간간격등 설정)
(inear,ease,ease-in,ease-out,ease-in-out,step-start,step-end,steps(int,start|end),cubic-bezier(n,n,n,n),initial,inherit )

-animation-fill-mode : 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정
애니메이션이 끝난후 처음상태로? 끝난 상태로? (none,forwards,backwards,both,initial,inherit)

애니메이션 발생시점은
처음과 끝을 뜻하는 from(0%), to(100%) @keyframe 을 통해 지정해주어야 함.

https://jeremyckahn.github.io/stylie/
에서 포물선등 복붙해서 사용가능

한줄로 씉때 속성들의 순서는 상관없지만 7s등 숫자 속성(듀레이션 딜레이)는 듀레이션 먼저 딜레이가 뒤에 와랴함!

---

선생님이 나만의 기준을 가지고(클래스명과 아이디) 다시 한번 작성해보라는데 따라하는것도 벅찼는데 혼자 만들어볼생각에 좀 암담함 내가 이걸 할수있다고? 이상태되벌임
하지만 말이죠 재밋을거같단 말이죠 혼자 하면서 하나하나 서치해서 코드익히는게 좀 더 내가 잘 외울수잇고 계속 생각할수있을듯!
주말에 함 해보자