PJT 1. 나를 소개하는 홈페이지 만들기 (2일차, 완성)

어제에 이어 나를 소개하는 홈페이지 만들기 프로젝트를 완성했다.

 

오늘은 자기소개 페이지와 내사진 페이지를 만들었다.

 

요구사항은 글자의 크기나 글꼴은 같은 수준의 태그에서는 같아야하고 위치나 간격 등 세부적인 것을 요구했다.

 

자기소개 페이지에서 이 요구사항을 해결하기 위해 나는 text-align은 left로 준 후에 margin값은 조절하면서 간격을 맞추려고 했다.

이 방법말고는 position을 상위 수준에 기준에서 변경가능한 absloute로 주면 될 것같다.

 

그 다음으로 내사진 페이지를 구현하는데 어려움을 느꼈다.

section 안에 2개의 영역이 나뉘어지고 하나의 영역에 이미지와 글이 써져있었다.

이미지와 글을 div안에 넣었더니 위아래로 배열이 나와 옆으로 쌓기위해 도전했다.

처음에는 position으로 위치를 주려고 했지만 section이 하위내용을 인식못하여 배경색이 나오지를 않았다.

 

이 방법이 아니겠다는 생각을 했고 float를 쓰려고 했다.

이미지는 원하는 위치에 있으니까 글의 위치만 옮기면 되겠지 하고 float를 글에게만 left로 주었더니

옆으로 위치는 했는데 이미지의 오른쪽이 아닌 왼쪽으로 위치하게 되었다.

그래서 이미지와 글 (총 4개 태그)에게 float를 주었더니 section 안에서 진짜 구름같이 붕 떠서 아무곳이나 위치해있었다.

 

무엇이 문제인지 검색으로 통해 찾아보려 했고 이미지와 글을 담고있는 div가 float를 자신의 자식인지 인지를 못해서 그렇겠다는 생각으로 div에 css로 overflow: auto를 주어 문제를 해결했다.

 

 

<전체적인 프로젝트 후기>

처음 프로젝트 기획서를 봤을 때는 쉽게 해결할 수 있겠다는 생각을 했다.

하지만, servlet으로 간단한 페이지를 구현하는 것도 벅차했고 간단히 css로 position과 float를 주어 위치를 변경하는 것도 힘들어하는 내 모습을 보고 난 진짜 많이 부족하다는 것을 느꼈다.

 

이제 강의가 5파트가 남았는데 초심을 잃지말고 최대한 많은 내용을 얻어가려고 해야겠다.

 

아래의 동영상은 웹 페이지 구현 영상이다.

 

 

코드는 아래와 같은 부스트코스의 지시가 있어 깃헙에 올리지는 못한다...