본문 바로가기

Coding162

mouseHover Animation mouseHover Animation 이번에는 codepen을 통해서 마우스오버 애니메이션을 만들어 봤습니다. 기본적인 html을 잡아준 뒤, css에 형태를 잡아주고 hover__updown과 hover__leftright에 transform효과를 넣어줍니다. 1. perspective : 3d효과에 생생함을 더해준다. 2. transform-style: preserve-3d; : 2d가 아닌 z축을 추가해주어 3d로 만들어준다. 3. backface-visibility: hidden; : 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성이다. See the Pen mouseHoverEffect by KDB6 (@kdb6) on CodePen. 2022. 9. 20.
VScode Scss 적용 방법 VScode에서 Scss 설정하기 이번에는 VScode에서 Scss를 설정하는 방법에 대해 알아보겠습니다. 우선 Scss 간단한 설명을 하자면 SCSS는 CSS구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합입니다. 장점으로는, 가독성과 재사용이을 높여주어 유지 보수를 쉽개 해주며 CSS보다 심플한 표기법으로 CSS를 구조화하여 표현이 가능합니다. 설치 방법. 첫 번째 1. VScode 실행 후 Extensions를 클릭해줍니다. 2. 검색 란에 Sass 검색 후 들어가줍니다. 3. Sass 페이지에 들어간 후 install을 클릭하여 설치해줍니다. 설치 방법. 두 번째 1. VScode에 좌측 하단에 있는 톱니바퀴를 클릭해줍니다. 2. 톱니바퀴를 클릭.. 2022. 9. 19.
Wave Animation Wave Animation 이번에는 codepen을 통해서 웨이브 애니메이션을 만들어 봤습니다. 기본적인 html을 잡아준 뒤, scss에 형태를 잡아주고 keyframe 안에 각 %마다 transform를 지정해줍니다. See the Pen Wave animation by KDB6 (@kdb6) on CodePen. 2022. 9. 19.
mouse 02 마우스 이펙트 02 (마우스 따라다니기 : GSAP) 이번에는 마우스에 효과를 넣은 이펙트를 코딩해봤습니다. HTML HTML은 기본적인 섹션안에 div 클래스를 잡아줍니다. 코드 보기 Money is not everything in the world, but the world runs on money. 돈이 세상에 다는 아니지만세상은 돈으로 굴러간다. CSS css는 기본적인 형태와 스타일을 잡아주지만, 이미지 개개인에 nth-child를 이용해여 개별 구역을 잡아줍니다. 또한, z-index를 사용하여 각 위치를 잡아줍니다. 코드 보기 /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center.. 2022. 9. 18.
mouse 01 마우스 이펙트 01 (마우스 따라다니기) 이번에는 마우스에 효과를 넣은 이펙트를 코딩해봤습니다. HTML HTML은 기본적인 섹션안에 div 클래스를 잡아줍니다. 코드 보기 There's no more excuse than what you don't do. 니가 안하는 것 뿐 그 이상의 핑계는 없다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px CSS css는 기본적인 형태와 스타일을 잡아주지만, 이미지 개개인에 nth-child를 이용해여 개별 구역을 잡아줍니다. 또한, z-index를 사용하여 각 위치를 잡아줍니다. 코드 보기 /* mouseType */.. 2022. 9. 18.
Slider 04 슬라이드 이펙트 04 (슬라이드 버튼) 이번에는 이미지 슬라이드 형태를 가진 이펙트를 코딩해봤습니다. HTML HTML은 기본적인 섹션안에 div 클래스를 잡아줍니다. 코드 보기 prev next CSS css는 기본적인 형태와 스타일을 잡아주지만, 이미지 개개인에 nth-child를 이용해여 개별 구역을 잡아줍니다. 또한, z-index를 사용하여 각 위치를 잡아줍니다. 코드 보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지를 보이는 영역 */ position: relative; width: 80.. 2022. 9. 18.
Slider 03 슬라이드 이펙트 03 (좌 : 연속적인 움직임) 이번에는 이미지 슬라이드 형태를 가진 이펙트를 코딩해봤습니다. HTML HTML은 기본적인 섹션안에 div 클래스를 잡아줍니다. 코드 보기 CSS css는 기본적인 형태와 스타일을 잡아주지만, 이미지 개개인에 nth-child를 이용해여 개별 구역을 잡아줍니다. 또한, z-index를 사용하여 각 위치를 잡아줍니다. 코드 보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지를 보이는 영역 */ position: relative; width: 800px; .. 2022. 9. 18.
parallax 04 페럴랙스 이펙트 04 이번 시간에는 페럴랙스 형태를 가진 이펙트를 코딩해봤습니다. HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 각 태그에 클래스 이름을 설정하여 각 구역을 잡아줍니다. 코드보기 Javascript Mouse Effect04 패럴렉스 이펙트 - 나타나기 1 2 3 4 5 6 7 01 section1 니 인생은 너가 바꾸는거다. 02 section2 남 탓 하기 전에 너 자신을 봐라. 03 section3 알면서도 안하고 가만히 있으면 거지가 되면 된다. 04 section4 남들은 너한테 큰 관심이 없다. 05 section5 너 혼자 알아서 해라. 06 section6 돈이 세상에 다는 아니지만 세상은 돈으로 굴러간다. 07 section7 사회는 널 기다려주지 .. 2022. 9. 18.
MySQL MySQL MySQL은 데이터베이스 소프트웨어입니다. 일반적으로 데이터를 추가하거나 검색, 추출하는 기능을 모두 포함해서 데이터베이스라고 부르며, 세계에서 가장 많이 쓰는 오픈 소스 관계형 데이터베이스 관리시스템(RDBMS)입니다. MySQL은 PHP 스크립트 언어와 상호 연동이 잘 되면서 오픈소스를 개발된 무료 프로그램입니다. 그래서 홈페이지나 쇼핑몰(워드프레스, cafe24, 제로보드, 그누보드)등 일반적으로 웹 개발에 널리 사용하고 있습니다. 이번 시간에는 MySQL에 쓰이는 몇 가지의 데이터 베이스를 알아보겠습니다. 첫 번째. 데이터베이스 데이터베이스 만들기 create database 데이터베이스 이름; mysql> create database sample01; Query OK, 1 row af.. 2022. 9. 14.
완성 사이트 사이트 완성본 이번에는 기존 사이트 작업을 통한 사이트 완성본를 보여드리도록 할게요. 어느정도 CSS 작업과 반응형 작업을 해봤습니다. headerType 기본적인 구성으로 코드를 짜주고, 반응형 작업도 해줍니다. 코드 보기 Pottery Header 22AW Lookbook NEW ARRIVALS HQ Service Pottery Login .header__inner { width: 100%; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #ccc; position: fixed; left.. 2022. 9. 14.
parallax 03 페럴랙스 이펙트 03 이번 시간에는 페럴랙스 형태를 가진 이펙트를 코딩해봤습니다. HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 각 태그에 클래스 이름을 설정하여 각 구역을 잡아줍니다. 코드보기 & Javascript Mouse Effect03 패럴렉스 이펙트 - 숨김 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 01 section1 니 인생은 너가 바꾸는거다. 02 section2 남 탓 하기 전에 너 자신을 봐라. 03 section3 알면서도 안하고 가만히 있으면 거지가 되면 된다. 04 section4 남들은 너한테 큰 관심이 없다. 05 section5 너 혼자 알아서 해라. 06 section6 돈이 세상에 다는 .. 2022. 9. 8.
parallax 02 페럴랙스 이펙트 02 이번 시간에는 페럴랙스 형태를 가진 이펙트를 코딩해봤습니다. HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 각 태그에 클래스 이름을 설정하여 각 구역을 잡아줍니다. 코드보기 Javascript Mouse Effect02 패럴렉스 이펙트 - 사이드 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 니 인생은 너가 바꾸는거다. 02 section2 남 탓 하기 전에 너 자신을 봐라. 03 section3 알면서도 안하고 가만히 있으면 거지가 되면 된다. 04 section4 남들은 너한테 큰 관심이 없다. 05 section5 너 혼자 알아서 해라. 06 section6 돈이 세상에 다는 아니지만 .. 2022. 9. 8.
SVG Text Animation SVG Text Animation 이번 시간에는 SVG 텍스트에 애니메이션 효과를 넣은 한 가지를 보여드리도록 하겠습니다. 해당 효과에는 animation와 @keyframes를 사용하고 각 구역마다 %를 정해서 애니메이션을 설정해줍니다. See the Pen Text animaion by KDB6 (@kdb6) on CodePen. 2022. 9. 7.
SVG Animation SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 1. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 2. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 3. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 4. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) svg lt;.. 2022. 9. 7.
CSS Motion Animation CSS Motion Animation 이번 시간에는 걸어다니는 모션 CSS 애니메이션을 만들어 봤습니다. 여러 이미지가 하나로 연결된 이미지를 사용하며, @keyframes에서 position을 이용하였습니다. See the Pen Untitled by KDB6 (@kdb6) on CodePen. 2022. 9. 7.
CSS Animation CSS Animation 이번 시간에는 CSS내에 있는 여러 종류에 애니메션에 대해 알아보겠습니다. Animation Animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animatio.. 2022. 9. 7.
Parallax 01 페럴랙스 이펙트 01 이번 시간에는 페럴랙스 형태를 가진 이펙트를 코딩해봤습니다. HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 각 태그에 클래스 이름을 설정하여 각 구역을 잡아줍니다. 코드보기 Javascript Mouse Effect01 패럴렉스 이펙트 - 메뉴 이동 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 니 인생은 너가 바꾸는거다. 02 section2 남 탓 하기 전에 너 자신을 봐라. 03 section3 알면서도 안하고 가만히 있으면 거지가 되면 된다. 04 section4 남들은 너한테 큰 관심이 없다. 05 section5 너 혼자 알아서 해라. 06 section6 돈이 세상에 다는 아니지만 세.. 2022. 9. 6.
mouseenter / mouseover mouseenter, mouseover 이번 시간에는 mouseenter와 mouseover의 차이점을 알아보도록 하겠습니다. mouseenter, mouseover란? mouseenter와 mouseover는 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 마우스 이벤트이며, mouseenter는 mouseleave와 짝을 이루고, mouseover는 mouseout과 짝을 이룬다. mouseenter, mouseover의 차이점 해당 두 이벤트를 비슷하지만 이벤트 전파와 취소 가능성에 큰 차이가 있다. mouseenter는 이벤트가 발생 시 버블링이 일어나지 않아 자기 자신만이 이벤트르 받을 수 있고, mouseover는 이벤트가 발생할 때 버블링이 일어나며 상위 요소로 전파된다. mouseove.. 2022. 9. 5.
푸터 타입 01 푸터 타입 구조 01 사이트에 기초적인 구조를 가진 푸터 타입 구조를 만들어 봤습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 컨텐츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 컨택트 유형02 푸터 이메일 유형03 2022 Pottery. All rights reserved. Site CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. ... 2022. 9. 5.
배너 타입 01 배너 타입 구조 01 사이트에 기초적인 구조를 가진 배너 타입 구조를 만들어 봤습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 배너 영역 Pottery 저희는 비즈니스 캐주얼을 지향하고 있으며, 언제 어디서든 편안한 룩을 지향합니다. 배너 유형 01 Site CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. .banner__inner { background-image: url(../img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; padding: 120px 0; color: #f.. 2022. 9. 5.
슬라이드 타입 01 슬라이드 타입 구조 01 사이트에 기초적인 구조를 가진 슬라이드 타입 구조를 만들어 봤습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 슬라이드 영역 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 Site CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. 또한, 이미지 스프라이트 효과를 사용하였습니다. .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background: url(../img/slider_bg0.. 2022. 9. 5.
Prettier Prettier 이번 시간에는 VScode에서 자동정렬 해주는 프로그램인 prettier를 적용하는 법을 알려드리겠습니다. 정리 요약 첫 번째. EXTENSIONS에 들어가서 Prettier를 설치해주기 두 번째. 왼쪽 하단에 톱니바퀴 버튼 클릭 후 설정 들어간 다음에 검색창에 'editor format on save'를 검색하여, 체크박스에 체크 해줍니다. 여기까지 진행 후 안되시면 세 번째로 가주세요. 세 번째. 검색창에 'json'을 검색하여 Launch에서 Edit in setting.json 파일이 나오는데 눌러준 뒤, editor.formatOnSave이 true인지 확인해보시면 됩니다. 첫 번째 EXTENSIONS에 들어가서 Prettier를 설치해주기 두 번째 왼쪽 하단에 톱니바퀴 버튼 클.. 2022. 9. 5.
스타일 관련 메서드 스타일 관련 메서드 이번 시간에는 스타일 관련 메서드를 알아보겠습니다. css() 메서드 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px"); $("div").css({"background-color: "red", padding: "10px"}); 콜백 함수 $("div").attr("width", function(index, w) { // index는 각 div 요소의 index 0, 1, 2 // w는 각 div 요소의 width 값 return css 속성 // 각 div 요소의 css 속성을 생성 및 변경합니다. }); .... 내용 내용 내용 See the Pe.. 2022. 9. 4.
속성 관련 메서드 속성 관련 메서드 이번 시간에는 속성 관련 메서드를 알아보겠습니다. attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({href: "http://icoxpublish.com", target: "_blank"}); 콜백 함수 $("a").attr("href", function(index, h) { // index는 각 a 요소의 index 0, 1, 2 // h는 각 a 요소 href 속성 return attribute(속성) // 각 a 요.. 2022. 9. 4.
클래스 관련 메서드 클래스 속성 메서드 이번 시간에는 클래스 속성 메서드를 알아보겠습니다. addClass() 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(function(index, className) { // index는 각 div 요소의 index 0, 1, 2 // className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. }); .... 내용1 내용2 내용3 See the Pen addClass() 메서드 by KDB6 (@kdb6) on CodePen. removeClass() 메서드 요소에 class 속성을 제거합니다. 실행 분류 형식.. 2022. 9. 4.
Ball Animation Ball Animation 이번에는 codepen을 통해서 공이 튕기는 모션에 애니메이션을 만들어 봤습니다. 기본적인 html을 잡아준 뒤, css에 형태를 잡아주고 keyframe 안에 각 %마다 transform를 지정해줍니다. See the Pen Ball Animation by KDB6 (@kdb6) on CodePen. 2022. 9. 2.
이미지 텍스트 타입 01 이미지 텍스트 구조 01 사이트에 기초적인 구조를 가진 이미지 텍스트 구조를 만들어 봤습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 유용한 사이트 살펴보기 이미지 텍스트 유형 01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 Site CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. h2와 p는 전체 구역에 사용돼 코드 불안정한 가능성이 있기에, 해당 요소 css만 부여되는 >를 사용해줍니다. /* fonts */ @import url('https://webfontw.. 2022. 9. 1.
헤더 타입 01 헤더 타입 구조 01 사이트에 기초적인 구조를 가진 헤더 타입 구조를 만들어 봤습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. website 헤더 영역 슬라이드 영역 배너 영역 컨테이너 영역 푸터 영역 로그인 Site CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. h2와 p는 전체 구역에 사용돼 코드 불안정한 가능성이 있기에, 해당 요소 css만 부여되는 >를 사용해줍니다. /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /.. 2022. 9. 1.
요소 크기 속성 및 메서드 요소 크기 이번 시간에는 요소의 크기를 알아주는 속성 및 메서드를 알아보겠습니다 9가지의 속성 및 메서드 01. 속성 : clientWidth() : 요소의 가로 값(마진/보더 미포함) 02. 속성 : clientHeight() : 요소의 높이 값(마진/보더 미포함) 03. 속성 : clientTop() : 요소의 Y축 값(부모 기준) 04. 속성 : clientLeft() : 요소의 X축 값(부모 기준) 05. 속성 : offsetWidth() : 요소의 가로 값(보더/패딩 포함) 06. 속성 : offsetHeight() : 요소의 높이 값(보더/패딩 포함) 07. 속성 : offsetTop() : 요소의 Y축 값(문서 기준) 08. 속성 : offsetLeft() : 요소의 X축 값(문서 기준) 0.. 2022. 9. 1.
텍스트 타입 03 텍스트 타입 03 이번 시간에는 텍스트 타입 사이트를 만들어 봤습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. section내에 각 태그에 이름을 부여해주며, articel 영역과 figure태그 내에 img를 사용줍니다. Review 이용하신 분들에 후기입니다. 이 디자인 나쁘지 않은 것 같아요! 첨에는 살까 말까 망설여 졌는데 나쁘지도 않고 계속 입다보니깐 맘에 듭니다. 역시 믿고 사길 잘했네여! 안현규 지나가는 시민 자세히 보기 아 이번에 춤을 춰야하는데, 뭘 춰야 할 지... 이거 떨어질거라 생각을 못해봤는데, 시간을 다시 돌릴 수 있을까라고 생각을 해봅니다. 첫 데뷔를 이렇게 하다니 너무 좋네여! 이강현 마피아 자세히 보기 오오! 너무 맘에 들어요. 이거 .. 2022. 8. 31.

INFORMATION

javascript

css

html