패스트캠퍼스 프론트엔드 올인원 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: 문자의 색상을 지정 (↔..
PS 문제풀이를 하다가 2차원 배열을 생성하는 데에서 오류가 발생하는 일이 종종 있다. 실수를 줄이고자 작성하는 Python에서 2차원 배열 생성하는 법과 주의할 점에 관한 글이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 # graph = [[0, 0, 0], [0, 0, 0]] # (1) 모든 원소가 0인 2*3 2차원 배열 생성 graph = [] for _ in range(2): row = [] # row 초기화 과정 중요! for _ in range(3): row.append(0) graph.append(row) # (2) 한 줄 코드로 모든 원소가 0인 2*3 2차원 배열 생성 graph = [] graph = [ [0 for _ in range(3) ] for _ in ra..
패스트캠퍼스 프론트엔드 올인원 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 작은 크기..
패스트캠퍼스 프론트엔드 올인원 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-*, ..