[부트캠프] T1F4 프로젝트 1일차

프로젝트 명

팀원을 소개하는 홈페이지 만드는 프로젝트로

다음의 와이어 프레임을 기반으로 제작했다.

 

[ 와이어 프레임 ]

 

내가 맡은 역할 

사용자가 버튼을 누를 경우 표시될, 하단의 팀원 소개창 요소를 만드는 것이 내 역할이었다.

 

우선, 해당 요소를 다음과 같이 세분화하여 나눠보았다.

[ 1차 세분화 작업 ]

  

하지만 진행하는 과정에서 콘텐츠 정렬을 위해 아이템을 묶거나,

1. 2. 3과 같은 공통 옵션이 필요한 경우, 옵션 설정을 위해 class로 묶을 필요가 느껴졌고,

해당 작업을 위해 더 세분화하여 나눌 필요가 있었다.

[ 2차 세분화 작업 ]

해당 내용을 토대로 개발을 진행하였다.  

문제점

각 조원의 사진이 들어갈 myPhoto 영역이 제일 고비였었다.

사각형으로 구성된 이미지들을 원모양으로 잘라 사용해야하나 생각이 들었지만,

 

이미지에 대한 border_radius값을 50%로 설정하여 원으로 자른듯한 효과를 줘 해결하였다.

 

코드

Java-Boot-Camp/프로젝트/F1T4/myProfile.html at main · kkw2238/Java-Boot-Camp · GitHub

Java-Boot-Camp/프로젝트/F1T4/myProfile.html at main · kkw2238/Java-Boot-Camp

 

완성

[ 완성 이미지 ]