키즈가오 카피 마지막수업을 했다. 이제 기본적인 틀이나 규칙적인 패턴을 파악하는데 적응되서 처음에는 막막하고 어렵게만 느껴졌던것이 한결 편하게 다가왔다.

1) 학습한 내용

우선 진도나간 내용안에서 간략하게 정리할부분을 요약하고 넘어가려한다.

bottom: initial;

이니셜은 바텀값을 가장 초기상태로 두겠다

전체를 아우르는 div는 position: relative를 사용하는것이 일반적이며 입문단계에서 사용되는 공식이다.

(복습) animation: moveSun linear 10s 1500ms infinite;

먼저나오는 숫자는 duration 나중에오는숫자는 dalay

Float 와 Clear

Float + clear:both
css는 콘텐츠를 블록방식과 인라인 방식 두가지가 있다. 블록방식은 한줄에 한개씩 새로운 박스를 보여주는 것이고 인라인은 말그대로 한줄에 나란히 요소를 보여준다.
인라인요소와 블록요소 모두 float속성을 가질 수 있다.
​
float은 기본적으로 떠 있는 상태로 배치가 된다.
웹페이지의 요소를 가로방향으로 왼쪽이나 오른쪽에 요소를 배치하고 싶다면 float을 사용하자.
​
float :left; -> 왼쪽 배치
float:right, -> 오른쪽 배치

float은 떠있는 상태다. float 속성이 적용되면 규칙을 벗어나 떠 있는 상태로 배치되기 때문에 다른 요소들이 있을 경우 float 속성을 그대로 전달 받게 된다. 그러면 레이아웃이 겹쳐지거나 틀어지는데 사용한 float 속성을 해지하여 다시 레아아웃을 맞춘다. 이 때 clear로 플롯을 해제시키면 다음 요소가 새로운 줄에 잘 배치된다. 둘은 짝꿍같은 존재다.
​
float으로 레이아웃을 짜다가 틀어졌다면 clear로 float을 해지하자
​
float:left만 해제 -> clear:left
floaright만 해제 -> cear:right
양쪽 모두해제 -> clear:borh

Html 코드를 작성할시에 항상 클래스 이름이나 구조를

규칙성있게 작성해야한다. 만약 그렇지 못할경우

이때 가독성이 떨어지고 전체적으로 밸런스가 무너지기쉽다.

1. night 만들기

2. morning 만들기

3. kitchen 만들기

4. color 만들기

5. 마지막 로고 만들기

부족하거나 알게된 내용은 모두 처음에 정리해두었다.

만들면서 느낀점은 사이트자체가 굉장히 기본적이면서도 배울점이 많다고 생각했다.

처음에는 너무복잡하고 어려워 보였던 웹페이지가 어느정도 기본코드들의 반복을 걸쳐서 만들어지는게 신기했다.

14일차 Github 실습내용

2) 학습내용 중 어려웠던 점

레이아웃을 실제 완성된 웹사이트처럼 사용해보니 이해했다고 생각했던 부분들도 어렵게 느껴지곤 했다.

3) 해결방법

구글링, 네이버 검색엔진 활용

4)학습소감

100번 보는거보다 1번 해보는게 낫다는 말처럼 기초이론을 할때와 다르게
만들면서 부딛치는 이슈들이 어려우면서도 앞으로 계속 해결해나가야함을 느꼈다.

그저 똑같이 카피웹페이지를 만드는것뿐인데도 오탈자나 구조가 뒤틀려서 다른 결과가 나오는경우들도 많았다.