![]()
퀴즈 이펙트 - 객관식 (여러문제) 슬라이드 확인하기 자바스크립트를 이용해 다중문제가 나오도록 설정하였고 for문, forEach문을 사용해 코드를 효과적으로 사용하였습니다 또한 문제를 풀고 정답 확인 버튼을 누르면 맞은 문제 갯수와 틀린문제 갯수를 출력하도록 하였습니다. 문제 출력하기 강아지의 구성요소 입니다. 문제와 함께 같이 출력되는 강아지를 구성하였습니다. 문제출력코드 정답입니다! 틀렸습니다! Next! 출력하기 문제정보를 각각 변수명을 지정해 객체 속에 저장하였습니다. 60문제로 구성되었습니다. 문제정보 // 문제정보 const quizInfo = [ { answerType: "웹디자인 기능사 2012년 4회", answerNum: "1", answerAsk: "커뮤니케이션 디자인에 대한 설명으..
![]()
색상 표현 단위 색상을 지정하기 위해 키워드(red, blue…)를 사용할 수 있습니다. 그냥 색의 이름을 쓰면 되기때문에 사용이 간편하다는 장점이 있으나 표현할 수 있는 색상의 수는 제한된다. 단위 예시 HEX 코드 단위 (Hexadecimal Colors) viewport 너비의 1/100 RGB (Red, Green, Blue) viewport 높이의 1/100 RGBA (Red, Green, Blue, Alpha/투명도) rgba(255, 255, 0, 1) HSL (Hue/색상, Saturation/채도, Lightness/명도) hsl(0, 100%, 25%) HSLA (Hue, Saturation, Lightness, Alpha)) hsla(60, 100%, 50%, 1) #hex {back..
![]()
css 단위 크기 크기 단위 cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %, rem이다. px은 절대값이고 em, %는 상대값이다. 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. px 1050개의 픽셀을 가진다는 의미이다. 200만 화소(픽셀)의 디지털 카메라로 찍은 사진은 1600 * 1200 = 1,920,000으로 통상 200만 화소라 한다. 픽셀은 디바이스 해상도(resolution)에 따라 상대적인 크기를 갖는다. px은 요소의 크기나 이미지의 크기 지정에 주로 사용된다. % %는 백분률 단위의 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다. em em은 배수(..
![]()
서치 프로그램3 서치 프로그램을 만들어보았습니다. 알파벳을 선택했을 떄 그에 알맞는 알파벳을 첫 글자로 시작하는 요소들을 출력하도록 하였습니다. 또한 출력되는 요소의 갯수도 출력되도록 하였습니다. CSS CSS입니다. 이전과 동일한 css를 사용하였습니다. header, main, footer로 나누어서 작업하였습니다. css보기 :root { --htmlColor : #223547; --cssColor : #472222; --javascriptColor : #224736; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'NexonLv1Gothic'; color: var(--htmlColor); } *, *:before, *:afte..
![]()
search() / match() / charAt 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("jquery"); //-1 c..
![]()
1.벡터 기반으로 선을 그렸기 때문에 모든 선이 이어져 있지 않습니다. 2. Object에 Expand Appearence를 클릭해 선을 확장시키고 3. LIve paint를 사용하여 선을 채울 준비를 합니다.
![]()
이미지유형 03번 이번에 만들어볼 사이트입니다. 마우스를 이미지에 올리면 자세히보기와 설명이 나오는 방식을 사용하였습니다. 이번에는 grid방식을 사용하여 작업하였습니다.(flex방식을 사용하면 웹에서 이미지를 불러올때 한번에 불러오지 못해서 오류가 발생할 수 있기 때문입니다.) 피그마를 이용하여 이미지를 만들어 작업하였습니다. CSS img태그와 백그라운드 효과를 사용하여 이미지를 삽입하는 방식을 사용하였습니다. hover라는 css요소를 사용하여 마우스가 이미지에 올라가면 설명이 나오도록 작업하였습니다. 처음에 image__desc를 -100px로 위치시켜 보이지 않게하고 가상요소를 주어서 마우스가 이미지에 올라가면 0px로 바뀌도록하였습니다. 또한 opacity를 사용하여 투명도를 사용하여 효과를 ..
![]()
이미지유형 02번 이번에 만들어볼 사이트입니다. 마우스를 이미지에 올리면 자세히보기와 설명이 나오는 방식을 사용하였습니다. 피그마를 이용하여 이미지를 만들어 작업하였습니다. CSS img태그를 사용하여 이미지를 삽입하는 방식을 사용하였습니다. hover라는 css요소를 사용하여 마우스가 이미지에 올라가면 설명이 나오도록 작업하였습니다. 처음에 image__desc를 -100px로 위치시켜 보이지 않게하고 가상요소를 주어서 마우스가 이미지에 올라가면 0px로 바뀌도록하였습니다. /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); /* reset */ * { margin: 0; padding: 0; } a { t..
![]()
이미지유형 01번 이번에 만들어볼 사이트입니다. 자세히보기가 들어가있는 형식의 사이트입니다. 피그마를 이용하여 이미지를 만들어 작업하였습니다. CSS 이미지를 백그라운드 효과 방식으로 삽입하였습니다. flex를 사용하고 justify-content를 사용하여 이미지를 정렬하였습니다. 자세히보기와 내용을 백그라운드 이미지 삽입 방식을 통해 이미지 위에 배치하였습니다. /* font */ @import url('https://webfontworld.github.io/score/SCoreDream.css'); .score { font-family: 'SCoreDream'; } /* reset */ * { padding: 0; margin: 0; } a { text-decoration: none; color: ..
![]()
이미지 IR 효과 / 이미지 스프라이트 / 백그라운드 표현 IR 효과 웹접근성 연구소 사이트의 한국형 웹콘텐츠 접근성 지침에 따라 웹콘텐츠 제작기법을 보면준수해줘야 할것들이 있다. 웹접근성은 몸이 불편한 사람이라도 정보를 이용하는데 불편함이 없도록 하는것이 목적에 있기 때문에 만약 시각 장애인이 사이트를 이용할 경우 텍스트는 리더기로 읽어줄 수 있지만 이미지는 읽을 수가 없다 그래서 이미지에 텍스트를 붙여준다. 또한 css가 동작하지 않는 환경에서도 어떤 내용인지 파악이 가능해야 하기 때문에 백그라운드로 넣어주는 이미지라고 할지라도 텍스트를 써주는 것이 좋다. 이런걸 ir효과한다. .ir { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1p..
![]()
block / inline 요소 inline 요소 종류 특징 inline 요소 , , , , , , , , , , , , , ,
![]()
SCSS CSS와 SCSS는 몇가지 차이가 있지만 그중에서 가장 큰 차이는 변수를 만들 수 있습니다. 밑에 예시에서 확인하시겠습니다. 변수를 만드는 방법 예) SCSS 변수예시보기 $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } CSS로 보기 body { font: 100% Helvetica, sans-serif; color: #333; } olor: $primary-color; } 중첩 중첩 HTML 을 작성할 때 분명히 중첩되는 계층적인 구조 가 있습니다. 반면 CSS 는 그렇지 않습니다. Sass를 사용하면 HTML 의 동일한 시각적 계층 구조를..
![]()
SCSS를 이용하여 강아지 애니메이션 만들기 SCSS와 PUG를 이용하여 강아지 애니메이션을 만들어 보았습니다. 기존에 사용하던 HTML과 CSS와는 차이가 있었고 들여쓰기의 중요성이 커졌습니다. CSS와 SCSS는 몇가지 차이가 있지만 그중에서 가장 큰 차이는 변수를 만들 수 있습니다. 밑에 예시에서 확인하시겠습니다. CSS SCSS로 작업했던 것들을 CSS로 컴파일하여 다시 나타냈습니다. 두가지의 차이점을 보면서 어떻게 변형되었는지 확인해보는것이 좋겠습니다. CSS보기 body { display: flex; flex-direction: column; justify-content: center; align-items: center; } html, body { background: #96FF7B; wid..
![]()
서치 프로그램2 서치 프로그램을 만들어보았습니다. 이번 프로그램에서는 검색 하였을 때 각각 유형별로 출력할 수 있도록 만들었습니다. includes()메서드를 사용하여 작업하였습니다. CSS CSS입니다. 이전과 동일한 css를 사용하였습니다. header, main, footer로 나누어서 작업하였습니다. css보기 :root { --htmlColor : #223547; --cssColor : #472222; --javascriptColor : #224736; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'NexonLv1Gothic'; color: var(--htmlColor); } *, *:before, *:after { box..
![]()
문자열을 자르는 메서드 문서를 자르는 메서드indexOf(), LastIndexOf()등을 정리해 보았습니다. 또한 indexOf() 메서드도 정리하였고 출력값은 주석처리로 표현하였습니다. indexOf(), LastIndexOf() 문자열에서 특정 문자의 위치를 찾고 숫자를 반환합니다. "문자열".indexOf(검색값); "문자열".indexOf(검색값, 위치값); "문자열".lastIndexOf(검색값); "문자열".lastIndexOf(검색값, 위치값); const str1 = "javascript reference" const currentStr1 = str1.indexOf("javascript"); //0 const currentStr2 = str1.indexOf("reference"); //1..
![]()
문자열 : 문자열 결합 / 템플릿 문자열 변수는 데이터를 저장하는 저장소 입니다. 이 저장소에는 숫자, 문자, 함수, 객체 등을 저장할 수 있습니다. 문자열 좌우에서 공백을 제거, trim(),trimStart(),trimEnd() 템플릿 문자열은 간단하게 말해서 내장된 표현식을 허용하는 문자열 리터럴이다. 중괄호를 리터럴이라고 하고 ${} 리터럴 안에 변수를 넣는다. //01 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리"; document.querySele..
![]()
문자열을 찾는 메서드 replace(), replaceAll()을 정리해보았습니다. replace() 원본이름은 string.prototype.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..
![]()
문자열을 찾는 메서드 padStart(), padEnd()을 정리해 보았습니다. padStart(),padEnd() padStart()/padEnd() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다. "문자열".padStart(길이) "문자열".padStart(길이, 문자열) const currenStr1 = str1.padStart(1, "0"); //456 const currenStr2 = str1.padStart(2, "0"); //456 const currenStr3 = str1.padStart(3, "0"); //456 const currenStr4 = str1.padStart(4, "0"); //0456 const currenStr5 = str1.padStar..
![]()
문자열을 변경 메서드 문자열 메서드 : 변경 : toUppercase() : 문자열을 대문자로 변경 : 반환(문자열), toLowerCase() : 문자열을 소문자로 변경 : 반환(문자열) toUppercase() toUppercase() : 문자열을 대문자로 변경하는 메서드 입니다. toLowerCase() : 문자열을 소문자로 변경하는 메서드 입니다. const str1 = "javascript"; const currentStr1 = str1.toUpperCase() document.querySelector(".sample01_N3").innerHTML = "1"; document.querySelector(".sample01_Q3").innerHTML = "javascript"; document.qu..
![]()
문자열을 변경하는 메서드 trim(),trimStart(),trimEnd()을 정리해 보았습니다. 문자열 좌우에서 공백을 제거, trim(),trimStart(),trimEnd() trim() 메서드는 문자열 좌우에서 공백을 제거. trimStart() 메서드는 문자열 시작 부분에서 공백 문자를 제거하는 데 사용되는 문자열 메서드입니다 trimEnd() 메서드는 문자열 끝부분의 공백을 제거합니다. 또 해당 메서드는 trimRight() 라는 별칭으로 호출이 가능합니다. const str = " javascript "; const currentStr = str.trim(); document.querySelector(".sample03_N1").innerHTML = "1"; document.querySele..
![]()
서치 프로그램 서치 프로그램을 만들어보았습니다. CSS, JAVASCRIPT, HTML 페이지를 각각 만들어서 서치할 수 있도록 하였습니다. CSS CSS입니다. header, main, footer로 나누어서 작업하였습니다. css보기 :root { --htmlColor : #223547; --cssColor : #472222; --javascriptColor : #224736; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'NexonLv1Gothic'; color: var(--htmlColor); } *, *:before, *:after { box-sizing:border-box; } a { color: var(--htmlCol..
![]()
문자열을 자르는 메서드 문서를 자르는 메서드slice(), substring(), substr()등을 정리해 보았습니다. 또한 indexOf() 메서드도 정리하였고 출력값은 주석처리로 표현하였습니다. slice() 문자열에서 원하는 값을 추출하여 반환하는 메서드 입니다. 반환할때는 문자열을 반환합니다. slice(시작위치), slice(시작위치, 끝나는위치) 시작위치 < 끝나는위치 const str1 = "javascript reference"; const currentStr1 = str1.slice(0); //javascript reference const currentStr2 = str1.slice(1); //avascript reference const currentStr3 = str1.slice(..
![]()
정규표현식 객체 주요패턴 정규표현식 객체는 정해진 문자의 패턴을 만들 때 사용합니다. 패턴 설명 abc abc 문자열을 검색합니다. /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색합니다. /[^abc]d/는 'ab', 'bd', 'cd' [^abc] a, b, c를 제외한 문자 하나를 검색합나다. /[^abc]d/는 'ed','fd','gd' [A-Z]; 알파벳 대문자 문자를 검색합니다. [a-z] 알파벳 소문자 문자를 검색합니다. [0-9] 0-9까지의 숫자를 검색합니다. . 하나의 문자를 검색합니다. 만약 '마침표'문자 그대로의 의미를 사용할 경우 '￦.'으로 표현해야 합니다. \w 알파벳, 숫자, _를 검색합니다. \W 알파벳, 숫자, _를 제외하고 검색합니다. \d 숫자를 검..
![]()
구조 관련 요소 ,,,,, 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 1. HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용들을 포함할 수 없습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 , 태그는 포함할 수 없습니다. 1. HTML 문서에서 맥락이 같은 요소ㅡㄹ을 주제별로 그룹화 해주는 태그이며 섹션 주제에 대한 제목요소 ~를 포함하는 것이 좋습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. 1.HTML 문서의 푸터 영역을 의미하는 태그로 섹션 작성자나 저작권에 대한 정보, 관련된 문서의 링크를 포함할 수 없습니다. 2. 텍스트, 인사인 요소, 블록 레벨 요소를 포함할 수 있지만 ,태그는 포함할 수 없습니..
![]()
미디어 쿼리(media query) 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 최소 가로톡이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결하는는 뜻입니다. 태블렛이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbsr를 누르면 기기마다의 해상도도 확인할 수 있고 기기모델도 추가할 수 있습니다. 모바일 기기 가로 세로 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..
![]()
CSS기본문법 CSS기본 문법에 대해 설명드리겠습니다. 내부 스타일시트 CSS를 HTML문법 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들 p { color : red ; }의 의미는 p태그 안의 글자 색상을 빨간색으로 설정하라는 뜻입니다. 결과보기 우리를 기쁘게하는 것들. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장 자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용돠는 반면, 외부 스타일시트는 그 스타일을 선언한 모든 HTML페이지에 적용 됩니다. ▶css 파일의 상단에는 @cha..
![]()
내장 함수 내장 함수는 자바스크립트에 기본적으로 내장되어 있는 함수들을 말합니다. ▶인코딩, 디코딩 함수 'http://icoxpublish.com/search?query= 자바스크립트'와 같이 URL주소에 쿼리 정보를 전송하여 데이터를 처리 해야 되는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 이런 경우 인코딩 함수를 이용히여 문자를 부호화 시키고 부호화된 문자를 다시 디코딩 하무스를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent() 영문, 숫자와 () -_.~*!을 제외한 문자를 인코딩합니다. decodeURIComponent() decodeURIComponent()의 디코딩 함수 ▶숫자, 유/무한 값 판별 함수..
![]()
배열 메서드 속성의 값으로 함수가 올 수도 있는데, 이러한 속성를 메서드(method)라고 합니다. push() push() : 배열 마지막 요소에 추가 합니다. push(600)을 사용했기 때문에 배열에 마지막 요소에 600이 추가 되었습니다. >const arrNum = [100, 200, 300, 400, 500]; const arrPush = arrNum.push(600); document.querySelector(".sample03_N1").innerHTML = "1"; document.querySelector(".sample03_Q1").innerHTML = "[100, 200, 300, 400, 500]"; document.querySelector(".sample03_M1").innerHTM..
![]()
결과 카드유형03 이번 유형은 전체 레이아웃을 구성하고 card__inner, card__content, card__footer로 구성하여 사용하여 작업하였습니다 CSS 폰트는 import방식을 사용하여 에스코어드림 폰트를 사용하였습니다. 우선 오른쪽 칸에 선을 주어 적절하게 배치하였습니다. 그리고 알맞은 위치에 이미지와 내용을 배치하도록 했습니다. 사진에 들어가는 animal박스도 figcaption태그에 position을 card__header태그를 기준으로 잡고 배치하였습니다. 또한 웹 표준을 시멘틱 태그 뒤에는 무조건 제목이 와야하지만 눈에 보이지 않게 하기위한 설정을 넣어주었습니다. (네이버 사이트를 참고하였습니다.) /* fonts */ @import url('https://webfontwor..
