전체 글

TIL] flex

flex flex는 Flexible Box, Flexobx라고도 불리며 flex는 레이아웃 배치 전용 기능으로 고안되었다. 토이 프로젝트를 하면서 flex를 이용하였는데 매우 편리하였다! flex 관련 속성을 아래에서 살펴보자. flex-wrap flex-wrap은 요소들을 정렬하는 것이라고 생각하면 된다. flex-wrap 속성은 정렬된 요소들의 총넓이가 부모 넓이보다 클 때, 이 요소들을 다음 줄에 이어서 정렬해준다. flex-wrap은 display:flex;와 함께 사용한다. 아래의 예제를 살펴보자. 1 2 3 4 5 위의 코드와 코드의 결과 화면이다. 위의 코드에 flex-wrap을 적용하면 어떻게될까? 아래 예제를 살펴보자. 1 2 3 4 5 flex-wrap을 적용하면 위와 같이 나란히 정렬..

TIL] border

border border속성은 기초적인 속성이지만 다루지 않았기에 한번 다뤄보고 싶고 또한 토이 프로젝트를 진행하면서 border에 대해 공부해서 자세히 알아보고 싶었다. border는 테두리를 만드는 속성이고 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정한다. border 속성 값 border-width: 테두리의 두께 정하고 기본값은 medium이다. border-style: 선의 모양을 정하고 기본값은 none이다. border-color: 선의 색을 정한다. initial: 기본값으로 설정한다. inherit: 부모 요소의 속성 값을 상속받는다. border-style none dotted dashed solid double groove ridge inset outset border-style은 눈..

첫 협업! 팀토이프로젝트를 하며 느낀점

첫 번째 협업 팀 토이 프로젝트 개인 토이 프로젝트를 3개를 마치고 처음으로 협업 토이 프로젝트를 진행했다. 세 번째 토이 프로젝트는 포스팅하지 않았는데 세 번째 토이 프로젝트는 배경에 동영상을 넣고 지도 로그인 후 지도 기능 외에 두 번째 토이 프로젝트와 비슷하여 올리지 않았다! 세 번째 토이 프로젝트도 나에게 많은 것을 깨닫게 해 주었지만 포스팅하기는 민망했다! 첫 번째 협업에서 내가 맡은 파트는 로그인 기능 구현과 회원가입 구현 그리고 메모장 기능 구현이었다. 팀 토이 프로젝트를 하며 느낀 점 팀 토이프로젝트를 하면서 느낀 점은 우선 협업을 하니 확실하게 책임감이 더해졌다. 우선 팀에 피해가 가지 않도록 납기를 맞춰야 했고 내가 무언가 틀을 잡지 않거나 팀원분이 틀을 잡지 않으면 진행할 수 없는 상..