본문 바로가기

개발자182

간단한 애니메이션 02 간단한 애니메이션 02 간단한 애니메이션 만들기 두번째 시간입니다. 빙글빙글 돌아가는 조그만 두개의 공을 만들어보겠습니다. 01. HTML { } 02. CSS { body { height: 100vh; background-image: linear-gradient(-60deg, #ff5850 0%, #f09819 100%) } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; background: transparent; animation: loading 1s ease infinite; } .loading .circle1 { display: block; width: 20px; height: 20px; border-.. 2022. 8. 29.
간단한 애니메이션 01 간단한 애니메이션 01 간단한 애니메이션 만들기 첫번째 시간입니다. 둥근모서리의 굴러가는 사각형을 만들어보겠습니다. 01. HTML { } 02. CSS { body { height: 100vh; background-image: linear-gradient(to top, skyblue, pink); } .box { width: 50px; height: 50px; position:absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .box::before { content:''; width: 50px; height: 5px; background: #000; position: absolute; top: 58px; left:0; border-radi.. 2022. 8. 29.
요소 숨기기 요소 숨기기 오늘은 요소 숨기기 방법에 대해 알아보겠습니다. 01. display: none display: none은 렌더링트리와 접근성 트리에서 사라지게 합니다. 애니메이션도 안되고 영역도 사라진다. { .button { display: none; } } 02. opacity: 0 opacity: 0은 엘리먼트의 요소를 안보이게 하지만, 빈공간이 남아 있게 된다. 애니메이션이 되고 , 영역도 존재함 { .button { opacity: 0; } } 03. visibility: hidden visibility: hidden은 레이아웃에 영향을 미치지 않고 엘리먼트를 감춘다. 사라진 공간은 빈 공간으로 남으며, 리플로우가 일어나지 않는다. 애니메이션도 안되고 영역도 사라진다. { .button { vis.. 2022. 8. 25.
문제 06 퀴즈 이번 유형은 객관식(여러문제)-슬라이드형식이며 점수 확인이 가능합니다. 문제 06 Math.floor를 이용하여 점수를 문제수에 따라 소수점 없이 나오게 해줍니다. 틀린 문제를 모아서 빠르게 정리해봅시다. 원본 사이트 보기 원본 소스 보기 HTML 코드 { ${question.answerType} 정답입니다! 틀렸습니다! 다음 문제 보기 🫠 } Javascript 코드 매개변수를 이용해 HTML요소를 반복해서 적어야 하는 고생을 없애줍니다. 0부터 카운트하니 quizInfo.length-1을 해주고 Math.floor와 quizCount, quizScore를 이용해 합격여부(60%)와 맞춘 문제수, 점수를 나타내줍니다. { // 문제정보 const quizInfo = [...]; const quiz.. 2022. 8. 25.
사슴 그리기 사슴 그리기 사슴을 그려보겠습니다. 방법은 토끼 그리기와 같고 과정을 올리겠습니다. 스케치 과정 결과물 2022. 8. 24.
색상 표현 방법 색상 표현 방법 CSS로 색상을 표현하는 방법에는 여러가지가 있습니다. 이에 대해 알아보는 시간을 가지도록 하겠습니다. color, background-color로 텍스트, 배경색을 지정합니다. 01. 색상 이름으로 표현 { color: blue; color: red; } 02. RGB 색상 값으로 표현 { color: rgb(0,0,255); } 03. RGBA 색상 값으로 표현 RGBA 색상값은 RGB 색상값에 알파 채널 값을 더한 색상값입니다. 알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가집니다. { background-color: rgba(0,255,0,0.35) } 04. 16진수 색상 값으로 표현 { color: #1111ee; color: #d1d1.. 2022. 8. 23.
CSS 단위 CSS 단위 CSS에서 자주 사용하는 단위에 대해 알아보는 시간을 가지겠습니다. 글자 크기를 명시하지 않을 경우 기본 값은 16px 입니다. ▶ px 해상도에 따라 상대적으로 달라지는 기본단위로서, 아래와 같이 표현. font-size: 12px; ▶ % 부모 요소의 글자 크기를 100% 기준으로서 계산한 % 단위로서, 아래와 같이 표현. font-size: 150%; ▶ em 부모 요소의 글자 크기 100% 기준으로 계산한 100 분의 1 단위로서, 아래와 같이 표현. font-size: 1.5em; 특별한 설정이 없다면 16px가 1em이 되므로, 1.5em은 24px( 16px * 1.5 = 24px ) 가 된다. 부모가 10px일 경우 1.5em는 24px가됨. ▶ rem rem은 em과 비슷하지.. 2022. 8. 23.
Search Effect 03 Search Effect03 이번 시간에는 오늘 배운 charAt()을 활용하여 만든 검색 프로그램에 대해 알아보겠습니다. 알파벳은 클릭하면 그와 관련된 속성과 함께 설명이 나옵니다. 원본 사이트 보기 원본 소스 보기 01. HTML data-name과 data-type을 삭제해주었고 keyword를 만들어서 아래에 span으로 알파벳을 주었습니다. 코드 보기 { 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 전체 속성 갯수 : 0 accent-color : accent-color 속성은 다른 페이지 이동을 설정합니다. align-content : align-content 속성은 콘텐츠 아이템의 상하관.. 2022. 8. 23.
함수 유형 02 함수 유형 지난번 함수 시간에 이어서 이번 시간에는 좀 더 복잡한 함수 유형에 대해 알아보겠습니다. 01. 함수와 매개변수를 이용한 형태 함수 : 실행문 집합체, 재활용 { function func(num, str1, str2){ document.write(num + ". " +str1 + "가 "+ str2 +"되었습니다."); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); } 결과보기 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 제이쿼리가 실행되었습니다. 02. 함수와 변수를 이용한 형태 변수를 매개변수에 대입하여 사용합니다. { function func(num, str1, str2){.. 2022. 8. 23.
charAt() 문자열 객체 charAt()에 대해 알아보는 시간을 가지도록 하겠습니다. charAt() charAt() 함수는 문자열에서 특정 인덱스에 위치하는 유니코드 단일문자를 반환합니다. "문자열".charAt(숫자); { //14. 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. 23.
match() 문자열 객체 match()에 대해 알아보는 시간을 가지도록 하겠습니다. match() match() 메서드는 문자열이 정규식과 매치되는 부분을 검색합니다. 반환(배열) { //13 match : 반환(배열) { const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); //javascript const currentStr2 = str1.match("reference"); //reference const currentStr3 = str1.match("r"); //r const currentStr4 = str1.match(/reference/); //reference const currentStr5 = str1.matc.. 2022. 8. 23.
search() 문자열 객체 search()에 대해 알아보는 시간을 가지도록 하겠습니다. search() search() 메서드는 문자열(정규식)을 검색하고 위치값(숫자)를 반환합니다. "문자열".search("검색값"); "문자열".search("정규식 표현"); { //12 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 c.. 2022. 8. 23.
토끼 그리기 일러스트레이터 토끼만들기 일러스트레이터를 이용하여 토끼를 디자인 해봤습니다. 01. 토끼 스케치 작업 대상인 토끼 그림입니다. 02. 작업 1. 먼저 펜툴로 토끼의 외형을 따라 그립니다. 2. Expand후 Live paint-make를 해주고 색을 입혀줍니다 3. 그림자 효과를 입혀줍니다. 완성본 2022. 8. 22.
블록 구조(Block) / 인라인(Inline) 구조 블록구조(block) / 인라인 구조(inline) 블록구조 / 인라인 구조에 대해 알아보는 시간을 가지도록 하겠습니다. 01. 블록구조(block) / 인라인 구조(inline)의 특성 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 인라인 요소는 블록 레벨 요소와 달리 줄 바꿈 특성이 없습니다. 즉, 행이 바뀌지 않고 한줄로 출력됩니다. 마크업을 할 때 블록 레벨 요소와 인라인 요소의 특성을 잘 알고 있어야 문법적 오류를 방지할 수 있습니다. 특징을 정리해보면 아래와 같습니다. 요소 유형 특징 자주 사용하는 태그 블록 레벨 요소 1. 블록 레벨 요소는 줄 바꿈이 일어납니다. 2. 블록 레벨 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 3. 블록 레벨 .. 2022. 8. 20.
이미지 스프라이트 / IR 효과 / 백그라운드 표현 이미지 스프라이트 / IR 효과 / 백그라운드 표현 이미지 스프라이트 / IR 효과 / 백그라운드 표현에 대해 알아보는 시간을 가져보도록 하겠습니다. 01. 이미지 스프라이트 스프라이트(Sprite)이란 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미한다고 한다. 웹의 경우에서는 "여러 개의 이미지를 하나의 이미지로 만들어 놓는 것"을 의미한다. 예를 들어, 아래의 이미지처럼 6개의 로고를 하나의 이미지를 합치는 것이다. 01-1. 사용법 이미지 스프라이트는 태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용해서 삽입한다. { 유튜브 디스코드 인스타 크롬 페이스북 트위터 } { .image__sns a{ width: 36px; height: .. 2022. 8. 20.
이미지 유형 03 사이트 만들기 : 이미지 유형 03 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 이미지 유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 그리드 레이아웃 방식으로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 바다에 사는 동물들 바다에 사는 귀엽고 귀여운 동물들 리스트입니다. 바다에 사는 동물들 바다에 사는 귀엽고 귀여운 동물들 리스트입니다. 페이스북 페이스북 페이스북 페이스북 페이스북 바다에 사는 동물들 바다에 사는 귀엽고 귀여운 동물들 리스트입니다. 페이스북 페이지이동 바다에 사는 동물들 바다에 사는 귀엽고 귀여운 동물들 리스트.. 2022. 8. 19.
SCSS SCSS SCSS에 대해 알아보는 시간을 가지겠습니다. 01. 사용법 웹에서는 CSS에서만 동작합니다. CSS는 불편하니 일단 배제하고 우선 전처리기로 코딩합니다. 전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩이나 조건문, 반복문, 다양한 단위의 연산 등 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있습니다. 단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일합니다. 전처리기로 작성하고 CSS로 컴파일해서 동작시키는겁니다. 02. 사용 이유 보통 전처리기 3대장으로 Less, Sass(SCSS), Stylus가 있습니다. 기본적으로 모두 비슷하지만 Less의 경우 기능적 한계가 있으나 진입 장벽이 낮습니다. Stylus 같.. 2022. 8. 18.
SASS / Pug 강아지 애니메이션 강아지 애니메이션 이번 시간에는 SCSS와 Pug를 이용해서꼬리를 흔드는 강아지를 만들어보겠습니다. 01. html HTML은 Pug로 컴파일 시켜줍니다. body 안에 tail(꼬리) 8개를 넣어줍니다. torso(몸통), head(머리)를 만들어주고 그안에 알맞게 정렬을 맞추어 ears(귀),ear,eyes(눈),eye,muzzle(주둥이),tongue(혀)를 넣어줍니다. 코드 보기 { } 02. CSS CSS는 SCSS로 컴파일 시켜줍니다. animation 효과를 주어 꼬리를 흔들며 움직이게 해주고, 취향에 맞게 색과 모양을 맞춰줍니다. 코드 보기 { body { display: flex; flex-direction: column; justify-content: center; align-items.. 2022. 8. 18.
문제 05 퀴즈 이번 유형은 객관식(여러문제)이며 점수 확인이 가능합니다. 문제 05 count를 이용하여 문제를 세줍니다. 36문제 이상 "통과" / 미만 "불합격" 입니다. 원본 사이트 보기 원본 소스 보기 HTML 코드 { } Javascript 코드 push를 이용해서 forEach안에 HTML요소를 넣어줍니다. 이렇게 하면 한번만 적어도 됩니다. if와 count를 이용해서 36개 이상 맞은 사람만 합격처리 시켜줍니다. { // 문제정보 const quizInfo = [...]; let count = 0; const quizWrap = document.querySelector(".quiz__wrap"); const updateQuiz = () => { const exam = []; quizInfo.forE.. 2022. 8. 18.
이미지 유형 02 사이트 만들기 : 이미지 유형 02 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 이미지 유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01번 유형과 달리 애니메이션 효과가 들어갑니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 귀여운 동물들 귀엽고 귀여운 동물들 리스트 입니다. 멍멍이 자세히 보기 토끼 자세히 보기 판다 자세히 보기 } 03. CSS 텍스트 박스에 blur효과와 투명도를 줘서 예쁘게 꾸며줍니다. 이후 텍스트 박스에 hover와 bottom을 -100px를 주어 보이지 않게 했다가 마우스를 올리면 0을 주어 올라오게 하는 .. 2022. 8. 18.
이미지 유형 01 사이트 만들기 : 이미지 유형 01 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 이미지 유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 육식 동물들 사납고 무서운 동물들 리스트 입니다. 무서운 맹수 호랑이 호랑이는 무섭습니다. 무서운 맹수입니다. 호랑이는 사납습니다. 호랑이는 매우 위협적인 동물입니다. 만나면 도망가야합니다. 자세히 보기 사나운 맹수 늑대 늑대는 무섭습니다. 무서운 맹수입니다 늑대는 사납습니다. 늑대는 매우 위협적인 동물입니다. 만나면 도망가야 합니다. 자세히 보기 } 03. CS.. 2022. 8. 18.
includes() 문자열 객체 includes()에 대해 알아보는 시간을 가지도록 하겠습니다. includes() includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다. "문자열".includes(검색값); "문자열".includes(검색값,시작값); { //11 { const str1 = "javascript reference"; const currentStr1 = str1.includes("javascript"); //true const currentStr2 = str1.includes("j"); //true const currentStr3 = str1.includes("b"); //false const currentStr4 = str1.includes("reference.. 2022. 8. 18.
padStart() / padEnd() 문자열 객체 padStart() / padEnd()에 대해 알아보는 시간을 가지도록 하겠습니다. padStart() / padEnd() padStart()/padEnd() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다. "문자열".padStart(길이) "문자열".padStart(길이, 문자열) { //09 { //"문자열".padStart(길이) //"문자열".padStart(길이, 문자열) const str1 = "456"; const currentStr1 = str1.padStart(1, "0"); //456 const currentStr2 = str1.padStart(2, "0"); //456 const currentStr3 = str1.padStart(3, "0.. 2022. 8. 18.
repeat() 문자열 객체 repeat()에 대해 알아보는 시간을 가지도록 하겠습니다. repeat() repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다. { //08 { const str1 = "javascript"; const currentStr1 = str1.repeat(0); //'' const currentStr2 = str1.repeat(1); //javascript const currentStr3 = str1.repeat(2); //javascriptjavascript } } 2022. 8. 18.
concat() 문자열 객체 concat()에 대해 알아보는 시간을 가지도록 하겠습니다. concat() concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. "문자열".concat(문자열) "문자열".concat(문자열, 문자열....) { //07 { //"문자열".concat(문자열) //"문자열".concat(문자열, 문자열....) const str1 = "javascript"; const currentStr1 = str1.concat("reference"); //javascriptreference const currentStr2 = str1.concat(" ", "reference"); //javascript reference const currentStr3 = str1.conc.. 2022. 8. 17.
replace() / replaceAll() 문자열 객체 replace() / replaceAll()에 대해 알아보는 시간을 가지도록 하겠습니다. replace() / replaceAll() replace() 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다. "문자열".replace("찾을 문자열", "변경할 문자열") "문자열".replace(정규식) "문자열".replace(정규식, "변경할 문자열") { //"문자열".replace("찾을 문자열", "변경할 문자열") //"문자열".replace(정규식) //"문자열".replace(정규식, "변경할 문자열") const str1 = "javascript reference"; const currentStr1 =str1.replace("javascript", "자바스크립트"); //.. 2022. 8. 17.
split() 문자열 객체 split()에 대해 알아보는 시간을 가지도록 하겠습니다. split() 문자열에서 원하는 값을 추출 배열로 반환합니다. "문자열".split(구분자); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); { //05 { // "문자열".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.s.. 2022. 8. 17.
소문자 / 대문자 / 공백 문자열 객체 대/소문자와 공백에 관련된 메서드에 대해 알아보는 시간을 가지도록 하겠습니다. 01. toUpperCase() / toLowerCase() toUpperCase() : 문자열을 대문자로 변경하고, ToLowerCase()는 문자열을 소문자로 변경합니다. 번호 기본값 메서드 리턴값 1 javascript toUpperCase() JAVASCRIPT 2 JAVASCRIPT toLowerCase() javascript { // 02 { const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); document.querySelector(".sample02_N1").innerHTML = "1"; document.querySelector("... 2022. 8. 17.
문자열 결합 / 템플릿 문자열 문자열 객체 문자열 결합 / 템플릿 문자열에 대해 알아보는 시간을 가지도록 하겠습니다. 문자열 결합 / 템플릿 문자열 템플릿 문자열은 내장된 표현식을 허용하는 문자열 리터럴이다. 번호 기본값 메서드 리턴값 1 자바스크립트, 제이쿼리 문자열(string) 결합 자바스크립트제이쿼리 2 100, 200 숫자(number) 결합 300 3 모던, 자바스크립트, 핵심 문자열(string) 결합 나는 모던(morden) 자바스크립트 (javascript) 핵심을 배우고 싶다. 4 모던, 자바스크립트, 핵심 탬플릿 문자열 나는 모던(morden) 자바스크립트 (javascript) 핵심을 배우고 싶다. { //01 { const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.qu.. 2022. 8. 17.
indexOf() / lastIndexOf() 문자열 객체 문자열 객체에서 사용하는 메서드 중 indexOf()와 lastIndexOf에 대해 알아보는 시간을 가지도록 하겠습니다. indexOf() / lastIndexOf 문자열에서 특정 문자의 위치를 찾고 숫자를 반환합니다. "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) "문자열".lastIndexOf(검색값) "문자열".lastIndexOf(검색값, 위치값) { //10 { // "문자열".indexOf(검색값) // "문자열".indexOf(검색값, 위치값) // "문자열".lastIndexOf(검색값) // "문자열".lastIndexOf(검색값, 위치값) const str1 = "javascript reference"; const currentStr1 = st.. 2022. 8. 17.

HTML
CSS

JAVASCRIPT

자세히 보기