whatisthis?

CSS - Animation practice 🔻 내가 작성한 코드 * { box-sizing: border-box; margin: 0; } body { font-family: "Mulish", sans-serif; } .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 100px; } .loading-title { color: #151b26; font-size: 18px; line-height: 1.33333333; margin-bottom: 20px; animation-name: loading-effect; animation-duration: 1000ms; a..

CSS - Transition practice * { box-sizing: border-box; margin: 0; } body { font-family: "Lato", sans-serif; background-color: #525252; } button, input, textarea { font-family: "Lato", sans-serif; } ❗ button, input, textarea 같은 form 요소 안에 텍스트들은 body에 font-family 해줘도 안먹는 경우가 있으므로 따로 저렇게 font-family 해주자. (나는 여태 * selector에 해줬었는데 그건 좀 효율적이지 않다고 한다..) button { background-color: #fff; border: none; cur..

Background practice (에어비앤비) index.html Plus Entire apartment 4.97 (203) Unwind in a Bright Space with Rustic Accents Rooms and beds 2 guests 1 bedroom 1 bed 1 bath Amenities Wifi Kitchen style.css .like-button { box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } /* ▼ WHERE YOUR CODE BEGINS */ * { box-sizing: border-box; margin: 0; } body { font-family: "Poppins", sans-serif; } .sr-only { display: no..

Typography Library 제작 하나의 라이브러리를 제작. 💡 라이브러리(library)란? 일종의 kit. 자주 사용하는 코드(CSS의 경우엔 클래스) 를 한번 적어놓고 계속해서 사용할 수 있게 함. 1/ Noto Sans KR import 해오기 - fonts.google 이용 font-size와 그에 어울리는 line-height, letter-spacing을 같이 묶어서 정의하는 경우가 많음. 2/ font-size에 대한 라이브러리 제작 (typography.css) /* Font size */ .fs-tiny { font-size: 12px; line-height: 1.3333333; letter-spacing: -0.015em; } 위와 같이 font-size는 12px로 하고, li..

미디어쿼리 (Media Query) prac - 모바일 버전(가장 작은 화면) 먼저 하는것이 정설이다! - 모바일 먼저 구상하고, 점점 크기를 키워나감 🔺 이런식으로 모바일 기준으로 먼저 해야한다. (그중에서도 너비 가장 작은 애로 골라서) index.html 🚗 모집 임박! 8월 게스트 신청하기 Eat, pray, work 김버그의 디지털노마드 민박 #치앙마이 #8월예약오픈 민박 둘러보기 style.css * { box-sizing: border-box; margin: 0; } body { font-family: "Noto Sans KR", sans-serif; letter-spacing: -0.01em; height: 3000px; } a { text-decoration: none; } .landin..

Figma Created with Figma www.figma.com index.html Noah Madsen Copenhagen, Denmark Friends 730 Projects 3 Reviews 243 style.css * { box-sizing: border-box; margin: 0; } body { font-family: "Muli", sans-serif; color: #273444; } .profile-name { font-size: 18px; font-weight: 600; line-height: 1.3333333333; } .profile-location { font-size: 14px; line-height: 1.4285714286; color: #8492a6; } .profile-d..

https://mywebproject.tistory.com/228(private) 지난번에 float 예제로 제작해본 것을 flex-box로 만들어보자! 🔻 style.css (float 사용시) * { box-sizing: border-box; margin: 0; } body { font-family: "Noto Sans KR", sans-serif; letter-spacing: -0.02em; } h1 { font-size: 16px; font-weight: 400; color: #1f2d3d; line-height: 1.25; } strong { font-size: 14px; font-weight: 400; color: #afb3b9; line-height: 1.4285714286; } p { di..

https://mywebproject.tistory.com/228(private) 지난번에 float 예제로 제작해본 것을 flex-box로 만들어보자! float 이용시 🔻 * { box-sizing: border-box; } body { font-family: "Roboto", sans-serif; letter-spacing: -0.02em; } a { font-size: 18px; line-height: 20px; color: #8492A6; text-decoration: none; } ul { list-style-type: none; padding-left: 0; } .tab-menu::after { content: ''; display: block; clear: left; } .tab-menu ..

Coin Tracker - 암호화폐와 그 가격을 나열함 - useEffect practice - 페이지 들어왔을 때 로딩메시지가 보이고, 코인들이 나열되면 로딩을 숨김. App.js import { useState } from "react"; function App() { const [loading, setLoading] = useState(true); return ( The Coins {loading ? Loading... : null} ); } export default App; API 가져오기 🔻 fetch("https://api.coinpaprika.com/v1/tickers"); API는 웹사이트 로드시 맨처음 한 번만 실행해야 하므로이전에 배웠던 useEffect를 사용하자. useEffect..

To Do List App - React JS 연습용 - create-react-app 사용 part1. 1 / 기본 틀 + 이벤트리스너 만들기 App.js import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const onChange = e => { setToDo(e.target.value); }; const onSubmit = e => {// form 제출시 e.preventDefault(); if (toDo === "") {// toDo가 공백이면 함수를 끝내버림 return; } setToDo("");// submit후 input의 value를 공백으로 }; return ( Add To Do..