오늘 코딩테스트 보고 왔는데 문제 파일이 줄코딩으로 되어 있어서 1차 당황 자동완성 기능 안되어 있어서 2차 당황 결국 무조건 아는 쉬운 문제 하나 제대로 구현 못해서 속상 ;-; 그래서 집에서 복기중 ~ 같은 실수는? 반복하지 말자^0^ 서론이 길었다. input 태그를 쓰다보면 커스텀해서 써야하는 경우가 대부분인데(원래 input 너무 못생김) label과 연동해서 css로 디자인 짜는 방법도 있지만 간단하게 이미지로도 교체 가능! 이렇게 간단하게 html 작성해줬다. input과 id와 label for 값을 맞춰주어 연동시켜준 뒤 radio태그는 둘 중 하나만 선택되어야 하니까 name으로 한 번 더 묶어줌 .inputTest input{ display: none; } .inputTest labe..

React? : 복잡한 코드는 숨기고 "사용자 정의 태그" 만들기 >> "부품화" class 방식 vs function(함수) 방식 온라인 플레이그라운드 : 개발환경을 세팅할 필요 없이 온라인에서 개발 ex) stackblitz 로컬에 개발환경 세팅해보자! 1. react 홈페이지 접속 https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html#create-react-app 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 2. create react app https://create-react-app.dev/ Create Reac..

Header와 Footer를 include하는 제이쿼리 load 메서드 (HTML 파일의 특정 부분에 외부 html 파일을 포함(include)시키는 메서드) 각 페이지의 html마다 header / footer는 동일하기 때문에 제이쿼리 메서드 load를 통해 불러온다. $(‘.header-include’).load(‘header.html’, function(){ //헤더에 사용된 제이쿼리 구문은 반드시 이곳에 넣으세요. }) Ex) $(‘.header-include’).load(‘header.html’, function(){ $(‘.trigger’).click(function(){ $(‘.gnb’).toggleClass(‘active’) }) }) //절대주소와 load메서드를 사용한것은 html파일..

[UIKIT] 기능성 플러그인들을 대신하는 프론트엔드 프레임웍 중에서 가장 가성비가 좋고 사용하기 편한 필수 프론트엔드 프레임웍 공식 웹사이트 https://getuikit.com UIkit UIkit, a lightweight and modular front-end framework for developing fast and powerful web interfaces. getuikit.com 활용용도 반응형 레이아웃뿐만 아니라 다양한 CSS & JS 컴포넌트 장점 다른 CSS 프레임웍과 다르게 스크립트에서 옵션 조절을 하지 않음(자바스크립트나 제이쿼리 조절 X) > 최고의 장점 특징 다른 CSS 프레임웍과 다르게 매우 다양한 상호작용 CSS & JS 요소 UIkit 유용한 기능들 - accordion ..

라이브러리(ex.jQuery) / 프레임웍 >> 둘다 다른 누군가가 쓴 코드 >> 좀 더 쉽게 코드를 작성하기 위해 가져다가 쓰는 것 차이점 라이브러리 - 내가 코드를 컨트롤(내가 라이브러리를 부름) (ex.jQuery) : 웹사이트에 인터랙티브한 요소를 넣을 수 있음 : 코딩을 하다가 내가 필요할 때 제이쿼리를 부름 : 우리가 필요할 때 쓰며 쉽게 대체 가능 프레임 웍 - 누군가의 규칙을 따라 코딩(프레임웍이 나를 부름) (ex.Bootstrap/UIkit/semantic UI...) : 프레임 웍을 부르는 게 아니라 프레임 웍이 내 코드를 부르는 것 : 프레임 웍의 규칙을 따라야 함 : 프레임 웍이 어디에 코드를 넣어야하는지 등등을 알려줌(어디에 템플릿을 넣고, 컨트롤러를 넣고, 뷰를 넣고 등등)

공식 웹사이트 https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 적용은 CSS/JS 링크만 하면 되서 간편하지만 제작자가 만든 그대로만 사용 가능 CSS JS