심리학과 2019011005 최현오
CSS의 각종 배치 방식을 활용하여 페이지 내의 요소들을 예쁘게 다듬는 것을 목적으로 한다. 또한 지금까지 배웠던 HTML 및 CSS의 요소들을 묶어 하나의 페이지를 만들어보고자 한다.
페이지가 화면애 꽉 차는 것이 아니라, 과제 PPT에 나온 것처럼 예쁜 비율로 페이지를 만들고 싶었다. body 태그 자체에 width 값을 줘서 너비를 고정하고, height를 auto로 설정해서 컨탠츠가 새로 들어오면 자동으로 길이가 길어지도록 했다.
메뉴와 페이지 이름 및 배경은 header로 묶었다. 메뉴들은 word-spacing을 통해 간격을 주었다.
배경과 그 위의 글자들은 class가 "page-name"인 div 태그로 묶었다. div position 값을 relative로 주고 자식 태그들의 position 값을 absolute로 줘서 자식들을 부모 블록을 기준으로 정렬할 수 있게 했다.
섹션 부분의 자식 태그는 section1, section2, photo, aside로 구성했다. 섹션의 display 값을 grid로 주고 grid-template-areas에 각 요소가 들어갈 자리를 미리 만들어두었다.
footer의 경우 "copyright Ⓒ"라는 글자를 중앙에 정렬하기 위해 footer의 display에 flex를 준 후 align-items를 center로 맞췄고, 글자가 들어있는 div태그에 margin의 좌우 값을 auto로 설정했다.
프로그래밍은 필요한 개념을 외울 때보다 직접 무엇이든 결과물을 만들어볼 때 실력이 늘어난다고 생각한다. 그동안 다른 전공 공부 때문에 웹 프로그래밍 수업에서 배운 내용으로 무엇을 만들 시간이 없었는데, 이번 과제를 기회로 웹 페이지를 직접 제작해보니 그동안 배웠던 개념들이 조금은 정리되는 느낌이다.
과제물을 만들면서 CSS보다 HTML 구조를 몇 번이나 뜯어고쳤다. HTML 자체만 보면 아무 문제가 없어 보였는데 막상 CSS로 예쁘게 정렬하려고 보면 구조가 맞지 않았기 때문이었다. 그 과정 덕분에 웹 페이지를 디자인하기 위해서 큰 틀부터 작은 틀까지 잡아가는 감을 조금은 얻었다.