본문 바로가기

학원에서 배운 것/CSS16

KDT 5th 웹개발자 입문 수업 20일차 - 2 부트스트랩 테일윈드? 도 유명(React와 쓴다고 함) https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com 프론트 프레임 워크로 이미 작성되어 있는 프론트 요소들을 가져다 쓰거나 반응형을 구현할 수 있음 1. 이미 만들어진 디자인 요소를 예시로 간단히 가져와서 사용 가능 -> 프론트에선 레이아웃 정도만 참고할 것 2... 2023. 2. 22.
KDT 5th 웹개발자 입문 수업 18일차 - 2 1. Sass 2. SCSS CSS 에 if/for문/중첩 등이 가능한 것 Window의 경우 node.js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Mac의 경우, brew install node.js 로 설치 설치되어있는지 확인은 node -v 입력 시 버전이 나오면 깔린 것 2-1. npx 로 직접 watch 하기 2-1-1 .scss 파일을 생성하여 작성 후, 2-1-2. npx sass --watch SCSS명.scss CSS명.css npx에게 sass를 사용하여 scss파일을 css파일로 변경해주는 명령어로, scss 파일을.. 2023. 2. 20.
KDT 5th 웹개발자 입문 수업 11일차 스타벅스 홈페이지 클론의 마지막 날이다. 푸터 부분을 마치고 자바스크립트를 나간다고 한다! 완성했고 확실히 홈페이지 클론을 쭉 실습해보니 요령이 생겨서 쉬웠다. css로 퍼블리싱 할 때 중요한건 한 섹션을 어떻게? 분류할지인 것 같다. display flex나 position absolute를 사용할 때 그 기준이 되는 것들이 중요하다고 느꼈다. 푸터까지 완성! https://jocular-cuchufli-21c4f9.netlify.app/ Starbucks Coffe Korea 스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다. jocular-cuchufli-21c4f9.netlify.app 2023. 2. 9.
KDT 5th 웹개발자 입문 수업 10일차 어제 복습하겠다고 혼자 뚱땅거리며 만들던 스타벅스 모작이 잘 안풀려서 거진 한가지 이유로 1시간 넘게 헤맸다. 알고보니 선택자 지정상 inner 클래스에 height 잡아 둔 것이 화근이었고 (BEM의) Block 요소에는 가급적 저런 요소를 두지 않도록 다시 신경써야겠다고 생각했다. ㅜㅜ 별 것도 아닌데 이유를 찾느라 하나하나 고쳐보았고 다신 이런 실수를 하지 않아야겠다고 다짐하게 되었다. 스타벅스 클론 코딩 마지막날! 어제는 메인 메뉴 컨텐츠와 뱃지, 컨텐츠, 공지와 리워드까지 진행했으며 나머지 상품 컨텐츠와 푸터를 마무리로 끝낸다고 한다. 1. 상품 컨텐츠 (1) 이 부분을 만들었고, 일단 html 구조상 section으로 크게 나눠주고 img item과 img text, btn을 두되, posit.. 2023. 2. 8.