본문 바로가기

KATEGORIE159

[SITE] 웹사이트 - 텍스트 유형01 TextType01 웹페이지 실습을 위한 텍스트 유형을 실습해보겠습니다! 이번 유형은 보통 텍스트로만 정보를 제공하고자 할 때 사용합니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다😆 이번 유형은 이미지가 들어가지 않고 대신 아이콘이 들어가게 됩니다. 텍스르로만 이루어진 만큼 더 신경써서 작업해줍니다! 아래의 피그마는 하나의 섹션을 만들어서 component하여 배치했습니다! 또한 이미지스프라이트 기능을 위하여 프레임을 하나 더 만들어 아이콘을 60px씩 배치시켰습니다 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. TIP ! • 구조를 먼저 꼼꼼하게 .. 2022. 8. 31.

[JQUERY] jQuery 속성 선택자 Jquery : 속성 선택자 이번 시간에는 자바스크립트의 jquery 속성 선택자에 대해 알아보겠습니다.😆 #1. jquery 속성 선택자 다음은 속성 선택자의 종류 입니다. 표와 예제를 보고 이해해봅시다! 선택자 종류 설명 요소[속성] $("p[class]") p 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("p[class='abc']") p 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("p[class!='abc']") p 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성='값'] $("p[class~='abc']") p 요소 중 class가 'abc'인 요소를 선택합니다. 그러나 'abc' 앞 뒤로 연결된 문자.. 2022. 8. 30.

[JQUERY] jQuery 기본 선택자 jQuery : 기본 선택자 이번 시간에는 자바스크립트의 jQuery 기본 선택자에 대해 알아보겠습니다.😆 #1. jQuery 기본 선택자 jquery에서는 html요소와 관련된 기능 구현이 많기 떄문에 CSS와 밀접한 관계가 있습니다. 다음의 표와 함께 기본 선택자의 종류를 알아봅시다! 😇 선택자 종류 설명 태그 선택자 $("p") p 태그를 선택합니다. id 선택자 $("#section") id가 section인 요소를 선택합니다. class 선택자 $(".section") class가 section인 요소를 선택합니다. 자식 선택자 $("#section > ul > li") #section의 자식 요소 중 li를 선택합니다. 인접 선택자 $("#section + #content") #section의.. 2022. 8. 30.

[JAVASCRIPT] JQUERY 라이브러리란? 자바스크립트 : Jquery 라이브러리 이번 시간에는 자바스크립트의 라이브러리인 jquery에 대해 알아보겠습니다.😆 #1. Jquery란? JQuery로 HTML의 요소들을 쉽게 조작하고 편리하게 사용할 수 있게 만든 라이브러리로 Javascript를 미리 작성해둔 것입니다. Javascript로 길고 복잡하게 써야 하는 것을 JQuery로 보다 짧고 직관적으로 쓸 수 있습니다. $ 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다. 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다. ✏️ jquery 활용 예시 💡 $(선택자).동작함수(); )//Javascript document.querySelector(".sl.. 2022. 8. 30.

[CSS] 애니메이션 실습 : 로딩 CSS : 애니메니션 만들기 : 로딩 이번 시간에는 CSS실습으로 귀여운 로딩 애니메이션을 만들어보겠습니다. 😄 #1. HTML 먼저 HTML 코드로 div를 이용하여 영역을 만들어 줍니다. #2. CSS 다음은 CSS 속성입니다. animation 속성을 사용하여 keyframes에 적용할 애니메이션 명을 작성해주고 그 외 속성을 설정해줍니다. @keyframes에 속성을 설정할 애니메이션 명을 써준뒤 각 0% ~ 100% 사이에 속성을 부여해줍니다. body { height: 100vh; background-image: linear-gradient(-60deg, plum 0%, skyblue 100%); /* 왼쪽 아래부터 그라디언트 시작 */ } .loading { position: absolute.. 2022. 8. 30.

