회사에서 react.js로 개발된 페이지를  Nuxt.js를 사용해 새로운 페이지를 추가할 수 있도록 개발해 보라고 하셨다. 프론트앤드는  javascript와 ajax, css만 사용할 줄 알았기에 본격적으로  프론트앤드 공부를 하게 되었다 :) 완전 럭키비키>우선 nuxt.js를 사용하기 위해서는 node.js가 필요하다. 💡 Node.js 란?자바스크립트 런타임 환경으로, 런타임 환경이란 소프트웨어 어플리케이션을 구축하고 실행하기 위한 인프라를 의미한다.JavaScript는 주로 웹 페이지의 상호 작용을 향상시키기 위해 웹 브라우저 내에서 실행되도록 제한되었는데, JavaScript를 브라우저 내에서 말고도 다른 환경에서 실행할 수 있도록 Node.js가 탄생했다.Node.js 덕분에 JavaSc..

🔍️ 구현해야 할 부분 저번이랑 같은 rowscroll이라 구현하기 쉬울 것 같다고 생각했는데....! 이번엔 스크롤로는 구현을 할 수 없어서 translation을 사용해 보았다. 1️⃣ 초기화면 🖼️ HTML 당신의 착한 쉼표,데일리라이크 직접 갈아 만든 드립 커피 한 잔, 달콤한 레몬 쿠키 한 조각, 손으로 한 땀 한 땀 만들어 낸 티 코스터, 당신의 착한 쉼표. dailylike. Dailylike는 "로맨틱한 휴식." 이라는 컨셉을 토대로, 여성을 타겟으로 자신의 주변과 일상들을 소중히 여기고 가꿀 줄 아는 여성들을 위한 작은 공간을 만들어 갈 예정입니다. 🎨 CSS #content3 { position: relative; width: 100%; left: 0; display: flex; fle..

나의 퍼블리싱 실력을 알아보기 위해 진행된 테스트이다! 진짜 개발자는 끝없이 공부를 해야 하는 것 같다.. 🔍️ 구현해야할 부분 우선 내가 똑같이 퍼블리싱해야 할 부분이다. 보고 생각한건,, 처음이 고정이니까 overflow-x scroll을 이용해서 구현하면 되겠다! 라는 생각이 들었다. 🖼️ HTML 인스타그램 🎨 CSS #content5 { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 140px 0 160px 0; } .insta-title { text-align: center; margin-bottom: 40px; } .insta-wrap { overflow-x: hidden; } .insta-i..

✨ 이벤트란? 이벤트란 사이트에서 방문자가 취하는 모든 행위 이고, 이벤트 핸들러란 이벤트가 발생했을 때 실행되는 코드를 말한다. 📌 이벤트 등록 한 가지 동작의 이벤트를 등록할 때의 기본 메서드 $("선택자").이벤트종류(function() { javascript 코드; }); 📌 그룹 이벤트 등록 한 가지 동작 이상의 이벤트를 등록할 때 on() 메서드를 사용하여 이벤트를 등록한다. //방식1 $("이벤트 대상 선택").on("이벤트 종류1 이벤트 종류2 ... 이벤트 종류n", function() { javascript 코드; }); //방식2 $("이벤트 대상 선택").on({ "이벤트 종류1 이벤트 종류2 ... 이벤트 종류n":function() { javascript 코드; } }); //방..