📝 스프린트 미션 주제미션 4는 기존 미션에서 작업한 로그인, 회원가입 페이지에자바스크립트를 사용해서 폼 유효성 검사를 구현하는 것이 주제였다. 🔁 스프린트 미션 진행 과정🖥️ 이전 작업 수정1. name 속성 추가미션 4를 진행하려고 보니 input이나 from 태그에name 속성이 빠져 있어서 그 부분을 추가해 주었다.name 속성은 폼 데이터 전송 시 key 역할을 한다.form이 제출될 때, 각 input의 name=value 형태로 서버에 전달됨 2. autocomplete 속성 추가브라우저 콘솔을 확인해보니 autocomplete 속성과 관련된 경고가 떠서접근성을 위해 속성을 추가해주었다. autocomplete 속성을 사용하면위 사진처럼 브라우저에서 자동완성 기능을 제공해준다. 🗂️ ..

📝 스프린트 미션 주제이번 미션은 미션 1, 2에서작업한 로그인, 회원가입, 랜딩페이지를 반응형으로 구현하고메타태그로 og이미지를 추가하는 것이 주제였다. 🔁 스프린트 미션 진행 과정🖥️ 이전 작업 수정미션 2 코드 리뷰에서 큰 수정사항은 없었지만코드를 다시 확인해보니 불필요한 CSS와요구사항과 다른 padding 값이 적용되고 있어서 그 부분을 수정해주었다. https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-postcss-sorting PostCSS Sorting - Visual Studio MarketplaceExtension for Visual Studio Code - VS Code plugin to sort CSS rules..

🌱 들어가며 + TMI바로 올리는 미션 2 후기글...원래 미션 1, 2 후기글을 같이 올리려 했는데글이 너무 길어져서 부득이하게 나눴다. 무튼 이어서 글을 작성해 보자면스프린트 미션 1 코드 리뷰를 받은 다음날바로 스프린트 미션 2를 작업하고 PR을 올렸다. 스프린트 미션 2의 요구사항은미션 1과 동일하게 HTML, CSS를 사용해서로그인, 회원가입 폼을 구현하는 것이었다. 스프린트 미션 1보다 미션 2가구현해야 할 요소가 더 적어서 금방 완료할 수 있었다. 🔁 스프린트 미션 진행 과정🖥️ 이전 작업 수정스프린트 미션 1에서 멘토님이 피드백 주셨던 내용을 반영하고미션 2 진행을 위해 파일명을 일부 수정하고, 이미지 파일들을 추가했다. 🗂️ 폴더 구조파일 구조는 스프린트 미션 1과 동일하다.달라..

🌱 들어가며코드잇 스프린트 과정은 개인 학습 외에도강사님의 코드 리뷰를 받을 수 있는 미션이라는 것이 존재한다. 총 과정 동안 12번의 미션을 해야하는데,미션의 마감 기한?은 크게 없지만 그래도 과정에 맞춰서미션을 진행하는 게 좋을 것 같아서 현재 미션 1과 2를 완수했다. 그리고 이번에 미션 이벤트도 진행 중이라서이벤트 기간 내에 꼭 제출하고자 하는 열망이 더 커졌다.(네이버페이 20,000원 놓칠 수 없어!!!!!!!) 📝 스프린트 미션 주제내가 진행한 미션 1, 2는 피그마로 제공된 화면을 보고HTML과 CSS로 화면을 구현하는 미션이었다.피그마 파일에 화면 구현할 때 이렇게 구현하라는 요구사항이 몇 가지 있었고,요구 사항은 무조건 충족해야하는 기본 요구사항과 구현해보면 좋은 심화 요구사항으로..

✨ CSS 변수 등록 하는 방법:root { --primary-100: #3692ff; --gray-900: #222;}:root에 --속성이름: 값 형태로 변수를 등록할 수 있다.:root를 사용하는 이유는 HTML 문서 어디에서나사용자 지정 속성에 접근할 수 있도록 구성하기 위해서 사용한다. 만약 범위를 제한해야 하는 경우:root 대신 다른 클래스 값을 입력해도 된다. 🎨 등록한 변수 사용하기@import './variables.css'.container { color: var(--gray-900);}내 변수 파일을 불러온 뒤에var(변수명) 형태로 사용해주면 된다. 매번 @import를 입력해주는게 번거로울 것 같아서나는 모든 html에 공통으로 들어가는 common.css에해당 @impo..

헷갈렸던 CSS 단위 개념을 이번 글에서 정리해보려고 한다. 📏 CSS 주요 단위 정리1. px - 픽셀css를 작성할 때 가장 기본적으로 사용하는 단위이다.화면의 실제 픽셀 수를 의미한다. 2. em - 부모의 폰트 크기를 기준으로 하는 상대 단위부모 요소의 폰트 크기를 기준으로 크기 비율이 정해진다.한 가지 유의할 사항은 부모>자식>후손 요소가 중첩될수록 계산이 누적되기 때문에 주의해야한다./* 부모 요소 */body { font-size: 16px;}/* 자식 요소 */h1 { font-size: 2em; /* 32px */}/* 후손 요소 */span { font-size: 2em; /* 64px: 2em x 32px */} 3. rem - 루트 요소(html)의 폰트 크기를 기준으로 하는..