사이트 만들기 : 이미지유형01 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 이미지 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } i..
searchEffect02 includes()를 이용하여 검색하기. 타입 검색 기능 추가. 원본 소스 보기 원본 사이트 HTML 데이터 구분을 위해 data-name을 활용합니다. data-type을 추가하여 타입으로도 검색이 가능하도록 하였습니다. includes()를 이용하여 검색하기 CSS 속성 검색하기 검색하기 플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요! 전체 속성 갯수 : 0 align-content : align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : align-self 속성은 개별적인 콘텐츠 아이템의 정렬..
searchEffect01 indexOf()를 이용하여 키워드 검색하기. 원본 소스 보기 원본 사이트 HTML 데이터 구분을 위해 data-name을 활용합니다. indexOf()를 이용하여 검색하기 HTML 태그 검색하기 검색하기 a : a 태그는 다른 페이지 이동을 설정합니다. abbr : abbr 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. acronym : acronym 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. address : address 태그는 웹 페이지의 연락처 정보를 설정합니다 applet : applet 태그는 애플랫 요소를 설정합니다. 현재는 사용하지 않습니다. area : area 태그는 이미지 맵의 영역을 정의합니다. article : article 태그는 사이트..
slice() / substring() / substr() 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(2); //vascript refere..
indexOf() / lastIndexOf 문자열에서 특정 문자의 위치를 찾고, 숫자를 반환합니다. "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) 내장함수 indexOf() 함수는 문자열에서 원하는 문자열을 검색하여 찾거나, 배열에서 원하는 특정 배열값의 존재여부 등을 확인할 수 있습니다. 배열의 경우 위치값을 index로 반환하는 함수입니다. 중복되는 문자가 있을 경우, 가장 먼저 위치 하는 값이 출력 됩니다. 데이터가 없을 경우에는 -1이 출력 됩니다. 내장함수 lastIndexOf() 함수는 indexOf()와 다르게 뒤에서 부터 검색을 하여 찾습니다. 결과로는 앞에서 부터의 위치를 반환합니다. const str1 = "javascript reference"; cons..
정규표현식(RegExp) 정규표현식 객체는 정해진 문자의 패턴을 만들 때 사용합니다. 문자나 숫자 패턴 같은 간단한 정규표현식부터 조금씩 연습하는 것이 좋습니다. var reg = /Javascript/; var reg = new RegExp('Javascript'); 정규표현식 객체 주요 메서드 속성값 속성 설명 test() 정규표현식과 일치하는 문자열이 있으면 true, 없으면 false를 반환합니다. var reg = /Javascript/; consloe.log(reg.test('Javascript')); // true consloe.log(reg.test('script')); // false match() 정규표현식과 일치하는 문자열을 배열로 만듭니다. 일치하는 문자열이 없으면 null을 반환합..
미디어쿼리 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 최소 가로폭이 1000px, 즉 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다. 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 또한 다음 트로이(http://troy.labs.daum.net/)에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수 있는 VIEW를 제공합니다. 모바일 기기 가로 세로 IPhone X 375 812 IPhone 6, 7, 8 375 667 IPhone 6, 7, 8 plus ..
구조 관련 요소 HTML5에서는 구조를 설계할 수 있는 구조 관련 요소가 추가되었습니다. main, nav, section, article, aside, header, footer 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 반응형웹</h1> MENU01 MENU02 MENU03 MENU04 MENU05 콘텐츠 그룹01 콘텐츠 그룹02 주요기사 광고 경기도 부천시 오정구 삼정동 032)674-5685 icoxpub@naver.com COPYRIGHT © ALL right reserved. 결과 원본 소스 보기 원본 사이트
CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트만으로 사용할 수도 있습니다. 또한 인라인 스타일시트는 대체로 거의 사용하지 않지만, 가장 우선 순위가 높아서 꼭 필요한 경우 편리하게 사용할 수 있습니다. 참고로, CSS에서의 주석은 /* */로 표현합니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들. 결과 보기 우리를 기쁘게 하는 것들. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.c..
내장 함수 내장 함수는 기본적으로 자바스크립트에 내장되어 있는 함수들을 말합니다. 인코딩, 디코딩 함수 URL 주소에 쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 이런 경우 인코딩 함수를 이용하여 문자를 부호화시키고 부호화된 문자를 다시 디코딩 함수를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent() 영문, 숫자와 ( ) - _ . ~ * ! ' 을 제외한 문자를 인코딩합니다. decodeURIComponent() encodeURIComponent()의 디코딩 함수 //인코딩, 디코딩 함수 var encodeStr = '자바스크립트'; console.log(encodeURI..
배열 메서드 배열 메서드 중에서 join(), push(), pop()을 알아봅시다. join() join() 메서드는 배열의 모든 요소를 연결하여 하나의 문자열로 만듭니다. 번호 기본값 메서드 리턴값 const arrNum = [100, 200, 300, 400, 500]; const text1 = arrNum.join(''); const text2 = arrNum.join(' '); const text3 = arrNum.join('★'); const text4 = arrNum.join('-'); push() / pop() push() 메서드는 배열 마지막 요소에 추가하고, pop() 메서드는 배열 마지막 요소를 삭제합니다. 번호 기본값 메서드 리턴값 결과값 //01 const arrNum = [100..
사이트 만들기 : 카드유형03 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 카드 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. 컴포넌트를 만들어서 원본을 이용하여 작업하면 중복되는 작업을 간단히 할 수 있습니다. 컴포넌트 단축어 ⌥⌘ K 컴포넌트 만들기 ⌥⌘ B 컴포넌트에서 분리하기 (복제한 컴포넌트는 일반 프레임 혹은 레이어로 돌아감, 메인 컴포넌트는 해제) ⌥ 컴포넌트 교체하기 (컴포넌트끼리만 가능) CSS nth-child()를 사용해서 필요한 곳에만 부여합니다. 활용하여 중간에 생기는 선을 만들었습니다. .card__inner .card:nth-ch..
이미지 표현 방식 이미지 표현 방식인 벡터와 비트맵 방식을 알아봅시다. 벡터 이미지에 표현되는 점에 대한 정보를 저장하여 이미지를 표현합니다. 두 개의 점에 대한 정보를 갖고 있으면 선을 표현할 수 있고, 세 개 이상의 선에 대한 정보를 갖고 있으면 면을 형성할 수 있습니다. 벡터 그래픽은 기하학적 정보와 선의 두께, 색상, 곡률 등의 정보를 이용하여 이미지를 표현하는 방식이다. 벡터 방식의 종류 벡터 방식의 종류는 ai, eps, svg등이 대표적입니다. 비트맵 특정 색상 값을 갖는 점(픽셀)의 배열로 이미지를 표현하는 방식입니다. 대표적인 비트맵 그래픽인 jpg, gif, png 형식은 확대시에 이미지가 손상되는 현상이 발생합니다. 고정된 크기의 틀에 픽셀이라는 단위로 점을 찍어서 이미지를 표현하기 ..
사이트 만들기 : 카드유형02 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 카드 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. 컴포넌트를 만들어서 원본을 이용하여 작업하면 중복되는 작업을 간단히 할 수 있습니다. CSS '>' 를 사용하여 바로 아래 자식요소만 적용시킵니다. display: flex;를 사용하여 정렬을 합니다. justify-content: space-between; 으로 아이템들의 “사이(between)”에 균일한 간격을 만들어 줍니다. ir 효과 ir효과는 이미지 대체 효과입니다. alt와 같이 웹표준 준수를 위해 사용됩니다. 사진이 있..
사이트 만들기 : 카드유형01 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 카드 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. 디자인의 틀을 잡아줍니다. CSS '>' 를 사용하여 바로 아래 자식요소만 적용시킵니다. display: flex;를 사용하여 정렬을 합니다. justify-content: space-between; 으로 아이템들의 “사이(between)”에 균일한 간격을 만들어 줍니다. /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'..
W3C 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직입니다. W3C의 설립취지는 웹의 지속적인 성장을 도모하는 프로토콜과 가이드라인을 개발하여 월드 와이드 웹의 모든 잠재력을 이끌어 내는 것입니다. 웹표준 웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미합니다. W3C(World Wide Consortium)가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정을 담고 있으며 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가..
QuizEffect04 QuizEffect04 문제를 html, css, javascript로 만들어서 풀어봅니다. 원본 소스 보기 선택자 querySelector를 사용하지만, 객관식 문항이 다중이라서 querySelectorAll을 사용합니다. quizChoice, quizSelect는 .quiz_selects를 사용합니다. document를 사용하는 것보다 찾아야하는 영역을 좁혀주어서 효율적으로 만듭니다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = do..
QuizEffect03 QuizEffect03 문제를 html, css, javascript로 만들어서 풀어봅니다. 원본 소스 보기 선택자 querySelector를 사용하지만, 선택해야하는 것이 다중인 경우에 querySelectorAll을 사용합니다. //선택자 const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelectorAll(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = docume..
요소 선택 요소를 직접 선택하는 메서드 메서드 설명 getElementByld() document.getElementByld('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document.getElementsByClassName('menu')일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsbyTagName() document.getElementsByName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. getElementsbyName() document.getElementsbyName('txt')일 경우 HTML 요소 중 name명이..
QuizEffect02 QuizEffect02 문제를 html, css, javascript로 만들어서 풀어봅니다. 원본 소스 보기 자바스크립트 문제정보와 문제출력 정답을 숨기고 확인하는 것을 자바스크립트를 통해 나타냈습니다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__..
QuizEffect01 QuizEffect01 문제를 html, css, javascript로 만들어서 풀어봅니다. 원본 소스 보기 자바스크립트 문제정보와 문제출력 정답을 숨기고 확인하는 것을 자바스크립트를 통해 나타냈습니다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__..
레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } #wrap { width: 100%; } #header { width: 100%; height: 100px; background-color: #EEEBE9..
레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } #header{..
레이아웃03 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } body { background-color: #E1F5FE; } #wrap { width: 1200px; margin: 0 auto; } #header {..
레이아웃02 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto; } #header {..
레이아웃01 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다. 하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다. 구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다. * { margin: 0; padding: 0; } body { background-color: #FFF3E0; } #wrap { width: 1200px; margin: 0 auto; } #header {..
전역변수와 지역변수 변수는 함수 블록{}을 기준으로 변수와 선언 위치에 따라 '지역 변수'와 '전역 변수'로 나누어집니다. '전역변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만, '지역변수'는 함수 블록{} 내에서만 사용할 수 있습니다. 전역변수와 지역변수 선언 위치 전연변수 지역변수 var 변수; function 함수() { } function 함수(){ var 변수; } 전역변수, 지역변수 예시 var kor = 90; function getScore() { kor = 100; // 전연 변수 console.log(kor); // 100 } getScore(); console.log(kor); // 100 함수 블록 안에 있는 kor 변수는 전역변수입니다. 따라서 getScore 함수를..
함수 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합. 함수의 종류로는 선언적, 익명, 매개변수, 리턴값 함수가 있습니다. 01. 선언적 함수 일반적인 방식. 함수를 선언할 때 이름을 붙여주는 함수를 말합니다. function func(){ document.write("함수가 실행되었습니다.1"); } func(); 결과보기 함수가 실행되었습니다.1 02. 익명 함수 코드명에 함수코드를 저장하는 방식 const func = function(){ document.write("함수가 실행되었습니다.2"); } func(); 결과보기 함수가 실행되었습니다.2 03. 매개변수 함수 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수. 함수의 인수(argument)는 함수가 호출될..
조건문 특정 조건 만족 시(true) 실행하는 명령. 조건문은 if문, switch문이 있습니다. 제어문 분류 제어문 조건문 if, switch 반복문 while, do while, for 중지, 건너뛰기 break, continue 01_ if문 if문에는 3가지 형식이 있습니다. if (조건식) { 실행문; } if (조건식) { 실행문1; } else { 실행문2; } if (조건식) { 실행문1; } else if(조건식2) { 실행문2; }else { 실행문3; } if문 안에 if문을 중첩하여 사용할 수 있습니다. if(조건식1){ if(조건식2){ 실행문; } } if 문 결과보기 평균 90점 합격 / 평균 59점 불합격 02_ switch문 switch(값)의 값과 case의 값들을 하나씩..
반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며 for문을 가장 많이 사용합니다. while문 while문은 조건식이 참이면 실행문을 실행합니다. 초기 값 while (조건식) { 실행문; 증가감식; } do while문 while문과 달리, do while문은 do를 먼저 실행하기 때문에 첫번째 실행은 조건에 상관없이 실행합니다. 초기 값 do { 실행문; 증가감식; } while (조건식) for문 for문은 조건식이 참인 동안 {}안의 실행문을 반복합니다. for문은 중첩하여 사용할 수 있습니다. for ( 초기값; 조건식; 증감값 ){ 실행문; } for문을 이용한 다..
