본문 바로가기

웹퍼블리셔를 위한50

네이버, 다음 코딩 컨벤션 사이트 참고하여, 코딩의 방향을 잡아보세요. 코딩을 하다보면 내가 올바르게 코드를 작성한건지, 네이밍을 적절한지 의심이 생길때가 있을 것입니다. 네이버, 다음에서는 어떻게 가이드를 잡고 마크업을 하는지 참고해보세요~ [네이버 코딩 컨벤션] nuli.navercorp.com/tool/codingCon NULI Coding Convention 마크업 개발은 프론트-엔드 페이지의 기본 골격을 형성하기 때문에 디자인, 브라우저, 스크립트, 성능, 접근성 등과 긴밀한 관계가 있습니다. 즉, 마크업 개발을 잘 해야 모든 브라� nuli.navercorp.com [다음 코딩 컨벤션] ui.daum.net/ 다룸, Darum 웹표준을 다루다 스니펫 데이터 수 76 last update 2014/09/30 ui.daum.net 2020. 8. 11.
좌에서 우로 색이 변하는 텍스트 효과 - 자바스크립트 바닐라 자바스크립트로 구현하는 왼쪽부터 오른쪽으로 글자색이 자연스럽게 변하는 텍스트 효과입니다. 2020. 8. 9.
CSS 아이콘 채우기 호버 효과 | 소셜 미디어 버튼 소셜버튼에 마우스를 올리면, 채워지는 효과가 나는 버튼효과입니다. 2020. 8. 9.
Javascript를 사용하여 반응 형 사이드 바 메뉴를 만드는 방법 HTML CSS 및 Javascript를 사용하여 반응 형 사이드 바 메뉴를 만드는 방법 | 대시 보드 사이드 바 메뉴 2020. 8. 6.
원페이지 사이트 작업 영상 (러닝타임 : 3시간 20분 ) 오늘 우리는 멋진 한 페이지 웹 사이트가 될 웹 사이트를 만들 것입니다. 이것은 HTML 및 CSS 연습을위한 것이며이 프로젝트를 통해 웹 사이트를 완벽하게 반응시키는 방법과 유사 요소, 햄버거, 오프 캔버스 메뉴 등에 대한 많은 것들을 볼 수 있습니다. 이 비디오가 마음에 드시길 바랍니다. 또한 아래 링크에서 소스 코드를 다운로드 할 수 있습니다. 소스 코드 https://github.com/WebCifar/one-page-website-html-css-project-for-practice 2020. 8. 5.
신입 웹디자이너를 위한 크롬 개발자도구 활용법 개발자도구는 크게 패널 메뉴와 패널 영역으로 나누어져 있습니다. 우리는 주로 패널메뉴 앞단의 내용을 가지고 작업하게 될 것입니다. 패널 메뉴 중 디자이너들이 가장 눈여겨볼 만한 네 가지 기능을 소개하겠습니다. ➊ 검사도구(Inspect) : 검사하고 싶은 영역을 선택하게 도와주는 도구입니다. ➋ 디바이스 모드(Device mode) : 화면을 디바이스별로 확인하도록 도와주는 도구입니다. ➌ Elements 패널 : 태그를 분석하고 실시간으로 수정할 수 있도록 도와주는 도구입니다. ➍ Dock side : 개발자의 취향이나 편의에 따라 원하는 방식대로 Dock 위치를 지정하여 사용할 수 있습니다. [더보기 ▼] PART 1 http://blog.rightbrain.co.kr/?p=11693 신입 웹디자이너.. 2020. 8. 4.
텍스트 3D효과 및 애니메이션 - Pure CSS3 CSS3로만 사용해서 텍스트 3D효과를 만들어 보았습니다. 덤으로~ 애니메이션 까지 ^^ 2020. 8. 4.
CSS 및 Javascript를 사용하여 간단한 이미지 슬라이더 만들기 | 이미지 슬라이드 쇼 CSS 애니메이션 및 호버 효과 https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D 2020. 8. 4.
바닐라 자바 ​​스크립트를 사용한 Mousemove의 배경 시차 효과 바닐라 자바 ​​스크립트를 사용한 Mousemove의 배경 시차 효과 2020. 7. 31.
CSS 카드 호버 효과 | 3D 뒤집기 2020. 7. 30.
반응 형 CSS 3D 이미지 호버 효과 | HTML 및 CSS를 사용하여 호버에서 3D 플립 카드 효과 www.youtube.com/embed/HHqBS7xFnPM" 반응 형 CSS 3D 이미지 호버 효과 | HTML 및 CSS를 사용하여 호버에서 3D 플립 카드 효과 2020. 7. 30.
버튼 애니메이션 효과 - 마우스 오버시 네온 라이트 효과 버튼에 마우스를 올리면 네온라인이 테두리를 따라 움직이는 효과입니다. 2020. 7. 30.
HTML과 CSS를 사용하여 전자 상거래 웹 사이트를 만드는 방법 HTML 및 CSS를 사용한 온라인 쇼핑 웹 사이트 제품 페이지 디자인 단계별 자습서 1 부: https://youtu.be/yQimoqo0-7g 2 부: https://youtu.be/ZbnvP_hmxfE 3 부 : https://youtu.be/ENyk_W-Eleo 2020. 7. 28.
자바스크립트를 이용한 메뉴 활성화 애니메이션 [ Menu Hover Animation ] 순수 자바스크립트 vanilar javascript 마우스를 올리면 따라다니는 메뉴바 애니메이션 2020. 7. 28.
숫자를 자동생성하는 CSS 목록 숫자가 자동생성 되는 counter를 이용하여 간단한 리스트를 제작해 보았습니다. 추가로 CSS3 Transition까지 넣어보았습니다. ^^ 감사합니다. 2020. 7. 23.