❤️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..

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

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

❤️Liked 느낀 점종종 페이지를 제작하면서 수평선은 태그를 많이 사용했는 데강의를 듣고 난 뒤 마크업 태그들의 의미와 쓰임새를 제대로 알고 사용해야겠다고  태그는 문단 수준 요소 사이의 주제 구분(예를 들어 장면 전환, 참고서의 섹션 내 다른 주제로의 이동 등)을 나타내는 태그로 단순히 수평선 스타일로만 사용되는 것은 좋지 않은 사례라고 합니다. ✏️Learned 공부한 내용그리드 시스템페이지 콘텐츠를 논리적으로 일관성 있는 질서와 구조로 디자인할 수 있게 도와주는 그래픽 시스템을 말합니다.여기서 그리드는 사전적 의미로 '격자 무늬' 또는 '격자판'을 의미합니다.장점컬럼 단위로 요소를 구성하므로 많은 양의 콘텐츠도 정돈된 느낌을 줍니다격자 형식에 따르므로 블록을 쌓듯 디자인이 편리합니다.일관되고 통..

❤️Liked 느낀 점어제는 지난 주 과제였던 WOOD 페이지 만들기에 대해 다른 수강생분들이 만드신 결과물들을 하나하나 살펴보았고,강사님께서 한 분 한 분 간단하게 과제 리뷰를 해주셨는데 제 차례가 다가올 수록 엄청 긴장이 되었습니다..하필이면 다른 수강생분들의 결과물을 보면서 뒤늦게서야 틀린 부분을 찾게 되어서 아쉬움이 많이 남았지만강사님께서 제 결과물을 보시면서 배경 쪽이 아쉽지만 피그마 결과물에 맞게 header?와 main 부분에 양 사이드 부분이서로 맞아떨어지게 한 점을 칭찬해주셨고, 간단하게 코드를 쭉 보시면서 이 분은 개발 경험이 어느 정도 있으신 분이라고 말씀하셔서 기분이 좋은 하루였습니다! 오늘은 강사님께서 어제 강의 마무리하시면서 중요하다고 말씀하셨던Flex 속성에 대한 거의 모든 것..