CSS

프로젝트/미니 프로젝트 & 과제

[과제] 계산기 목업 만들기

오늘은 내가 만든 결과물을 자랑하면서 시작! 어제 배운 CSS flex를 활용해 계산기 목업 만들기에 도전했다. 처음에는 그냥 맥북 기본 계산기를 따라서 만들었는데 크루님이 지난 기수에서 만든 계산기를 보여주시면서 약간 디자인 경쟁(?)이 붙었다 ㅋㅋ 결과적으로 여러 학생들의 다양한 디자인의 계산기가 탄생해 영감을 받는 계기가 되었으니 계산기 대축제는 좋았던 것으로👍 내가 만든 계산기는 윈도우 1.0 시절의 계산기를 본따서 만들었다. 정말 유행과 감성이라는 것은 돌고 도는 것인지 근 40년 전의 계산기가 이렇게나 힙하고 예뻐 보일 일인지! 계산기 목업 제작 어려웠던 점 처음에 애를 먹었던 것은 flex의 각 속성들에 대한 이해가 부족한 것 때문이었다. 너무 여러 속성과 그 속성값이 있다 보니 완전히 익히..

코드스테이츠 프론트엔드 부트캠프

[CSS] flex의 활용(서로 다른 column에 있는 item 어긋남 해결하기)

오늘은 CSS flex 활용법을 공부했다. 혼자서 공부할 때 레이아웃을 짜느라 고생이 많았는데 flex를 활용하니 레이아웃 짜기가 훨씬 수월했다! 레이아웃의 흑역사 오늘 flex 수업을 듣기 전에 생활코딩으로 예습을 했는데 flex 첫 수업에서 '레이아웃의 흑역사'를 소개하면서 시작한 것이 아주 인상적이었다. 생활코딩 flex-1 요지는 인류 역사 동안 레이아웃을 코드로 잘 표현하는 방법을 찾기 위해 고군분투 해왔다는 것인데 레이아웃을 짜는 데 활용되는 여러 코드들의 차이점을 알려 줘서 매우 유익했고, 또 내가 레이아웃을 짜느라 고생한 것이 그리 이상한 일은 아니었다는 점을 알게 돼 위안이 됐다.😂 서로 다른 column에 있는 item 어긋남 해결하기 오늘 수업에서는 flex를 활용해 직접 레이아웃 예..

코드스테이츠 프론트엔드 부트캠프

[CSS] 자기소개 페이지 만들기

오늘 수업에서는 CSS를 활용하는 법에 대해서 배웠다. 이미 배운 내용이라고 생각했는데 자세히 살펴 보니 비어 있던 부분들이 있어 열심히 메모하고 암기하며 실습에서 적용해 보려 했다. 반응형 웹에 적합한 CSS 활용 font-size px은 절대 단위라서 다양한 사용자 환경에서 접근성이 떨어질 수 있다. 일반적인 경우 font-size는 rem 단위로 설정하자. ※ rem과 em의 차이 rem은 최상위 요소(html)의 font-size를 기준으로 한 값이고 em은 현재 사용되고 있는 요소의 font-size를 기준으로 한 값이다. width, height viewport 대비 상대적 크기가 중요한 경우에는 vw, vh를 활용하면 좋다. margin, padding 초기화하기 *{margin=0; pad..

부트캠프 준비

Interactive card detail 1차 솔루션

html, CSS, Javascript 기초를 공부한 기념으로 Frontend Mentor의 'Interacitve card details form' 챌린지에 도전했다. 결론부터 말하자면 다른 기능은 대체로 어찌저찌 구현했으나 form validation 기능을 제대로 구현하지 못한 채로 일단 1차로 마무리를 했다. 다른 사람들의 솔루션을 보니 리액트를 대다수가 활용한 것 같아 리액트 공부를 먼저 하고 다시 도전해 보기로. 만들어야 하는 것은 아래와 같다. 내 결과물 User card details jeannelee57.github.io 어려웠던 것들 정리 1. 카드번호에 띄어쓰기 구현 change eventListner를 넣고 띄어쓰기를 삽입하도록 했는데 이렇게 하면 내용을 입력하다가 중단하더라도 띄어..

부트캠프 준비

유데미 안젤라 my page 만들기

유데미Udemy The Complete 2023 Web Development Bootcamp by Angela Yu The Complete 2023 Web Development Bootcamp Become a Full-Stack Web Developer with just ONE course. HTML, CSS, Javascript, Node, React, MongoDB, Web3 and DApps www.udemy.com 유데미 강의도 듣기 시작! 프리코딩캠프만 하다 보니 질리기도 하고 강의를 좀 더 듣고 싶어서 유데미에서 유명하다는 안젤라 유의 웹 개발 강의를 듣기 시작했다. 자막이 제공되고 발음도 또박또박 쉽게 말하기 때문에 따라가기가 쉽다! 프론트엔드를 공부 중이지만 백엔드 부분도 포함한 강의라 하..