본문 바로가기

분류 전체보기162

concat( ) / repeat( ) / includes( ) concat() / repeat() / includes() concat()메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. repeat()메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다. includes()메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다. concat() concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. "문자열".concat(문자열, 문자열) "문자열".concat(문자열, 문자열....) const str1 = "javascript"; const currentStr1 =str1.concat("reference"); //javascriptreference const currentStr2 =.. 2022. 8. 17.
padStart( ) / padEnd( ) padStart() / padEnd() padStart/padEnd() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다. padStart() / padEnd() "문자열".padStart(길이) "문자열".padStart(길이, 문자열) padEnd()의 사용법은 padStart()와 동일 합니다. const str1 = "456"; const currnetStr1 = str1.padStart(1, "0"); //456 const currnetStr2 = str1.padStart(2, "0"); //456 const currnetStr3 = str1.padStart(3, "0"); //456 const currnetStr4 = str1.padStart(4, "0"); //.. 2022. 8. 17.
replace( ) / replaceAll( ) replace() / replaceAll() replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 문자열을 부분 문자열로 구분하고 배열로 반환합니다.(String.prototype.replace() ←본래식) replace() / replaceAll() "문자열".replace("찾을 문자열", "변경할 문자열") "문자열".replace(정규식) "문자열".replace(정규식, "변경할 문자열") const str1 = "javascript reference"; const cirrentStr1 = str1.replace("javascript", "자바스크립트"); //자바스크립트 reference const cirrentStr2 = str1.rep.. 2022. 8. 17.
문자열 결합 / 템플릿 문자열 문자열 결합 / 템플릿 문자열 템플릿 문자열은 내장된 표현식을 허용하는 문자열입니다. 문자열 결합 / 템플릿 문자열 번호 기본값 메서드 리턴값 //01 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리"; document.querySelector(".sample01_M1").innerHTML = "문자열(string) 결합"; document.querySelector(".sample01_P1").innerHTML = str1 + str2; //02 const nu.. 2022. 8. 17.
split() split() 문자열에서 원하는 값을 추출해 배열로 반환해 줍니다. split() 문자 객체를 지정한 구분자를 이용하여 여러개의 문자열로 나눕니다. "문자열".split(구분자); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); const str1 = "javascript reference"; const currentStr1 = str1.split(''); //['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't', ' ', 'r', 'e', 'f', 'e', 'r', 'e', 'n', 'c', 'e'] const currentStr2 = str1.split(' '); //['javascript', 'reference'], 한칸 띄웠음 con.. 2022. 8. 17.
SearchEffect02 스크립트를 이용한 서치효과 만들기 02 스크립트를 이용하여 HTML 태그를 검색하는 효과를 만들 수 있습니다. 원본 소스 보기 Script //선택자 const searchBox = document.querySelector(".search__box input"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li") //목록 리스트 const searchInfo = document.querySelector(".search__info .num") //속성 갯수 설정하기 searchInfo.textContent = searchList.length; // searchBox.addEventListener("keyup", () =>.. 2022. 8. 17.
사이트 만들기 (이미지 유형 - 02) 사이트 만들기(이미지 유형 - 02) 이미지가 삽입된 형식의 사이트를 만들 수 있습니다. CSS /* imageType */ .image__inner { display: flex; justify-content: space-between; } .image { width: 32%; background-color: #f5f5f5; position: relative; overflow: hidden; } .image__box img { vertical-align: top; transition: all 0.5s ease-in-out; } .image__desc { position: absolute; left: 0; bottom: -100px; width: 100%; height: 100px; text-align: .. 2022. 8. 17.
사이트 만들기 (이미지 유형 - 01) 사이트 만들기(이미지 유형 - 01) 이미지가 삽입된 형식의 사이트를 만들 수 있습니다. CSS /* imageType */ .image__inner { display: flex; justify-content: space-between; } .image { width: 49%; height: 370px; color: #fff; padding: 200px 30px 30px 30px; box-sizing: border-box; } .image.img1 { background: url(img/imageType01_01.jpg) no-repeat center; } .image.img2 { background: url(img/imageType01_02.jpg) no-repeat center; } .image__t.. 2022. 8. 17.
SearchEffect01 스크립트를 이용한 서치효과 만들기 01 스크립트를 이용하여 HTML 태그를 검색하는 효과를 만들 수 있습니다. 원본 소스 보기 Script //선택자 const searchBox = document.querySelector(".search__box input"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li") //목록 리스트 searchBox.addEventListener("keyup", () => { const searchWord = searchBox.value; //사용자가 입력한 키워드 searchList.forEach(el => { const cssName = el.dataset.name; if(cssName.. 2022. 8. 16.
정규표현식 정규표현식 정규식 표현으로 문자열에서 특정 문자의 조합을 찾을 수 있습니다. 정규표현식 객체 주요 패턴 패턴 설명 abc abc 문자열을 검색합니다. /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색합닌다. /[abc]d/는 'ad', 'bd', 'cd' [^abc] a, b, c를 제외한 문자 하나를 검색합니다. /^[abc]d/는 'ed', 'fd', 'gd' [A-Z] 알파벳 대문자 문자를 검색합니다. [a-z] 알파벳 소문자 문자를 검색합니다. [0-9] 0-9까지의 숫자를 검색합니다. . 하나의 문자를 검색합니다. 만약 '마침표' 문자 그대로의 의미를 사용할 경우 '₩.'으로 표현해야 합니다. \w 알파벳, 숫자, _를 검색합니다. \W 알파벳, 숫자, _를 제외하고 검색합니.. 2022. 8. 16.
slice() / substring() / substr() slice() / substring() / substr() slice() / substring() / substr()은 문자열에서 원하는 값을 추출하여 문자열을 반환하는 메서드 입니다. slice() 배열로부터 특정 범위값을 추출하여, 문자열로 반환 합니다. "문자열".slice(시작위치) "문자열".slice(시작위치, 끝나는위치) //시작위치의 값은 끝나는 위치 값보다 작아야 합니다. const str1 = "javascript reference"; const currenStr1 = str1.slice(0); const currenStr2 = str1.slice(1); const currenStr3 = str1.slice(2); const currenStr4 = str1.slice(0, 1); con.. 2022. 8. 16.
indexOf( ) / lastIndexOf( ) indexOf() / lastIndexOf() 자바스크립트에서 특정 문자의 위치를 찾기위해서 indexOf() / lastIndexOf()를 사용할 수 있습니다. indexOf() 사용법 "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) indexOf() const str1 = "javascript reference"; const currentStr1 = str1.indexOf("javascript"); const currentStr2 = str1.indexOf("reference"); const currentStr3 = str1.indexOf("j"); const currentStr4 = str1.indexOf("a"); const currentStr5 = str1.index.. 2022. 8. 16.
HTML - 구조 관련 요소 HTML 구조관련요소 HTML5에서 새롭게 추가된 요소이며, 의미와 관련성을 가지고 있습니다. 일반적으로는 컨텐츠들의 장과 절등을 구분하고자 할 경우 사용하며, 반드시 제목과 관련된 요소가 포함 되어야 합니다. 아웃라인에 영향을 주며, article과 구분하여 사용해야 합니다. 반응형웹 MENU01 MENU02 MENU03 MENU04 MENU05 콘텐츠 그룹01 콘텐츠 그룹02 주요기사 광고 경기도 성남시 수정구 고등동 032)111-2233 study@naver.com COPYRIGHT © All rights reserved 결과 원본 소스 보기 페이지 보기 2022. 8. 15.
미디어쿼리(media query) 미디어쿼리(media query) 디바이스들이 점점 다양해 지면서 웹에서 화면의 해상도에 따라 유연하게 컨텐츠를 배치하는 기술은 중요해지고 있습니다. 미디어쿼리는 반응형 웹디자인의 기본이 되는 기술 입니다. //link ~ media=" " 최소 가로폭이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.csss를 연결한다는 뜻입니다. 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6,7,8 375 667 iPhone 6,7,8 plus 414 736 iPhone 5 320 568 Galaxy S5, S8 360 640 Galaxy Note 8 360 640 iPad Pro 1024 1366 ⁝ ⁝ ⁝ @media 처음 로딩할 때 성능이 저하되지 않도록 CSS 파.. 2022. 8. 15.
QuizEffect - 05 스크립트를 이용한 퀴즈 만들기 05(객관식 - 여러문제) 스크립트를 이용하여 객관식에 관한 문제를 만들 수 있으며, 이때 label태그를 활용 합니다. 원본 소스 보기 사이트보기 Script //문제정보 const quizInfo = [ { answerType: "웹디자인기능사 2010년 05회", answerNum: "1", answerAsk: "먼셀의 색상에서 이 표준 빨강이면 1R은?", answerChoice: { 1: "연지", 2: "다홍", 3: "주황", 4: "보라", }, answerResult: "1", answerEx: "먼셀의 색상에 이 표준이 빨강이면 여기서 R은 빨강을 뜻하므로 1명도의 빨강인 연지가 답입니다." }, { answerType: "웹디자인기능사 2010년 05회".. 2022. 8. 15.
CSS 기본 문법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트만으로 사용할 수도 있습니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되는 반면, 외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다. 우리를 바라보게 하는 것들. @charset "utf-8"; p { color : blue }; @im.. 2022. 8. 13.
내장 함수 자바스크립트 내장 함수 자바스크립트에 기본적으로 내장되어 있는 함수들을 말합니다. 인코딩, 디코딩 함수 인코딩 함수를 이용하여 문자를 부호화시키고 부호화된 문자를 다시 디코딩 함수를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent() 영문, 숫자와 ( ) - _ . ~ * ! ' 을 제외한 문자를 인코딩 합니다. decodeURIComponent() encodeURIComponent( )의 디코딩 함수 //encodeURIComponent() var arr1 = ";,/?:@+$"; var arr2 = "-_.!*()"; var arr3 = "ABC abc 111"; //decodeURIComponent() var arr1 = ";,/?:@+$"; var arr2.. 2022. 8. 13.
배열 객체 - join() / push() / pop() join( ) / push( ) / pop( ) join( ) / push( ) / pop( ) 은 배열 자체를 수정하며, 배열의 처음이나 끝에서 요소를 추가 하거나 제거하는 메서드들 입니다. join( ) join(` `) join( )은 배열의 요소를 문자열로 결합하는데 사용됩니다. 번호 기본값 메서드 리턴값 //join() const arrNum = [100, 200, 300, 400, 500]; const text1 = arrNum.join(``); const text2 = arrNum.join(` `); const text3 = arrNum.join(`✨`); const text4 = arrNum.join(`-`); 결과보기 push( ) push( ) push( )는 배열의 끝에 하나 이상의 .. 2022. 8. 11.
사이트 만들기(카드 유형 - 03) 사이트 만들기(카드 유형 - 03) 카드 형식의 사이트를 제작 할 수 있습니다. 피그마 작업 피그마로 만들고자 하는 사이트의 가이드 라인을 잡아 줍니다. 하나의 카드 틀이 완성 되면 컴포넌트를 이용해 원본을 만들어 줍니다. CSS CSS보기 /* cardType03 */ body { background-color: #2254c3; } .card__inner { display: flex; } .card__inner .card { padding: 26px; width: 33.3333%; background-color: #fff; } .card__inner .card:nth-child(1){ border-right: 1px solid #eee; } .card__inner .card:nth-child(2){ b.. 2022. 8. 10.
비트맵과 벡터의 차이점 비트맵과 벡터 비트맵이란? 비트맵은 웹 상에서 가장 많이 접하는 이미지 포맷을 일컫는 말입니다. 비트맵은 디스플레이의 각 점들의 픽셀 형태로 나타낸 형태입니다. JPG, PNG, GIF가 주된 비트맵 확장자 입니다. 비트맵은 사각 픽셀들이 모여있는 형태이기 때문에, 확대시에는 '계단현상' 또는 '깨짐현상'이 발생하게 됩니다. 이러한 비트맵의 방식은 컴퓨터에게 부담을 덜 주는 구조를 갖고 있기 때문에, 웹에서의 이미지 표시, 사실 표현, 특수효과, 합성, 보정 작업들에 주로 사용합니다. 벡터 란? 벡터 방식은 비트맵과 상반되는 방식으로 이미지를 표현 합니다. 벡터 방식은 이미지를 수학적인 공식으로 표현하는 방법 입니다. AI, SVG 등이 주된 벡터 확장자 입니다. 수학적인 연산으로 이루어진 표현방식이기 .. 2022. 8. 9.
사이트 만들기(카드 유형 - 02) 사이트 만들기(카드 유형 - 02) 카드 형식의 사이트를 제작 할 수 있습니다. 유형02 에서는 8개의 카드가 존재하는 사이트를 보여줍니다. CSS .gmark { font-family: GmarketSans; font-weight: 500; } .card__inner { display: flex; flex-wrap: wrap; justify-content: space-between; } .card__inner .card { width: 24%; position: relative; } .card__inner .card:nth-child(1) { margin-bottom: 50px; } .card__inner .card img { margin-bottom: 20px; border-radius: 10px; .. 2022. 8. 9.
사이트 만들기(카드 유형 - 01) 사이트 만들기(카드 유형 - 01) 카드 형식의 사이트를 제작 할 수 있습니다. CSS .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } a { text-decoration: none; color: #000; } img { width: 100%; } /* common */ .container { width: 1160px; padding: 0 20px; margin: 0 auto; } .section { padding: 120px 0; } .section > h2 { /* + 는 형제, > 는.. 2022. 8. 8.
웹 표준/웹 호환성/웹 접근성 웹 접근성 웹 접근성은 장애인, 고령자 등 모든 사용자가 어떠한 기술이나 환경에서도 전문적인 능력 없이 웹사이트에서 제공하는 모든 정보를 동등하게 접근하고 이해할 수 있는 권리를 말합니다. 웹 접근성의 준수 웹 접근성을 준수 하면 장애인, 고령자 등을 포함한 모든 사람들이 웹에서 원하는 정보들을 자유롭게 접근하고 이용 할 수 있습니다. 웹 페이지 구성이 논리적으로 최적화되어, 디자인 및 설계의 효율성 제고는 물론 개발/유지 보수/개편 비용 절감 효과를 가져오게 됩니다. 뿐만 아니라 기업의 사회적 책임이 중요하게 부각되고 있는 시점에서 홈페이지를 운영하고 있는 기관 및 단체에 대한 긍정적 이미지 형성에 도움이 됩니다. 웹 표준 웹 표준은 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 .. 2022. 8. 8.
QuizEffect - 04 스크립트를 이용한 퀴즈 만들기 04(객관식) 스크립트를 이용하여 객관식에 관한 문제를 만들 수 있으며, 이때 label태그를 활용 합니다. 원본 소스 보기 Script //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 , 4개가 있으므로 All로 변경 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__answer .confir.. 2022. 8. 8.
요소 선택 자바스크립트 요소 선택 자바스크립트를 통하여 html의 특정 요소를 선택할 수 있습니다. 요소 선택 요소를 직접 선택하는 메서드 입니다. 메서드 설명 getElementById( ) document.getElementById('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementByClassName( ) document.getElementByClassName('menu')일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementByTagName( ) document.getElementByTagName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. getElementByName(.. 2022. 8. 6.
QuizEffect - 03 스크립트를 이용한 퀴즈 만들기 03(주관식 - 여러개) 스크립트를 이용하여 쉽게 퀴즈의 문제를 만들 수 있으며, for( )과 forEach( )를 이용하여 여러개의 퀴즈를 간단하게 만들 수 있습니다. 원본 소스 보기 Script //선택자, 다중선택이므로 querySelectorAll로 바꿔야 함! const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류 , 4개가 있으므로 All로 변경 const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelectorAll(".quiz__question .as.. 2022. 8. 5.
QuizEffect - 02 스크립트를 이용한 퀴즈 만들기 02(주관식) 스크립트를 이용하여 쉽게 웹디자이너기능사 시험에 관한 퀴즈를 만들 수 있으며, 주관식 유형으로 정답을 맞췄는지 틀렸는지도 알 수있게 할 수 있습니다. 원본 소스 보기 Script //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__an.. 2022. 8. 4.
QuizEffect - 01 스크립트를 이용한 퀴즈 만들기 01 스크립트를 이용하여 쉽게 웹디자이너기능사 시험에 관한 퀴즈를 만들 수 있습니다. 원본 소스 보기 Script //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__answer .confirm"); //정답 확인 버튼 const quizResult.. 2022. 8. 4.
레이아웃 - 05 레이아웃05 float을 이용한 레이아웃 float을 사용한 후 영역이 깨지는 것을 방지하기 위해서는 세 가지의 방법이 있습니다. 첫번째는 깨지는 영역에 clear:both를 설정합니다. 하지만, 구조가 복잡해지면 쓰기 힘들어 지는 단점이 있습니다. 두번짼는 부모 박스 영역에 overflow:hidden을 설정합니다. 그러나, 이 경우에는 애니메이션 등이 보이지 않는 경우가 생기기도 합니다. 마지막 방법으로는 clearfix를 설정하는 것 입니다. /* clearfix */ .clearfix::before, .clearfix::after { content: ''; display: block; line-height: 0; } .clearfix::after { clear: both; } * { margin:.. 2022. 8. 4.
레이아웃 - 04 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float을 이용한 레이아웃 container영역을 만들어 레이아웃을 설정합니다. id는 하나의 이름만 사용가능하나 class는 중복하여 사용이 가능합니다. 따라서 전체적인 틀은 id로 만들고, 세부적이거나 반복적으로 나오는 영역에는 class를 지정 하도록 합니다. * { margin: 0; padding: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background-color: #80CBC4; } #section { height: 580px; bac.. 2022. 8. 4.

자바스크립트

Javascript

자세히 보기
html
css
광고 준비중입니다.
<