💻 학습내용

키즈가오 실습

POSITION

• position: relative;
  : static의 원래 위치 부터 계산
  top, bottom, right, left 값 사용 가능
• position: absolute;
  : 문서의 원래 위치와 상관없이 위치를 지정할 수 있음
  가장 가까운 부모 position을 기준으로 위치가 결정
  부모 position이 없으면 html 기준으로 설정
  top, bottom, right, left 값 사용 가능
• 부모 position: relative; , 자식position: absolute; 가장 일반적
  position 개념 설명 링크

float

: float은 이미지 주변에 텍스트를 감싸기 위한 용도로
만들어진 속성으로 컨테이너(부모) 안에서
대상의 좌우 배치(가로 정렬)를 결정.
예를 들면 우측에 사진을, 좌측에는 텍스트를 나누어 배치하고 싶을 때 사용
left, right, none(default), inherit(부모를 상속)
다만 float는 자신이 속한 컨테이너의 높이를 인지하지 못해 범위를 벗어나는 경우가 발생
다양한 해결방법이 있지만 flexbox를 활용하거나
float의 바깥을 감싸고 있는 컨테이너(예컨대 div)에 overflow: hidden;을 주는 방법이 권장

margin

margin :  0 auto;

auto를 통해서 양쪽의 마진 값을 동일하게 지정
(페이지의 사이즈가 어떻든 항상 가운데에 위치)

animation

#night1 .starWrap .star3 {
    animation: purpleStar 1s linear infinite alternate;
}

@keyframes purpleStar{
	from{transform: scale(1.1);}
	to{transform: scale(0.8);}
}

이미지를 커졌다 작아졌다 하는 효과는
transform: scale(1.1); 사용
scale(1.1)은 1.1배 만큼 값이 바뀐다는 의미

📝 마무리

어제에 이어서 키즈가오 사이트 만들기 실습을 했다.
계속해서 헷갈리는 부분과 새로 알게된 부분만 velog에 정리를 하였다.

오늘도 역시나 여러가지 오류가 발생을 했다.
1. margin 값에 px을 작성하지 않았다
➡️ html에 반영이 되지 않고 엉뚱한 곳에 위치하고 있었다.
2. img 경로를 빼먹었다.
➡️ mobile.css에서 img경로를 올바르게 작성하지 않았더니 이미지가 pc버전 이미지로 계속 적용이 되서 당황 스러웠다.
💛 위의 오류들은 강의를 잠시 멈추고 처음 부터 끝까지 기존의 키즈가오 홈페이지에서 크롬의 검사기능을 통하여 비교하면서 찾아내었다.

실습을 진행할 수록 선생님 영상을 보면서 따라서는 할 수 있지만 혼자서 과연 해나갈 수 있을지 걱정이 든다.
margin 값을 주는 기준이 궁금해서 질의응답을 하려고 들어갔더니 다른 학생이 이미 질문을 해서 선생님의 답변을 확인했다.
정해진 기준은 없고 혼자서 여러 값을 대입하면서 위치를 찾아가야 한다고 하셨다.
앞으로 남은 시간 동안 부지런하게 복습을 하면서 감을 익혀 나가야 겠다.