[CSS] 애니메이션 실습 : 움직이는 박스 CSS : 애니메니션 만들기 : 박스 이번 시간에는 CSS실습으로 귀여운 박스 애니메이션을 만들어보겠습니다. 😄 #1. HTML 먼저 HTML 코드로 div를 이용하여 박스를 만들어 줍니다. #2. CSS 다음은 CSS 속성입니다. animation 속성을 사용하여 keyframes에 적용할 애니메이션 명을 작성해주고 그 외 속성을 설정해줍니다. @keyframes에 속성을 설정할 애니메이션 명을 써준뒤 각 0% ~ 100% 사이에 속성을 부여해줍니다. body { height: 100vh; background-image: linear-gradient(to top, Plum, skyblue); } .box { width: 50px; height: 50px; position: absolute; /* 위치 .. 2022. 8. 30.

[JAVASCRIPT] GSAP 라이브러리란? 자바스크립트 : GSAP 라이브러리 이번 시간에는 자바스크립트의 라이브러리인 GSAP 대해 알아보겠습니다.😆 #1. GSAP란? The GreenSock Animation Platform의 약자로 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 애니메이션 자바스크립트 라이브러리 입니다. 특히 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있습니다. 📖 GSAP 사용 방법 📖 GSAP는 CDN 에서 라이브러리 링크를 가져오면 됩니다. 라이브러리를 가져올 땐 js 파일 링크를 가져오는 것처럼, CDN의 절대 주소를 가져오면 됩니다! #2. GSAP 객체를 만드는 기본 메서드 1. gsap.to() 2. gsap.from() 3. gsap.fromTo() gsap의 메소드 to는 첫.. 2022. 8. 30.

[EFFCET] 이미지 : 슬라이드 유형02 이미지 슬라이드 : 좌측으로 움직이기 이번 시간에는 2초 지날 때마다 좌측으로 이미지가 바뀌는 슬라이드 형식의 페이지를 작업해보겠습니다.😀 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다. ✏️ HTML 스크립트 보기 ! CSS TIP ! 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을 설정해줍니다. ✏️ CSS 스크립트 보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: c.. 2022. 8. 30.

[EFFECT] 이미지 : 슬라이드 유형01 이미지 슬라이드 : 트렌지션 효과 주기 이번 시간에는 2초 지날 때마다 이미지가 바뀌는 슬라이드 형식의 페이지를 작업해보겠습니다.😀 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다. ✏️ HTML 스크립트 보기 ! CSS TIP ! 이미지가 겹쳐있기때문에 마지막 이미지만 보이게 됩니다. 때문에 :nth-child()과 z-index를 통해 이미지의 순서를 바꿔줍니다. * z-index() : 레이어처럼 각 순서를 정해줍니다. ✏️ CSS 스크립트 보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; jus.. 2022. 8. 30.

[CSS] 요소를 숨기는 방법 CSS : 요소(element)를 안보이게 하는 방법 CSS 속성을 작업하다 보면 요소를 숨겨야 하는 속성들이 필요하게 됩니다. 이번 시간에는 CSS 기법 중 하나인 요소를 안보이게 하는 방법 5가지에 대해 알아보겠습니다!😄 #1. display : none; 가장 보편적으로 사용하는 속성 중 하나로 요소의 영역이 완전히 사라지게 됩니다. 또한 이 속성을 사용하게 되면 애니메이션 효과도 줄 수 없게 됩니다. 💡 코드 보기 p {display : none;} 없어집니당 뾰로롱 #2. opacity: 0; opacity는 투명도를 설정하는 속성 중 하나로 요소의 투명도를 0으로 하여 요소를 안보이게 합니다. 때문에 요소는 사라져도 영역은 남게 되며 애니메이션도 적용이 가능합니다. 💡 코드 보기 p {opac.. 2022. 8. 26.

