간단한 요약
이번 2회차 수업의 경우 설계 도면 작성이 핵심이다. 좋은 집을 지으려면 그 설계 도면부터 탄탄하게 구성을 해야하는 것 처럼 웹사이트의 구축도 마찬가지이다. 약간의 차이점은 웹사이트의 경우 언제든 수정이 가능하다는 장점은 있지만, 그래도 기존의 합의된 설계 및 그 과정을 변화시킨다는 것이 최선의 방법은 아닐 것이다. 따라서 효율적 설계를 위해선 요구되는 디자인 및 기능을 정확하게 배치할 수 있도록 많은 시행착오가 필요할 것이다.
수업 내용은 많은 실습으로 이루어졌기에 해당 코드를 모두 여기다가 옮기기엔 어렵다. 내가 필요한 정보만 아래에 정리해두었으며 전체 코드는 github에 정리하여 업로드하는 식으로 일지를 기록해나갈 생각이다.
배운 내용
설계 도면 작성
- 설계 도면 과정은 매우 중요하며 시간 및 노력을 아끼지 않아야 한다.
- 다양한 디자인의 사이트를 보며 설계 도면을 그리는 연습이 필요하다.
설계 도면 작성 시 크게 두 가지 기준
- 나중에 어떠한 컨텐츠를 옮길 때, 옮기는 횟수를 얼마나 줄일 수 있는 지 (후에 CSS와 연관된 내용)
- 비슷한 성격을 갖고 있는 컨텐츠를 한 공간에 잘 감싸고 있는 지 (현재 내가 따라가는 기준)
ex) 여러 개의 펜을 옮기려면 비슷한 종류의 펜을 하나의 공간(div)에 담아 옮길 수 있음
img 태그 이용 시 Tip
- https://via.placeholder.com/150 해당 주소를
img에 넣어, 내가 원하는 이미지 크기를 미리 볼 수 있음 - 숫자는 변경해서 이용 가능 Ex) 50x100
main
main태그는 익스플로러에서는 지원하지 않기에 반드시role="main"속성과 함께 사용
section
section태그는 그 영역을 나타내는 title 정보가 있어야 하기에h태그와 함께 사용해야 함
article
article태그 또한 그 영역을 나타내는 title 정보가 있어야 함 즉h태그를 함께 사용
어려웠던 내용
어려웠다기보단 예전에 그냥 넘겨짚고 간 부분이 있어 이번엔 제대로 확인하였다. 특히 section, article과 같이 특정 영역을 감싸는 부분의 태그는 h태그로 정보를 반드시 표현해야 한다는 점을 숙지했다.
해결 방법
해결이라기 보단... 앞으로의 연습과정에서 잊지 말고 해당 영역을 간단하지만 명확하게 대표할 수 있는 h정보를 기입해야 할 것이다.
소감
강사님이 직접 구축한 kidsgao사이트의 디자인이 무척 인상깊었다. 텍스트로 표현되는 정보는 최소화하고 직관적인 그림 정보를 효율적으로 사용하여 한 눈에 전하고자 하는 정보가 파악되었다. 놀라운 것은 그 구조를 뜯어보면 결국 내가 배운 div, ul, li, p등의 기본부터 시작한다는 것이다. 아직 내 배움이 미천하기에 어서 정진하여 이런 식의 직관적이면서 유려한 사이트를 구축하고 싶다.
진행한 나의 코드
코드를 전부 옮기기에는 정리하기가 애매하여 github 링크를 첨부한다.
