[포스코x코딩온] 1차 프로젝트 회고록

🪙 todays-account-book 프로젝트 소개 1인 가구를 위한 가계부 ✍ 프로젝트에서 담당한 기능 start page 떨어지는 동전 animate.style transform: translate(), rotate(), skew() 사용 animation-duration으로 동전마다 시간 조절 main 사용 설명서 sweetalert2 사용자의 여러 가지 경우 생각 -> then if문 반복 => 피드백 : 이 아니라 함수 사용을 했어야 했다. 다른 팀원께서 강사님께 질문했다가 피드백을 받은 부분이었다. 사용자가 사용 설명서를 읽을 경우 / 읽지 않을 경우 / 읽다가 중간에 닫을 경우를 생각하여 close 버튼과 다음 버튼으로 구성 하였다. 맞춤형 생활 정보 swiper slider 사용 cove..

• format_list_bulleted HTML & CSS & JS
• · 2023. 3. 27.
• textsms

[포스코x코딩온] 1차 프로젝트 중간 점검🔥 (feat.중간 점검까지 프로젝트 회고록)

03/17 팀 배정 강사님께서 배정해 주신 팀으로 팀을 배정받았다. 어색한 공기가 흐르는 정적을 깨고 자기소개를 하고, 팀원 간 간단한 인사를 주고받았다. 이렇게 어색해 죽겠는데 팀이름을 정하라는 말씀에 팀 이름까지 정하고 팀장님을 뽑았다. 깃 레포지토리 깃에서 팀 레포지토리를 만들고 팀원들 각 개인의 브랜치에서 pull/add/commit/push 하는 과정을 익혔다. 25일 (토) 2시 발표 누가 거짓말이라고 좀 해줬으면 좋겠는 심정이었다. 일주일 만에 모든 것을 끝내야 하는 프로젝트라 아무 생각이 들지 않았다. 03/18 계획서 작성 - 기획 시작, 팀 역할 분배, 레이아웃 구성 -> 자세한 구현은 개발하면서 수정 밥 먹기 전까지 계획서 다 제출하는 게 오늘의 반이었다. 팀원 모두 적극적으로 의견을..

• format_list_bulleted HTML & CSS & JS
• · 2023. 3. 23.
• textsms

[포스코X코딩온] CSS_06 Transition/Transform/Animation

transition : 요소의 값이 변할 때마다 전환되는 모션을 추가하는 속성이다. transition은 속성 자체로 스타일을 주는 속성이 아니라 가상 클래스 (ex. :hover) 나 자바스크립트의 부가적인 액션에 의해 사용된다. transition: 속성명 지속시간 타이밍함수 대기시간; transition-property : 효과를 적용할 속성 이름 지정 all : 모든 속성에 지정 속성 이름 : 전환 효과할 속성 이름 지정 - 여러 개 지정할 시 쉼표(,) 로 구분 transition-duration : 전환 효과의 지속시간 지정 os : 전환효과x 시간 : s 지정 transitio-timing-function : 전환 효과의 타이밍 함수 지정 ease 느리게-빠르게-느리게 cubic-bezier..

• format_list_bulleted HTML & CSS & JS
• · 2023. 3. 9.
• textsms

[포스코X코딩온] CSS_05 flex

flex 구조 flex 구조는 item이 설정된 속성에 따라 container 안에서 배치된다. display: flex; flex컨테이너를 사용하기 위해서는 display: flex; 를 정의한다. 각각의 아이템은 자신의 너비만큼 공간을 차지하고 높이는 컨테이너의 높이만큼 공간을 차지한다. 배치할 축을 main axis를 주축으로, cross axis 를 교차축으로 정렬한다. .container{ /* - main axis : 주축 (주축의 기본방향 좌 -> 우) - across axis : 교차축 */ display: flex; } flex-direction : 주축(main axis) 방향 설정 아이템이 배치되는 축을 좌->우 / 우-> 좌 / 위->아래 / 아래-> 위 로 지정한다. flex-di..

• format_list_bulleted HTML & CSS & JS
• · 2023. 3. 7.
• textsms

[포스코X코딩온] CSS_04 position & backgound

position 속성 static : 기본값 position : static; 기본값으로 position을 지정하지 않으면 요소가 차례대로 쌓인다. absolute : 위치 상 부모 요소를 기준 부모 요소 기준으로 top, bottom, left, right 만큼의 이동할 위치가 결정된다. 이미 위치가 정해져 있는 요소의 부모가 있는 위치에서부터 위치가 움직인다고 생각하자. relative : 요소 기준으로 지정 top, bottom, left, right 로 위치 조절이 가능하다. static 과의 차이점은 좌표(top, bottom, left, right)의 동작 여부이다. 쉽게 static은 위치를 지정하지 않은 것이다. fixed : 브라우저 기준 요소가 항상 고정된 위치에 있게 하는 요소이다. ..

• format_list_bulleted HTML & CSS & JS
• · 2023. 3. 7.
• textsms

[포스코X코딩온] CSS_03 속성 정리

Font 속성 font-weight - 글자의 두께를 정하는 속성 normal, 400 : 기본 두께 bold, 700 : 두껍게 bolder : 상위 요소보다 더 두껍게 lighter : 상위 요소보다 더 얇게 100~900 : 100단위의 숫자 9개, normal과 bold 이외 두께 normal, 400 : 기본 두께 bold, 700 : 두껍게 bolder : 상위 요소보다 더 두껍게 lighter : 상위 요소보다 더 얇게 100~900 : 100단위의 숫자 9개, normal과 bold 이외 두께 font-size : 글자의 크기 16px : 기본 크기 단위 : px, ex, rem 등 단위로 지정 % : 부모 요소의 폰트 크기에 대한 비율 smaller : 상위 요소보다 작은 크기 lager..

• format_list_bulleted HTML & CSS & JS
• · 2023. 3. 6.
• textsms