패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 42일차입니다! 오늘은 13번째 커리큘럼을 마무리했어요. 벌써 미션을 시작한 지도 한 달 반이 지났네요. 🥳 예전에 실무할 때 display: inline-block 의 기능을 제대로 모르고 막 썼던 게 생각나네요. 이제부터 제대로 알고 써야죠. 오늘은 08. display / 09. overflow / 10. opacity 를 학습했습니다. display ◾ 요소의 박스 타입(유형)을 설정 ➡ 요소가 화면에 보여지는 형태 설정 (블록, 인라인 여부 등) ◾ 속성 값 ⬇ 값 의미 기본값 block 블록 요소 ( 등) . inline 인라인 요소 () . inline-block 인라인-블록 요소 ( 등) . 기타 table, table-cell,..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 41일차입니다! 오늘은 13번째 커리큘럼에서 content-box의 사이즈 외에 전체 사이즈를 고려해야 하는 요소에 대하여 공부했어요. 실무나 개인 프로젝트에서 종종 요소에 border 속성을 추가하면 내 의도와 다른 사이즈가 되곤 하였는데, box-sizing: border-box로 크기를 조정해줘야 한다는 것에 대하여 학습했습니다. 오늘은 13번째 커리큘럼의 05. padding / 06. border / 07. box-sizing 을 공부했습니다. 🔶 요소의 '내부(안) 여백'을 지정 🔶 속성값: 단위, % 🔶 사용법 ➡ 위 오른 아래 왼 (반시계 방향) ➡ padding: 10px 20px 30px 40px ➡ 위 [오른 왼] 아래 ➡ ..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 40일차입니다! 오늘은 13번째 커리큘럼인 'CSS / 속성- 박스 모델' 과정 공부를 시작했습니다. 눈 여겨 볼 학습 내용은 (입문자 편에서 이야기가 나왔던 것 같지만) 의 단위 기본값이 0이라는 것과, margin 속성은 부모, 형제, 자식 간에 각각 특정 경우에서 중복 현상이 나타난다는 것이었습니다. 오늘은 13번째 커리큘럼의 01. width, height / 02. max-width, min-width, max-height, min-height / 03. margin / 04. margin - 중복 (Collapse) 을 공부했습니다. 🔶 요소의 '가로' 너비 지정 🔶 속성 ⬇ 값 의미 기본값 auto 브라우저가 너비 계산 auto 단..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 39일차입니다! 오늘은 12번째 커리큘럼인 'CSS / 단위'에 대하여 학습하였습니다. 얼마 전에 자바스크립트 스터디를 할 때 제가 만든 반응형 화면을 보고 스터디원 분이 px 단위 말고 rem 단위를 써보라고 권유한 적이 있었어요. 이후 검색하여 찾아보면서 그 응용방법을 잘 떠올리지 못했는데 오늘 강의를 들으니 그 방법을 유용하게 쓸 방법이 떠오르네요. 어떨 지는 모르겠지만요. 오늘은 12번째 커리큘럼의 01. px, % / 02. em, rem / 03. vw. vh / 04. vmin, vmax 의 내용을 공부했습니다. 🔶 해상도에 따른 고정 단위 🔶 부모 요소 사이즈에 영향받은 비율 🔶 자신의 현재 폰트 사이즈에 영향 받음 🔶 폰트 사이..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 38일차입니다! 오늘은 11번째 커리큘럼인 'CSS / 실습환경'을 학습했습니다. 저는 티스토리에 코드와 결과물을 공유할 때 JSFiddle을 쓰지만 강사님께서는 CodePen을 쓰시더라고요. 나중에 둘의 특징과 장단점이 무엇인지 알아봐야겠습니다. 😇 오늘 공부한 내용은 01. CSS Reset / 02. Codepen / 03. Emmet 입니다. CSS Reset은 예전에 다른 강의에서 수강하여 미리 알고 토이 프로젝트 등에 쓰고 있었지요. 😎 🔶 화면에 그리려는 모양을 각각 브라우저에서 동일하게 출력하려고 할 때 사용 ➡ 브라우저마다 간격 등의 차이가 있어 이를 맞춰주는 행위가 필요함 (초기화) 🔶 Google 검색에서 'css reset..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 37일차입니다! 오늘은 10번째 커리큘럼을 마쳤어요. CSS의 속성 상속과 CSS 스타일이 적용되는 우선순위에 대하여 공부하였습니다. 상속 개념은 실무를 하면서 그 기능을 추측만 하고 넘어갔었고 (제대로 문서를 찾아봤어야 했는데 😓) 우선순위는 어디에서 관련 글을 하나 본 것 같네요. ID 선택자와 Class 선택자의 포인트가 낯익었습니다. 오늘 공부한 내용은 10번째 커리큘럼의 14~15. 상속(Inherit) / 우선순위 입니다. 📖 🔶 상위 요소로부터 하위 요소로 CSS 속성들이 상속될 수 있음 ➡ (ex) 상위 요소의 텍스트에 적용된 색상이 하위 요소들에게도 적용됨 🔶 텍스트와 관련된 속성들 (그 외에는 상속 안 됨) 🔷 font-*, ..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 36일차입니다! 오늘은 가상 요소 선택자와 속성 선택자에 대하여 공부했습니다. 가상 요소 선택자와 속성 선택자 모두 사용해본 적은 있지만 개념이 잘 안 잡혀있던 내용이었는데, 동영상 강의로 설명 듣고 쉬운 예제로 학습하니 바로 머리에 100% 들어오네요...! 😇 오늘은 10번째 커리큘럼의 10~13. 가상 요소 선택자 - before, after / 속성 선택자 - [attr], [attr=value], [attr^=value], [attr$=value] 내용을 공부했어요. 🔶 CSS를 통해서 HTML에 가상 요소를 생성하여 사용 ✨ 예전에는 colon 1개 사용하는 것이 표준이었으나 IE 8버전 이후로 colon 2개 사용이 표준이 됨 🔶 ..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 35일차입니다! 오늘은 가상 클래스 선택자에 대하여 학습했습니다. 강의 클립이 5개나 있었지만! 씩씩하게 다 들었습니다. 💪 오늘은 05~09. 가상 클래스 선택자 - hover, active, focus / first-child, last-child / nth-child / xxx-child 주의사항 / nth-of-type, not 을 공부했습니다. 🔶 E에 마우스(포인터)가 올라가있는 동안에만 E 선택 🔷 E:hover 🔶 E를 마우스로 클릭하는 동안에만 E 선택 🔷 E:active 🔶 E가 포커스된 동안에만 E 선택, 대화형 콘텐츠에서 사용 가능 🔷 E:focus 🔶 E가 형제 요소 중 첫번째 요소라면 선택 🔷 E:first-child ..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 34일차입니다! 오늘부터 10번째 커리큘럼 중, 선택자의 종류에 대하여 학습하였습니다. 실무 또는 다른 강의를 통해 알고 있었던 개념도 있지만, 이 기회에 정확한 명칭과 그 역할을 알 수 있어 좋았어요. 조상, 부모, 형제, 자식, 후손의 관계 정의도 이참에 제대로 정립했습니다. 😉 오늘은 10번째 커리큘럼의 03~04. 기본 선택자 / 복합 선택자 에 대하여 공부했습니다. 🔶 (요소 내부의) 모든 요소를 선택 🔷 * * { color: red; } 🔶 태그 이름이 E인 요소 선택 🔷 E E { color: red; } 🔶 HTML Class 속성 값이 E인 요소 선택 🔷 .E .E { color: red; } 🔶 HTML Id속성 값이 E인 ..
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 33일차입니다! 오늘부터 10번째 커리큘럼 'CSS / 개요, 선택자, 상속' 과정 공부를 시작하였습니다. 오늘 수강한 첫 번째, 두 번째 클립은 입문자 파트와 HTML 파트를 공부하면서 계속 언급되었던 내용인데, 더 공부하고 싶었지만 내일 오전에 중요한 일정이 있어서 준비하느라 오늘은 2개 클립만 들었습니다. 😂 오늘은 '01. 기본문법 / 02. 선언방식'에 대한 강의를 들었습니다. 새로 알게된 지식은 @import 문법에 관련한 것입니다. 🔶 HTML의 특정 부분을 검색하여 연결하는 역할 🔶 검색된 대상에 지정될 CSS 명령 세트 🔶 선택자로 검색된 대상에 각 속성과 값을 삽입하여 스타일을 지정함 🔷 속성: 글자색 / 값: 빨강 🔶 HTM..