TeamPage 프로젝트 하면서 다시 한번 알게 된 점

프로젝트를 진행하기에 앞서 첫번째로 프로젝트를 계획하고 그것을 와어프레임을 만드는 시간 동안 이걸 과연 해낼 수 있을까? 하는 걱정이 앞서고 있었습니다.

하지만 걱정을 할 시간에 튜터님에게 여러가지 이야기를 통해 방향성을 잡았고 그렇게 밑의 사진처럼 팀원들의 의견을 받아 draw.io를 통해 대략적으로 만들 수 있게 되었습니다.

또한, API 명세서를 작성하였는데 아직 정확하게 어떻게 작성하는지는 모르지만 앞선 선배님들이 작성한 것을 토대로 작성을 계속 진행하였고 나중에 하나하나 수정해 나가기로 팀원들과 이야기를 끝냈습니다.

 

일단 저의 목표는 첫번째로 데이터베이스 생각 하지 않고 겉모습 구현부터 해결하고 그 다음에 데이터베이스와 어떻게 연동할지를 생각하기로 했기 때문에 첫번째로 우리가 만들 홈페이지의 첫 화면을 먼저 꾸며보기로 했습니다.

 

HTML + CSS로 진행을 하던 도중 하나도 기억이 나질 않는 저는 처음부터 다시 공부했던 것을 봐가며 처음 공부할 때는 놓쳤던 것들을 기술하려고 합니다.

 

일단 div는 가로전체를 나타내기 때문에 가로 방향을 다 탐내고 싶은게 아니라면 가능한 큰 틀에서 쓰기 nav는 div보다 윗칸에 적어서 div를 감싸준다는 것 입니다.

여기서 아무 의미 없는 div로 각 영역을 나타내기 보다는 ul로 나타내거 그 안에 작은 글자 또는 도형들은 li로 감싸주는 것 입니다.

결론적으로 nav > div > ul > li 이런식으로 감싸고 

- nav : 네비게이션, 즉 다른 웹 페이지로 연결하거나, 현재 웹 페이지의 콘텐츠 내부로 연결되는 탐색을 위한 링크가 있는 영역을 나타냅니다. 

일반적인 예로는 메뉴, 목차, 색인 등이 있습니다.

- ul(unorder; 무질서): li들의 부모

- ol(order;질서): li들의 부모, 번호를 매깁니다.

- li: ul의 구성요소로 ul의 자식은 무조건 li입니다.

- a: 텍스트를 링크버튼으로 만든다.

말고도 엄청 많은 것들이 있지만 그때마다 찾으면서 알아가야 할 것 같습니다.

 

두번째로 레이아웃 설정에 관해서 알아갔습니다.

display: flex; 는 가로방향 배치, 자신의 내용물의 width만큼만 차지, 마치 inline요소와 비슷합니다.

justify-content: space-between; 는 스페이스를 사이사이에 넣어줘서 보기 이쁘게 해줍니다.

align-items: center; 는 수직적으로, 중간에 배치해줍니다.

세번째로 position속성을 통한 위치 조정하기입니다.

position: absolute; 는 절대적 위치 설정, 상단 오른쪽으로 올라갑니다.

right: 32px; 우측에서 32px 떨어진 곳에 위치합니다.

font-size: 24px; 는 명칭과 달리 아이콘의 이미지가 크게 하기 위한 조절입니다.

 

네번째로 hover를 통해 마우스를 버튼 또는 텍스트에 올리면 뒷 배경 또는 입체적인 효과를 만들어 줍니다.

 

마지막으로 가장 기본적이면서 중요한 것 입니다.

부트스트랩을 가져다 쓰기 위해서는 부트스트랩 link를 가져와야 하고 거기에다가 가져온 부트스트랩 이미지에 생명을 불어넣어줄 스크립트를 작성하기 위해서는 한번도 부트스트랩의 src 아직 정확하게 무엇인지는 모르지만 넣으니 해결이 되었습니다.

 

추가로 <img> alt 태그는  이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시합니다.