카테고리165 SCSS SCSS CSS는 많이 들어봤는데 SCSS는 생소하시죠...? 오늘은 이 생소한 친구에 대해 파헤쳐 볼건데요. 쉽게 생각해서 CSS를 좀더 편하게 쓰기 위한 녀석입니다. 이 언어는 Sass라는 언어와 자주 묶여서 설명이 나오는데요. 이 둘은 문법 생김새는 다르지만 사실 같은 파생언어라고 봐도 무방합니다. 그리고 Sass보다는 SCSS의 활용수, 사용자 수 가 많으므로 여기서는 SCSS를 다룰게요. ■ 개념 Sassy CSS란 뜻인데요. 이걸 풀이하자면 문법적으로 멋있는(Sassy) CSS란 뜻이에요. SCSS란 매우 쉽게 말하자면 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어에요. SCSS는 중첩, 변수 선언, 연산자 등 많은 장점이 있습니다. 그중에서도 가장 대표적.. 2022. 8. 18. 애니메이션 효과 움직이는 강아지 만들기 이번시간에는 CSS를 이용해서 움직이는 강아지 애니메이션를 만들어 보겠습니다.오늘 작업은 코드펜으로만 작업하였고 html소스는 Pug를 이용했고 CSS는 SCSS를 이용해서 작업했습니다. 강아지는 언제봐도 귀엽죠...💕 같이 만들어 봐요!!🐾 ■ 그래서... Pug가 뭔가요? Pug는 html을 조금 더 세련되게 쓸 수 있는 템플릿 언어, express 뷰 엔진입니다. 여기서 템플릿언어란 간단하게 설명하자면 자바스크립트를 사용해서 HTML을 렌더링할 수 있게 해주는 엔진에서 사용되는 언어입니다. ▶ 왜 쓰는거죠? ' 강아지 보고 가실게요' 이렇게 쓰는 것을 '.dog 강아지 보고 가실게요' 처럼 쓸 수 있습니다. 너무 편하죠?사실 어느 템플릿 언어를 사용해도 무방하나 이 Pug라는.. 2022. 8. 18. includes() 메서드 includes() 이 메서드는 여태까지의 검색 메서드와는 다르게 반환을 불린값으로 해준다는 특징이 있습니다. ■ 문법 문자열 포함 여부를 검색해서 불린(true/false)로 반환합니다. "문자열".includes(검색값) "문자열".includes(검색값, 시작값) ■ 특징 ▶ 검색값은 필수요소이며, 대소문자를 구분합니다. ▶ 시작값이 없으면 전체 문자열을 대상으로 합니다. ■ 예시 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str1 ="javascript reference"; const currentStr1 = str1.includes("javascript"); //true const currentStr2 = str1.includes("j"); //true c.. 2022. 8. 17. padStart() / padEnd() 메서드 padStart()/padEnd() 이 메서드들은 주어진 길이에 맞게 앞/뒤 문자열을 채우고 이렇게 채운 새로운 문자열을 반환하는 메서드입니다. padStart() ■ 문법 길이에 맞게 앞의 문자열을 채웁니다. "문자열".padStart(길이) "문자열".padStart(길이, 문자열) ■ 특징 ▶ 문자열을 적지않고 본래길이보다 길게 길이를 요청하면 비어있는 자리는 공백처리가 됩니다. ■ 예시 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str1 = "456"; const currentStr1 = str1.padStart(1, "0"); //456 const currentStr2 = str1.padStart(2, "0"); //456 const currentStr3 .. 2022. 8. 17. repeat()메서드 repeat() 이 메서드는 문자열을 복사해서, 복사한 새로운 문자열을 반환합니다. IE는 Edge부터 지원합니다. ■ 문법 이 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다. string.repeat( count ) ■ 특징 ▶ 반복문을 사용하여 반환도 가능합니다. ▶ 반복횟수인 count는 양의 정수여야 하며 무한대보다 적고, 최대 문자열 크기를 넘어서는 안됩니다. ■ 예시 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str1 = "javascript"; const currentStr1 = str1.repeat(0); //'' const currentStr2 = str1.repeat(1); //javascript const currentStr3 =.. 2022. 8. 17. concat() 메서드 concat() 자바스크립트에서 문자열을 이어붙이는 방법은 세가지가 있습니다. 1. "+" 연산자를 사용하기 2. concat()함수를 사용하기 3. join()함수를 사용해서 배열을 문자열로 합치기 이 중에서 저번에 1번에 대해 학습했었는데요, 이번에는 2번의 내용 concat()메서드에 대해 학습하겠습니다. ■ 문법 이 메서드는 두개 이상의 문자열을 결합해서 새로운 문자열을 반환해줍니다. "문자열".concat(문자열) "문자열".concat(문자열, 문자열, ...) ■ 특징 ▶ 기존배열을 변경하지 않습니다. ▶ 추가된 새로운 배열을 반환합니다. ■ 예시 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str1 = "javascript"; const currentS.. 2022. 8. 17. replace() / replaceAll() 메서드 replace() / replaceAll() 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다. ■ 문법 원문은 'String.prototype.replace()'이나 String.prototype은 생략이 가능합니다. replaceAll의 문법또한 repalce와 같습니다. "문자열".replace("찾을 문자열", "변경할 문자열") "문자열".replace(정규식) "문자열".replace(정규식, 변경할 문자열) ■ 특징 ▶ 기존 replace()메서드는 중복된 문자의 경우 중복문자 중 첫번째 문자만 바꾸어준다는 특징이 있었습니다. 이러.. 2022. 8. 17. split() 메서드 split() 이 메서드는 문자열내에서 원하는 값을 찾아 배열형태로 반환해줍니다. ■ 문법 "문자열".split(구분자); "문자열".split(정규식 표현); ."문자열".split(구분자, 갯수); ■ 예시 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str1 = "javascript reference"; const currentStr1 = str1.split(''); //['j', 'a', 'v', 'a', 's', ...배열로 출력] const currentStr2 = str1.split(' '); //['javascript', 'reference'] const currentStr3 = str1.split('',1); //['j'] const currentSt.. 2022. 8. 17. 소/대문자메서드, 공백제거 메서드 공백제거 메서드 와 대/소문자 메서드 자바스크립트에서는 문자열의 공백을 제거해주는 메서드도 있습니다. tirm(), trimStart(), trimEnd() 이렇게 세가지로 구성되어 있습니다. 또, 대/소문자를 변환해주는 메서드도 있는데요. 이 메서드들은 toUpperCase(), toLowerCase()가 있습니다. 같이 알아봅시다 공백제거 메서드 trim() 이 메서드는 앞과 뒤의 공백을 제거한 후 문자열의 복사본을 반환합니다. 예제와 결과를 통해 바로 알아보시죠 특징 ▶ 문자열 내부의 공백은 제거하지 않습니다 예시 const str2 = ' javascript '; const currentStr2 = str2.trimStart(); consolo.log(currentStr2) 결과보기 javascr.. 2022. 8. 17. 문자열 결합 / 템플릿 문자열 문자열 결합 / 템플릿 문자열 자바스크립트에서 문자열을 이어붙이는 방법은 세가지가 있습니다. 1. "+" 연산자를 사용하기 2. concat()함수를 사용하기 3. join()함수를 사용해서 배열을 문자열로 합치기 이 중 저희는 1번의 내용에 대해 학습하겠습니다. 내장된 표현식을 허용하는 문자열 리터럴({}같은것)입니다. 따옴표 대신 ``(백틱)문자로 문자열을 감싸서 만들고 ${}안에 표현식을 넣습니다. ■ 예시1 const str1 = "자바스크립트"; const str2 = "제이쿼리"; console.log(str1 + str2); 결과보기 자바스크립트제이쿼리 ■ 예시2 const num1 = 100; const num2 = 200; console.log(num1 + num2); 결과보기 300 ■.. 2022. 8. 17. 웹사이트 만들기/ImageType 02 사이트 만들기 _ 이미지 유형02 기존 이미지유형에서 한단계 더 발전한 이미지 유형02에 대해 공부해보겠습니다. 레이아웃이 3개로 늘었고 마우스 오버했을때 효과를 부여해보겠습니다. 이미지 유형01번처럼 카드타입유형02번의 코드를 활용해서 만들어 봅시다. transform: scale(1.05); 위치를 이동시키거나 크기 조절 및 회전시킬 수 있는 속성입니다. * scale() : x축 or y축으로 확대/축소 * rotate() : 지정 요소 회전 * translate() : 요소 x축 or y축으로 이동 * skew() : x축 or y축 기울이기 transition: all 0.6s ease-in; 속성을 서서히 변화시키는 속성입니다. transition: property timing-function.. 2022. 8. 17. 웹사이트 만들기/ImageType 01 사이트 만들기 _ 이미지 유형01 이번엔 새로운 유형인 이미지 유형에 대해 알아보겠습니다. 기존에 했었던 카드타입과 굉장히 유사했던 부분이라 어렵지 않게 따라하실 수 있을거에요. 기존 카드타입01번과 레이아웃은 크게 다르지 않으므로 카드타입01번의 코드를 조금 활용해서 작업했습니다. background: url(이미지경로) no-repeat center; 이미지 위에 글씨를 나타내기 위해서는 여태까지 position을 이용했었는데요. 이번에 새롭게 등장한 이녀석은 배경 자체에 그림을 입히는 방법입니다. no-repeat과 center는 선택사항이고, url()안에 이미지경로만 입력해주면 원하는 그림을 단색배경대신 사용할 수 있습니다. * no-repeat: background-repeat속성에 해당하는 .. 2022. 8. 17. 서치 이펙트02 검색 효과 저번시간에 이어서 또 검색 사이트를 만들어보겠습니다. 저번 시간에는 indexOF()를 사용했었죠? 이번엔 includes()를 이용해서 만들어보겠습니다. 원본 소스 보기 원본 사이트 ▶ 이 사이트에 사용된 includes()의 특징에 대해 간단하게만 알아보고 가겠습니다. includes()는 문자열 포함 여부를 검색해서 불린(true/false)을 반환합니다. const str1 ="javascript reference"; const currentStr1 = str1.includes("javascript"); //true const currentStr2 = str1.includes("j"); //true const currentStr3 = str1.includes("b"); //false 크.. 2022. 8. 17. 서치 이펙트01 검색 효과 이번시간에는 키워드검색을 할 수 있는 사이트를 만들어 보겠습니다. 원본 소스 보기 원본 사이트 ▶ 이 사이트에 사용된 indexOf()의 특징에 대해 간단하게만 알아보고 가겠습니다. indexOf()는 문자열에서 특정 문자의 위치를 찾고 인덱스값을 반환하는 메서드입니다. const str ="javascript"; const currentStr = str.indexOf("javascript"); //0 위의 예시처럼 'javascript'라는 문자열을 찾는 경우 변수에서 시작점이 0번째부터 시작되므로 출력값은 0이 반환되는 것입니다. JS 소스 분석하기 const searchBox = document.querySelector(".search__box input"); //input 박스(검색영역.. 2022. 8. 16. 문자열 검색 메서드(indexOF/lastIndexOf) indexOF() 문자열 검색 메서드 중 indexOf()라는 친구에 대해서 알아보겠습니다. indexOf()란 문자열에서 특정 문자의 위치를 찾아서 문자열이 '첫번째'로 나타나는 위치를 숫자값(index값)으로 반환해주는 자바스크립트 메서드 입니다. 문법 기본 문법은 다음과 같습니다. "문자열".indexOf(검색값); "문자열".indexOf(검색값, 위치값); 특징 ▶ 찾는 문자열이 없으면 -1을 반환합니다. ▶ 문자열을 찾을 때 대소문자를 구분합니다. 예시 이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다. const str = "javascript reference"; const currentStr1 = str.indexOf("javascript") //0 const curr.. 2022. 8. 16. 문자열변경메서드(slice/substring/substr) 문자열 변경 메서드 문자열 변경 메서드란 이름 그대로 문자열의 특정위치를 바꾸기도 하고, 공백을 제거하기도 하고, 마음대로 변경할 수 있게 도와주는 메서드 인데요. 오늘은 그 중에서도 특정 값을 찾아 변경하기전 값을 추출해줄 수 있게 도와주는 메서드에 대해서 알아보도록 하겠습니다. 이런 특정 문자열 값 추출 메서드에는 slice(), substring(), substr() 등이 있습니다. 01_ Slice() 문자열에서 원하는 값을 찾아서 추출해내고 그 추출한 값의 문자열을 반환하는 메서드 입니다. slice는 시작위치 값이 끝나는 위치값보다 클 경우 출력이 되지 않으므로 주의를 요합니다. -기본문법 "문자열".slcie(시작위치) "문자열".slcie(시작위치, 끝나는위치) [시작위치 값 < 끝나는위치.. 2022. 8. 16. 정규식 표현 정규식 표현 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. 반복문과 조건문을 사용한 복잡한 코드도 정규표현식을 이용하게 된다면 매우 간단하게 표현할 수 있습니다. 다만...가독성은 떨어지게 됩니다. 처음 접하는 저희같은 초보들에겐 이해하기 힘든 내용인데요. 그래도 좌절하지말고 열심히 공부해봅시다. ■ 표현 정규표현식을 만드는 방법은 두가지가 있습니다. 01_ 정규 표현식 리터럴 슬래시로 패턴을 감싸서 작성합니다. 스크립트를 불러올 때 컴파일 되므로, 바뀔일이 없는 패턴일 경우에 사용하기에 용이합니다. const re = /ab+c/ // /:시작,종료 기호 ab+c:패턴 02_ RegExp 객체의 생성자 호출 정규 표현식이 런타임에 컴파일 됩니다. 바뀔 수 있는 패턴이나.. 2022. 8. 16. 미디어 쿼리 미디어 쿼리 해상도에 따라 CSS를 분기시키는 반응형 웹에서는 없어서는 절.대 안되는 기법입니다. 태블릿,모바일기기 마다 가로폭이 다른데 크롬브라우저의 경우 개발자도구(F12)를 열고 Toggle device Toolbar를 눌러 기기마다 해상도를 확인할 수 있고 기기 모델도 추가 가능합니다. 다음 트로이(http://troy.labs.daum.net/)에서는 실제 작동 화면을 확인할 수 있습니다. 미디어 쿼리는 아래와 같은 상황에 사용할 수 있습니다. ▷ CSS @media와 @import .@규칙을 사용해 특정 조건에 따라 스타일을 적용할 때 ▷ HTML요소에 media 특성을 사용해 특정 매체만 가리키게 할때 ▷ Window.matchMedia()와 MediaQueryList.addListener(.. 2022. 8. 14. CSS 기본 문법 CSS 기본 문법 여러분은 같은 음식을 먹더라도 그냥 대~충 차려놓은 음식과 보기 좋은 음식 중 어느 음식이 더 드시고 싶으신가요? 당연히 같은 음식이라면 보기 좋은 음식을 고르시겠죠? 홈페이지 제작도 똑같아요! 이런 겉으로도 보기 좋게 만들어주는 것이 바로 CSS입니다. 이러한 CSS를 정의하는 방법에는 여러 방법이 있는데요. 오늘은 그 방법들에 대해 알아보겠습니다. (공통 사항으로 주석표시는 /* */으로 합니다.) 01_ 내부 스타일 시트 HTML 코드를 작성하는 HTM 문서 내부의 내부스타일시트예제 결과보기 내부스타일시트예제 02_ 외부 스타일 시트 실제 가장 많이 사용되는 방법입니다. 스타일 속성을 따로 *.css확장자를 가진 별도의 파일로 저장하고, HTML에서 태그를 이용해서 선언합니다(=불.. 2022. 8. 13. 구조 관련 요소 구조 관련 요소 기존 콘텐츠의 구조를 구분하는 시맨틱한 요소가 제공되지 않던 HTML과 다르게 HTML5에서는 main, nav, section, header, article, aside, footer등 다양한 구조 관련 요소가 추가되었습니다. 덕분에 조금더 쉽게 구조파악이 가능합니다! 요소 유형 태그명 설명 블록 레벨 요소 1. HTML 문서의 헤더 영역을 의미하는 태그입니다. 제목이나 내비게이션, 검색 등의 내용을 포함할 수 있습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만, , 태그는 포함할 수 없습니다. 1. HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그입니다. 주제에 대한 제목요소(h태그)를 포함하는 것이 좋습니다. 2. 텍스트, 인라인 요소, 블록 .. 2022. 8. 13. 내장 함수 내장함수 내장 함수란 자바스크립트에 기본적으로 내장이 되어있는 함수들을 말합니다. 자바스크립트가 기본적으로 우리에게 제공하는 함수라고 할 수 있습니다. 01_ 인코딩, 디코딩 함수 자바스크립트는 기본적으로 '%'뒤에 사용할 수 없는 문자의 문자 코드를 16진수로 변환해서 연결합니다. 그래서 "http://abc.com/search?query=자바스크립트"처럼 URL주소에 쿼리 정보를 전송해서 데이터를 처리해야 하는 프로그램의 경우 한글과 같은 유니코드문자가 포함되어 있다면 오류가 발생할 수 있습니다. 그렇다면 이런 오류를 어떻게 해야 해결할 수 있을까요? 인코딩 함수를 사용해서 문자를 부호화 한뒤, 부호화 된 문자를 다시 디코딩 함수를 이용해서 원래 문자로 되돌릴 수 있습니다. 인코딩은 데이터를 다른 형.. 2022. 8. 12. 배열 메서드(join/push/pop) 배열 메서드 배열은 다양한 메서드를 제공합니다. 그 중에서 오늘은 기본적인 배열의 길이를 구하는 .length와 요소들을 연결해서 하나의 문자열로 만들 수 있는 join()과 배열 끝의 데이터를 조정할 수 있는 push()/pop()에 대해서 공부하겠습니다. 01_ length length 속성은 배열의 코드 유닛 수를 구해서 숫자로 반환합니다. 빈 문자열일 경우에는 0을 반환합니다. //01 const arrNum = [100, 200, 300, 400, 500]; //02 const arrTxt = ['a', 'b', 'c', 'd', 'f']; //03 const arr = [1, 2, ['a', 'b']]; 리턴값(결과)는 마우스를 갖다대면 보여요! 번호 기본값 메서드 리턴값 1 [100, 200.. 2022. 8. 11. 웹사이트 만들기/CardType 03 사이트 만들기 _ 카드 유형03 사이트 만들기 세번째 시간입니다. 오늘은 카드유형 중 세번째 유형입니다. 기존 텍스트 형태 밑에 프로필아이콘과 간단한 텍스트들이 추가 되었네요! 웹 표준을 준수해서 사이트를 만들어 봅시다. 시멘틱 태그를 사용한 이후엔 h태그가 필수적으로 와야 하는데요. 그래서 html소스의 이후에 h태그를 사용했습니다. 하지만 저희는 이 h태그를 보여주면 안되겠죠? 그래서 이번엔 이 h태그에 class="blind"를 부여해서 blind라는 css속성을 사용해보겠습니다. 그리고, footer부분의 배치가 애매하죠? 저도 어려워요...😥 오른쪽부터 배치될 수 있게 하기 위해 새로운 justify-content 속성인 flex-end를 사용해봐요. justify-content: flex-en.. 2022. 8. 10. 벡터와 비트맵 방식 벡터와 비트맵 방식 그래픽 도구에는 페인팅을 위한 프로그램과 드로잉을 위한 프로그램으로 나눌 수 있는데, 2차원에서 이미지를 구성하는 방식은 비트맵이미지와 벡터이미지로 나눌 수 있습니다. 말이 너무 어렵죠? 쉽게 말하자면 결국 이미지 표현 방식입니다. 벡터 방식 점과 점을 연결함으로써 수학적 함수 관계에 의해 이미지를 표현해서 선, 면을 만들어 냅니다. 이런 방식으로 만들어진 선이 두께값과 색상 값, 곡률값을 갖거나 면이 색상 값을 가지면서 그래픽을 만들게 되는 것입니다. 벡터는 좌표계(x,y)로 구성되기 때문에 비트맵과 달리 이미지크기 조절 혹은 변형으로 인해 해상도가 깨지지 않습니다. 아무리 크기를 키워도 깨짐현상이 나타나지 않죠. 그렇기 때문에 크기조절이 자유로워야 하는 로고나 서체, 캐릭터 등을 .. 2022. 8. 9. 웹사이트 만들기/CardType 02 사이트 만들기 _ 카드 유형02 사이트 만들기 두번째 시간입니다. 오늘은 카드유형 중 두번째 유형입니다. 4개의 카드가 한줄에 구성된 총 두줄의 카드유형이네요! 웹 표준을 준수해서 사이트를 만들어 봅시다. 웹표준을 준수하여 사이트를 만들어 보겠다고 했었는데 카드타입1유형과는 다르게 시간과 다르게 더보기가 텍스트가 사라지고 이미지로만 구성되어있기 때문에 alt태그를 통해서 이미지에 대한 설명을 덧붙여줘야합니다. 그런데 이번에는 더보기를 a링크로만 구성하고 css를 이용해서 작업해서 alt링크를 넣을 수가 없네요...또 이미지가 혹시라도 출력이 안될 경우 읽어줘야하는데 못읽는 경우가 발생할 수 도 있습니다. 이럴땐 어떻게 해야할까요? 정답은 'IR효과를 사용해라' 입니다. IR 효과 IR 기법은 이미지 대체.. 2022. 8. 9. 웹 표준/접근/호환성 웹 표준성 정의 웹 표준이란 브라우저 종류 및 버전에 다른 기능 차이에 대하여 호환이 가능하도록 제시한 표준입니다. 다른 기종이나 플랫폼에 따라 다르게 구현되는 기술들을 동일하게 구현하고 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미합니다. W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정을 담고 있습니다. 목적 및 이유 비표준 페이지, 과도한 플로그인 사용 등으로 장애인, 노약자를 포함한 모든 사용자들에게 운영체제 및 웹 브라우저 등의 정보 접근 제약이 있습니다. 브러우저의 종류나 버전에 상관없이 모든 사용자들이 동일한 웹사이트를 볼 수 있도록 작업이 필요하며 웹 표준 준수는 웹 접근성 준수를 위한 핵심입니다. ∴ 웹 표준의 궁극.. 2022. 8. 8. 웹사이트 만들기/CardType 01 사이트 만들기 _ 카드 유형01 사이트 만들기 첫번째 시간입니다. 사이의 구성 유형은 메뉴 유형, 배너 유형, 이미지 유형 기타 등등 많은 유형이 있습니다. 그 중 카드 유형에 대해 공부해보겠습니다. 카드 유형 중 기본이 되는 유형입니다. 아래 피그마를 참조하여 똑같이 만들고 웹표준 기준도 준수해봅시다. 보통 wrap의 width 값을 1200px으로 부여했지만, 이번 사이트-카드유형은 양쪽에 살짝식 여백이 있으므로 1160px로 작업합니다. 레이아웃 배치 속성은 'display:flex'를 사용하여 작업하겠습니다. aria-hidden="true" 웹표준을 준수하기 위해 aria-hidden="true"을 사용하였습니다. 청각장애인들이 사이트를 이용할때는 스크린리더를 통해 사이트를 이용하는데요. 위 사.. 2022. 8. 8. 퀴즈 만들기04/객관식 문제 퀴즈 만들기_객관식 유형 이번시간에는 객관식 유형(단일형)을 만들어보겠습니다! 객관식 문항을 만들기 위해서 태그를 이용하여 작성합니다. 들어가기에 앞서서 input태그의 성질에 대해 하나만 알아보고 갈게요. 이 태그는 이용자가 체크할 시 우리 눈에 보이지는 않지만 checked라는 속성값을 부여합니다. ○ 문항 체크 ❌ ● 문항 체크 ⭕ 원본 소스 보기 1_ 문제정보 및 선택자 지정 문제정보는 기존과 같이 작성하되, 객관식이라 4개의문제가 있으므로 배열-객체-배열 구조로 작성합니다. 다중선택할 일은 없기 때문에 querySelector를 사용하되, 객관식은 4번 반복되므로 querySelectorAll을 사용하여 선택해주겠습니다. 선택자지정시 한가지 꿀팁!!! quizChoice와quizSelect는 지.. 2022. 8. 8. 퀴즈 만들기 03/ 주관식 유형(다중) 퀴즈 만들기_주관식 유형(다중) 이번시간에는 저번시간에 만들었던 주관식 퀴즈의 다중유형을 만들어보겠습니다! 문제가 여러개가 될 경우 일일히 하나하나 언제 다 입력하겠어요? 이런 불편함을 자바스크립트를 통해서 보다 쉽게 해결해 봅시다. 원본 소스 보기 1_ 문제정보 및 선택자 지정 각 문제정보를 'quizInfo'라는 배열에 입력하고 저장시킨 후 반복해서 출력해야 하기 때문에 반복문을 활용해서 작업을 할거에요. 기존과 마찬가지로 querySelector를 활용하지만 이번엔 같은 이름을 가진 요소들이 중복되므로 중복되는 요소들 중에서도 특정 n번째 요소를 선택해 줄 수 있게 하기 위해서 querySelectorAll을 활용해서 작업해 주겠습니다. // 선택자 const quizType = document.q.. 2022. 8. 5. 요소 선택 요소 선택 자바스크립트에서 요소를 입맛대로 제어하기 위해서는 요소를 선택해야겠죠? 오늘은 이렇게 요소를 선택하기 위한 메서드 중 직접 선택하는 메서드에 대해서 알아보겠습니다. 요소 직접 선택 메서드 메서드 설명 getElementByld() document.getElementByld("content")일 경우 HTML요소 중 id 속성이 "content"인 요소를 선택합니다. getElementsByClassName() document.getElementsByClassName("menu")일 경우 HTML요소 중 class명이 "menu"인 요소들을 선택합니다. getElementsByTagName() document.getElementsByTagName("ul")일 경우 HTML요소 중 태그명이 "ul.. 2022. 8. 5. 이전 1 2 3 4 5 6 다음 반응형
