미션 수행 중 느낀 점 패스트캠퍼스 프론트엔드 올인원 with React 100% 환급 챌린지 50일 미션을 모두 달성했습니다! 10월 중순부터 12월 중후반까지, 매일 강의를 듣고 복습 겸 공부 메모를 블로그에 해왔는데요. 50일 동안, 주말이나 개인적으로 지정한 쉬는 날과 상관없이 매일 두 클립 이상 강의를 듣고 블로그 글을 쓰는 건 생각보다 힘이 들어갔습니다. 물론 제가 하루에 웬만하면 3~4클립 이상을 들으려고 했어서일 수도 있습니다. 😂 하지만 덕분에! 50일 동안 HTML의 시멘틱(Semantic) 태그 내용 공부를 포함하여, 잘 다루지 못했던 CSS까지 '개념 공부 및 예제 실습까지는 최소한 해봤다!'는 레벨이 되었어요. 강사님들께서 귀에 쏙쏙 들어오는 명강의를 해주셨기 때문에 더 잘 따라갈..
오늘은 티스토리에서 기본 제공해주는 코드 블럭의 스타일을 변경하는 방법에 대하여 알아볼게요! 저는 개발 공부 관련 포스트를 주로 쓰다보니 코드 블럭을 종종 사용할 일이 있습니다. 예전 포스트에서는 Color Scripter을 사용해보기도 했었는데요. 매번 Color Scripter를 삽입하기도 귀찮으니 티스토리 코드 블럭의 스타일을 커스텀해서 사용하는 게 더 편할 것 같다고 판단했습니다. 📢 반응형 #1 스킨 기준 포스트입니다. 다른 스킨을 쓰시는 분들은 아래 HTML의 요소명이 다를 수 있습니다. 1. 플러그인 적용 티스토리 코드블럭의 스타일을 변경하는 방법 중 가장 편한 방법은 아래와 같습니다. 블로그 관리 ➡ 좌측 메뉴 중 '플러그인' ➡ 'highlight'로 검색하여 '코드 문법 강조' 플러그인..
발단 구글링을 하면서 가끔 velog 블로그에 들어가면, 포스트의 왼쪽이나 오른쪽에 글의 목차를 나열한 리모콘 같은 것이 보였습니다. 예전에 볼 때엔 '시각적으로도 예쁘고, 편한 기능이네~' 정도로만 생각했는데, 얼마 전에 어떤 분의 티스토리 블로그에 방문했다가 비슷하게 생긴 걸 발견하고는 '내 티스토리 블로그에도 넣고 싶어!'라는 강한 욕구가 들어서 이게 무엇인지부터 찾아보기 시작했습니다. 전개 검색을 어떻게 해야할 지 조금 고민하다가, 구글에 '티스토리 목차 스크롤'이라고 쳐봤습니다. 다행히 원하는 단어가 바로 나타났습니다. TOC(Table Of Contents)라고 합니다. 하지만 여러 블로그에 들어가보니 블로그 포스트 내에 TOC를 삽입하는 경우에 대한 글도 많았습니다. tocbot이라는 오픈소..
패스트캠퍼스 프론트엔드 올인원 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..