웹 페이지 실습 과제

심리학과 2019011005 최현오

1. 과제 주제

CSS의 각종 배치 방식을 활용하여 페이지 내의 요소들을 예쁘게 다듬는 것을 목적으로 한다. 또한 지금까지 배웠던 HTML 및 CSS의 요소들을 묶어 하나의 페이지를 만들어보고자 한다.

2. 주요 코드 설명

1. body

페이지가 화면애 꽉 차는 것이 아니라, 과제 PPT에 나온 것처럼 예쁜 비율로 페이지를 만들고 싶었다. body 태그 자체에 width 값을 줘서 너비를 고정하고, height를 auto로 설정해서 컨탠츠가 새로 들어오면 자동으로 길이가 길어지도록 했다.

2. header

메뉴와 페이지 이름 및 배경은 header로 묶었다. 메뉴들은 word-spacing을 통해 간격을 주었다.
배경과 그 위의 글자들은 class가 "page-name"인 div 태그로 묶었다. div position 값을 relative로 주고 자식 태그들의 position 값을 absolute로 줘서 자식들을 부모 블록을 기준으로 정렬할 수 있게 했다.

3. section

섹션 부분의 자식 태그는 section1, section2, photo, aside로 구성했다. 섹션의 display 값을 grid로 주고 grid-template-areas에 각 요소가 들어갈 자리를 미리 만들어두었다.

4. footer

footer의 경우 "copyright Ⓒ"라는 글자를 중앙에 정렬하기 위해 footer의 display에 flex를 준 후 align-items를 center로 맞췄고, 글자가 들어있는 div태그에 margin의 좌우 값을 auto로 설정했다.

3. 비고 및 고찰

프로그래밍은 필요한 개념을 외울 때보다 직접 무엇이든 결과물을 만들어볼 때 실력이 늘어난다고 생각한다. 그동안 다른 전공 공부 때문에 웹 프로그래밍 수업에서 배운 내용으로 무엇을 만들 시간이 없었는데, 이번 과제를 기회로 웹 페이지를 직접 제작해보니 그동안 배웠던 개념들이 조금은 정리되는 느낌이다.
과제물을 만들면서 CSS보다 HTML 구조를 몇 번이나 뜯어고쳤다. HTML 자체만 보면 아무 문제가 없어 보였는데 막상 CSS로 예쁘게 정렬하려고 보면 구조가 맞지 않았기 때문이었다. 그 과정 덕분에 웹 페이지를 디자인하기 위해서 큰 틀부터 작은 틀까지 잡아가는 감을 조금은 얻었다.