미션 수행 중 느낀 점 패스트캠퍼스 프론트엔드 올인원 with React 100% 환급 챌린지 50일 미션을 모두 달성했습니다! 10월 중순부터 12월 중후반까지, 매일 강의를 듣고 복습 겸 공부 메모를 블로그에 해왔는데요. 50일 동안, 주말이나 개인적으로 지정한 쉬는 날과 상관없이 매일 두 클립 이상 강의를 듣고 블로그 글을 쓰는 건 생각보다 힘이 들어갔습니다. 물론 제가 하루에 웬만하면 3~4클립 이상을 들으려고 했어서일 수도 있습니다. 😂 하지만 덕분에! 50일 동안 HTML의 시멘틱(Semantic) 태그 내용 공부를 포함하여, 잘 다루지 못했던 CSS까지 '개념 공부 및 예제 실습까지는 최소한 해봤다!'는 레벨이 되었어요. 강사님들께서 귀에 쏙쏙 들어오는 명강의를 해주셨기 때문에 더 잘 따라갈..
패스트캠퍼스 프론트엔드 올인원 with React 공부 정리글입니다! 이 글은 2020/12/09~2020/12/10 동안 학습한 18번째 커리큘럼인 CSS/속성- 애니메이션 & 다단에 관한 내용을 담고 있습니다. animation ◾ 요소의 애니메이션을 설정 및 제어 (단축 속성) ◾ 관련 개별 속성 값 ⬇ 값 의미 기본값 animation-name @keyframes 규칙의 이름을 지정 none animation-duration 애니메이션의 지속 시간 설정 0s animation-timing-function 타이밍 함수 지정 ease animation-delay 애니메이션의 대기 시간 설정 0s animation-iteration-count 애니메이션의 반복 횟수 설정 1 animation-direc..
패스트캠퍼스 프론트엔드 올인원 with React 공부 정리글입니다! 50일 챌린지의 기본 미션은 모두 완료했고, 최종 미션 전까지 원래 하던 공부를 꾸준히 하려고 해요. 지난 50일과 다른 점이라면 강의는 매일 듣되, 블로그 글은 한 커리큘럼을 마무리지을 때마다 정리용으로 작성하려고 합니다. 이 글은 2020/12/08에 학습한 17번째 커리큘럼의 transform 변환 속성에 관한 내용을 담고 있습니다. transform 변환 속성 속성 의미 transform-origin 요소 변환의 기준점 설정 transform-style 3D 변환 요소의 자식 요소도 3D 변환을 사용할 지 설정 perspective 하위 요소를 관찰하는 원근 거리 설정 ↔ perspective( ) 함수와 구분! perspect..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 50일차입니다! 드디어 강의를 수강한 지 50일째네요! 동시에 17번째 커리큘럼 'CSS / 속성 - 전환 & 변환' 공부를 시작했습니다. 🐱🏍 transition(전환)과 transform(변환)의 사용법이 종종 헷갈렸는데 이참에 확실히 개념 잡아서 프로젝트에 좀 멋들어지게 활용하고 싶어요. transition ◾ CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값에 애니메이션 효과를 줌 ◾ 속성 값 ⬇ 값 의미 기본값 transition-property 전환 효과를 사용할 속성 이름 all transition-duration 전환 효과의 지속 시간 설정 0s transition-timing-function 타이밍 함수 지정 ease ..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 49일차입니다! 내일까지 미션을 제출하면 1주일 쉬고 최종 미션을 수행하면 되겠네요. 👏👏 오늘은 16번째 커리큘럼을 마무리지었습니다. 남은 분량을 보니 열흘 정도 뒤면 CSS 파트 공부를 끝낼 수 있을 것 같아요. 아자아자! 오늘은 04. background-repeat / 05. background-position / 06. background-attachment / 07.background-size 에 대하여 공부했습니다. background-repeat ◾ 배경 이미지의 반복을 설정 ◾ 속성 값 ⬇ 값 의미 기본값 repeat 배경 이미지를 수직, 수평으로 반복 repepat repeat-x 배경 이미지를 수평으로 반복 . repeat-..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 48일차입니다! 오늘은 15번째 커리큘럼을 마치고 16번째 커리큘럼 초입부를 학습하였습니다. 내일 16번째 커리큘럼인 'CSS/속성- 배경' 파트를 마무리 지으려고 해요. 오늘은 15번째 커리큘럼의 09~10. position 특징 - 요소 쌓임 순서 / display 수정 클립과 16번째 커리큘럼의 01. background 02. background-color 03. background-image에 대하여 공부했어요. 🔶 요소가 쌓여있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정 (Z축) 🔶 규칙⭐ 어떤 요소에 static을 제외한 position 속성의 값이 있을 경우, 그 요소가 가장 위에 쌓임 (속성값 ..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 47일차입니다! 오늘은 15번째 커리큘럼에서 position 파트를 학습하였습니다. 실무할 적에 개념을 잘못 잡아 내내 고생했던 position: absolute;의 개념 완벽 정복! 토이 프로젝트나 클론 코딩을 할 때 position: relative도 종종 쓰던데 이번에 개념을 확실히 잡았어요. 오늘은 04. position 그리고 top, bottom, left, right / 05~08. position 속성 값 - relative, absolute, fixed, sticky 에 대하여 공부했습니다. position ◾ 요소의 위치 지정 방법의 유형(기준)을 설정 ◾ 속성 값 ⬇ 값 의미 기본값 static 유형(기준)이 없음, 배치 불..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 46일차입니다! 15번째 커리큘럼 'CSS/속성- 띄움(정렬), 위치' 과정을 시작했습니다. 오늘은 요소를 띄워 수평 정렬하는 데에 쓰는 float 속성에 대하여 공부했어요. 실무를 할 때 레이아웃 잡으면서 float 속성을 잘 다루지 못하여 화면이 버벅였던 상황이 떠오르네요. 오늘은 01. float / 02. float - display 수정 / 03. clear 에 대하여 학습했습니다. float ◾ 요소를 좌우 방향으로 띄움 (수평 정렬하는 데에 쓰임) ➡ CSS3에서 flexible box 개념이 도입되면서 float 대신 flexible box를 주로 사용함 ◾ 속성 값 ⬇ 값 의미 기본값 none 요소 띄우지 않음 none left..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 45일차입니다! 오늘은 14번째 커리큘럼 학습을 마쳤습니다! 이제 텍스트 관련 CSS는 잘 다룰 수 있길 바라며 😎 미션이 끝날 때까지 CSS는 마스터하고 싶었는데 남은 교육 과정을 보니, 한 1~2주는 지나야 CSS 파트가 끝날 것 같더라고요. 😂 안타깝지만 50일 미션이 끝난 뒤에도 매일 꾸준히 강의를 들어서 최종 미션까지는 CSS를 마스터하는 걸로 다짐합니다! 오늘은 06. color, 색상표현법 / 07. text-align / 08. text-decoration / 09. text-indent / 10. letter-spacing, word-spacing 을 공부했습니다. color, 색상표현법 ◾ color: 문자의 색상을 지정 (↔..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 44일차입니다! 오늘은 font 개별 속성에 대한 공부를 마쳤습니다. font-family 속성을 공부하다보니 조만간 UI 작업할 때 자주 쓰이는 font 계열이나 종류에는 어떤 것이 있는지 궁금해졌어요. 조만간 font와 관련한 정보도 수집해서 블로그 글로 써보고 싶네요! 😎 오늘은 03. font-size / 04. line-height / 05. font-family 에 대하여 학습했습니다. font-size ◾ 글자의 크기를 지정 ◾ 속성 값 ⬇ 값 의미 기본값 단위 px, em. cm 등 단위로 설정 16px % 부모(상위) 요소의 비율로 지정 . xx-small 가장 작은 크기 . x-small 더 작은 크기 . small 작은 크기..