본문 바로가기
이미지 슬라이드 01 이미지 슬라이드 유형 01 setInterval()를 이용하여 몇 초마다 5개의 이미지가 변하는 유형을 제작하였습니다. 01. HTML 이미지 위에 두번의 부모를 감쌌습니다. 첫번째 부모는 모두 같은 class를 주었습니다. 02. javascript 아래는 자바 스크립트 입니다. 선택자를 부여하고 약 3000 = 3초에 slider.length인 이미지의 갯수를 움직이면 됩니다. const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = sliderWrap.querySelector(".slider__img") const slider = sliderWrap.querySelectorAll(".slider") let current.. 2022. 8. 29.
두 원이 돌아가는 애니메이션 두 원이 움직이는 애니메이션 codepen에서 두 원이 한 방향으로 움직이는 애니메이션을 만들어보았습니다. 01. HTML 두 원과 애니메이션을 주기 위한, 부모박스가 있습니다. 02. css 동그란 두 원을 만들고 위치값을 설정해준 뒤, rotate로 빙빙 돌아가게 만들어줍니다. body { height: 100vh; background-image: linear-gradient(-60deg, #f973b5 0%, #f1dcff 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease 100 ; } .loading .circle1 { display: blo.. 2022. 8. 29.
박스가 움직이는 애니메이션 박스가 움직이는 애니메이션 codepen에서 굴러가는 박스를 만들어보았습니다. 01. HTML 정직하게 정말 박스 하나만 있습니다. 02. css 박스와, 그림자에 부여하는 것 빼고는 키프레임으로 움직임을 부여하면 되는 간단한 애니메이션입니다. body { height: 100vh; background-image: linear-gradient(to top, #9048d4,#18cfd7); } .box { width: 50px; height: 50px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } .box::before { content: ''; width: 50px; height: 5px; background-colo.. 2022. 8. 29.
요소를 숨기는 방법 요소를 숨기는 법 요소를 숨기는 법은 총 다섯가지가 있습니다. 한번 살펴봅시다. 01. display를 사용하는 방법 요소가 있는 블럭을 건드리는 방법입니다. 영역을 없애버리면서 애니메이션도 쓸 수 없게 만듭니다. .원하는 영역 { display : none; } 02. opacity 사용하는 방법 투명도를 조절하는 방법 입니다. 영역도 살릴 수 있고 애니메이션도 사용할 수 있습니다. .원하는 영역 { opacity : 0; } // 투명도를 0으로 만듬 03. visibility 사용하는 방법 레이아웃을 변경하지 않고 요소를 보이거나 숨기는 방법입니다. 영역을 없애버리면서 애니메이션도 쓸 수 없게 만듭니다. .원하는 영역 { visibility : hidden; } //숨긴다 04. whidth와 he.. 2022. 8. 25.
퀴즈 유형 06 06. 퀴즈 유형 객관식 문제로 답을 선택하고 정답을 확인했을 때에 여러 문제 중 정답을 맞춘 갯수가 무엇인지, 또한 정답의 갯수가 합격점인지 확인해보았습니다. 자바스크립트입니다. 확인 버튼을 누르고 정답을 확인하면서 몇 문제가 정답인지 또 36문제 이상을 맞춰서 합격인지 아닌지 스크립트를 짜보았습니다. const quizQuestion = document.querySelector(".quiz_question") //문제 번호와 질문 const quizSelects = document.querySelector(".quiz_selects") //객관식 보기 const quizType = document.querySelector(".quiz_type") //문제타입 const quizResult = docu.. 2022. 8. 24.
퀴즈 유형 05 - 점수 05. 퀴즈 유형 객관식 문제로 답을 선택하고 정답을 확인했을 때에 여러 문제 중 정답을 맞춘 갯수가 무엇인지, 또한 정답의 갯수가 합격점인지 확인해보았습니다. 자바스크립트입니다. 확인 버튼을 누르고 정답을 확인하면서 몇 문제가 정답인지 또 36문제 이상을 맞춰서 합격인지 아닌지 스크립트를 짜보았습니다. //선택자 const quizWrap = document.querySelector(".quiz_wrap") ; let quizScore = ""; //문제 출력 const updateQuiz = () => { const exam = []; quizInfo.forEach((question,number)=>{ exam.push(` ${question.answerType} ${question.answerNum.. 2022. 8. 24.
사슴 그리기 사슴 그리기 01. 스케치를 가져옵니다. 02. 스케치를 사용해서 펜툴로 선을 땁니다. 03. 선 안에 밑색을 채웁니다. 04. 아래는 목업으로 사슴을 실제 상품처럼 보정해보았습니다. 2022. 8. 24.
css 색상 표현 CSS의 색상 표현 방법들 css로 색상을 표현하는 방법은 여러가지가 있습니다. 어떠한 방법이 있는지 알아봅시다. 01. 색상의 이름으로 표현 white나, black, red등 색상의 이름으로 결정해줄 수 있습니다. 그러나 세세한 채도나 명도의 변경을 할 수는 없어 잘 쓰이진 않습니다. color : blue; background-color : red; 02. 색상의 코드로 표현 #RRGGBB 형식의 16진수 색상 값을 이용하여 표현하는 방법이다. RR, GG, BB는 각각 red, green, blue를 나타내는 값이며 16진수 00에서 FF사이의 값으로 결정됩니다. color : #0099a4; background-color : #8f31ea; 03. RGBA로 표현 RGB 표현의 확장으로, 불투명.. 2022. 8. 23.
CSS의 단위 CSS의 단위들 01. CSS의 절대 길이 단위들 단위 설명 cm 센티미터 mm 밀리미터 in 인치 px 픽셀 02. CSS의 상대 길이 단위들 단위 설명 예시 em 폰트 크기를 설정하는 값 중 em은 동적으로 변경되는 사이즈를 가집니다. 아무런 적용이 없다면 16px가 보통이 됩니다. font-size : 1em rem rem은 합성 문제를 해결하기 위해 만들어졌습니다., rem은 부모 엘리먼트가 아닌 최상위 엘리먼트에 기준을 둡니다. font-size : 1rem vh 반응형 작업을 위해 뷰포트의 사이즈의 높이에 맞춰 퍼센트로 작업하기 위해 만든 단위입니다. height: 100vh; vw 반응형 작업을 위해 뷰포트나 사이즈의 넓이에 맞춰 퍼센트로 작업하기 위해 만든 단위입니다. font-size: .. 2022. 8. 23.
일러스트레이터 - 토끼 토끼 그리기 01. 스케치를 가져옵니다. 02. 스케치를 사용해서 펜툴로 선을 땁니다. 03. 선 안에 밑색을 채웁니다. 04. 그 뒤 명암을 넣고 완성합니다. 2022. 8. 22.
search() search() 란? indexOf와 같이 문자열을 검색할 때에 검색 값에 따라 숫자를 반환합니다. 또한 정규식 표현이 가능합니다. const str1 = "cat do funch" const currentStr1 = str1.search('cat'); //0 const currentStr2 = str1.search('funch'); //5 const currentStr3 = str1.search(/[a-z]/g); //0 "문자열".search("검색값"); "문자열".search(정규식 표현); const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); //0 const currentStr2 = str1.sea.. 2022. 8. 22.
match() match() 란? search()과 비슷한 메서드이며 원하는 값을 검색할 때에 배열로 반환합니다. 또한 정규식 표현이 가능합니다. const str1 = "cat do funch" const currentStr1 = str1.match('cat'); //'cat' const currentStr2 = str1.match('funch'); //'funch' const currentStr3 = str1.match(/c/g); //(2) 'c','c' "문자열".search("검색값"); "문자열".search(정규식 표현); const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); //'javascript' const.. 2022. 8. 22.
charAt() charAt() 란? search()나 indexOf()와 비슷하나, 숫자로 검색 할 시 검색값이 문자열로 나옵니다. const str1 = "cat do funch" const currentStr1 = str1.charAt(); //c const currentStr2 = str1.charAt('0'); //c const currentStr3 = str1.charAt("5"); //f "문자열".charAt(숫자); const str1 = "javascript reference"; const currentStr1 = str1.charAt(); //j const currentStr2 = str1.charAt("0"); //j const currentStr3 = str1.charAt("1"); //a con.. 2022. 8. 22.
함수 02 함수 02 함수에 변수를 이용해 여러가지를 출력하거나, 객체 안에 변수를 넣는 등 프로토 타입이나 객체 리터럴 함수를 정리해보았습니다. 01. 함수와 매개변수를 이용한 형태 func에 변수를 저장 하였을 때, 다시 매개변수를 통해 값을 저장해 출력할 수 있었습니다. function func(str1, str2){ document.write(str1 + "와" + str2 + "는 귀엽다." ) } func("강아지","고양이"); func("햄스터", "토끼") 02. 함수와 변수를 이용한 형태 func에 변수를 저장 하였을 때, 다시 const에 변수를 출력할 수 있었습니다. function func(str1, str2){ document.write(str1 + "는" + str2 + "가 귀엽다.").. 2022. 8. 22.
인장 이미지 변경 인장 이미지를 변경했습니다! 아파서 그냥 잘려다가 스트레스 받아서 그림 그리고 싶더군용 나중에 이렇게 그림을 그리는 이벤트 열면 참여하실 분 계신가요? 2022. 8. 21.
이미지 유형 03 Imge type 03 피그마에서 디자인 하여, zeplin을 참고해 만든 이미지 타입 사이트 입니다. 아래는 피그마를 이용해 먼저 디자인 하였습니다. 이후 코드로 작성하였습니다. HTML 이미지에 마우스를 올리면 반응을 할 수 있는 반응형 카드유형을 제작했습니다. 세상에서 가장 아름다운 건물 웹쓰가 선정한 죽기전에 가봐야 할 건축물 베스트5입니다. 전세계에서 가장 유명한 건축가가 제작한 건축물로써 한번은 꼭 가봐야 하는 곳입니다. 셰이크 로트폴라 모스크 세계에서 가장 유명한 건물입니다. 최고의 건출물이나 현재는 전쟁으로 인해서 많이 파괴되었지만. 아직도 살 수 있다고 말한... 링크 트위터 인스타 유트브 페이스 북 셰이크 로트폴라 모스크 세계에서 가장 유명한 건물입니다. 최고의 건출물이나 현재는 전쟁으.. 2022. 8. 21.
블록 구조 / 인라인 구조 블록 구조와 인라인 구조 HTML의 태그들은 블록 요소와 인라인 요소로 분류됩니다. 블록 구조의 태그들은 보통 div , p, h1-h6, ul, li, ol, table이 있고, 인라인 구조에서는 span , a, em, i, strong이 있습니다. 블록 구조와 인라인 구조의 비교 코드펜에서 둘을 비교해 보았습니다. See the Pen Untitled by Packsunhye (@packsunhye) on CodePen. 둘을 사용하였을 때에 특징의 비교 블록 구조 인라인 구조 줄바꿈이 일어날정도로 한 줄을 차지하고 있습니다. 줄바꿈을 하지 않고 태그 안에 쓰여진 내용만큼만 공간을 차지합니다. 블록 구조 안에는 블록 구조나 인라인 구조가 올 수 있습니다. 인라인 구조 안에는 인라인 구조는 올 수 있.. 2022. 8. 20.
이미지 스프라이트 이미지 스프라이트 란? 스프라이트(Sprite)이란 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미한다고 한다. 웹의 경우에서는 여러 개의 이미지를 하나의 이미지로 만들어 놓는 것"을 의미"한다 아래는 예시입니다. 장점 단점 이미지 로딩 속도 향상(최적화)된다. 상황에 따라 유지보수가 어려울 수 있다. HTML 마크업이 간결해지고 스크린 리더의 탐색 속도가 향상된다. 데이터 관리에 문제가 생기면 이미지의 로딩이 불가능하다. 하나의 파일만 관리하면 된다. - 이미지 스프라이트 사용하는 법 //사용하는 html 링크 /* ir 효과 */ .ir { display: block; overflow: hidden; font-size: 0; line-height: 0; text-inden.. 2022. 8. 20.
퀴즈 유형 05 60문제 풀어보기 원본 사이트 달려가기 오답노트 2022. 8. 18.
Sass Sass 란? Sass는 컴파일 과정을 통해 CSS 파일을 생성해 주는 CSS의 확장 언어이자 전처리기(preprocessor)로써, 이 기능들은 코드 작성에 드는 시간을 줄여주고, 코드를 유지 관리하는 데 도움이 됩니다. Sass는 CSS의 확장 언어이고, 이는 결국 CSS 코드를 생산해내기 위해 사용하는 일종의 도구인 셈입니다. Sass가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass를 통해 스타일시트를 생산하는 절차입니다. Sass를 사용하는 이유 01. 호환성: 모든 버전의 CSS와 완벽하게 호환됩니다. 02. 기능성: 다양한 기능을 제공하고, 거의 모든 면에서 뛰어납니다. 03. 안정성: 오랜 기간 적극적인 지원 아래 관리되어 왔습니다. 04... 2022. 8. 18.
강아지 애니메이션 강아지 애니메이션 코드펜에서 pug나 sass 언어를 사용해 열정적으로 꼬리를 강아지를 만들어보았습니다. 01. pug 코드 펜에서는 html을 pug로 탭만을 이용하여 부모와 자식의 관계를 설정할 수 있습니다. 강아지의 구조를 pug로 디자인 해보았습니다. .dog .dog-body .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-torso .dog-head .dog-ears .dog-ear .dog-ear .dog-eyes .dog-eye .dog-eye .dog-muzzle .dog-tongue html로 변경했을 때에 sass sass 확인하기 &$dog-width: 100px; $interva.. 2022. 8. 18.
Imge type 02 Imge type 02 피그마에서 디자인 하여, zeplin을 참고해 만든 이미지 타입 사이트 입니다. 아래는 피그마를 이용해 먼저 디자인 하였습니다. 이후 코드로 작성하였습니다. HTML 카드들은 컨테이너를 부여해 display : flex 를 주기 쉽게 하였습니다. 해파리의 떠다니는 모습들 투명한 해파리들이 다채로운 바다상에서 깊게 유영하고 다니며 영롱한 색상을 드러내고 있어요 파란색 해파리 자세히 보기 보라색 해파리 자세히 보기 투명한 해파리 자세히 보기 CSS 공통 요소 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Goth.. 2022. 8. 17.
Imge type 01 Imge type 01 피그마에서 디자인 하여, zeplin을 참고해 만든 이미지 타입 사이트 입니다. 아래는 피그마를 이용해 먼저 디자인 하였습니다. 이후 코드로 작성하였습니다. HTML 카드들은 컨테이너를 부여해 display : flex 를 주기 쉽게 하였습니다. 고양이는 왜이리 귀여운가? 고양이는 보들보들 가슴털과 말랑말랑 발바닥을 가지고 있기 때문이죠. 고양이 보들 가슴털 고양이 보들보들 가슴털을 볼때마다 만지고 싶은데 만지면 도망가거나 물어버려서 나는 울 수 밖에 없는것이였다. 그래도 기분 좋으면 만지게 해줌 자세히 보기 고양이 말랑 발바닥 고양이 발바닥 만지는건 참을 수가 없다. 이미 만져서 358번 물렸지만 그래도 똑같이 만질 것이다. 다들 고양이 젤리 만져봤나? 나는 만졌지롱 자세히 보기.. 2022. 8. 17.
검색 유형 02 검색 유형 02 includes()를 이용하여 단어를 검색하였을 때 정보가 나오도록 작업하는 방식 입니다. 01. HTML 먼저 HTML 입니다. 정리를 해주는건 리스트로 만드는 것은 같지만 데이터가 어떤 것인지 구별하기 위해 data-name 과 data-type 을 넣어 지정해 줄 수 있도록 하였습니다. includes()를 이용하여 검색하기 HTML 태그 검색하기 검색하기 플렉스, 애니메이션, 애니메이션, 기타 등등 유형 별로 검색해보세요! 전체 속성 갯수 : 0 { const cssName = el.dataset.name; //css 속성 모든 값 const cssType = el.dataset.type; //css 속성 모든 값 // console.log(cssName) // "all".incl.. 2022. 8. 17.
includes() includes()란? includes()는 문자열 포함 여부를 검색하여, 불린(ture,false)을 반환해주는 메서드 입니다. const str1 = "sleep cat" const currentStr1 = str1.includes("sleep"); //true const currentStr2 = str1.includes("cat"); //true const currentStr3 = str1.includes("s"); //true const currentStr4 = str1.includes("b"); //false //포함 여부를 나타냄 "문자열".includes(검색값) "문자열".includes(검색값, 시작값) const str1 = "javascript reference"; const curr.. 2022. 8. 17.
padStart() / padEnd() padStart() / padEnd()란? padStart()/padEnd()는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환해주는 메서드 입니다. const str1 = "cat" const currentStr1 = str1.padStart(1,"0"); //cat const currentStr2 = str1.padStart(3,"0"); //cat const currentStr3 = str1.padStart(4,"0"); //0cat const currentStr4 = str1.padStart(6,"0"); //000cat const currentStr4 = str1.padEnd(3,"0"); //cat const currentStr5 = str1.padEnd(4,"0"); //c.. 2022. 8. 17.
repeat() repeat() 란? repeat()는 문자열을 복사하여, 복사한 새로운 문자열을 반환해주는 메서드입니다. const str1 = "cat" const currentStr1 = str1.concat("0"); //'_' //공백 const currentStr2 = str1.concat("1"); //cat const currentStr3 = str1.concat("3"); //catcatcat "문자열".repeat(숫자) const str1 = "javascript"; const currentStr1 = str1.repeat("0"); //'' const currentStr2 = str1.repeat("1"); //javascript const currentStr3 = str1.repeat("2"); .. 2022. 8. 17.
concat() concat() 란? concat()는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환해주는 메서드입니다. const str1 = "cat" const currentStr1 = str1.concat("sleep"); //catsleep const currentStr2 = str1.concat(" ","sleep"); //cat sleep const currentStr3 = str1.concat(" ",["so","cute"]); //cat so,cute "문자열".concat(문자열) "문자열".concat(문자열,문자열...) const str1 = "javascript"; const currentStr1 = str1.concat("reference") //javascriptreference con.. 2022. 8. 17.
replace() / replaceAll() replace() / replaceAll() 란? replace()는 문자열을 부분 문자열로 구분하고 배열로 반환하는 메서드입니다. replaceAll()은 복수의 문자열을 변경하고 싶을 때에 사용합니다. const str1 = "cat so cute" const currentStr1 = str1.replace("cat", "고양이는"); //고양이는 so cute const currentStr2 = str1.replace("a","A"); //cAt so cute const currentStr3 = str1.replace("c","C"); //Cat so cute // 첫번째 문자만 변경한다. const currentStr4 = str1.replaceAll("c","C"); //Cat so Cute ".. 2022. 8. 17.
split() split() 란? 문자열에서 원하는 값을 추출 할 수 있는 메서드입니다. const str1 = "cat do funch" const currentStr1 = str1.split(''); //['c','a','t','d','o','f','u','n','c',h] const currentStr2 = str1.split('',1); // c const currentStr3 = str1.split('o'); //['cat','d','funch'] "문자열".split(구분자); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); const str1 = "javascript reference"; const currentStr1 = str1.split(''); //['j', 'a', '.. 2022. 8. 17.
고양이 고양이
고양이 고양이
고양이 고양이

티스토리툴바