본문 바로가기

자바스크립트58

[Game Effect] 게임 이펙트 01 - 뮤직 플레이어 게임 이펙트 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 게임 이펙트를 만들어보도록 하겠습니다. 컴퓨터 바탕화면과 작동되는 뮤직 플레이어를 만들어보도록 하겠습니다. HTML 소스 보기 HTML 구성은 헤더(제목, 시간)와 메인(바탕화면 아이콘), 푸터(agent, 소스 보기), 뮤직 플레이어로 구성된다. Coding Note's Game World 디스크 뮤직 듣기 샵 폴더 동영상 파일 FIGMA agent 소스 보기 *** MUSIC PLAYER *** Kazoom - Quincas Moreira YouTube Music 0:00 4:00 뮤직 리스트 JavaScript 소스 보기 : 헤더(상단바)에 시간 표시하기 시간, 날짜를 저장할 상수와 시, 분, 초를 저장할 변수를 생성한 .. 2022. 10. 21.

[Search Effect] 검색 이펙트 07 검색 이펙트 만들기 07 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 2분 동안 CSS 속성명을 입력하면 점수가 올라가는 형태의 미니 게임을 만들어 보겠습니다. 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 07의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. 코드 펼쳐보기 Search 01 02 03 04 05 06 07 CSS 속성 검색 이벤트 2분동안 CSS 속성 검색 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 기억이 나지 않으면, 힌트 보기를 한 번 이용할 수 있습니다. 2:00 검색하기 버튼을 누르면 게임이 시작됩니다. 전체 속성 개.. 2022. 10. 21.

[Search Effect] 검색 이펙트 06 검색 이펙트 만들기 06 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 그동안 배웠던 CSS 속성들을 검색창 형식으로 원하는 결과가 나오도록 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠! 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 06의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. Search 01 02 03 04 05 06 sort(), reverse()를 이용하여 정렬하기 CSS 속성 정렬하기 반대로 정렬 내림차순 정렬 오름차순 정렬 알파벳순(a~z) 알파벳순(z~a) 랜덤 정렬 전체 속성 개.. 2022. 10. 21.

[Slide Effect] 슬라이드 이펙트 05 - 이미지 슬라이드(버튼, 닷메뉴) 슬라이드 이펙트 05 : 이미지 슬라이드(버튼, 닷메뉴) 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 지난번 슬라이드04에서 넣었던 연속적으로 좌우로 움직일 수 있게 하는 버튼에서 닷메뉴(Dot Menu)를 추가시켜 보도록 하겠습니다. HTML 소스 slider__wrap > slider__img > slider__inner 안에 이미지 5장이 들어간 구조이며, 그 아래의 slider__btn div태그 안에 이미지를 좌우로 슬라이드 할 수 있는 버튼을 만들어두었다. 마지막 slider__dot의 경우 안의 a 태그들을 JS로 출력시키기 위해 주석 처리한다. JAVASCRIPT SLIDER EFFECT 05 슬라이드 이펙트 ⑤ - 이미지 슬라이드.. 2022. 10. 14.

