□ 키즈가오 실습 1편 (2/2) - html과 css 기준
전체 코드
1. forest1
● top, bottom, left, right - 자기가 주도해서 움직이는 CSS 코드
● PC버전 결과
● 모바일버전 결과
2. forest2
● <img> 태그에서 이미지가 정상적으로 출력되지 않을 경우, alt에 입력한 내용이 출력됨
● position과 z-index가 동일할 경우, 뒤에 작성된 내용이 위에 배치됨
● 여기서 사용된 이미지들은 그림자 영역도 포함되어 있음
※ 작성된 순서대로 배치 작업을 진행해야 함 → 그렇지 않으면 결과가 정상적으로 나오지 않는 경우가 생김
● PC버전 결과
● 모바일버전 결과
3. forest3
● PC버전 결과
● 모바일버전 결과
4. science
● javaScript 활용을 위해, 항아리의 전체 이미지와 전면부 이미지 두가지를 사용함
→ 쌀알 이미지를 항아리 속으로 들어가는 이미지를 표현하기 위함
● scienceWrap 태그의 width값과 scienceLeftWrap, scienceCenterWrap, scienceRightWrap 태그들의 width값의 합은 같아야함 → 자식 태그의 크기가 초과할 경우, 줄바꿈 현상이 나타남
● 모바일버전에서 #science .scienceWrap { }의 자식속성들은 style.css에서 float를 사용하여, 자식들의 높이값이 부모의 높이값에 영향을 주지 못함
→
#science .scienceWrap {
overflow: hidden;
width: 360px;
height: auto;
}하지만 위와 같이 overflow: hidden을 사용함으로써 자식들의 높이값이 부모의 높이값에 영향을 줄 수 있게 됨
※ PC버전과 모바일버전의 이미지는 최대한 동일한 이미지를 사용해야 함
● PC버전 결과
● 모바일버전 결과
5. night1
● PC버전 결과
● 모바일버전 결과
□ 어려웠던 점
앞서 작성해왔던 내용들의 연장선과 같은 내용의 반복이 많아서, 큰 어려움은 없었습니다.
□ 해결방법
혹시나 코드 작성에 오타가 생기지 않도록, 작성 후 재차 확인을 통해서 정상적으로 작동하게 하였습니다.
□ 학습 소감
앞서 해왔던 내용의 반복과 연장선이라서 점차 position의 사용방법과 웹사이트 제작 시에 전체 구조를 만드는 방법이 어느 정도 익숙해졌습니다.
