분류 전체보기162 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 요소의 다음 요소들을 모두 선.. 2022. 8. 31. 사이트 만들기(텍스트 유형 - 03) 사이트 만들기(텍스트 유형 - 03) 텍스트 형식의 사이트를 만들어 봅시다✏️ CSS body { background-color: #EFFAFF; } /* textType03 */ .text__inner { display: flex; justify-content: space-between; } .text { width: 29%; height: 400px; padding: 20px; background-color: #fff; } .text .text__desc { line-height: 1.5; font-size: 18px; margin-bottom: 30px; } .text__main { border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; padd.. 2022. 8. 31. 사이트 만들기(텍스트 유형 - 02) 사이트 만들기(텍스트 유형 - 02) 텍스트 형식의 사이트를 만들어 봅시다✏️ CSS /* textType02 */ .text__inner { display: flex; } .text__header { width: 28%; padding-right: 40px; } .text__main { width: 68%; display: flex; flex-wrap: wrap; justify-content: space-between; } .text__main .text__box { width: 47%; margin-bottom: 50px; } .text__main .icon { width: 60px; height: 60px; border-radius: 50%; text-align: center; line-height.. 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)").. 2022. 8. 30. 사이트 만들기(텍스트 유형 - 01) 사이트 만들기(텍스트 유형 - 01) 텍스트 형식의 사이트를 만들어 봅시다✏️ CSS /* textType01 */ .text__inner { display: flex; flex-wrap: wrap; justify-content: space-between; } .text { padding: 20px; width: 29%; height: 260px; margin-bottom: 20px; transition: all 0.5s ease; } .text:hover { background-color: #f5f5f5; } .text .icon { width: 60px; height: 60px; border-radius: 50%; margin-bottom: 10px; text-align: center; line-he.. 2022. 8. 30. jQuery - 속성 선택자 jQuery 속성 선택자 제이쿼리는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 속성 선택자 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc'앞뒤로 연결된 문자가 없어야 합나디. 'bg ab.. 2022. 8. 30. jQuery - 기본 선택자 jQuery 선택자 제이쿼리는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. jQuery 선택자 형식 $("선택자") $("#gnb") 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를 선택합니다. 형제 선택자 $("#.. 2022. 8. 30. GSAP GSAP GSAP는 자바스크립트의 애니메이션 라이브러리 입니다. 보다 쉽고, 부드러운 애니메이션 효과를 가지고 있으며 자바스크립트를 쉽게 사용할 수 있습니다. 일반적으로 애니메이션을 구현하려면 CSS를 이용하거나 제이쿼리를 사용하는데, GSAP를 이용하면 복잡한 애니메이션의 표현도 쉽게 할 수 있습니다. See the Pen Infinite scrolling, dragging, and snapping cards with GSAP and ScrollTrigger (smooth) by GreenSock (@GreenSock) on CodePen. link CDN(데이터를 분산된 서버에서 받아오는 것)을 통해 GSAP를 사용할 수 있습니다. 홈페이지 가기 javascript 먼저 자바스크립트로 애니메이션을 설.. 2022. 8. 29. jQuery jQuery 제이쿼리는 자바스크립트 언어를 간편하게 사용 할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리 입니다. 애니메이션과 이벤트 처리를 쉽게 할 수 있으며, 다양한 플러그인이 존재하며 다른 라이브러리와 충돌을 일으키지 않습니다. 제이쿼리를 사용하기 위해서는 두가지 방식이 있는데 첫번째는 CDN을 이용한 방식이고, 두번째는 직접 다운로드 하는 방식입니다. See the Pen Simple jQuery Accordian by CSS-Tricks Team (@css-tricks) on CodePen. Internet Explorer 9 이상 Opera 현재 버전 Android 4.0 이상 Chroma, Edge, Firefox, Safari 현재 버전, 바로 이전 버전 Safari Mo.. 2022. 8. 29. 빙글빙글 도는 원 애니메이션 빙글빙글 돌아가는 원 빙글빙글 돌아가는 두개의 원 애니메이션을 만들어 보아요🪄 HTML 두개의 원을 만들고, 그위에 부모 박스를 만듭니다. CSS body { height: 100vh; background-image: linear-gradient(-60deg, #FF85B3 0% , #9900F0 100%) } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 0.9s ease 1000; } .loading .circle1 { display: block; width: 20px; height: 20px; border-radius: 50%; background: #00FFC6; } .. 2022. 8. 29. 통통튀는 네모 애니메이션 통통튀는 네모박스 통통튀는 애니메이션 효과가 들어간 박스를 만들어 보아요✏️ HTML 박스 한개를 만듭니다 CSS body { height: 100vh; background-image: linear-gradient(to top, #B2A4FF, #FFB4B4); } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .box::before { content: ''; width: 50px; height: 5px; background: #000; position: absolute; top: 58px; left: 0; border-radius: 50%; opacity: .. 2022. 8. 29. SliderEffect - 02 스크립트를 이용한 슬라이드 효과 만들기 02 이미지가 좌로 움직이는 이미지 효과를 만들 수 있습니다. 또한 JS, GSAP, jQuery를 사용하여 이미지에 애니메이션을 줄 수 있습니다. 원본 소스 보기 JavaScript const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //보여지는 영역 const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역 const slider = document.querySelectorAll(".slider"); //이미지 let currentInd.. 2022. 8. 29. SliderEffect - 01 스크립트를 이용한 슬라이드 효과 만들기 01 스크립트를 이용하여 이미지가 슬라이드 되는 효과를 만들 수 있습니다. 원본 소스 보기 Script const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); const slider = sliderWrap.querySelectorAll(".slider"); let currentIndex = 0; //현재 보이는 이미지 let sliderCount = slider.length //이미지 갯수 setInterval(() => { let nextIndex = (currentIndex + 1) % sliderCoun.. 2022. 8. 29. CSS 요소 숨기기 CSS 요소 숨기기 CSS를 통하여 요소를 숨길 수 있습니다. 숨기는 방법은 다양하지만, 각각의 방법마다 접근성, 레이아웃, 애니메이션, 성능 및 영향이 다르게 적용됩니다. display display: none; display: none; 방식은 가장 많이 사용되는 요소 숨기기 방법입니다. 눈에 보이지 않으며 영역도 차지 하지 않습니다. 이 속성은 애니메이션을 적용할 수 없으며, 페이지 레이아웃을 트리거 합니다. opacity opacity: 0; opacity는 0에서1 사이의 숫자나 0 ~ 100% 사이의 백분율로 표시 할 수 있습니다. opacity는 불투명도를 주는 것이기에 애니메이션을 적용 할 수 있으며, 영역도 그대로 존재하게 됩니다. 0은 완전 투명을 뜻하며, 1은 완전 불투명을 뜻합니다... 2022. 8. 25. Illustrator - 사슴 그리기 일러스트레이터로 사슴을 그려 보았습니다. 팬툴을 이용해서 깔끔한 선의 사슴 그림을 그릴 수 있습니다. 목업 +보너스 고양이 그려 왔습니다 2022. 8. 24. QuizEffect - 06 스크립트를 이용한 퀴즈 만들기 06(객관식 - 여러문제) : 슬라이드 형식 스크립트를 통해서 슬라이드 형식의 문제를 만들 수 있습니다. 원본 소스 보기 사이트보기 선택자 각요소의 선택자를 먼저 선언해 줍니다✏️ 결과보기 const quizQuestion = document.querySelector(".quiz__question"); //문제 번호, 질문 const quizSelects = document.querySelector(".quiz__selects"); //객관식 보기 const quizType = document.querySelector(".quiz__type"); //퀴즈 타입 const quizResult = document.querySelector(".quiz__answer .result.. 2022. 8. 24. 색상 표현 방법 CSS 색상표현방법 CSS의 색상은 글자색(color) 뿐 아니라 배경색(background), 테두리(border)등 다양한 CSS속성들이 적용됩니다. 이때, 색상을 표현하는 것에는 다양한 방법이 존재합니다. 색상명 해당 색상을 의미하는 고유명사를 속성값으로 사용합니다. 사용할 수 있는 속성값으로는 red, green, blue, aqua, corel, ... 등 여러 가지가 있으나 해당 색상값을 의미하는 단어를 미리 알고 있어야 합니다. 속성 값 속성 설명 color: orange; 글자를 오렌지색으로 표현합니다. background: beige; 배경을 베이지색으로 표현합니다. border-color: tomato; 테두리를 토마토색으로 변경합니다. 픽셀(px)은 해상도에 따라 상대적으로 달라지는 .. 2022. 8. 24. CSS 단위 CSS 단위 CSS에는 다양한 형태의 단위가 있으며, 이것을 상황에 맞게 효율적으로 사용하는 것이 좋습니다. font-size 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. px font-size: 12px; 픽셀(px)은 해상도에 따라 상대적으로 달라지는 기본 단위 입니다. % font-size: 150%; 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위 입니다. 특별한 설정이 없다면 16px가 100%입니다. em font-size: 1.5em; 부모 요소의 글자 크기를 100% 기준으로 계산한 100 분의1 단위 입니다. 특별한 설정이 없다면 16px이 1em 입니다. rem font-size: 1.5rem; rem은 em과 비슷하지만 .. 2022. 8. 24. Illustrator - 토끼 그리기 일러스트레이터로 토끼 그리기 일러스트레이터로 벡터방식의 이미지를 만들 수 있습니다. 2022. 8. 22. SearchEffect03 스크립트를 이용한 서치효과 만들기 03 스크립트를 이용하여 HTML 태그를 검색하는 효과를 만들 수 있습니다. 원본 소스 보기 Script const searchKeyword = document.querySelectorAll(".search__info .keyword span"); //알파벳 const searchList = document.querySelectorAll(".search__list ul li") //목록 리스트 const searchInfo = document.querySelector(".search__info .num") //속성 갯수 설정하기 searchInfo.textContent = searchList.length; searchKeyword.forEach(el => { el.add.. 2022. 8. 22. 함수의 유형 함수의 유형 함수(function)란 첫 번째 집합의 한 원소가 두 번째 집합의 오직 한 원소에만 대응하는 관계를 의미합니다. 함수에는 다양한 유형이 있습니다. 01. 함수 유형 : 함수와 매개변수를 이용한 형태 function func(num, str1, str2){ document.write(num + ". " + str1 + "가 "+ str2 +"되었습니다."); } func("1","함수", "실행"); func("2","자바스크립트", "실행"); func("3","제이쿼리", "실행"); //재활용 가능 결과보기 1. 함수가 실행되었습니다.2. 자바스크립트가 실행되었습니다.3. 제이쿼리가 실행되었습니다. 02. 함수 유형 : 함수와 변수를 이용한 형태 function func(num, str.. 2022. 8. 22. charAt( ) charAt()() charAt() 메서드는 위치값을 검색하고 문자로 반환 합니다. match() "문자열".charAt(숫자); const str1 = "javascript reference"; const currentStr1 = str1.charAt(); //j const currentStr2 = str1.charAt("0"); //j const currentStr3 = str1.charAt("1"); //a const currentStr4 = str1.charAt("2"); //v 2022. 8. 22. match( ) match() match() 메서드는 문자열을 검색하고 검색값을 배열로 반환합니다. match() "문자열".match("검색값"); "문자열".match(정규식표현); const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); //javascript const currentStr2 = str1.match("reference"); //reference const currentStr3 = str1.match("r"); //r const currentStr4 = str1.match(/reference/); //reference const currentStr5 = str1.match(/Reference/); //null .. 2022. 8. 22. search( ) search() search() 메서드는 문자열(정규식 포함)을 검색하고, 위치값을 숫자로 반환합니다. search() "문자열".search("검색값"); "문자열".search(정규식표현); const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); //0 const currentStr2 = str1.search("reference"); //11 const currentStr3 = str1.search("j"); //0 const currentStr4 = str1.search("a"); //1 const currentStr5 = str1.search("v"); //2 const currentStr6 = str1.. 2022. 8. 22. 사이트 만들기 (이미지 유형 - 03) 사이트 만들기(이미지 유형 - 03) 큰이지 하나와 작은 이미지 여러개가 함께있는 사이트 유형을 만들 수 있습니다. CSS /* imageType */ .image__inner { display: grid; grid-template-areas: "box1 box1 box2 box3" "box1 box1 box4 box5"; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 20px; } .image { overflow: hidden; position: relative; transition: all 0.5s ease-in-out; } .image__inner .image:nth-child(1){ grid-area: .. 2022. 8. 20. 이미지 스프라이트 / IR효과 / 백그라운드 표현 이미지 스프라이트 / IR효과 / 백그라운드 표현 이번 시간에는 CSS에서 사용되는 이미지 스프라이트와 IR효과 ,백그라운드 표현에 대해 알아봅시다. 이미지 스프라이트란? 이미지 스프라이트(image sprite)는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 말합니다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해서 웹 브라우저에는 서버에 이미지를 요청하게 되는데 이때, 이미지가 많을 경우에는 웹 브라우저는 서버에 해당 이미지 많큼 요청하게 되므로 페이지에 로딩 시간이 오래 걸리게 됩니다. 이때 이미지 스프라이트를 사용하면 이미지를 다운받기 위한 서버 요청을 최소한으로 줄이 수 있습니다. 이미지를 50px 간격에 맞춰 하나의 셀에 넣습니다. 이미지의 배경을 제거 한 상태.. 2022. 8. 20. 블록 구조 / 인라인 구조 블록 구조와 인라인 구조 HTML의 구조는 블록 구조와 인라인 구조로 분류 되어 있습니다. 블록 구조 블록 구조는 줄 바꿈이 일어나는 형태로 영역의 넓이가 상위 영역의 전체만큼 만들어 지는 형태 입니다. 블록요소는 몇몇을 제외한 블록 요소를 포함하고, 인라인 요소까지 포함합니다. p { display: block; } , , , , , , , 태그 등이 주된 블록 구조 입니다. 인라인 구조 인라인 구조는 글자와 같이 옆으로 나열되는 형태로 줄 바꿈이 일어나지 않는 요소입니다. 인라인 구조는 안에 있는 글자와 같은 내용 길이에 맞게 크기를 차지 하는 성질이 있습니다. span { display: inline; } , , , 등이 대표적인 인라인 구조를 가지는 태그입니다. 인라인 태그는 같은 인라인 요소를 .. 2022. 8. 20. 강아지 애니메이션 만들기 SCSS SCSS는 CSS를 보다 쉽게 사용하기 위해서 만들어진 기능 입니다. SCSS는 중괄호{}와 세미콜론(;)의 형식으로 작성 됩니다. SCSS코드를 이용해 애니메이션 만들기 SCSS와 Pug를 이용하여 강아지 애니메이션을 만들어 보겠습니다🐶 SCSS 코드 보기 코드 보기 $dog-width: 100px; $interval: 200ms; $color-gray: #eaebec; $easing: ease-in-out; body { display: flex; flex-direction: column; justify-content: center; align-items: center; } html, body { background: #FFB47E; width: 100%; height: 100%; margin.. 2022. 8. 18. SCSS SCSS SCSS는 CSS를 보다 쉽게 사용하기 위해서 만들어진 기능 입니다. SCSS는 중괄호{}와 세미콜론(;)의 형식으로 작성 됩니다. CSS와 SCSS CSS와 SCSS의 차이점을 예제를 통해서 알아 봅시다. CSS .dog { width: 100px; height: 100px; z-index: 1; } .dog:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: rgba(0, 0, 0, 0.03); transform: translatey(-30%) scale(1.5); } SCSS //dog .dog { width: $dog-width; h.. 2022. 8. 18. toUpperCase( ) / toLowerCase( ) / trim( ) toUpperCase() / toLowerCase() / trim() toUpperCase() : 문자열을 대문자로 변경하고, toLowerCase() : 문자열을 소문자로 변경하는 메서드 입니다. trim() : 문자열의 앞뒤 공백을 제거 하는 메서드 입니다. toUpperCase() 문자열을 대문자로 변경합니다. 번호 기본값 메서드 리턴값 const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); document.querySelector(".sample02_N1").innerHTML = "1"; document.querySelector(".sample02_Q1").innerHTML = "javascript"; document.querySel.. 2022. 8. 17. 이전 1 2 3 4 5 6 다음