[CSS] 마우스를 따라가는 눈알 효과 만들기👀 마우스를 따라가는 눈알 효과 만들기👀 이번 포스팅에서는 마우스 커서 위치를 따라가는 눈알 효과를 만들어보도록 하겠습니다. HTML 코드 wrapper 클래스값을 가진 div 안에 card 클래스값 div를 만든 후, 그 card div 안에는 me와 text 클래스값을 가진 div를 생성합니다. text div 안에는 넣고 싶은 짧은 문구를 넣습니다. me 안에는 eye 클래스값 div를 넣습니다. HELLO CSS 코드 HTML에서 만들어두었던 div의 클래스값들을 이곳에 정의하여 디자인합니다. .me::before, .me::after에서 background url 방식으로 얼굴을 출력시키고, .eye, .eye::before에서는 움직여줄 눈알을 출력시켜주도록 합니다. 코드 펼쳐보기 * { marg.. 2022. 9. 26.

[Mouse Effect] 마우스 이펙트 04 - 이미지 효과 마우스 이펙트 04 : 이미지 효과 이번 시간에는 GSAP를 이용하여 이미지 영역 내부에서만 마우스 커서가 바뀌고 마우스 위치에 따라 사진도 같이 미세하게 움직이는 효과를 만들어보도록 하겠습니다. HTML 소스 header, main(마우스 커서 & 이미지 & 명언 & 마우스 인포(좌표값)), footer(모달 박스) 크게 3가지로 이루어져 있다. footer의 모달 박스 내용은 너무 길어지므로 생략한다. 모달 박스를 나타내는 방법에 대해서는 이전에 업로드한 슬라이드 이펙트 게시물을 참조할 것. JAVASCRIPT MOUSE EFFECT 04 마우스 이펙트 - 이미지 효과 01 02 03 04 05 06 07 &lt/div> I never dreamed about success, I worked for .. 2022. 9. 22.

[Mouse Effect] 마우스 이펙트 03 - 조명 효과 마우스 이펙트 03 : 조명효과 이번 시간에는 GSAP를 이용하여 마우스 커서에 조명효과를 입혀 보도록 하겠습니다. HTML 소스 header, main(마우스 커서 & 명언), footer(모달 박스) 크게 3가지로 이루어져 있다. footer의 모달 박스 내용은 너무 길어지므로 생략한다. 모달 박스를 나타내는 방법에 대해서는 이전에 업로드한 슬라이드 이펙트 게시물을 참조할 것. JAVASCRIPT MOUSE EFFECT 03 마우스 이펙트 - 조명효과 01 02 03 04 05 06 07 The future depends on what we do in the present. 미래는 현재 우리가 무엇을 하는가에 달려 있다. CSS 소스 body에 사용된 이미지와 동일한 이미지를 마우스 커서 영역에 ba.. 2022. 9. 22.

[Parallax Effect] 패럴럭스 이펙트 05 - 이질감 효과 패럴럭스 이펙트 05 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. 이번 패럴럭스 이펙트 05 포스팅에서는 스크롤 할 때 이질적인 느낌을 줘보도록 하겠습니다. HTML 소스 header, parallax__dot(dot 내비게이션), main(parallax__cont(명언 모음)), aside(parallax__info(스크롤탑값)), footer(모달 박스)로 구성된다. JAVASCRIPT PAR.. 2022. 9. 20.

[Slide Effect] 슬라이드 이펙트 04 - 좌우 이동 버튼 만들기 슬라이드 이펙트 04 : 좌우 이동 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 슬라이드를 연속적으로 좌우로 움직일 수 있게 하는 버튼을 추가해보겠습니다. HTML 소스 slider__wrap > slider__img > slider__inner 안에 이미지 5장이 들어간 구조이며, 그 아래의 slider__btn div태그 안에 이미지를 좌우로 슬라이드 할 수 있는 버튼을 만들어두었다. JAVASCRIPT SLIDER EFFECT 04 슬라이드 이펙트 ④ - 좌로 움직이기(연속적으로) 01 02 03 04 05 06 07 prev next CSS 소스 기존의 슬라이드 효과에서 쓰던 CSS 코드에 버튼용(slider__btn) 코드를 추가하였다... 2022. 9. 18.

[Parallax Effect] 패럴럭스 이펙트 04 - 부드럽게 나타내기 패럴럭스 이펙트 04 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. 이번 패럴럭스 이펙트 04 포스팅에서는 지난 패럴럭스 이펙트 1, 2, 3보다 더욱 자연스럽고 스무스하게 사진과 명언이 등장하도록 애니메이션을 줘 보도록 하겠습니다. HTML 소스 header, parallax__dot(dot 내비게이션), main(parallax__cont(명언 모음)), aside(parallax__info(스크.. 2022. 9. 18.

[사이트 만들기] 실전 유형 01 사이트 만들기 : 실전 유형 01 그동안 배웠던 헤더(반응형 전용 메뉴바 포함), 카드, 이미지, 이미지/텍스트, 텍스트, 슬라이드, 푸터 유형을 한 곳에 모아 본격적으로 웹 페이지를 만들어보도록 하겠습니다. Figma HTML 소스 헤더, 슬라이드, 이미지, 이미지/텍스트, 카드, 배너, 텍스트, 푸터 순으로 영역이 이루어져 있다. (※ 스압주의!) 코드 펼쳐보기 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 web site 별빛제빵교실 Baking Class MAIN NOTICE CERTIFICATION CLASS YOUTUBE GOAL SIGN IN 슬라이드 영역 BAKIN.. 2022. 9. 13.

[Parallax Effect] 패럴럭스 이펙트 01 패럴럭스 이펙트 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. HTML 소스 header, parallax__nav(내비게이션), main(parallax__cont(명언 모음)), aside(parallax__info(스크롤탑값)), footer(모달 박스)로 구성된다. JAVASCRIPT PARALLAX EFFECT 01 패럴럭스 이펙트 01 02 03 04 05 06 07 메뉴1 메뉴2 메.. 2022. 9. 6.

[Mouse Effect] 마우스 이펙트 01 마우스 이펙트 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 마우스 이펙트를 만들어보도록 하겠습니다. HTML 소스 보기 header, main(명언 & mouseInfo(마우스 커서 좌표값 표시)), footer(모달 박스) 크게 3가지로 이루어져 있다. footer의 모달 박스 내용은 너무 길어지므로 생략한다. 모달 박스를 나타내는 방법에 대해서는 이전에 업로드한 슬라이드 이펙트 게시물을 참조할 것. JAVASCRIPT MOUSE EFFECT 01 마우스 이펙트 - 마우스 따라다니기 01 02 03 04 05 06 07 The future depends on what we do in the present. 미래는 현재 우리가 무엇을 하는가에 달려 있다. clientX : 0px c.. 2022. 9. 5.

[JavaScript] mouseenter와 mouseover의 차이점 알아보기 mouseenter와 mouseover 메서드의 차이는? 이번 포스팅에서는 mouseenter와 mouseover 메서드의 차이에 대해 다뤄보도록 하겠습니다. mouseenter, mouseover 이벤트란 무엇인가!? mouseenter와 mouseover는 어떤 요소 안으로 마우스 커서가 들어오는 순간을 감지하는 이벤트이며, 이와 반대로 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 이벤트는 mouseout, mouseleave다. mouseenter mouseleave mouseover mouseleave 그래서 둘이 뭐가 다른데!?🤔 mouseenter mouseleave의 경우는 이벤트 발생 시 버블링이 일어나지 않으며 자신만이 이벤트를 받을 수 있다. 반면, mouseover mousel.. 2022. 9. 5.

[Slide Effect] 슬라이드 이펙트 03 - 좌로 움직이기(연속적으로) 슬라이드 이펙트 03 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 2초마다 다음 사진으로 슬라이드 되는 효과이며, JS 코드를 보여드리겠습니다. HTML, CSS 코드는 원본 소스 보기 버튼을 눌러 확인해주세요. 자, 그럼 시작해볼까요? 01. 변수와 상수(const/let) 선언하기 필요한 만큼의 변수와 상수를 선언해주도록 한다. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySelector(".slid.. 2022. 9. 1.

[JavaScript] 요소 크기 메서드 정리 요소 크기 메서드 요소 크기 메서드에 대해 정리해보자. 요소 크기 메서드 정리 메서드 설명 element.clientWidth 요소의 가로값(margin/border 미포함) element.clientHeight 요소의 세로값(margin/border 미포함) element.clientTop 요소의 Y축값(부모 기준) element.clientLeft 요소의 X축값(부모 기준) element.offsetWidth 요소의 가로값(border/padding 포함) element.offsetHeight 요소의 세로값(border/padding 포함) element.offsetTop 요소의 Y축값(문서 기준) element.offsetLeft 요소의 X축값(문서 기준) element.getBoundingClie.. 2022. 9. 1.

[JavaScript] 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').ne.. 2022. 8. 30.

[JavaScript] jQuery(제이쿼리) - 필터 선택자 jQuery 필터 선택자 제이쿼리에서 사용되는 필터 선택자에 대해 살펴봅시다. 선택자에 ' : '가 붙습니다. 필터 선택자 선택자 종류 선택자 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택 :odd $("tr:odd") tr 요소 중 홀수 행만 선택 :first $("tr:first") 첫 번째 td 요소를 선택 :last $(":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 요소들을 선택 :not() $("li:not(.bg.. 2022. 8. 30.

[JavaScript] 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'는 선택되지 않음. 요소[속성*=.. 2022. 8. 30.

[JavaScript] jQuery(제이쿼리) - 기본 선택자 jQuery 기본 선택자 제이쿼리에서 사용되는 기본 선택자에 대해 살펴봅시다. 기본 선택자 $("선택자") $("#gnb") 선택자 종류 선택자 설명 태그 선택자 $("p") p 요소 선택 id 선택자 $("#gnb") #gnb 요소 선택 class 선택자 $(".logo") .logo인 요소 선택 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소(ul)의 자식 요소 li를 선택 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 li 요소를 선택 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를 선택 형제 선택자 $("#visual ~ #footer") #visual의 형제 요소 #footer를 선택 종속 선택자 $.. 2022. 8. 30.

[JavaScript] jQuery(제이쿼리) 알아보기 jQuery란? HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 JavaScript 라이브러리로, 존 레식이 2006년 8월 26일, 뉴욕 시 바캠프에서 최초 공개하였습니다. 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단 등을 제공하죠. jQuery를 사용하는 이유는? 01. 어떠한 브라우저에서도 동일하게 작동한다. 02. 직관적이고 편리한 API를 제공한다. 03. CSS 스타일의 selector를 사용할 수 있어 편리하다. 04. 이벤트 처리(ex: Ajax, Animation 등…) 효과를 사용하기 쉽다. 05. 다양한 플러그인이 존재하며 충돌 위험도 적다. jQuery 적용 방법 jQuery(이하 '제이쿼리')를 사용하기 위해서.. 2022. 8. 30.

[JavaScript] GSAP 알아보기 GSAP란? GreenSock에서 만든 JavaScript 애니메이션 라이브러리로 일반적으로 애니메이션 효과는 CSS 또는 jQuery의 .animate() 등으로 구현하지만, 기존의 CSS와 jQuery로 구현하기 어려운 복잡한 애니메이션을 구현하기 위해 만들어진 것이 바로 GSAP입니다. GSAP 적용 방법 GreenSock 공식 홈페이지에서 설치 파일에서 다운로드 하는 방법이 있지만 귀찮으니 그냥 아래의 코드를 복붙하자. 기존 JS 코드와 GSAP 코드를 비교해보자 슬라이드 이펙트 02 포스팅에서 사용된 JS 코드를 가지고 왔다. GSAP 코드로 바꿔보도록 하자. JS 코드보다 좀 더 간략화 된 모습을 알 수 있다. 사용 문법은 gsap.to(".요소 클래스값", { 속성 }); 이러하다. 2022. 8. 29.

[Slide Effect] 슬라이드 이펙트 02 - 좌로 움직이기 슬라이드 이펙트 02 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 2초마다 다음 사진으로 슬라이드 되는 효과이며, JS 코드와 GSAP, jQuery 코드 세 가지를 보여드리겠습니다. HTML, CSS 코드는 원본 소스 보기 버튼을 눌러 확인해주세요. 자, 그럼 시작해볼까요? JS 코드 슬라이드 이펙트 02의 JS 소스와 부연 설명(주석 처리됨)이다. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySele.. 2022. 8. 29.

[Slide Effect] 슬라이드 이펙트 01 슬라이드 이펙트 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. HTML과 자바스크립트 소스를 설명드리며 CSS는 복잡해지기 때문에 CSS 소스 보기 버튼을 클릭하여 봐 주시기 바랍니다. 자, 그럼 시작해볼까요? HTML 소스 보기 : 모달 박스 슬라이드 이펙트 01의 HTML 소스와 부연 설명(주석 처리됨)이다. JAVASCRIPT SLIDER EFFECT 01 슬라이드 이펙트 ① - 트랜지션 효과 01 02 03 04 05 06 07 소스 보기 JavaScript HTML CSS // 선택자 const searchKeyword = document.querySelectorAll(".search__info .keyword span"); // 알.. 2022. 8. 25.

[Quiz Effect] 퀴즈 이펙트 06 - 슬라이드 형식 퀴즈 만들기 06 : 객관식(여러 문제) 유형 : 슬라이드 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! 문제 정보·선택자 생성 문제 정보를 배열 안의 객체 형태로 작성해준다. 다른 퀴즈 효과와는 달리 answerResult에 번호가 아닌 answerChoice에 있는 정답 그 자체를 그대로 똑같이 입력해준다. 필요한 const 상수를 생성해준 다음 연결해주는 작업까지 마.. 2022. 8. 24.

[Quiz Effect] 퀴즈 이펙트 05 - 2013년 4회 웹디자인기능사 기출문제 풀어보기 퀴즈 만들기 05 : 2013년 4회 웹디자인기능사 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! JS 소스 다섯번째 객관식(여러 문제) 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다. 기존 문제 풀이 기능에 총 문제수와 정답 개수, 총 점수, 합격 여부 등을 표시하는 기능을 추가하자. HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼.. 2022. 8. 24.

[Search Effect] 검색 이펙트 03 검색 이펙트 만들기 03 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 그동안 배웠던 CSS 속성들을 검색창 형식으로 원하는 결과가 나오도록 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠! 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 03의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. Search 01 02 03 04 05 06 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 전체 속성 개수.. 2022. 8. 22.

[JavaScript] 문자열 메서드 - charAt() 문자열 메서드 : charAt() 이번 포스팅에서는 문자열 메서드 중 charAt()에 대해 설명합니다. charAt() 문자열의 위치를 숫자로 입력하면 그 위치의 문자열 한 글자를 출력한다. //"문자열".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.

[JavaScript] 문자열 메서드 - 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 currentSt.. 2022. 8. 22.

[JavaScript] 문자열 메서드 - 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(.. 2022. 8. 22.

이전 1 2 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바