[ILLUSTLATOR] 사슴 일러스트 Illustrator : 펜 툴로 꽃과 사슴 작업하기 01 이번 시간에는 디자인 프로그램인 일러스트레이터(Illustrator)를 사용하여 사슴🦌과 꽃🌹을 작업해보겠습니다. #1. 사슴 그리기 일러트스레이터의 도형툴과 패스파인더를 이용하여 캐릭터를 만들어보자! ! TIP ! 최대한 점을 찍지 않고 한 번에 이어 그려서 부드럽게 작업해줍시다! 🎨 과정 보기 🎨 결과보기 완성된 사슴 일러스트를 다양한 색으로 작업해봅시다! #2. Mocup으로 일러스트 응용해보기 작업한 일러스트를 목업 사이트를 이용해 포토샵으로 편집해봅시다! 실제 물건에 직접 일러스트를 넣어볼 수 있어서 디자인에 아주 편리한 기능이랍니다! 😆 🎨 티셔츠 🎨 테이프 모두 잘 작업하셨나요?! 그럼 다음 디자인 시간에 뵙겠습니다! 😃 👍 2022. 8. 25.

[QUIZ] 퀴즈 만들기06 : 슬라이드 형식 퀴즈 객관식 유형 : 슬라이드 형식 이번 시간에는 퀴즈를 슬라이드 형식으로 제작해봅시다! 그 뒤 정답 갯수와 문제의 총 갯수, 총 점수를 구하는 식을 만들어 봅시다. ! 미리 보기 ! #1. 퀴즈 인포 (문제 모음) 만들기 데이터 저장 타입인 배열안 객체를 통해 각각의 퀴즈 문제를 키와 값으로 데이터화 시켜 저장해줍니다. 지난 퀴즈와 달리 객체안에 또 배열을 만들어서 저장해줍니다. const quizInfo = [ { answerType : "웹디자인기능사 2015년 01회", answerNum : "1", answerAsk : "웹 디자인에 대한 설명으로 거리가 먼 것은?", answerChoice : [ "웹 페이지를 디자인하고 제작하는 것을 의미한다.", "웹 디자인은 개인용 홈페이지 이외에 기업용.. 2022. 8. 25.

[QUIZ] 퀴즈 만들기05 : 객관식 60문제 퀴즈 객관식 유형 : 60문제 이번 시간에는 자바스크립트를 통해 문제 텍스트들을 직접 해당 란에 넣어서 제작해봅시다! 그 뒤 조건문을 통해 정답 갯수와 문제의 총 갯수를 구하는 식을 만들어 봅시다. ! 미리 보기 ! 원본 소스 보기 원본 페이지 보기 #1. 퀴즈 인포 (문제 모음) 만들기 데이터 저장 타입인 배열안 객체를 통해 각각의 퀴즈 문제를 키와 값으로 데이터화 시켜 저장해줍니다. const quizInfo = [ { answerType : "웹디자인기능사 2015년 01회", answerNum : "1", answerAsk : "웹 디자인에 대한 설명으로 거리가 먼 것은?", answerChoice : { 1: "웹 페이지를 디자인하고 제작하는 것을 의미한다.", 2: "웹 디자인은 개인용 홈페이.. 2022. 8. 25.

[CSS] CSS의 색상 표현 방법 CSS : 색상 표현 방법 CSS에서는 색상을 설정하는 총 7가지의 방법이 있습니다. 먼저 기존 CSS에 있던 방법 3가지, CSS3에서 추가된 4가지 방법이 있습니다. 이번 시간에는 이러한 CSS의 색상 표현 방법에 대해 알아보겠습니다!😄 🔶 CSS 색상 표현 방법 🔶 #1. 색상 이름으로 표현 red, pink와 같이 색상의 이름을 나타내는 방법으로, 약 140가지의 색상 이름들이 브라우저에 미리 정의되어 있습니다. p {background-color: orange;} orange #2. RGB값으로 표현 rgb(red, green, blue)와 같은 형식으로 색을 표현합니다. 여기서 red, green, blue 각각의 변수에는 0에서 255사이의 정수를 입력하거나 백분율 값을 지정하여 색상을 설정.. 2022. 8. 24.

