패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 43일차입니다! 오늘은 14번째 커리큘럼, 'CSS / 속성- 글꼴,문자'를 시작했어요. 단축속성 font와 그 개별속성들에 대하여 공부했습니다. font 속성은 실무나 프로젝트를 하면서 쓰는 것만 썼는데 어떤 개별 속성과 특징이 있는지 제대로 알아봤습니다. 오늘은 01. font, font-style / 02. font-weight / 03. font-size 에 대하여 공부했습니다. font ◾ 글자 관련 속성들을 지정 ➡ 다양한 개별 속성들을 아우르는 단축 속성 ◾ 속성 값 ⬇ 값 의미 기본값 font-style 글자 기울기 지정 normal font-weight 글자 두께 지정 normal font-size 글자 크기 지정 medium ..
패스트캠퍼스 프론트엔드 올인원 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인 ..