꿈많은 DEVELOPER

javascript 활용해서 carousel 구현 했다. 웹페이지에서 자주 볼수있는 swiper를 라이브러리가 아닌 javascript로 구현했다. 커스터마이징으로 기능 & 코드를 개선한다면 실무에서도 적용이 가능할꺼 같다. Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript/blob/main/carousel.html GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. 가장 기본적인 HTML, CSS 구축..

반응형 웹, 혹은 웹앱을 만드는 요소에서 가장 중요한 CSS 미디어 쿼리가 있고 속성중에 min-width, max-width를 이용해서 모바일 부터 pc에 조건에 맞춰 UI를 처리할수 있습니다. min-width - 즉 1000px 이상인 경우에 적용되는 코드 @media (min-width: 1000px) { body { background: gold; } } max-width - 즉 1000px 이하인 경우에 적용되는 코드 @media (max-width: 1000px) { body { background: gold; } } min-width를 사용하는 경우 스마트폰등 모바일 사이즈에서의 레이아웃을 기본으로 점차 pc사이즈로 확장되어가는 형태에 적합 max-width를 사용하는경우 pc에서 모바일로..

Html 요소들마다 classList 작업해서 변화를 줘야 될떄마다 유용하게 쓸수있는 메소드입니다. classList.toggle() 토글이란? on/off switch의 개념으로 스위치를 켯다, 껏다 하는 기능을 가지고 있습니다. add() / remove() 메서드를 한번에 쓸 수 있는 합쳐진 개념입니다. 즉 click 이벤트에 classList.toggle() 추가시켜서 css에 style줘서 구현시킵니다. ex : add() classList.add() add란? 지정한 요소에 클래스 값을 추가시키는것입니다. ex : remove() classList.remove() remove란? 지정한 요소에 클래스 값을 제거시키는것입니다. ex : 전체적인 classList 예제는 https://cometr..

실무에서 활용한만한 기본적인 hover 기능을 구현해봤습니다. See the Pen basic hover by 유국현 (@yoogukhyeon) on CodePen.

실수를 통해 배우고 성장하자. HTML에서 CLASS이름을 짓는것을 굉장히 중요하다. 나 뿐만아니라 다른 개발자들과 협업을 해야 하므로 또는 유지보수시에 혼란스러움과 불필요한시간을 줄일 수 있기때문에 naming은 굉장이 중요하다. 저또한 이러한 실수로 많이 혼났기 때문에 다시 상기시키고자 다시한번 정리하겠습니다. 공통규칙 ○ naming의 첫 시작에 숫자, 특수문자, 대문자의 사용은 지양한다. ex) 2list_notice ( x ) list_notice2 ( o ) ○ naming은 '형태_의미_상태' 순서로 조합하며, 3단계를 넘어가지 않도록 권장한다. ex) btn_apply_on, box_news, box_reply_open, use_yn, open_yn 등 id/class 규칙 ○ id는 캐멜..