[CSS] CSS 단위의 종류 CSS : 단위 이번 시간에는 CSS의 단위에 대해 알아보겠습니다!😄 #1. px(픽셀) 해상도에 따라 상대적으로 달라지는 기본 단위로 글자 크기를 지정하지 않았을 경우 보통 16px로 자동 설정됩니다. #2. %(퍼센트) 부모 요소의 크기를 100% 기준으로 계산한 % 단위 특별한 설정이 없다면 16px = 100% / 24px = 150%가 됩니다. #3. em 부모 요소의 폰트 크기를 100% 기준으로 계산한 100분의 1단위 특별한 설정이 없다면 16px = 1em / 24px(16px x 1.5 = 24px) = 1.5em가 됩니다. #4. rem em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산합니다. r은 root. 즉 html요소를 뜻하므로 html 요소에서 .. 2022. 8. 24.

[ILLUSTLATOR] 캐릭터 일러스트01 Illustrator : 펜 툴로 캐릭터 그리기 01 이번 시간에는 디자인 프로그램인 일러스트레이터(Illustrator)를 사용하여 모자 쓴 어린이👧와 토끼🐰를 작업해보겠습니다. #1. 어린이 캐릭터 일러트스레이터의 도형툴과 패스파인더를 이용하여 캐릭터를 만들어보자! ! TIP ! 모자의 밧줄모양은 직사각형에 radius 20px 정도 준 뒤 선툴을 이용하여 ctl + d로 간격에 맞게 10를 복사합니다. 그 뒤 패스타인더를 이용해 10등분을 합니다. #2. 토끼 캐릭터 이번 토끼 작업은 더 심화버전으로 팬 툴을 사용하여 직접 토끼를 그려보도록 하겠습니다! 또한 모양확장과 라이브페인터를 사용하여 채색을 해보도록 하겠습니다. ! TIP ! 1. 펜 툴과 shift + w(선의 굵기 조정)를 사용하여 토끼.. 2022. 8. 23.

[Search] 검색 유형 사이트 만들기03 charAt()을 통해 검색 사이트 제작하기 이번 시간에는 문자열 메서드 중 하나인 charAt() 메서드를 통해 알파벳과 css속성의 첫글자가 동일한 것만 나오는 검색 사이트를 제작해보겠습니다! 먼저 charAt() 메서드에 대한 이해를 높이기 위해 전 게시글을 보고 오시는 것이 좋습니다 ;) #1. HTML : 구조 짜기 ! point ! 버튼을 위한 알파벳 마크업을 작업해줍니다. 스크립트와 css속성을 위해 인포 안에 keyword 부모 요소를 만들어 줍니다. ✏️코드 보기 a b c d e f g h i j k l n m o p q r s t u v w x y z CSS 속성 갯수 : 0 알파벳 버튼 작업이 끝나면 속성 리스트를 작업해줍니다. ✏️ 리스트 보기 accent-color : accen.. 2022. 8. 23.

[JAVASCRIPT] 함수의 유형 자바스크립트 : 함수의 유형 이번 시간에는 함수의 유형에 대해 알아보겠습니다! 😁 #1. 함수 유형 : 함수와 변수를 이용한 형태 첫번째 유형은 변수를 통해 데이터를 전달시킵니다. ! 사용 방법 ! 각 변수마다 데이터 값을 선언하고 함수에 변수를 저장하여 실행문을 통해 데이터를 전달! function func(num, str1, str2){ document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.14"); } const youNum1 = 1; const youNum2 = 2; const youNum3 = 3; const youStr1 = "함수"; const youStr2 = "자바스크립트"; const youStr3 = "제이쿼리"; const youCom1.. 2022. 8. 23.

[JAVASCRIPT] 문자열 메서드 : charAt( ) 자바스크립트 : 문자열 메서드 : charAt() 이번 시간에는 문자열 메서드인 charAt()에 대해 알아보겠습니다! 😁 #1. 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 ! point ! 대소문자를 구분하며 위치값을 작.. 2022. 8. 23.

[JAVASCRIPT] 문자열 메서드 : match( ) 자바스크립트 : 문자열 메서드 : match() 이번 시간에는 문자열 메서드인 match()에 대해 알아보겠습니다! 😁 #1. match( ) match() 메서드는 문자열을 검색하고 배열을 반환합니다. ! match( ) 사용 방법 ! "문자열".math(검색값); "문자열".math(정규식 표현); const str1 = "javascript reference"; const currentStr1 = str1.math("javascript"); // javascript const currentStr2 = str1.math("reference"); // reference const currentStr3 = str1.math("r"); // r const currentStr4 = str1.math(/ref.. 2022. 8. 23.

