결과물 사용 에디터 Atom Editor 요구사항 1. Enter를 쳐서 To do list에 Task 추가시키기 2. 체크 버튼 클릭시 Done List에 추가시키고 To do list 에서 없애기 3. 삭제 버튼 클릭시 Task 삭제 4. 입력창 비우기 HTML //입력 //to do list To Do List //done list Done CSS *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-image: linear-gradient(180deg, #487eb0, #ffffff); min-height: 100vh; } .container{ max-width: 800px; margin: auto; padding: 20px; ..
결과물 사용 에디터 Atom Editor 요구사항 1. 키를 입력할 때마다 검색 결과가 동적으로 변하기 HTML Search A Apple O Orange M Mandarin S Strawberry W Watermelon G Grape P Pear C Cherry CSS body{ margin: 0; padding: 0; font-family: "Montserrat"; } .searchbox{ width: 90%; margin: 10px auto; } .header{ background: #ECDFBF; overflow: hidden; padding: 20px; text-align: center; } .header h1{ text-transform: uppercase; color: white; margi..
결과물 사용 에디터 Atom Editor 요구사항 1. 아래로 스크롤을 할 때 상단에 메뉴가 고정되게 하는 함수 실행시키기 2. 함수가 실행되면 상단 메뉴 배경 색 바꿔주고 고정키기 HTML Home About Contact Close your eyes and imagine the sunrise over a wide-open country field, morning rain glistening on forest trees, and snow-covered mountaintop peaks. Yes, nature is absolutely breathtaking, which is why we rounded up these nature quotes that capture the earth’s stunning be..
결과물 사용 에디터 Atom Editor 요구사항 1. 텍스트 애니메이션 만들기 2. 버튼 클릭 시 화면 전환하기 HTML Welcome to Paya blog! I N T R O Enter CSS - 각 텍스트를 li에 넣어주기 - 애니메이션이 발생할 경우 지속될 시간을 transition으로 정하기 - 각 li의 위치를 transform: translate3d()로 지정해주기 * { margin: 0; padding: 0; } body{ font-weight: 700; } .wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: lighter; font-size: 40px; } .w..
"이 블로그의 모든 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
- Total
- Today
- Yesterday