본문 바로가기

코딩해보자 :9156

웹디자인기능사 | 실기 | 롯데월드 🎡 웹디자인기능사 실기 | 롯데월드 사이트 만들기 1. 웹디자인기능사 실기 요령 ckick 시험장마다 Emmet이 안되는 곳이 있을 수 있음 👉🏻 드림위버 자동 완성 기능 활용하기 모든 css, js는 링크로 달기 (시험조건) 👉🏻 항상 링크를 걸었으면 사이트에 연동되는지 확인하고 넘어가기 style에 쓸때 복사/붙여넣기 습관 들이기 👉🏻 쓰면서 하다가 오류가 생기면 발견하기 어려움 2. 사이트 구조 살펴보기 CSS 살펴보기 HTML 살펴보기 즐길거리 subMenu-1 subMenu-2 subMenu-3 subMenu-4 요금/우대혜택 subMenu-1 subMenu-2 subMenu-3 subMenu-4 참여프로그램 subMenu-1 subMenu-2 subMenu-3 subMenu-4 이용가이드 subM.. 2022. 9. 14.
EFFECT | PARALLAX | 숨김 메뉴 + Top 기능 적용하기 Parallax Scroll 효과 오늘의 목표 👉🏻 상단 메뉴가 스크롤을 내리면 사라지고 올릴때 나타나도록 설정하기 👉🏻 제일 마지막 section에 위치했을때 Top 버튼이 나타나 위로 올라가도록 설정하기 1. 사이트 구성 살펴보기 CSS 살펴보기 HTML 살펴보기 Javascript Parallax Effect03 패럴랙스 이펙트 - 숨김 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 01 section1 우선 무엇이 되고자 하는가를 자신에게 말하라 그리고 해야 할일을 하라. 02 section2 이미 끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지 못한 것을 후회하라. 03 section3 문제는 목적지에 얼마나 빨리 가느내가 아니라 그.. 2022. 9. 14.
EFFECT | PARALLAX | 사이드 메뉴 적용하기 Parallax Scroll 효과 오늘의 목표 👉🏻 사이드 메뉴 설정하기 👉🏻 사이드 메뉴를 클릭했을 때 해당 section으로 이동하도록 설정하기 👉🏻 사이드 메뉴가 스크롤에 따라 반응하도록 설정하기 1. 사이트 구성 살펴보기 CSS 살펴보기 HTML 살펴보기 Javascript Parallax Effect02 패럴랙스 이펙트 - 사이드 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 우선 무엇이 되고자 하는가를 자신에게 말하라 그리고 해야 할일을 하라. 02 section2 이미 끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지 못한 것을 후회하라. 03 section3 문제는 목적지에 얼마나 빨리 가느내가 아니라 그 목적지가 .. 2022. 9. 14.
ANIMATION | SVG 텍스트 애니메이션 만들기 SVG ANIMATION SVG 텍스트 애니메이션 만들기 svg Gyupp Gyupp @font-face { font-family: 'Tmon'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot'); url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/webfontworld/t.. 2022. 9. 8.
ANIMATION | CSS 애니메이션 만들기 CSS ANIMATION 걸어다니는 하트 만들기 border-radius Start Stop + 먼저 연속되는 이미지를 이어 붙여 하나의 이미지로 저장합니다. Start Stop + 움직이는 애니메이션은 .stepbox에서 만들어주었습니다. .step { height: 700px; background: #351371; position: relative; border-radius: 0 0 10px 10px; } .step .stepbox { width: 800px; height: 600px; background: url(https://kkb75281.github.io/coding2/animation/img/hwalking.jpg); border-radius: 0; position: absolute; lef.. 2022. 9. 8.
ANIMATION | SVG 애니메이션 소개 SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) svg 원형(circle, el.. 2022. 9. 8.
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 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션.. 2022. 9. 7.
EFFECT | Parallax Scroll 효과 적용하기 Parallax Scroll 효과 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 오늘은 이미지가 아닌 메뉴바에 적용시켜 보는 방법을 배워보도록 할게요 ! 설명은 차근차근 더 추가하도록 하겠습니다 !🤯 그림으로 먼저 확인해봅시다 ! 👾 Parallax Scroll 효과 👾 1section1, 2, 3 ,... 의 위치값과 스크롤의 위치값을 비교하기 위해 forEach로 .content__item의 element 값과 index 값을 가지고 옵니다. 2if문을 사용해 scrollTop 값이 element.offsetTop 값보다 크면 메뉴바에 있는 .. 2022. 9. 6.
JAVASCRIPT | 이벤트 메서드 | mouseenter / mouseover 의 차이 ✍︎ mouseenter / mouseover 의 차이를 알아봅시다 ! 어떤 영역에 마우스가 올라감을 감지하는 두 메서드의 차이점을 예제를 통해 알아봅시다. addEventListener("mouseenter") addEventListener("mouseover") 해당 영역의 자식 영역 감지 X 해당 영역의 자식 영역 감지 O # 예제를 통해 확인해봅시다 ! See the Pen mouseover ex by kkb75281 (@kkb75281) on CodePen. mouseenter의 경우, 자식 영역까지 감지할 수 없기 때문에 부모 영역에서만 보라색으로 변하는 것을 볼 수 있습니다. mouseover의 경우, 자식 영역까지 감지하기 때문에 자식 요소가 노란색으로 변하는 것을 볼 수 있습니다. 2022. 9. 6.
SITE | footerType #1 👊🏻 SITE | footer 유형 뽀개기 ✔︎ CSS Point ☑︎ background: url(../img/slider_bg01.jpg) no-repeat center / cover; 배경 이미지 url 형식으로 삽입, 반복없이 가운데 정렬 / 사이즈에 맞도록 cover /* footerType */ .footer__menu { display: flex; margin-bottom: 70px; } .footer__menu > div { width: 16%; } .footer__menu h3 { font-size: 18px; margin-bottom: 20px; } .footer__menu li a { font-size: 14px; color: #666; margin-bottom: 10px; displ.. 2022. 9. 6.
SITE | bannerType #1 👊🏻 SITE | banner 유형 뽀개기 ✔︎ CSS Point ☑︎ background: url(../img/slider_bg01.jpg) no-repeat center / cover; 배경 이미지 url 형식으로 삽입, 반복없이 가운데 정렬 / 사이즈에 맞도록 cover /* bannerType */ .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: #fff; } .banner__title { font-size.. 2022. 9. 6.
SITE | sliderType #1 👊🏻 SITE | slider 유형 뽀개기 ✔︎ CSS Point ☑︎ blind 효과 사용하기 ☑︎ 이미지 스프라이트 / ir 효과 사용하기 /* sliderType */ .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background: url(../img/slider_bg01.jpg) no-repeat center / cover; } .slider__img .desc { width: 1160px; margin: 0 auto; padding: 100px 20px; } .slider__img .desc span { font-size: 16px; background-color: #fff; padding.. 2022. 9. 6.
STEP | VScode | prettier 설치 후 실행하기 ⚙️ STEP | VSCode | prettier 설치 후 실행 방법 VSCode에서 prettier 설치 후 적용이 되지 않을 경우, 설정하는 방법에 대해 알아봅시다. * prettier 자바스크립트 라이브러리로 작성된 코드를 저장할 시 줄간격 등을 맞춰 표준 스타일에 맞도록 변경시켜 주는 코드 포멧터(Code Formatter)입니다. 또한 구문을 분석해 완전히 재작성해준다는 점에서 다른 포멧터와 차이점이 있습니다. 1 우선 Extension에서 Prettier를 설치해줍니다. 2 설정에서 editor format on save 검색하고 체크 표시를 해줍니다. 3 설정에서 json 검색하고 Edit in settings.json을 눌러 파일을 열어줍니다. VSCode 내 설정값들이 저장되는 파일로 설.. 2022. 9. 5.
CSS | 통통 돌아다니는 공 만들기 통토도동 돌아다니는 공 🏐 codepen을 사용해서 통통 튕기며 돌아다니는 공을 만들어 봅시다. 첫번째 공이 먼저 가고 뒤따라 연속적으로 가는 것처럼 만들어보았습니다만.. 속도를 빠르게 하니 그냥 공이네요^^! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 #2. CSS 코드를 확인해보자 * { box-sizing: border-box; } body { background: linear-gradient(to top, blueviolet 0%, pink 100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: cent.. 2022. 9. 4.
SLIDER | 이미지 슬라이더 | 좌로 넘기기(연속) SLIDER 효과_좌로 움직이는 이미지(연속)를 만들어보자 ! 저번 시간에 해봤던 '이미지가 좌로 움직이는' 효과를 이번엔 '연속'으로 나오도록 만들어 봅시다. 원본 페이지 내에서도 소스보기를 통해 코드를 바로 확인해보실 수 있습니다^0^ 원본 소스 보기 script를 살펴봅시다 ! 이미지 좌로 움직이기(연속) | 여러 이미지를 감싸는 slider__wrap을 일정 시간 간격마다 좌로 이동해서 이미지가 움직이는 것처럼 보이게 해줍니다. 여기에 더해 첫번째 위치한 사진을 뒤에 한번 더 나오도록 해주고 리셋시켜 처음부터 다시 반복해서 나오도록 설정해줍니다. slider__wrap 좌로 이동 ☛ 첫번째 사진 마지막 사진 뒤로 복사 ☛ 마지막 사진 위치했을 때, 초기화 설정 첫번째 사진을 복사하는 이유; 복사하.. 2022. 9. 4.
jQuery | 스타일 메서드 📁 jQuery 스타일 메서드에 대해 알아봅시다 ! 📂 css() 메서드 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px"); $("div").css({background-color: "red", padding: "10px"}); 콜백 함수 $("div").css("width", function(index, .w) { // index는 각 div 요소의 index 0,1,2 // w는 각 div 요소 width 속성 return css 속성 // 각 div 요소의 속성을 변경 }); ... 내용 내용 내용 📢 직접 적용하면서 이해하자 ! 내용1 내용2 내용3 See th.. 2022. 9. 4.
jQuery | 속성 메서드 📁 jQuery 속성 메서드에 대해 알아봅시다 ! 📂 attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://www.google.com/").attr("target", "_blank"); $("a").attr({href: "http://www.google.com/", target: "_blank"}); 콜백 함수 $("a").attr("href", function(index, h) { // index는 각 a 요소의 index 0,1,2 // h는 각 a 요소 href 속성 return attribute (속성) // 각 a 요소의 속성을 생성.. 2022. 9. 4.
jQuery | 클래스 메서드 📁 jQuery 클래스 메서드에 대해 알아봅시다 ! 📂 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 📢 직접 적용하면서 이해하자 ! 2022. 9. 4.
SITE | imgTextType #1 사이트 이미지/텍스트 유형 #1 이미지와 텍스트로 이루어진 사이트를 만들어봅시다. 이미지 유형과 텍스트 유형을 잘 떠올리면서 도전해보세요 ! 1. CSS 살펴보기 /* reset */ li { list-style: none; } .blind{ position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } + 목록 초기화와 블라인드 효과 추가 /* common */ .gray { background-color: #f5f5f5; } + 배경색 추가 /* imgTextType */ .imgText__inner { display: flex; justify-content: space-between;.. 2022. 9. 2.
SITE | headerType #1 사이트 header 유형 #1 사이트 상단에 위치한 header 부분을 만들어 봅시다. 오늘은 간단해서 다들 성공하실거에요 ☺️ 1. CSS 살펴보기 /* reset */ em, i, address { font-style: normal; } + reset에 폰트 스타일 초기화 추가 /* headerType */ .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; } .header__logo { width: 20%; font-size.. 2022. 9. 2.
JAVASCRIPT | 요소 크기 메서드 🖇️ 위치 및 크기를 표현하는 속성 및 메서드 01. 요소 속성 : 크기 및 위치 : element.clientWidth : 요소의 가로값(margin/border 미포함) 02. 요소 속성 : 크기 및 위치 : element.clientHeight : 요소의 높이값(margin/border 미포함) 03. 요소 속성 : 크기 및 위치 : element.clientTop : 요소의 Y축값(부모 기준) 04. 요소 속성 : 크기 및 위치 : element.clientLeft : 요소의 X축값(부모 기준) 05. 요소 속성 : 크기 및 위치 : element.offsetWidth : 요소의 가로값(border/padding 포함) 06. 요소 속성 : 크기 및 위치 : element.offsetHeight .. 2022. 9. 1.
SITE | textType #3 SITE를 만들어봅시다 ! 1. CSS 살펴보기 ... /* textType03 */ .text__inner { display: flex; justify-content: space-between; } .text__box { width: 373px; background-color: #fff; border-radius: 10px; padding: 30px; margin-left: 20px; position: relative; transition: all 0.3s; } .text__box:nth-child(1) { margin-left: 0; } .text__box:hover { scale: 1.03; box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.15); } ... + .text.. 2022. 9. 1.
SITE | textType #2 SITE를 만들어봅시다 ! 1. CSS 살펴보기 ... /* textType02 */ .text__inner { display: grid; grid-template-areas: "box1 box2 box3" "box1 box4 box5" ; grid-template-columns: 32.3% 32.3% 32.3%; grid-template-rows: 50% 50%; grid-gap: 50px 20px; } .text__desc { grid-area: box1; } .text__inner:nth-child(2) { grid-area: box2; } .text__inner:nth-child(3) { grid-area: box3; } .text__inner:nth-child(4) { grid-area: box.. 2022. 9. 1.
jQuery | 탐색 선택자 📁 jQuery 탐색 선택자에 대해 알아봅시다 ! 📂 기본 탐색 선택자 선택자 종류 설명 children( ) $("div").children( ) div 요소의 자식 요소 선택 parent( ) $("p").parent( ) p 요소의 부모 요소 선택 parents( ) $("p").parents("div") p 요소의 부모가 되는 모든 div 요소 선택 closest( ) $("p").closest("div") p 요소의 부모가 되는 첫 번째 div 요소 찾음 next( ) $("div.m").next( ) div.m 요소의 다음 요소 선택 nextAll( ) $("div.m").nextAll( ) div.m 요소의 다음 요소들을 모두 선택 nextUntil( ) $("div.m").nextUntil.. 2022. 8. 31.
jQuery | 필터 선택자 📁 jQuery 속성 선택자에 대해 알아봅시다 ! ':'이 붙은 선택자를 필터 선택자라고 합니다. 📂 기본 필터 선택자 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택 :odd $("tr:odd") tr 요소 중 홀수 행만 선택 :first $("td:first") 첫 번째 td 요소 선택 :last $("td:last") 마지막 td 요소 선택 :header $(":header") 헤딩(h1~h6) 요소 선택 :eq( ) $("li:eq(0)") index가 0인 li 요소 선택 (index는 0번이 첫 번째 요소) :gt( ) $("li:gt(0)") index가 0보다 큰 li 요소들 선택 :lt( ) $("li:lt(2)") index가 2보다 작은 li 요소들 .. 2022. 8. 31.
jQuery | 속성 선택자 jQuery 속성 선택자에 대해 알아봅시다 ! 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소 선택 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소 선택 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소 선택 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 요소 선택 'abc'앞뒤로 연결된 문자가 없어야 선택 가능하기 때문에 'bg abc'는 선택되나 'bg_abc'는 선택되지 않음 요소[속성*='값'] $("span[class*='abc']").. 2022. 8. 30.
jQuery | 기본 선택자 jQuery 기본 선택자에 대해 알아봅시다 ! 기본 형식 : $("선택자") == $("#gnb") 선택자 종류 설명 태그 선택자 $("p") p 요소 선택 id 선택자 $("#gnb") #gnb 요소 선택 class 선택자 $(".logo") .logo인 요소 선택 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li 선택 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul 요소 선택 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소 선택 형제 선택자 $("#visual ~ #footer") #visual의 형제 요소 #footer 선택 종속 선택자 $("div.util") div 요소 중 clas.. 2022. 8. 30.
SITE | textType #1 SITE를 만들어봅시다 ! 카드, 이미지 유형에 이어 텍스트 유형 첫번째 방법 입니다. 그동안 배웠던 방법을 적용해 다같이 만들어봅시다 ~ 1. CSS 살펴보기 ... /* textType */ .text__wrap h6 { text-align: center; font-size: 16px; margin-bottom: 10px; text-decoration: underline; } .text__wrap h2 { text-align: center; font-size: 50px; margin-bottom: 50px; } .text__inner { display: flex; flex-wrap: wrap; justify-content: space-between; } .text__box { width: 32.3%;.. 2022. 8. 30.
CSS | 돌아가는 로딩 표시 만들기 돌아가는 로딩 표시를 만들어 보자 ! codepen을 사용해서 돌아가는 로딩 표시를 만들어 봅시다. 아래 코드를 참고하셔서 직접 만들어 보세요 :D See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 #2. CSS 코드를 확인해보자 body { height: 100vh; background-image: linear-gradient(-60deg, #ff5858 0%, blue 100%) } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease 100; } .loading .circle1 .. 2022. 8. 29.
CSS | 굴러가는 네모 만들기 굴러가는 네모를 만들어 보자 ! codepen을 사용해서 굴러가는 네모를 만들어 봅시다. 아래 코드를 참고하셔서 직접 만들어 보세요 :D See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 #2. CSS 코드를 확인해보자 body { height: 100vh; background-image: linear-gradient(to top, white, pink) } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .box::before { content: ''; width: 50px;.. 2022. 8. 29.

It's cording time

코딩 여기서 정리하고 배워보자구 :9

자바스크립트

JAVASCRIPT

자세히 보기
html

HTML

자세히 보기
css

CSS

자세히 보기
광고 준비중입니다.

티스토리툴바