❤️Liked 느낀 점예전에 종종 프로젝트를 진행하면서 CSS 프레임워크 중 tailwindCSS를 써본적이 있었지만몇 개월동안 잘 사용하지 않다보니 거의 모든 부분을 까먹었는데 이번 tailwindCSS 특강을 통해까먹은 부분을 다시 복습하는 시간이 된 것 같아 좋았습니다!하지만 수업 후반부로 갈수록 강사님의 템포가 빨라지셔서 실습을 따라하기가 조금 버거웠습니다ㅜㅜ ✏️Learned 공부한 내용TailwindCSS미리 정의된 클래스 대신 조합 가능한 유틸리티 클래스를 제공하는 유연한 CSS 프레임워크입니다.장점빠른 개발 속도 : 미리 정의된 유틸리티 클래스를 사용해 신속하게 UI를 구축할 수 있습니다.유연성과 커스터마이징 : 필요에 따라 쉽게 디자인을 변경하고 확장할 수 있습니다.일관성 있는 디자인 :..

❤️Liked 느낀 점HTML/CSS 파트의 마지막 과제를 제출한 뒤 제 코드에서 문제점은 무엇인지 알고싶어서강사님께 처음이자 마지막으로 코드리뷰를 신청했습니다.1대1로 코드리뷰를 받는게 아니다보니 제 코드가 다른 사람한테 보여지는게 부끄러웠지만제 코드의 문제점과 개선점을 배울 수 있었고, 또한 다른 분들은 어떤 식으로 코드를 작성하는지 알게되면서어떻게 하면 효율적인 코드를 작성할 수 있는지 배울 수 있었던 뜻 깊은 시간이었던 것 같습니다. ✏️Learned 공부한 내용행과 열로 구성된 표 형식의 데이터입니다.요소: 테이블의 행을 정의합니다.: 테이블 헤더 셀을 정의합니다.: 테이블의 데이터 셀을 정의합니다.CSS 레이아웃 기법 대신 사용하는 건 금지 접근성 문제: 테이블 레이아웃은 스크린 리더에 혼란을..

