카테고리170 [jQuery]속성 관련 메서드 jQuery 속성 관련 메서드 jQuery 속성 관련 메서드에 대해 알아보겠습니다. 01. 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(속.. 2022. 9. 2. [jQuery]클래스 관련 메서드 jQuery 클래스 관련 메서드 jQuery 클래스 관련 메서드에 대해 알아보겠습니다. 01. 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 jqueryCMethod by Kim-chanmi (@kim-chanmi) on CodePen. 02. removeClass() 메서드 요소에 .. 2022. 9. 2. [CSS]애니메이션03 애니메이션03 오늘은 아래와 같이 공이 튀는 애니메이션을 만들어 보았습니다. See the Pen animation03 by Kim-chanmi (@kim-chanmi) on CodePen. HTML CSS * { box-sizing: border-box } body { background: linear-gradient(to left, #4568DC 0%, #B06AB3 100%); width: 100vw; height:100vh; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; } .wrapper { position: absolute; animation: x 1s ease-in-out alternate.. 2022. 9. 2. SLIDER Effect 03 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 다섯 장의 이미지를 3초에 한 장씩 넘어가는 효과를 만들어 보았습니다. 이미지가 오른쪽에서 왼쪽으로 움직이는 것처럼 넘어가는 방식입니다. 사이트의 우측 하단에 소스 보기를 누르면 html, css, javascript 소스를 모두 확인할 수 있습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 방식 슬라이드 효과를 위한 자바스크립트 작성법입니다. 슬라이드 효과를 위해 setTimeout 함수를 사용합니다. setTimeout 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document... 2022. 9. 2. [웹 사이트 제작]이미지/텍스트 유형 01 이미지/텍스트유형01 오늘은 사이트만들기에서 이미지/텍스트 유형을 제작해 보겠습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 3. CSS Figma를 이용해 만든 디자인을 보며 css설정을 합니다. .imgText__inner { display: flex; justify-content: space-between; } .i.. 2022. 9. 1. [웹 사이트 제작]헤더유형 01 헤더유형01 오늘은 사이트만들기에서 헤더유형을 제작해 보겠습니다. 단순하기 때문에 간단하게 만들 수 있습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. Web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 3. CSS Figma를 이용해 만든 디자인을 보며 css설정을 합니다. display: flex;와 justify-content: space-between;를 사용하여 정렬을 맞춰줍니다. /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .Nexo.. 2022. 9. 1. [javascript]요소 : 크기 및 위치 위치 및 크기를 표현하는 속성 메서드 width:400px margin:20px border:1px pading:20px 여기에 결과값이 표시됩니다. 박스의 가로값(clientWidth)을 구합니다. 박스의 높이값(clientHeight)을 구합니다. 박스의 Y축값(부모기준)(clientTop)을 구합니다. 박스의 X축값(부모기준)(clientLeft)을 구합니다. 박스의 가로값(offsetWidth)을 구합니다. 박스의 세로값(offsetHeight)을 구합니다. 박스의 Y축값(offsetTop)을 구합니다. 박스의 X축값(offsetLeft)을 구합니다. 박스의 (getBoundingClientRect())을 구합니다. const box1 = document.querySelector("#sample0.. 2022. 9. 1. [웹 사이트 제작]텍스트유형 03 텍스트유형03 오늘은 사이트의 텍스트유형 세 번째를 만들어 보았습니다. 큰 제목과 설명이 있고 세 구역으로 나누어진 유형입니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. 아이콘들은 img 태그를 사용하여 넣어주었습니다. 필라테스 후기 재활필라테스 수강생들의 후기를 소개합니다. 계속 진행하지 못해서 아쉬울 정도로 만족스러운 수업이었어요! 제 몸 상태랑 컨디션에 맞게 체계적으로 수업 해주시고, 자세도 꼼꼼하게 봐주셔서 운동하는데 도움 이 많이 되었습니다. 허리 통증이 있었는데, 많이 좋아지고 운동 끝나고 집에 가는길에 몸이 가벼워서 항상 기분좋게 돌.. 2022. 8. 31. [웹 사이트 제작]텍스트유형 02 텍스트유형02 오늘은 사이트의 텍스트유형 두 번째를 만들어 보았습니다. 제목이 왼쪽에 있는 유형입니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. section태그는 보통 제목태그를 포함합니다. 내용을 한꺼번에 넣는 것이 아니라, 하나씩 확인하면서 진행하면 실수와 시간을 줄일 수 있습니다. CANADA 캐나다(CA) 여행소개 캐나다로 여행하는 사람들을 위한 여행소개입니다. 즐거운 여행 되세요 ! 밴쿠버 캐나다의 서부에 위치한 밴쿠버입니다. 밴쿠버는 2010년 동계올림픽이 개최된 곳입니다. 살기 좋은 도시 순위에서 매년 5위 안에 손꼽히는 인기 지역.. 2022. 8. 31. [jQuery]탐색 선택자 탐색 선택자 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 더 정확하게 선택할 수 있습니다. 01. 기본 탐색 선택자 종류 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closet("div") p 요소의 부모가 되는 첫 번째 div 요소를 찾습니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.. 2022. 8. 30. [jQuery]필터 선택자 필터 선택자 선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다. 01. 필터 선택자 종류 선택자 종류 설명 :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. [jQuery]속성 선택자 속성 선택자 속성 선택자는 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 선택자입니다. 01. 속성 선택자 종류 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'b.. 2022. 8. 30. [jQuery]기본 선택자 jQuery 선택자 jQuery 선택자는 CSS 선택자와 의미가 같은 것이 많습니다. jQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 01. jQuery 선택자 형식 $("선택자") $("#gnb") 02. 기본 선택자 종류 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + #conten.. 2022. 8. 30. [웹 사이트 제작]텍스트유형 01 텍스트유형01 오늘은 사이트의 텍스트유형을 만들어 보았습니다. 1. Figma로 디자인하기 Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다. 마우스오버 했을 때 배경색을 바꿔주기 위해 한 영역에만 배경색을 주었습니다. 2. HTML 웹표준 준수를 위해 시맨틱 태그를 사용합니다. section태그는 보통 제목태그를 포함합니다. 내용을 한꺼번에 넣는 것이 아니라, 하나씩 확인하면서 진행하면 실수와 시간을 줄일 수 있습니다. 텍스트 유형01 반려견 기르기 반려견 산책 반려견 산책을 위한 설명입니다. 반려견 산책 시 주의할 점과 준비물의 소개가 있습니다. 산책하기 좋은 장소도 소개되어 있습니다. 더보기 반려견 간식 반려견 간식을 위한 설명입니다. 반.. 2022. 8. 30. [jQuery]소개 jQuery란? jQuery란 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다. 또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있습니다. 01. jQuery 장점 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됩니다. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있습니다. 애니메이션 효과나 대화형 처리를 간단하게 적용해 줍니다. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있습니다. 다양한 플러그인과 참고할 수 있는 문서가 많이 존재합니다. 오픈 라.. 2022. 8. 29. [javascript]GSAP GSAP란? GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. css로 애니메이션 효과를 줄 수 있지만 그 이상의 복잡한 애니메이션을 구현할 수 있습니다. 01. 설치 공식 사이트에서 받거나 CDN, 혹은 npm install gsap로 설치할 수 있습니다. CDN이란 Contents Delivery Network의 약자로, 데이터를 분산된 서버에서 받아오는 것을 말합니다. GSAP이나 jQuery의 라이브러리를 호스팅된 서버에 직접 설치해서 사용할 수도 있지만, CDN을 사용하면 클라이언트가 직접 자신의 위치로 라이브러리를 전송받게 됩니다. 02. gsap.to() gsap.to에는 2가지 필수값이 필요합니다. 대상과 속성입니다. 03. gsap.play(), .pause(.. 2022. 8. 29. [CSS]애니메이션02 애니메이션01 오늘은 아래와 같이 두 원이 돌아가는 애니메이션을 만들어 보았습니다. See the Pen animation02 by Kim-chanmi (@kim-chanmi) on CodePen. HTML CSS body { height: 100vh; background-image: linear-gradient(-60deg, #DBE6F6 0%, #C5796D 100%) } /* 위/아래 원 사이 */ .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease 100; } /* 위에 있는 원 */ .loading .circle1 { display: block; width:.. 2022. 8. 29. [CSS]애니메이션01 애니메이션01 오늘은 아래와 같은 바닥에 튕기면서 구르는 네모 박스 애니메이션을 만들어 보았습니다. See the Pen animation01 by Kim-chanmi (@kim-chanmi) on CodePen. HTML CSS body { height: 100vh; background-image: linear-gradient(to top, #2C3E50, #FD746C); /* to top: 아래에서 위로 향하는 */ } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } /* shadow 효과 */ .box::before { content: ''; width:.. 2022. 8. 29. SLIDER Effect 02 슬라이드 이펙트 - 좌로 움직이기 다섯 장의 이미지를 3초에 한 장씩 넘어가는 효과를 만들어 보았습니다. 이미지가 오른쪽에서 왼쪽으로 움직이는 것처럼 넘어가는 방식입니다. 사이트의 우측 하단에 소스 보기를 누르면 html, css, javascript 소스를 모두 확인할 수 있습니다. 이번 슬라이드 이펙트는 javascript, GSAP, jQuery방식을 모두 소개하겠습니다. 원본 소스 보기 원본 사이트 보기 01. 자바스크립트 방식 슬라이드 효과를 위한 자바스크립트 작성법입니다. 슬라이드 효과를 위해 setInterval 함수를 사용합니다. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.que.. 2022. 8. 29. SLIDER Effect 01 슬라이드 이펙트 - 트랜지션 효과 다섯 장의 이미지를 3초에 한 장씩 넘어가는 효과를 만들어 보았습니다. 마지막 다섯 번째 이미지가 되었을 때 멈추는 것이 아니라 첫 번째 이미지로 넘어갑니다. 사이트의 우측 하단에 소스 보기를 누르면 html, css, javascript 소스를 모두 확인할 수 있습니다. 여기서는 javascript에 대해 자세히 알아보겠습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 슬라이드 효과를 위한 자바스크립트 작성법입니다. 슬라이드 효과를 위해 setInterval 함수를 사용합니다. setInterval은 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용합니다. 첫 번째 이미지를 안보이게 하고 두 번째 이미지를 보이게 하기 위해 opacity 속성을 사용합니다... 2022. 8. 29. [CSS]요소 숨기기 CSS 요소 숨기기 CSS 설정으로 요소들을 숨길 수 있습니다. 오늘은 요소 숨기는 방법 다섯 가지에 대해 알아보겠습니다. 01. display : none; 화면상에서 해당 콘텐츠가 안 보이게 되면서 해당 콘텐츠가 가지고 있던 영역 또한 사라지게 됩니다. 애니메이션도 불가하며, 스크린리더기에서 내용을 읽지 못합니다. .box { display: none; } 02. opacity : 0; 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다. 애니메이션 작동 가능하며, 영역도 남아있습니다. 스크린리더기에서 내용을 읽을 수 있습니다. .box { opacity : 0; } 03. visibility : hidden; 문서의 레이아웃을 변경하지 않고 요소를 숨깁.. 2022. 8. 25. QUIZ Effect 06 퀴즈 효과06 웹디자인기능사 필기 기출문제를 이용한 객관식(여러 문제) 슬라이드 형식입니다. 한 문제씩 출력되며, 정답확인하기 버튼을 누르면 정답과 해설을 확인하고, 다음 문제로 넘어갈 수 있습니다. 원본 소스 보기 원본 사이트 보기 01. 문제 정보 문제 정보를 배열속의 객체로 저장하였고, 보기는 객체가 아닌 배열에 저장하였습니다. 코드 보기 const quizInfo = [ { answerType: "웹디자인기능사 2010년 04회", answerNum: "1", answerAsk: "색의 수축, 팽창의 효과에 가장 큰 영향을 주는 요소는?", answerChoice: [ "색약", "명도", "잔상", "중량" ], answerResult: "명도", answerEx: "색의 수축, 팽창의 효과에 .. 2022. 8. 24. [Illustrator]사슴 그리기 일러스트레이터 : 사슴그리기 일러스트레이터를 이용하여 열심히 사슴을 그리고 색칠하였습니다. 먼저 펜 툴을 이용하여 스케치를 하였고, Object에서 Live Paint 설정 후 채색을 하였습니다. 다음은 저의 진행 과정들입니다. 마지막으로는 mockup 작업까지 해주었습니다. 2022. 8. 24. [CSS]색상 표현 방법 CSS 색상 표현 방법 CSS의 색상은 글자색(color) 뿐 아니라 배경색(background), 테두리색(border) 등 다양한 CSS 속성들에 적용됩니다. 색상을 표현하는 방법에 대해 어떤 것들이 있는지 알아보겠습니다. 01. 색상명 해당 색상을 의미하는 고유명사를 속성값으로 사용합니다. 사용할 수 있는 속성값으로는 red, green, blue, aqua, corel, 등 여러 가지가 있으나 해당 색상값을 의미하는 단어를 미리 알고 있어야 합니다. http://www.w3schools.com에 접속하여 Learn CSS > Color Colors를 클릭하면 등록된 색상명을 확인할 수 있습니다. 속성 값 속성 설명 color: orange; 글자를 오렌지색으로 표현 background: beige.. 2022. 8. 23. [CSS]단위 CSS 단위 CSS에서는 다양한 단위들이 사용됩니다. 오늘은 CSS에서 쓰이는 단위들을 알아보겠습니다. 01. px 해상도에 따라 달라지는 기본 단위로서 다음과 같이 표현합니다. font-size: 12px; 02. % 부모 요소의 글자 크기를 100% 기준으로 계산한 %단위로 다음과 같이 표현합니다. font-size: 150%; 특별한 설정이 없다면 기본값인 16px이 100%가 되므로 150%는 24px이 됩니다. 만약 부모 요소가 10px이었다면 150%는 15px이 될 것입니다. 03. em 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위로 다음과 같이 표현합니다. font-size: 1.5em; 특별한 설정이 없다면 기본값인 16px이 1em이 되므로, 1.5em은 24p.. 2022. 8. 23. [Illustrator]토끼 그리기 2022. 8. 22. SEARCH Effect 03 검색 효과03 자바스크립트를 이용하여 검색효과 만들 수 있습니다. 사용자가 입력한 키워드를 정확하게 찾을 수 있습니다. charAt()메서드를 이용하여 CSS 속성 검색하기를 만들어 보았습니다. 이번에는 알파벳을 클릭했을 때 알파벳에 해당하는 요소들만 검색되게 하는 기능을 추가하였습니다. 원본 소스 보기 자바스크립트 검색효과를 만들기 위한 자바스크립트 작성법입니다. 여기서는 charAt()메서드를 이용하여 출력하였습니다. charAt() 메서드는 지정한 인덱스의 문자를 추출하여 문자열을 반환합니다. 따라서, charAt() 메서드의 특성을 사용하여 자바스크립트를 작성하였습니다. //선택자 const searchKeyword = document.querySelectorAll(".search__info .k.. 2022. 8. 22. [javascript]charAt() / charCodeAt() charAt() / charCodeAt() charAt() 메서드는 지정한 인덱스의 문자를 추출하여 문자열을 반환합니다. charCodeAt() 메서드는 지정한 숫자의 유니코드 값을 반환합니다. "문자열".charAt(숫자); "문자열".charCodeAt(숫자); const str1 = "javascript reference"; const currentStr1 = str1.charAt(); const currentStr2 = str1.charAt("0"); const currentStr3 = str1.charAt("1"); const currentStr4 = str1.charAt("2"); const currentStr5 = str1.charCodeAt(); const currentStr6 = str1.. 2022. 8. 22. [javascript]match() match() match() 메서드는 문자열을 검색하고 배열을 반환합니다. const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); const currentStr2 = str1.match("reference"); const currentStr3 = str1.match("r"); const currentStr4 = str1.match(/reference/); const currentStr5 = str1.match(/Reference/); const currentStr6 = str1.match(/Reference/i); //대소문자 구별x const currentStr7 = str1.match(/r/g); const .. 2022. 8. 22. [javascript]search() search() search() 메서드는 문자열(정규식)을 검색하고 위치값(숫자)를 반환합니다. indexOf()메서드와 비슷하지만 search()메서드는 정규식표현을 포함하는 것이 큰 특징입니다. "문자열".search("검색값"); "문자열".search(정규식 표현); const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); const currentStr2 = str1.search("reference"); const currentStr3 = str1.search("j"); const currentStr4 = str1.search("a"); const currentStr5 = str1.search("v"); .. 2022. 8. 22. 이전 1 2 3 4 5 6 다음 728x90
