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

나는 저번주부터 부스토코스의 무료강의인 웹 프로그래밍(풀스택)과정을 듣는 중이다.

https://www.boostcourse.org/web316/project/4/content/3?isDesc=false#summary 

https://www.boostcourse.org/web316/project/4/content/3?isDesc=false#summary

 

저번 주 금요일에 part1. 웹 프로그래밍 기초강의를 듣고 오늘부터 첫 프로젝트인 PJT A-1. 나를 소개하는 홈페이지 만들기를 시작했다.

 

이 프로젝트는 단순히 무엇을 만들어보세요가 아니라 기능 요구사항을 담고 있는 기획서에 따라 진행해야 한다.

즉, 데모 프로젝트와 비슷하게 내 맘대로 만드는게 아니라 요구사항을 지키면서 나만의 프로젝트를 완성해야한다.

 

먼저, 웹 페이지에서 홈 화면을 만드는 것을 했다.

강의를 듣고서는 구현하기 쉬울 줄 알았는데 생각보다 시간도 오래걸리고 깨달을 점이 많았다.

전체적인 페이지 모습은 아래와 같다.

header영역에 있는 4가지(홈, 자기소개, 내사진, 몇시에요)를 클릭하면 연결된 페이지로 이동하게 된다.

그리고 아래의 section 영역에 있는 자기소개, 내사진도 클릭하면 연결된 페이지로 이동하게 된다.

출처: https://www.boostcourse.org/web316/project/4/content/3?isDesc=false#summary

처음에 요구사항을 확인하고 든 생각은 header, section, footer영역을 나누고 background-color를 주고

보여주고자하는 텍스트, 이미지 삽입하면 되겠지하고 쉽게 생각했다.

 

하지만 처음 header 부분의 홈, 자기소개, 내사진, 몇시에요를 구현하는 것부터 어려움이 느껴졌다.

연결된 페이지로 이동하기 위해서는 a태그를 이용해야한다고 생각해서 작성했다.

그 후, a태그의 크기가 서로 똑같기 때문에 width와 height를 같은 값으로 css를 주면 되겠다고 생각했다.

하지만 css로 width와 height값을 주었지만 변하지 않았다.

그 이유는 a태그는 inline형식이기 때문이였고 width와 height는 block형식의 태그만 바꿀 수 있다는 것을 알게 되었다.

 

그래서  a {display:block;}으로block형식으로 바꾸었더니 다른 문제가 생겼다.

block은 옆으로 쌓이는 것이 아니라 위아래로 쌓인다는 것이다.

position 값을 주어서 위치를 변경하면 되겠지 하는 생각으로 계속 값을 주었지만 원하는 위치에 오지 않았다.

그래서 block을 옆으로 쌓이게 하기 위해서는 float를 이용하면 되겠다는 생각으로 float를 주었고 일단은 해결되었다.

 

다음으로 section영역을 꾸미기 위해 텍스트를 쓰고 그 다음에 a태그를 넣어서 자기소개와 내사진을 넣었더니 문제가 발생했다.

a태그 boxrk section영역을 벗어나서 표시가 되었다.

똑같이 block형식으로 바꾸고 float를 주면 안되겠다는 생각을 하고 다시 한번 처음부터 생각했다.

 

a태그의 box의 크기를 바꾸고 옆으로 쌓이게 해야된다...

이 때 생각난 것이 inline형식을 유지하면서 padding값을 변경하여 내부 크기를 조정하면 a태그 box 크기가 늘어나게 된다는 것을 알게 되었고 inline형식을 유지하니까 자동적으로 옆으로 쌓이게 되었다.

 

처음에는 쉽다고 생각했는데 너무 오산이였다.

a태그만으로 힘들어하는 내 모습을 보고 기초부터 차근차근 되새기면서 해야겠다는 생각이 들었다.

다음에는 자기소개 페이지와 내사진 페이지를 완성해서 프로젝트를 끝내려고 한다.