꿈많은 DEVELOPER

웹사이트에 사용자가 어디위치 콘텐츠를 보고있는지 사용자 편의를 높여줄 수있는 scroll 이벤트를 다루는 방법입니다. github에서 Sourse 입니다! https://github.com/yoogukhyeon/vanilla_javascript javascript 사용해서 scroll일 경우 각 Element 요소에 active 사용방법 입니다. See the Pen Scroll Active by 유국현 (@yoogukhyeon) on CodePen. 웹브라우저에서 현재 화면의 스크롤 정보를 알아야 할 경우에 사용하는 속성 * 브라우저간 호환성을 위해서는 window.scrollY 대신 window.pageYOffset을 사용하세요. HTML 요소에 높이나 너비를 구해야할 경우 많이 쓰이는 속성 offs..

반응형 웹, 혹은 웹앱을 만드는 요소에서 가장 중요한 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에서 모바일로..

실무에서 활용한만한 기본적인 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는 캐멜..

오랜만에 글을 올립니다!! 회사 업무로 바빠서ㅠㅠㅠ 오늘은 간단하면서도 활용도가 높은 jquery 활용해서 modal창을 만들어 보았습니다. See the Pen Untitled by 유국현 (@yoogukhyeon) on CodePen.