과정명 : 대구 AI 스쿨 일반과정
강의 : 웹프로그래밍김인권_7키즈가오_210515(1/2)
주제 : css
키즈카오 홈페이지 카피켓
지금까지의 내용을 바탕으로 그동안 강의에서 샘플로 많이 등장했던 키즈가오 웹페이지 카피켓 실습을 진행하였다. 웹페이지 구성에 필요한 이미지 소스들은 사전에 준비되어 있었고 강의에 맞춰 웹페이지 제작에 들어갔다.
키즈가오의 파일은 html파일하나, css파일 셋 그리고 이미지 소스들로 구성되어 있다. css파일은 각각 style, animation, mobile로 나누어져 있었는데 기존 실습에서 헷갈리던 부분들이 역활에 따라 나누어 지니 읽는 것은 물론 코드를 이해하는 부분에서도 큰 도움이 되었다. 좋은 노하우를 배운듯 하다.
overflow-X
본격적으로 시작하기전에 하는 초기화 작업 중 overflow-X속성을 사용했다. 속성값은 hidden을 주어 브라우저의 X축을 넘어가는 오브젝트를 숨기도록 설정하였다. 브라우저 크기에 따라 변화하는 반응형 웹페이지를 안정적으로 유지하는데 필수적인 속성이라 생각한다.
웹페이지의 설계도면을 만들고 레이아웃을 구성하고 필요한 속성을 사용하여 배치하는 작업들은 그동안 배웠던 내용의들 복습과도 같았다. 물론 체계적으로 짜여진 레퍼런스를 갖고 이미지 소스들을 사용한 이번 작업물은 그동안의 결과물과 큰 질적 차이를 보였지만 그 내용은 이전에 배웠던 내용들이였다.
하지만 결과물의 완성도가 높이니 분명이전에 배웠던 내용임에도 불구하고 새롭게 느껴졌으며 이해도 또한 더 높아졌다. 그 부분에서는 분명 반복에서 오는 학습효과도 있다고 생각한다.
아직도 오타에 의한 오류가 종종 발생하고 있고 무언가 잘못 했는지 오브젝트의 배치가 제대로 이루어지지 않은 부분도 있었다.
position 속성의 relative와 absolute
사실 아직 position속성과 flow속성을 헷갈려한다. 오늘 실습에서 position속성을 유독 많이 사용해했는데 이해가 되었다 보다는 사용방법을 조금 터득한것 같다는 느낌이 든다. 부모 - 자식 관계의 오브젝트에서 배치할때 적용의 기준이 되는 개념이 이해되기 시작했다.
Review
위에서도 언급한 했던 것 처럼 높은 완성도를 갖춘 결과물을 확인하니 괜히더 집중과 이해도가 높아진 것 같다. 물론 좋은 강의와 좋은 소스 덕이라고 생각한다. 미디어 쿼리 파트에서 기기에 따라 대응하기 위해 두개의 css파일을 활용하기도 한다는 이야기를 들었을 때, 막연한 생각에는 더 번거로울 것이라 생각했다.
여러 css파일을 활용한는 것은 분명 번거로운 부분도 있었지만 하고자 하는 작업의 내용이 정리되어 작업을 훨씬 쉽게 진행할 수 있다고 느꼈다. 오늘의 이런 방법뿐만 아니라 다양한 코딩의 방법을 경험하고 싶다.
오늘 실습을 진행하며 특히 내가 정리가 되지 않는다고 느껴졌다. 초기부터 느껴졌던 선택자 사용의 혼란이나 파일을 활용하고 경로를 사용하는 등에서 따라가기 급급한 것이 프로그래밍 구조에 대한 이해가 부족하고 활용에 있어 뒤죽박죽 섞여있는 느낌이 계속 들었다. 그런 의미에서 오늘 여러개의 css파일을 활용하는 작업은 혼란에 대한 작은 실마리가 되었다.
