슬라이드 이펙트 - 트랜지션 효과 일정 시간을 기준으로 이미지가 변동되는 것을 만들어 보았습니다. 원본 소스 보기 원본 사이트 html css /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { position: relative; width: 800px; height: 450px; } .slider { position: absolute; left: 0; top: 0; } .slider::before { position: absolute; left: 5px; top: 5px; background: rgba(0,0,0,0..
슬라이드 이펙트 - 좌로 움직이기 이미지가 좌로 움직이는 유형입니다. 애니메이션 효과를 넣었습니다. 원본 소스 보기 원본 사이트 Javascript const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역 const slider = document.querySelectorAll(".slider"); //이미지 let currentIndex = 0; sliderInner.style.transition = "all 0.6s" setInterval(() => { currentIndex = (currentIndex + 1) % slider.length; sliderInner.style.transform = "translateX("+ -800..
CSS 요소 숨기기 CSS를 통하여 요소를 숨길 수 있습니다. 다양한 숨기는 방법을 알아봅시다. display: none; (애니메이션X, 영역X) 영역을 차지하지 않고, 공간을 차지하지 않는다. 요소가 없던 것처럼 표시 display: none; opacity: 0; (애니메이션O, 영역O) opacity는 0~1 사이, 0% ~ 100% 사이로 표시 할 수 있습니다. opacity는 불투명도라는 뜻입니다. 숫자가 클수록 불투명하고, 숫자가 작을 수록 투명합니다. opacity: 0; visibility: hidden; (애니메이션X, 영역X) 레이아웃에 영향을 미치지 않고 요소를 감춥니다. 사라진 공간은 빈 공간으로 영역이 남게됩니다. visibility: hidden; width: 0; height..
객관식(여러문제) 확인하기 : 점수 스크립트를 통해서 객관식문제의 전체문제 중에 몇 문제를 맞았는지 확인해봅시다. 원본 소스 보기 원본 사이트 html javascript를 통해 소스를 넣어주기 위해서, quiz__wrap안에 내용이 있었으나 지워줍니다. 코드 확인 문제 정보 여러개의 문제를 배열 속에 객체에 저장하여 활용합니다. 객관식 문제는 객체에 저장 코드 확인 //문제 정보 const quizInfo = [ { answerType: "웹디자인기능사 2011년 1회", answerNum: "1", answerAsk: "건강 이미지의 웹사이트를 구성하려고 한다. 가장 적합한 컬러는?", answerChoice: { 1: "빨강색", 2: "노랑색", 3: "검정색", 4: "녹색", }, answer..
객관식(여러문제) 확인하기 : 슬라이드 형식 스크립트를 통해서 객관식 여러문제를 한문제씩 출력하여, 정답과 해설을 확인합시다. 원본 소스 보기 원본 사이트 html 기본틀은 그대로 두면서 변동되는 부분만 주석처리 해둡니다. 코드 확인 정답입니다! 틀렸습니다! 다음 문제 보기 문제 정보 여러개의 문제를 배열 속에 객체에 저장하여 활용합니다. 객관식 보기의 내용은 배열[]을 이용합니다 코드 확인 //문제 정보 const quizInfo = [ { answerType: "웹디자인기능사 2011년 1회", answerNum: "1", answerAsk: "건강 이미지의 웹사이트를 구성하려고 한다. 가장 적합한 컬러는?", answerChoice: [ "빨강색", "노랑색", "검정색", "녹색", ], answ..
CSS 색상 표현 CSS의 색상은 글자색(color) 뿐 아니라 배경색(background), 테두리(border)등 다양한 CSS속성들이 적용됩니다. 다양한 색상 표현을 알아봅시다. 색상 이름 색상 이름으로 표현이 가능합니다. .blue { color: blue; } .green { color: green; } .silver { color: silver; } HEX (16진수) RGB 색상값을 16진수로 변환한 것입니다. 기본색(red, freen, blue)을 각각 00부터 FF까지 범위로 표현합니다. .blue { color: #0000FF; } .green { color: #008000; } .silver { color: #C0C0C0; } RGB RGB 색상은 각각 red, green, blue..
CSS 단위 CSS에는 다양한 형태의 단위가 있으며, 필요에 맞게 사용합시다. 절대 단위 규격이 정해져 있으며, 각 단위들 끼리 값 변환이 가능합니다. 단위 의미 cm 센티미터 단위 mm 밀리미터 단위 in 인치(inch) 단위로, 2.54cm과 같음 px 픽셀(pixels) 단위로, 1/96inch와 같음 px 포인트(point) 단위로, 1/72inch와 같음 pc 피카(picas) 단위로, 12pt와 같음 상대 단위 다양한 플랫폼들에 유동적으로 적용할 수 있습니다. 단위 의미 em 폰트의 기본 크기 값에 비례한 단위 ex 폰트의 기본 X 높이에 비례한 단위 ch "0"의 기본 폭에 비례한 단위 rem 최상위 요소의 폰트 크기에 비례한 단위 vw 뷰포트 너비에 비례한 단위 vh 뷰포트 높이에 비례한 ..
searchEffect03 charAt()를 이용하여 속성 첫글자 검색하기. 원본 소스 보기 원본 사이트 HTML 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 : 일부 요소가 생성하는 사용자 인터페이스 컨트롤의 강조색을 지정합니다. CSS keyword와 span에 대한 css내용을 추가합니다. .search__info .keyword { text-align: center; margin-bottom: 10px; } .search__info .key..
함수 유형 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){ document.wr..
search() 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 currentStr4 = str1.search("a"); //1 const currentStr5 = str1.search("v"); //2 const currentStr6 = str1.search("jquer..
charAt() / charCodeAt() charAt() 메서드는 지정한 인덱스의 문자를 추출하여 문자열을 반환합니다. charCodeAt() 메서드는 지정한 숫자의 유니코드 값을 반환합니다. "문자열".charAt(숫자); "문자열".charCodeAt(숫자); const str1 = "javascript reference"; const currentStr1 = str1.charAt(); const currentStr2 = str1.charAt("0"); const currentStr3 = str1.charAt("1"); const currentStr4 = str1.charAt("2"); const currentStr5 = str1.charCodeAt(); const currentStr6 = str1..
match() match() 메서드는 문자열을 검색하고 배열을 반환합니다. "문자열".match("검색값") "문자열".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.match(/Reference/); //null const currentS..
이미지 스프라이트 / IR 효과 / 백그라운드 표현 이미지 스프라이트 / IR 효과 / 백그라운드 표현에 대해서 알아봅시다. 이미지 스프라이트 스프라이트(Sprite) : 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미합니다. 웹에서 "여러 개의 이미지를 하나의 이미지로 만들어 놓는 것"을 의미합니다. 그에 대한 예시입니다. ♦︎ 장점 하나의 파일에 이미지들을 담아서 사용하기에 발생하는 장점 1. 이미지 로딩 속도 향상(최적화)됩니다. 2. HTML 마크업이 간결해지고 스크린 리더의 탐색 속도가 향상됩니다. 3. 하나의 파일만 관리하면 됩니다. ♦︎ 단점 1. 상황에 따라 유지보수가 어려울 수 있습니다. (이미지가 추가될 경우 스프라이트를 업데이트하고, 포지션 값의 수정이 필..
사이트 만들기 : 이미지유형03 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 이미지 유형에 대해 알아봅시다. grid를 사용하였으며, grid-gap 셀 사이의 간격, grid-template-rows 행 배치, grid-template-columns 열 배치 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); .gowun { font-family: GowunBatang; font-weight: 400; } /* reset */ * ..
블록 레벨 요소와 인라인요소 1. 블록 레벨 요소 (Block-level Element) 콘텐츠의 흐름이 끊기고, 요소를 구성하는 줄 하나를 다 차지합니다. 마크업 했던 , , 요소들은 블록의 성질을 가지고 있어 화면상 줄 바꿈 현상이 일어나는 것을 볼 수 있습니다. 블록 레벨 요소 블록 레벨 요소 성질 줄 바꿈이 생깁니다. See the Pen 블록 by kimyihyung (@kimyihyung) on CodePen. 2. 인라인 요소 (Inline Element) 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그를 할당된 공간만 차지합니다. 마크업 했던 , 요소들은 인라인 성질을 가지고 있어 행이 바뀌지 않고 한 줄로 출력 된 것을 볼 수 있습니다. 인라인 요소 인라인 요소는 한 줄로 출력됩니다. ..
SCSS scss는 sass의 3버전에서 등장한 언어입니다. css와 비슷한 구문을 가지고 있으며, css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트입니다. sass기능을 지원하며, css와 거의 같은 문법으로 사용되는 장점을 가지고 있습니다. Sass(SCSS) Sass란 Syntactically Awesome Style Sheets의 약자. CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주며 유지보수를 쉽게 해줍니다. CSS Preprocessor CSS가 동작하기 전에 사용하는 기능이며, 전처리기를 통해 쉽게 입력을 하고 CSS로 변환시키는 것입니다. CSS Preprocessor의 예로는 SCSS,Sass..
강아지 애니메이션 PUG와 SCSS를 이용해서 강아지 애니메이션을 만들었습니다. PUG pug를 이용해서 코드를 만듭니다. html보다 간결한 작성이 가능합니다. 들여쓰기로 영역을 구분하기에 닫는 태그를 적을 필요가 없습니다. .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 pug코드를 HTML코드로 컴파일한 코드. SCSS SCSS를 이용해서 코드를 만듭니다. css보다 간결한 작성이 가능합니다...
toUpperCase() / toLowerCase() toUpperCase()는 문자열을 대문자로 변경하고 toLowerCase()는 문자열을 소문자로 변경합니다. const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); document.querySelector(".sample02_N1").innerHTML = "1"; document.querySelector(".sample02_Q1").innerHTML = "javascript"; document.querySelector(".sample02_M1").innerHTML = "toUpperCase()"; document.querySelector(".sample02_P1").innerHTML =..
trim() / trimStart() / trimEnd() 문자열의 앞/뒤 공백을 제거합니다. trim() : 문자열의 앞/뒤 공백을 제거합니다 trimStart() : 문자열의 앞 공백을 제거합니다 trimEnd() : 문자열의 뒤 공백을 제거합니다 const str1 = " javascript "; const currentStr1 = str1.trim(); document.querySelector(".sample03_N1").innerHTML = "1"; document.querySelector(".sample03_Q1").innerHTML = str1; document.querySelector(".sample03_M1").innerHTML = "trim()"; document.querySelecto..
concat() concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. "문자열".concat(문자열) "문자열".concat(문자열, 문자열....) const str1 = "javascript"; const currentStr1 = str1.concat("reference"); //javascriptreference const currentStr2 = str1.concat(" ", "reference"); //javascript reference const currentStr3 = str1.concat(", ", "reference"); //javascript, reference const currentStr4 = str1.concat(", ", "reference", "..
replace() / replaceAll() replace() 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다. "문자열".replace("찾을 문자열", "변경할 문자열") "문자열".replace(정규식) "문자열".replace(정규식, "변경할 문자열") const str1 = "javascript reference"; const cirrentStr1 = str1.replace("javascript", "자바스크립트"); //자바스크립트 reference const cirrentStr2 = str1.replace("j", "J"); //Javascript reference const cirrentStr3 = str1.replace("e", "E"); //javascript rEferen..
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'] const currentStr3 = str1.split('', 1); // ['j'] const currentStr4 = str1.spli..
repeat() repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다. const str1 = "javascript"; const currentStr1 = str1.repeat(0); //'' const currentStr2 = str1.repeat(1); //javascript const currentStr3 = str1.repeat(2); //javascript javascript
padStart / padEnd padStart() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다. "문자열".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"); //456 const currentStr4 = str1.padStart(4, "0"); //0456 const currentStr5 = str1.padStart(5, "0"); //00456 const curren..
includes() includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다. "문자열".includes(검색값) "문자열".includes(검색값, 시작값) 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"); //true const currentStr5 = str1.includes("referen..
문자열 : 문자열 결합 / 템플릿 문자열 템플릿 문자열은 내장된 표현식을 허용하는 문자열 방식입니다. //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 num1 = 100; const num2 = ..
사이트 만들기 : 이미지유형02 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 이미지 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); .gmark { font-family: GmarketSans; font-weight: 500; } /* reset */ * { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } a { text-d..
