1주차 팀 프로젝트(1) 팀원소개페이지 제작하기. 2024_08_27

• 본캠프를 시작하며 1주차부터 팀프로젝트 겸 미니 프로젝트인 '팀원소개페이지'를 제작하는 과제를 받음.

요구사항

담당역할

• 박태우(조장) : 깃헙 Reopository , 방명록 기능제작(CRUD 기능)

• 조성준 : 와이어프레임, 구글폼 작성, 메인화면CSS 제작

• 윤영한 : 디자인, 텍스트에어리어(설명란 등..) CSS 제작

• 이지훈 : 디자인2, 상세 자기소개 페이지 제작

사용기술

• HTML

• JavaScript

• CSS

• GitHub

와이어 프레임

• 팀원들과의 회의를 끝에 임팩트 있는 페이지를 제작하기로 결정. 밈을 적극활용하기로 결정이 됐다.
  그 중 하나인 유희왕 카드의 디자인을 본따 만들기로 결정.

진행과정

• 첫번째론 협업을 진행하는 팀프로젝트기에 GIT, Github를 세팅 후 브런치를 제작하여 별도의 공간에서 코딩을 맡을수 있도록 세팅하였다.

• 메인 CSS와 html 뼈대를 맡았기에 배포가 빨라야 팀의 진행속도가 빨라야 판단. 작업을 바로진행하였다.

• 그중 내가맡은부분은 타이틀바와 대문, 그리고 팀원을 간다하게 소개할수 있는 카드부분을 진행하였으며, 웹종합반 강의를 토대로 충분히 만들수있다 판단하였다.

작업결과물

• 임팩트가 중요하기에 아직 결과화면은 비공개.

작업하며 나온 문제와 해결방안.

1. 텍스트 외곽선 삽입

• 현재는 흰배경이지만 처음에는 그림배경을 사용. 글씨가 잘안보여 텍스트에 외곽선을 삽입했다.

  text-shadow: -1px 0px black, 0px 1px black, 1px 0px black, 0px -1px black;

참조 : https://yam-cha.tistory.com/162

2. div 태그에 박스 테두리 적용

• 각각의 영역구분에 대한 선이 없다보니 사진영역끼리의 충돌부분이나 텍스트영역의 처리, 그리고 제일 중요한 카드의 형태로 표현이 불가능.

• border : 요소테두리 설정 속성

  border: 3px outset;

참조 : https://coding-factory.tistory.com/923

3. text 작성에 대한 간편화

• 그외에 text 영역 css를 대충 맞추며, 다른 프로그래밍 언어처럼 줄바꿈키워드등을 넣어야 좀더 편한 글삽입이 된다는걸 확인.

  

<pre></pre> 키워드를 통해 텍스트영역 지정.

• pre는 'preformatted' 약자로, 태그 내에 있는 엔터와 스페이스가 그대로 웹 브라우저에 적용되어 보여지게 된다.

참조 : https://hianna.tistory.com/300

4. 배경이미지 사이즈 최적화.

• 이미지의 크기가 들쑥날쑥해 카드의 크기들이 달라지거나 타이틀 바 의 아이콘이 마구 반복되는상황이 발생.

• 이미지의 크기는 다양한 속성을 사용해봤지만 어쩔수 없이 고정 픽셀화.

background-position-x: 39%;
background-repeat: no-repeat;
background-size: 8%;

• background-repeat: no-repeat; : 반복 여부와 반복 방향을 제시.

참조 : https://yunamom.tistory.com/184

향후 일정