코딩해보자 :9156 JAVASCRIPT | jQuery 🤔 jQuery, 그게 뭔데? 제이쿼리는 자바스크립트 언어를 더 간편하게 사용할 수 있도록 단순화 시킨 자바스크립트 라이브러리입니다. 뛰어난 호환성 유지관리가 용이한 코드 작성 다양한 기능 제공(네트워크, 애니메이션 등) 플러그인 직접 구현, 확장 가능 🤓 jQuery, 사용해볼까? jQuery를 사용하기 위해서는 jQuert 라이브러리를 웹페이지에 연결해서 사용해야 합니다. 각 버전별 브라우저 호환 여부가 다르기 때문에 확인하시고 연결하시면 됩니다 '3' 📌 직접 다운로드 방식 1) jQuery 라이브러리 다운로드 공식 홈페이지 내 Download jQuery v3.6.1 을 다운로드 받아 사용합니다. 2) HTML 문서에서 jQuery 라이브러리 연결 html 문서를 jQuery 라이브러리와 같은 경.. 2022. 8. 29. JAVASCRIPT | GSAP 🤔 GSAP, 그게 뭔데? GSAP_The GreenSock Animation Platform; CSS나 jQuery등을 사용해 애니메이션 효과를 구현하는데 있어 번거로움과 복잡함을 GSAP를 통해 훨씬 간편하게 설정이 가능합니다. 세세한 부분까지 설정이 가능하며 라이브러리 참고가 가능하여 여러 웹사이트에서 사용하고 있습니다. 🤓 GSAP, 사용해볼까? 위의 사진처럼 공식 사이트에서 설치하거나 CDN을 통해 사용할 수 있습니다. 📄 SLIDER 효과_좌로 움직이는 이미지를 통해 확인해보자 ! 2022. 8. 29. SLIDER | 이미지 슬라이더 | 좌로 넘기기 SLIDER 효과_좌로 움직이는 이미지를 만들어보자 ! SLIDER 효과 중 이미지가 좌로 움직이는 효과를 만들어 봅시다. 원본 페이지 내에서도 소스보기를 통해 코드를 바로 확인해보실 수 있습니다^0^ 원본 소스 보기 script를 살펴봅시다 ! 이미지 좌로 움직이기 | 여러 이미지를 감싸는 slider__wrap을 일정 시간 간격마다 좌로 이동해서 이미지가 움직이는 것처럼 보이게 해줍니다. currentIndex = (currentIndex +1) % sliderCount; | 이 밖의 if 조건문을 사용할 수도 있습니다. 2022. 8. 29. SLIDER | 이미지 슬라이더 | transition 효과 SLIDER 효과를 만들어보자 ! SLIDER 효과를 통해 이미지가 넘어가는 페이지를 만들어봅시다. 원본 페이지 내에서도 소스보기를 통해 코드를 바로 확인해보실 수 있습니다^0^ 원본 소스 보기 script를 살펴봅시다 ! setInterval(() =>{},2000) | 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용하는 함수입니다.(2000 = 2초) let nextIndex = (currentIndex + 1) % sliderCount; | 나머지 값을 활용해서 이미지가 순서대로 나올 수 있도록 해줍니다. 2022. 8. 29. CSS | 요소를 숨기는 5가지 방법 요소를 숨기는 방법에 대해 알아봅시다 ! CSS에서 요소를 숨기는 방법은 총 5가지가 있습니다. 하나씩 알아볼까요~? 📌 display: none; display: block / inline-block / inline / none; display 속성은 요소를 어떤 형태로 보이게 할건지 정하는 속성으로, display: none;을 설정하면 요소를 숨길 수 있습니다. 애니메이션 적용X, 영역X 📌 opacity: 0; opacity: number | initial / inherit; opacity 속성은 요소의 투명도를 설정하는 속성으로 아래와 같이 설정이 가능합니다. number : 0(완전 투명) ~ 1(완전 불투명) 사이의 값 initial : 기본값 inherit : 부모 요소의 속성값 상속 애니.. 2022. 8. 26. ILLUSTRATOR | DESIGN | 사슴 만들기 🦌 사슴 만들어 보면서 일러스트 기능을 익혀봅시다 ! 라인 따기 부터 실물 모형 mock up 작업까지 사진을 통해 그 과정을 확인해봅시다. ✔️ 사슴 그림을 가져와 불투명도를 조절한 후 배경에 고정하여 작업을 시작합니다. # 라인 따기 ✔️ 펜의 곡선 기능을 활용하여 그리거나 어려운 분들은 최대한 확대 후 선을 나눠그려 곡선처럼 보이도록 해줍니다. ✔️ 선의 끝 부분과 선과 선이 만나는 부분은 둥글게 처리되도록 설정해줍니다. # 채색하기 ✔️ Object - Expand Appearance 작업 후 채색을 위해 Live Paint 기능을 사용해 채색을 해줍니다. # mock up 제작 ✔️ 제품 디자인 평가를 위해 photoshop을 활용하여 mock up을 제작해줍니다. 2022. 8. 24. QUIZ | 문제 만들기 | 방법 06 | 슬라이드 형식 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 객관식(여러문항); 슬라이드 형식 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! + 정답 확인 버튼을 누를 경우, 문제 카운트수가 1씩 증가되며 그에 따라 다음 문제로 체인지 + 동시에 맞고 틀림을 알려줬던 강아지의 모습도 원래대로 돌리기 위해 like 와 dislike 제거 + 마지막 문제에 도달했을 경우 총 몇문제중 얼만큼 맞췄는지 표시 2022. 8. 24. QUIZ | 문제 만들기 | 방법 05 | 점수 확인 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 객관식(여러문항); 점수확인 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! const divBox = document.createElement("div"); quizSelectsWrap.appendChild(divBox).innerHTML = `${question.answerEx}`; + 오답일 경우 div 박스를 만들고 quizSelectsWrap의 자식요소로 넣어 해설이 뜨도록 설정 quizConfirm.textContent = `${quizScore < 36 ? "총 " + quizInfo.length + "문제 중에 " + quizScore + "문제를 맞추었습니다. 결과는 탈락입니다!" : "총 " + quizInfo.len.. 2022. 8. 24. CSS | 색상 표현(Color) | 16진수, rgba, hsla 🚦 CSS 색상 표현에 대해 알아봅시다 ! CSS에서 색상을 지정하는 세가지 방법(16진수, rgba, hsl)에 대해 알아봅시다. 🚗 16진수 RGB 16진수 RGB : #02798b : hash/pound 기호(#)와 6개의 16진수로 표현 16진수는 0과 f(15) : 0123456789sbcdef : 사이의 값으로 구성되며, 총 256개(16*16)의 색 지정 가능 .one { background-color: #02798b; } .two { background-color: #c55da1; } .three { background-color: #128a7d; } #02798b #c55da1 #128a7d 🚕 RGB값 / RGBA 값 RGB : rgb(빨강, 녹색, 파랑)로 지정 : 각 채널(매개변수).. 2022. 8. 24. CSS | 단위 | 절대길이와 상대길이 CSS 단위에 대해 알아봅시다 ! CSS에서 자주 사용되는 숫자 데이터 형식에 대해 알아보고, 길이 단위에 대해 알아봅시다. 숫자 데이터 형식 데이터 형식 설명 1024 또는 -55 와 같은 정수 10진수, 소수 자릿수도 가능 45deg, 10px과 같이 단위가 붙어 있는 숫자 ,, 및 종류 포함 50%와 같이 퍼센트를 나타냄 요소의 길이는 부모 요소의 길이를 기준으로 함 이 중 형식이 가장 많이 쓰이기 때문에 길이 단위에 대해 알아봅시다. 길이 단위에는 항상 동일한 크기인 절대 길이와 다른 것에 비례하여 조정되는 상대 길이로 나뉩니다. 절대 길이 단위 화면 출력보다 인쇄 시 더 유용합니다. 단위 이름 길이값 cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q.. 2022. 8. 24. SEARCH | 검색 유형03 SEARCH 효과를 만들어보자 ! 문자열 메서드 charAt( )을 활용하여 검색 페이지를 만들어봅시다. 이번에는 검색 효과가 아닌 키워드별로 나누어 볼 수 있도록 만들어주었습니다. 원본 소스 보기 HTML을 살펴봅시다 ! charAt()를 이용하여 검색하기 CSS 속성 첫글자 검색하기 a b c d e f g h i j k l m n o p q r s t u v w x y z ... + 검색 부분을 없애고 알파벳 키워드를 표시 CSS를 살펴봅시다 ! .search__info .keyword { text-align: center; margin-bottom: 10px; } .search__info .keyword span { border: 2px solid var(--htmlColor); border-ra.. 2022. 8. 22. ILLUSTRATOR | DESIGN | 토끼 만들기 🐰 토끼를 만들어 보면서 일러스트 기능을 익혀봅시다 ! 일러스트레이터는 벡터 방식의 대표적인 프로그램 입니다. 도형으로 만들어진 그림과 펜 도구로 그린 그림의 차이를 확인해봅시다. 1. 여러 도형을 조합하여 만든 여자아이 ✔️ 도형은 열린 곳 없이 닫혀있기 때문에 바로바로 색을 입혀 만들 수 있습니다. 2. 펜 툴을 활용하여 만든 토끼 가족 # 라인 따기 ✔️ 스케치로 작업된 사진을 고정하고 펜툴을 사용하여 라인을 따줍니다. ✔️ 최대한 한라인으로 그려 선이 복잡하지 않도록 유의합니다. ✔️ 스케치의 느낌이 나도록 얇게 그린 후 단축키 [Shift + W] 을 사용하여 두께를 조절해줍니다. # 채색하기 ✔️ 라인을 따놓은 상태에는 선이 닫혀있지 않고 다 열려있기 때문에 카피본을 만들어 놓고 선을 꺠주어야.. 2022. 8. 22. JAVASCRIPT | 문자열 메서드 | charAt( ) charAt( )에 대해 알아보자 ! String.prototype.charAt( ); charAt( ) 메서드는 문자열에서 특정 인덱스에 위치하는 문자를 반환합니다. construction(구문) str.charAt("index") index(순서) 0과 문자열의 길이 - 1 사이의 정수값이 올 수 있습니다. 인덱스 값을 쓰지 않는다면 기본값으로 0이 설정되고 첫 문자를 반환합니다. 만약 인덱스가 문자열 길이보다 큰 경우 빈 문자열 " " 을 반홥합니다. # 예제를 통해 익혀봅시다. const str1 = "javascript reference"; const currentstr1 = str1.charAt(); const currentstr2 = str1.charAt("0"); const currents.. 2022. 8. 22. JAVASCRIPT | 문자열 메서드 | match( ) match( )에 대해 알아보자 ! String.prototype.match( ); match( ) 메서드는 문자열이 정규식과 매치되는 부분을 검색합니다. construction(구문) str.match("searching"/regexp) searchString(찾을 문자열, 검색값) / regexp(정규식 표현) 문자열이 정규식과 일치한다면 일치하는 전체 문자열을 첫 번째 요소로 포함하는 "배열"을 반환합니다. 일치하는 것이 없으면 null이 반환됩니다. # 예제를 통해 익혀봅시다. const str1 = "javascript reference"; const currentstr1 = str1.match("javascript"); const currentstr2 = str1.match("reference.. 2022. 8. 22. JAVASCRIPT | 문자열 메서드 | search( ) search( )에 대해 알아보자 ! String.prototype.search( ); search( ) 메서드는 문자열(정규식)을 검색하고 위치값(숫자)를 반환합니다. construction(구문) str.search("searching"/regexp) searchString(찾을 문자열, 검색값) / regexp(정규식 표현) 정규표현식과 주어진 스트링간에 첫번째로 매치되는 것의 인덱스를 반환합니다. 찾지 못하면 -1 를 반환합니다. # 예제를 통해 익혀봅시다. const str1 = "javascript reference"; const currentstr1 = str1.search("javascript"); const currentstr2 = str1.search("reference"); const.. 2022. 8. 22. JAVASCRIPT | 함수(2) | 객체생성자, 프로토타입, 객체리터럴 함수(2) 저번 함수 게시글에 이어 이번에는 좀 더 활용하여 쓰이는 함수에 대해 알아보겠습니다. 지난번에 배운 내용에서 심화되는 부분이기 때문에 저번 게시글 한번씩만 다시 복습하고 오시면 PERFECT 👍 한번 더 짚고 가기 ! 함수란 실행문의 집합체이며, 재활용이 가능하다는 포인트 ✨ 13. 함수 유형 : 함수와 매개변수를 이용한 형태 함수는 여러 매개변수를 이용하여 표현이 가능합니다. 또한 재활용이 가능하기 때문에 또 쓰지 않고도 실행문만 추가하여 활용할 수 있습니다. function func(num, str1, str2){ document.write(num + ". " + str1 + "가 " + str2 + "되었습니다." + " "); } func("1", "함수", "실행"); // 위의 함수.. 2022. 8. 22. SITE | imageType #3 SITE를 만들어봅시다 ! 이미지 유형 세번째 방법 입니다. 구조가 바뀌면서 나중에 데이터를 불러오는 작업까지 생각하여 flex가 아닌 grid 방식으로 레이아웃을 구성하였습니다. 추가로 마우스 hover 효과를 넣어 아이콘이 뜨는 효과를 적용하였습니다. 1. CSS 살펴보기 + 웹 접근성을 위해 ir효과 추가 + 바뀐 구조에 맞춰 추가 + flex 구조가 아닌 grid 구조 적용 + 이미지 설명 부분 설정과 이미지 오버 효과 설정 + 이미지 오른쪽 상단 아이콘을 설정해줍니다. + 이미지 스프라이트(image sprite), background 설정 + hover : opacity 속성 + 이미지 오른쪽 하단 아이콘을 설정해줍니다. + 이미지 스프라이트(image sprite), background 설정.. 2022. 8. 20. CSS | 이미지 스프라이트(image sprite) / ir 효과와 background 표현까지 이미지 스프라이트(image sprite) / ir 효과 / background 표현 이미지 스프라이트(image sprite)와 ir 효과, background 표현까지 알아보도록 합시다. 🖼️ 이미지 스프라이트(image sprite) 이미지 스프라이트 기법이란 아래 사진처럼 여러 개의 이미지를 하나의 이미지로 만들어 놓는 것을 의미합니다. 1. How ? 이미지를 표현하는 방법에는 두가지 방법이 있습니다. 1) html : img 태그 사용 (의미있는 사진일 경우) 2) CSS : background 속성 사용 (장식용 사진일 경우) 이 중 이미지 스프라이트는 background 속성을 사용합니다. background: color/image/repeat/attachment/position/size;.. 2022. 8. 20. HTML | 블록 구조 / 인라인 구조 블록 구조 / 인라인 구조 HTML의 모든 요소는 display 속성을 통해 웹 사이트에서 어떤식으로 표현되는지 결정됩니다. 대표적으로 많이 쓰는 블록(block)과 인라인(inline) 구조에 대해 알아봅시다. 1. 블록(block) 구조 📌 한 라인에 하나씩 밖에 오지 못하기 때문에 가로로 배치되지 않습니다. 📌 쉽게 말해 하나의 박스(영역)이기 때문에 margin 값과 padding 값을 적용할 수 있습니다. 📌 블록 구조 내에 블록 구조와 인라인 구조 전부 포함이 가능합니다. div, p, h1 ~ h6, ul, li, ol, table, section, footer, ... 2. 인라인(inline) 구조 📌 쉽게 말해 하나의 텍스트로 글자처럼 옆으로 나열되며 가로로 배치가 됩니다. 📌 marg.. 2022. 8. 20. CSS | 움직이는 강아지 만들기 🐶 꼬까옷 입은 강아지 같이 만들어 보자 ! pug, scss, animation을 사용해서 움직이는 강아지를 만들어 봅시다. 아래 코드를 참고하셔서 각자 자신만의 강아지를 만들어 보세요 :) See the Pen CSS Dog by kkb75281 (@kkb75281) on CodePen. #1. HTML_pug 코드를 확인해보자 .dog .dog-body .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-torso .dog-head .dog-ears .dog-ear .dog-ear .dog-eyes .dog-eye .dog-eye .dog-muzzle .dog-tongue #2. CSS_scss 코드.. 2022. 8. 18. CSS | SCSS 🤔 SCSS, 그게 뭔데? CSS의 단점 | CSS 는 HTML 태그에 디자인을 넣어줄 때 사용합니다. 하지만 프로젝트 규모가 커지면 커질수록 가독성이 떨어진다거나 유지보수가 어려워지는 일이 발생하게 됩니다. 이러한 CSS의 단점을 보완하여 코드의 재활용성과 효율성을 높이기 위해 나온 개념이 SCSS라고 합니다. Variables(변수) 변수를 지정해놓고 사용하기 때문에 오차 범위를 줄여주며, 디자인 컨셉이 변경되거나 변경사항이 생겼을때도 유지보수가 간편합니다. $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } CSS 확인하기 body { font: 1.. 2022. 8. 18. JAVASCRIPT | 문자열 메서드 | includes( ) includes( )에 대해 알아보자 ! String.prototype.includes( ); 하나의 문자열이 다른 문자열에 포함되어 있는지 판별하고 불린값으로 반환시키는 메서드입니다. 있다면 true, 없다면 false로 반환시켜줍니다. construction(구문) "str".includes(searchString[, position]); searchString(찾을 문자열, 검색값) 현재 문자열에서 어떤 문자열을 찾을지 검색값을 정합니다. 대소문자를 구별합니다. position(찾기 시작할 위치, 위치값) 기본값; 0, 현재 문자열에서 어느 위치에서부터 찾을지를 정합니다. # 예제를 통해 익혀봅시다. const str1 = "javascript reference"; const currentStr1 .. 2022. 8. 17. JAVASCRIPT | 문자열 메서드 | padStart( ) / padEnd( ) padStart() / padEnd()에 대해 알아보자 ! String.prototype.padStart( ); 주어진 길이에 맞게 앞의 문자열을 채우고, 새로운 문자열을 반환해주는 메서드입니다. String.prototype.padEnd( ); 주어진 길이에 맞게 뒤의 문자열을 채우고, 새로운 문자열을 반환해주는 메서드입니다. construction(구문) "str".padStart(targetLength [,padString]); targetLength(문자열 길이 지정) 문자열의 길이를 지정해줍니다. 현재 길이보다 작다면 있는 그대로 반환시켜줍니다. padString(채워넣을 다른 문자열) 채워 넣는 문자열이 지정해준 문자열의 길이를 넘어서면 좌측부터 순서대로 넣고 뒷부분은 자릅니다. # 예제를 통.. 2022. 8. 17. JAVASCRIPT | 문자열 메서드 | repeat( ) repeat( )에 대해 알아보자 ! String.prototype.repeat( ); 문자열을 주어진 횟수만큼 반복하여 반환해주는 메서드입니다. construction(구문) "str".repeat(count); count(횟수) 문자열을 반복할 횟수를 입력하며, 0부터 양의 정수가 올 수 있습니다. (음의 정수:Error) # 예제를 통해 익혀봅시다. const str1 = "javascript"; const currentStr1 = str1.repeat(0); const currentStr2 = str1.repeat(1); const currentStr3 = str1.repeat(2); 결과보기 '' javascript javascriptjavascript 2022. 8. 17. JAVASCRIPT | 문자열 메서드 | concat( ) concat( )에 대해 알아보자 ! String.prototype.concat( ); 둘 이상의 문자열을 결합하여 새로운 문자열로 반환하는 메서드입니다. construction(구문) "str".concat(string2, string3[, ..., stringN]); string2, ..., stringN(결합할 문자열) 결합할 문자열 중에는 배열도 올 수 있습니다. # 예제를 통해 익혀봅시다. const str1 = "javascript"; const currentStr1 = str1.concat("reference"); const currentStr2 = str1.concat(" ", "reference"); const currentStr3 = str1.concat(",", "reference").. 2022. 8. 17. JAVASCRIPT | 문자열 메서드 | replace( ) / replaceAll( ) replace( ) / replaceAll( )에 대해 알아보자 ! String.prototype.replace( ); 어떤 패턴에 일치하는 일부 또는 전부를 새로운 문자열로 반환하는 메서드입니다. construction(구문) "str".replace(regexp | substr, newSubstr | function); regexp(정규식) | substr(문자열) 패턴이 오는 자리로 정규식이나 문자열이 올 수 있습니다. 모든 문자열에 대해 검색하고 바꾸기 위해 정규표현식의 g 플래그를 활용합니다. newSubstr(문자열) | function(함수) 대체되는 문자열이 오는 자리로 이를 만드는 함수가 올 수도 있습니다. # 예제를 통해 익혀봅시다. const str1 = "javascript refe.. 2022. 8. 17. JAVASCRIPT | 문자열 메서드 | split( ) split( )에 대해 알아보자 ! String.prototype.split( ); String 객체를 지정한 구분자를 이용해 여러 개의 문자열로 나누는 메서드입니다. construction(구문) "문자열".split( ); "문자열".split(separator); "문자열".split(separator, limit); separator(구분자) 문자열을 끊어야 할 부분을 나타내는 문자열로, 해당 부분은 삭제되고 남은 문자열이 배열로 변환됩니다. 문자열이나 정규표현식을 적을 수 있습니다. 두 글자 이상일 경우 문자열 전체가 일치해야 끊어집니다. 빈 문자열일 경우 str 각각의 문자가 배열의 원소 하나씩으로 변환됩니다. 구분자가 제일 처음이나 끝에 나올 경우 반환되는 배열도 빈 문자열로 시작하거나 끝납.. 2022. 8. 17. JAVASCRIPT | 문자열 메서드 | trim( ) / trimStart( ) / trimEnd( ) trim( ) / trimStart() / trimEnd()에 대해 알아보자 ! String.prototype.trim( ); 문자열 양 끝의 공백을 제거하는 메서드입니다. String.prototype.trimStart( ); 문자열 시작부분의 공백을 제거하는 메서드입니다. String.prototype.trimEnd( ); 문자열 끝부분의 공백을 제거하는 메서드입니다. * 공백; 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미 # 예제를 통해 익혀봅시다. str 문자열에 공백이 없어도 예외 없이 새 문자열이 반환됩니다. (본질적으로 str의 복사본) trimStart( ); 웹 호환성을 위해 trimLeft( ); 라는 별칭으로도 호출이 가능합니다. trim.. 2022. 8. 17. JAVASCRIPT | 문자열 메서드 | toUpperCase( ) / toLowerCase( ) toUpperCase( ) / toLowerCase( )에 대해 알아보자 ! toUpperCase( ); 문자열을 대문자로 변환해 반환하는 메서드입니다. toLowerCase( ); 문자열을 소문자로 변환해 반환하는 메서드입니다. # 예제를 통해 익혀봅시다. 여러 문자열을 합치기 위해 + 연산자와 ' '(띄어쓰기) 등을 활용하였습니다. const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); document.querySelector(".sample02_N1").innerHTML = "1"; document.querySelector(".sample02_Q1").innerHTML = "javascript"; document.querySelecto.. 2022. 8. 17. JAVASCRIPT | 문자열 문자열(String)에 대해 알아보자 ! 문자열 결합과 내장된 표현식을 허용하는 문자열 리터럴, 템플릿 문자열에 대해 알아봅시다. 01. 문자열(String) 결합 / 숫자(Numner) 결합 여러 문자열을 합치기 위해 + 연산자와 ' '(띄어쓰기) 등을 활용하였습니다. //01. const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리"; document.querySelector(".sample01_M1").innerHTML = "문자열(string) 결합"; docu.. 2022. 8. 17. 이전 1 2 3 4 5 6 다음