[JAVASCRIPT] 문자열 메서드 : search( ) 자바스크립트 : 문자열 메서드 : search() 이번 시간에는 문자열 메서드인 search()에 대해 알아보겠습니다! 😁 #1. search( ) search() 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다. ! search( ) 사용 방법 ! "문자열".search(검색값); "문자열".search(정규식 표현); const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); // 0 const currentStr2 = str1.search("reference"); // 11 (11번째 자리 : 위치 값 출력) const currentStr3 = str1.search("j"); // 0.. 2022. 8. 23.

[SITE] 웹사이트 - 이미지 유형03 Image Type03 이번 이미지 유형에서는 지난 시간 배웠던 유형들의 심화 버전 입니다. 애니메이션과 블러 효과, 그리고 이미지 스트라이트 기법을 사용하여 실습해보겠습니다! 이미지 유형의 가장 기초적인 레이아웃으로 이미지 박스 안에 텍스트와 링크 박스가 들어가 있는 구조입니다. TIP ! 기본 화면은 1200(1160)이므로 코딩할 땐 주의합니다! 🎨 그리드와 레이아웃 🎨 완성본 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. ! TIP ! 이번 유형은 백그라운드에 이미지를 삽입하면 따로 애니메이션과 같은 효과를 주기 어렵기 때문에 img태그를 사용하여 이미.. 2022. 8. 22.

[CSS] 이미지 스프라이트 기법 + ir효과 / 백그라운드 CSS : Image Sprite 이번 시간에는 CSS 기법 중 하나인 이미지 스프라이트(Image Sprite) + ir효과 + 백그라운드에 대해 알아보겠습니다!😄 #1. 이미지 스프라이트 기법이란? 이미지 스프라이트란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 기법을 의미합니다. 웹을 제작하다 보면 이미지가 점점 증가하게 되고 그만큼 용량이 커지기 때문에 로딩 시간이 길어지게 됩니다. 이때 이미지 스프라이트를 사용하면 이미지를 다운받기 위한 서버 요청이 줄고 로딩시간을 절약할 수 있게 됩니다. 또한, 여러 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지 파일만을 관리하면 되므로 매우 간편합니다. 💡 그럼 다음의 예제를 통해 이미지 스프라이트 기법을 이해해보도록 합시다! #2. 이미지 .. 2022. 8. 22.

[HTML] 블록구조와 인라인 구조 블록(block) 구조 / 인라인 구조(inline) 블록 구조와 인라인 구조는 요소의 종류라고 볼 수 있습니다. 블록 구조는 박스, 인라인 구조는 텍스트 형식이라고 쉽게 생각하시면 됩니다.😆 또한 태그의 종류에 따라 기본적으로 블록과 인라인 구조가 설정되어 있으며 css 속성인 display를 통해 임의적으로 바꿔줄 수도 있습니다. 그럼 아래에서 더 자세히 알아보겠습니다! ! 자투리 지식 ! 요소 = 이것은 요소 입니다. 즉 로 한 쌍이 되었을 때 요소라 볼 수 있습니다. #1. 블록(block) 구조 🧱 블록 구조란 일반적으로 줄바꿈이 일어나는 형태로 요소가 가로로 정렬되지 않습니다. 즉 전체 가로가 1000px, 블록 구조인 요소의 가로가 400px이라고 가정했을 때 가로 여백이 600px남았어도 .. 2022. 8. 22.

[CSS] SCSS 실습01 : 움직이는 강아지 일러스트 🐶 SCSS 실습01 : 🐶 움직이는 강아지 🐶 이번 시간에는 css 종류 중 하나인 지난 시간에 배웠던 SCSS언어를 이용하여 간단한 실습을 해봅시다! 🐶 HTML 🐶 ! point! 부모자식형제 요소에 맞게 코드를 정렬해주는 것이 중요합니다! 코드를 짤 땐 항상 코드 정렬을 잊지 마세요! 🐶 SCSS 🐶 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: o.. 2022. 8. 19.

