2021-06-03, 개발일지 키즈가오 2편 실습
학습한 내용
- night2
- morning
- kitchen
- color1
- color2
- color3
작업순서는 크게 2가지 입니다.
html -> css
세부적인 순서는 4가지 입니다.
html -> pc css -> animation css -> mobile css 입니다.
html 레이아웃 배치작업
pc버전 css 스타일 적용
애니메이션이 존재하면 애니메이션 css 적용
모바일 버전 css 스타일적용
모바일 화면
새로 배운 부분
미디어쿼리에서 bottom: initial; intial 속성값 을 사용하였습니다.
PC 버전에서 상속한 값을 사용안한다는 의미입니다.
position 정하지 못했다면 relative로 설정해두고 배치작업을 진행하면 된다고 합니다.
일관성, 규칙성 있는 클래스와 id, 유지보수 및 다른사람을 위해 작성 해야합니다.
레이아웃
night2
구성요소 : 배경, 말풍선, 달, 나무
말풍선은 img 태그를 사용합니다.
css background image를 사용하는대신 alt 값이 있어 img태그를 사용합니다.
말풍성, 나무 좌우 배치시 position값을 absolute로 설정하였습니다.
morning
배경, 태양, 왼쪽나무, 오른쪽나무
나무 좌우 배치시 position값을 absolute로 설정하였습니다.
kitchen
배경, 팬, 주전자, 스팀기계,버블, 말풍선
float를 사용하여, 팬과 주전자를 좌우 배치시킵니다.
스팀기계는 가운데정렬
말풍선은 오른쪽 하단에 배치시켜 브라우저 크기가 줄어들면 스팀기계 뒤쪽으로 이동하게 처리하였습니다.
color1
배경, 펭귄, 말풍선
펭귄은 position 속성을 주어서 top, left 를 사용하여 배치
말풍선은 float를 사용하고 margin을 이용해서 배치합니다.
color2
배경, 말, 버튼3개, 말풍선, 텍스트
말은 float를 사용해 오른쪽 상단 배치를 합니다.
말풍선, 버튼3개 텍스트는 세로배치이며, div태그로 묶습니다.
말이 float이기때문에 말풍선, 버튼3개, 텍스트로 묶은 div에 clear 속성을 추가합니다.
color3
배경, 깃발, 책, 로고, 주사위
깃발은 position속성을 주어서 left 50%를 활용해 가운데 정렬을 합니다.
책은 float를 사용하여 오른쪽 배치시킵니다.
로고는 position속성을 주어서 left 50% 가운데 정렬을 시켜줍니다.
주사위는 position속성 absolute를 주어서 왼쪽 하단에 고정값을 주어서 배치시킵니다.
애니메이션
night2 레이아웃의 달 이미지와 morning 레이아웃의 태양 이미지 애니메이션에서
동일하게 동작시 어색하므로 태양에 딜레이를 주어서 달이 늦게 출발하게 합니다.
달, 해를 왼쪽에서 오른쪽으로 이동시켜 주었습니다.
이미지크기만큼 왼쪽으로 옮긴후 오른쪽으로 110% 이동하였습니다.
포물선 애니메이션은 stylie 도구를 사용하여 작성 하였습니다.
모바일화면
pc에서는 애니메이션을 포함한 보이는 부분이 모바일에서는 작게 보이거나 숨겨집니다.
속성의 상속을 피하려면 속성값을 initial로 변경해줍니다.
color1에서 펭귄이 사라집니다.
학습한 내용 중 어려웠던 점 또는 해결못한 것들
없습니다.
해결방법 작성
없습니다.
학습 소감
이미지가 적어도 입력해야하는 코드가 적지는 않은것 같습니다.
가운데 정렬 같이 보여주는 화면의 결과는 같아도 다른 방법이 있다는걸 알게되었습니다.
