나도 개발자 시켜주세요

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

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

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

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..

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

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..

기본 선택자 가장 기본적인 선택자로 요소를 호출할 때 사용합니다. 전체 선택자 * HTML문서 내부의 모든 요소를 선택하는 선택자 * { color: skyblue; } 태그 선택자 태그 이름을 선택하는 선택자 노란색 li { background-color: yellow; color: blue; } 클래스 선택자 HTML clss 속성의 값 선택자 빨간색 주황색 .red { background-color: red; } .orange { background-color: orange; } 아이디 선택자 id 속성의 값 선택 초록색 #green_i { background-color: green; } 선택자 우선순위 : 전체 < tag < class < id 빨간색 주황색 클래스 지정 X 하늘색 초록색 li 태..

css : html 태그에 디자인을 넣어주는 언어 선택자 : 태그, id, class 에 스타일 적용 인라인 방식 인라인 방식 각각의 태그마다 적용 시켜야하고 재사용이 불가능합니다. 내장 방식 태그 내부에 사용할 style을 미리 선언하여 태그에 같은 스타일을 적용할 수 있습니다. 다만, 해당 html 에서만 사용할 수 있습니다. 링크 방식 스타일을 하나의 css 파일에 넣고, html 파일에서 css 파일을 링크해서 사용합니다. 재사용과 스타일 변경이 생겨도 무관합니다. @import 방식 css의 @import 규칙으로 css 문서 안에서 또 다른 css 를 가져와 연결하는 방식입니다. @import url(./ex1_import.css); p{ background-color: red; color: ..