[CSS] SCSS 언어란? CSS : SCSS 이번 시간에는 CSS 언어 중 하나인 SCSS에 대해 알아보겠습니다!😄 #1. SCSS란? 코딩이 복잡해지게 되면 코드의 중복 및 오류 등의 이유로 CSS는 유지보수가 어려워지고 가독성 또한 떨어지게 됩니다. 이러한 CSS의 단점을 보완하고자 등장한 문법이 SCSS라고 합니다. SCSS는 Syntactically Awesome StyleSheet의 약어로 코드의 재사용성을 높이고, 가독성을 증가시켜 개발의 효율성을 높이기 위한 전처리기 언어입니다. !! 여기서 중요한 점은 SCSS언어로 직접 구현하는 것이 아니라 Scss로 작업 후 CSS언어로 컴파일하여 웹에 구현시키는 원리라는 것 입니다! 즉 CSS의 대체 언어가 아닌 좀 더 효율적으로 CSS 코드 작업을 할 수 있는 도구의 개념이.. 2022. 8. 19.

[JAVASCRIPT] 문자열 메서드 : includes( ) 자바스크립트 : 문자열 메서드 : includes() 이번 시간에는 문자열 메서드인 includes()에 대해 알아보겠습니다! 😁 #1. includes( ) includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다. 즉 문자열이 특정 문자열을 포함하는지 확인하는 메서드라 볼 수 있습니다! ! includes( ) 사용 방법 ! string.includes( searchString, length ) "문자열".includes(검색할 문자열); "문자열".includes(검색할 문자열, 검색을 시작할 위치); == indexOF()와 거의 같다. const str1 = "javascript reference"; const currentStr1 = str1.incl.. 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : padStart( ) / padEnd( ) 자바스크립트 : 문자열 메서드 : padStart() / padEnd() 이번 시간에는 문자열 메서드인 padStart() / padEnd()에 대해 알아보겠습니다! 😁 #1. padStart( ) padStart() 메서드는 주어진 길이에 맞게 앞 자리에 문자열을 채우고, 새로운 문자열을 반환합니다. ! padStart( ) 사용 방법 ! "문자열".padStart(길이(자리수)); "문자열".padStart(길이(자리수), "추가 할 문자열"); const str1 = "456"; const cirrentStr1 = str1.padStart(1, "0"); //456 const cirrentStr2 = str1.padStart(2, "0"); //456 const cirrentStr3 = str1.p.. 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : repeat( ) 자바스크립트 : 문자열 메서드 : repeat() 이번 시간에는 문자열 메서드인 repeat()에 대해 알아보겠습니다! 😁 #1. repeat( ) repeat() 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다. ! replace( ) 사용 방법 ! "문자열".replace("횟수값"); const str1 = "javascript"; const cirrentStr1 = str1.repeat(0); // '' const cirrentStr2 = str1.repeat(1); // javascript const cirrentStr3 = str1.repeat(2); // javascriptjavascript ! point ! 문자열의 반복 횟수값은 양의 정수여야 한다! 2022. 8. 18.

[JAVASCRIPT] 문자열 메서드 : concat( ) 자바스크립트 : 문자열 메서드 : concat() 이번 시간에는 문자열 메서드인 concat()에 대해 알아보겠습니다! 😁 #1. concat( ) concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. 즉 여러개의 문자열을 하나로 합친다고 볼 수 있습니다. ! replace( ) 사용 방법 ! "문자열".concat("추가할 문자열"); "문자열".concat("추가할 문자열", "추가할 문자열"....); : 여러개 사용 가능 "문자열".concat("추가할 문자열", ["추가할 문자열"]); : 배열 사용 가능 const str1 = "javascript"; const cirrentStr1 = str1.concat("reference"); // javascriptrefe.. 2022. 8. 18.

이전 1 2 3 4 5 6 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바