❤️Liked 느낀 점8월 둘째 주부터 배운 Flex, Grid의 개념은 CSS 속성 중에서 복잡하고 어려웠지만이번에 배운 Animation, Forms 속성은 여태 배운 CSS 속성들 중에서 제일 재미있게 배웠던 속성 중 하나였고,개념이 크게 어려운 부분이 없었어서 수업을 편하게 들을 수 있었습니다.✏️Learned 공부한 내용@keyframesCSS animation에서 요소의 중간 상태를 정의하는 규칙입니다.animation의 시작부터 끝까지의의 변화를 단계별로 제어할 수 있습니다.기본 구문@keyframes 애니메이션이름 { 키프레임 선택자 { 속성: 값; }}설정 방법퍼센트(%) 사용@keyframes slide { 0% { left: 0; } 50% { left: 50%; } 1..

❤️Liked 느낀 점마지막 과제를 수행하면서 flex와 grid를 번갈아가면서 사용했는데 grid는 개념이 어렵지만 다양한 레이아웃을 만들 수 있어서 반응형 디자인 시 유용하게 쓰여서 과제를 효과적으로 수행할 수 있었습니다!✏️Learned 공부한 내용grid 레이아웃개념핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈입니다.웹페이지를 위한 이차원(행,열) 레이아웃 시스템입니다.콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다.grid는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성합니다.페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자..

❤️Liked 느낀 점지난 주말은 제출 과제가 없어서 너무 좋았습니다!주말동안 평일에 부족한 잠도 보충하면서 휴식도 취하고, 리액트 강의도 듣고 알찬 주말을 보낸 것 같아 뿌듯했습니다!이번 강의에서는 이미지스프라이프 기법을 사용해서 왼쪽 이미지를 오른쪽이미지처럼 만드는 실습을 진행했는데별점에 경우 여러 페이지에서 쓰이기 마련이고, 데이터에 따른 결과물이 다르기 때문에 미리 셋팅해놓는 것이 편리하다는 것을 느꼈습니다.✏️Learned 공부한 내용상대 단위 장단점상대 단위의 장점:유연성: 상대 단위(rem, em)를 사용하면 브라우저의 기본 폰트 크기 변경에 따라 웹사이트의 폰트 크기도 유동적으로 조정됩니다.접근성 향상: 사용자가 기본 폰트 크기를 늘리면, rem 단위를 사용한 폰트 크기와 여백 등이 자동으..

❤️Liked 느낀 점강의 시작한 지가 엊그제 같은데 벌써 한 달이 다 되어가니까 시간이 빨리 지나가는 것 같습니다.이번 시간에 배운 sticky는 sidebar를 만들 때 유용하게 쓰일 것 같았습니다.하지만 sticky값이 fixed라는 값과 헷갈려서 개념을 제대로 숙지해야할 것 같습니다..✏️Learned 공부한 내용Stacking Context개념z-index에 따라 요소들이 쌓이는 순서를 정의하는 독립적인 맥락을 제공합니다.생성 조건루트 요소 ( 요소)는 항상 새로운 스태킹 컨텍스트를 형성합니다.z-index가 지정된 위치 요소 (Positioned Elements):position: absolute, position: relative, position: fixed, position: sticky..

소개Redux, React Hook 등 React와 관련된 Snippet들을 단축키로 간단하게 생성할 수 있게 해줍니다..js .ts .jsx .tsx 파일 확장자를 지원해줍니다.SnippetsReact Componetsrccimport React, { Component } from 'react'export default class FileName extends Component { render() { return $2 }}rceimport React, { Component } from 'react'export class FileName extends Component { render() { return $2 }}export default $1rcepimport React, { Comp..

https://www.themoviedb.org/ The Movie Database (TMDB)환영합니다 수백만 개의 영화, TV 프로그램 및 인물을 발견하세요. 지금 살펴보세요.www.themoviedb.org회원가입 후 로그인을 해줍니다.설정 페이지로 이동합니다.좌측 메뉴에서 API 로 이동합니다Developer를 선택한 후 다음 페이지에서 동의 버튼을 누릅니다개인정보 입력하면 API 발급이 됩니다.(대충 입력하셔도 됩니다. URL은 전 localhost:3000 으로 했습니다)

❤️Liked 느낀 점날씨가 따뜻해서 그런지 집에 날벌레들이 하나 둘 나타나기 시작했고, 수업 듣는 내내 제 주변을 계속 날라다니길래 집중이 그렇게 썩 되지는 않았습니다.. 그리고 이 번 회차에서 다룬 내용들이 평소 깊게 다루지 않았던 내용들이라 어려운 부분들이 많았고, 처음 알게된 부분도 많아서 새롭게 느껴져서 한 번 복습으로 안 되겠다고 느꼈습니다..✏️Learned 공부한 내용텍스트 줄바꿈 제어word-break 텍스트가 자신의 콘텐츠 박스 밖으로 넘어갈 때 줄을 바꿀 지 지정합니다. 값 normal(초기값) 기본 줄 바꿈 규칙을 사용합니다. 영어는 단어 단위로, 한글은 글자 단위로 줄바꿈이 됩니다. break-all overflow를 방지하기 위해서는 어떠한 두 문자 사이에도 줄 바꿈이 발생할 수..

❤️Liked 느낀 점지난 주 금요일이 휴강이라 그런지 정말 오랜만에 강의를 듣는 것 같았습니다🤣오후에는 지난 주 제출했던 과제에 대한 피드백을 받았는데 @font-face 부분에서 웹폰트를 불러오는 과정에서 주소를제대로 적지 않아서 오류가 발생했는데 이를 인지하지 못하고 과제를 제출했습니다🥲새로 알게된 점은 @font-face에서 url 주소 오류가 나면 노트북에 있는 폰트를 보여주는 것과 font-display:swap을 설정하면 에러가 나도 기본 폰트를 불러온다는 사실을 알게되었습니다! ✏️Learned 공부한 내용flex-directionFlex Container의 동작 방식을 변경합니다.메인축과 교차축의 방향을 결정합니다.특징반응형 디자인에 유용합니다:화면 크기에 따라 레이아웃을 쉽게 변경할..