growing box [내부링크]

growing box 박스가 늘어나는 애니메이션 HTML HTML를 이용하여 진행 Untitled CSS CSS를 이용하여 진행, transform-style: preserve-3d; z축을 만들기 위해서 만들어줍니다. body { background-color: #888; hei..

Text Wave 애니메이션 [내부링크]

Text Wave 글자가 웨이브 HTML HTML를 이용하여 진행 c o d e p e n CSS CSS를 이용하여 진행합니다. top을 20px를 주고, @keyframes으로 top을 -20px로 부여하여 움직임을 줍니다. nth-child로 각 글자마다 딜레..

Mouse Hover Effect 애니메이션 [내부링크]

Mouse Hover Effect 마우스를 올리고 내렸을때 움직임이 생기는 효과를 만들어봅시다. HTML hover__wrap 안에 hover__updown, hover__leftright등 구조를 만들어줍니다. Mouse Hover Effect 마우스 올리면 Up Mou..

parallaxEffect05 [내부링크]

패럴렉스 이펙트 - 이질감 효과 이질감 효과를 만들어봅시다. 원본 소스 보기 원본 사이트 html parallax__info를 추가합니다. 코드보기 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는..

VScode SCSS(sass) 사용하기 [내부링크]

VScode SCSS(sass) 사용하기 VScode SCSS(sass) 사용하기 위한 설정 방법을 알아봅시다. 설치 프로그램 SCSS를 사용하기 위해서는 설치해야하는 확장 프로그램이 있습니다. 검색 Extensions에서 확장프로그램으로..

Wave Animation [내부링크]

Wave Animation 일렁이는 애니메이션 PUG PUG를 이용하여 진행 div.circle-wrap - for (var x =1; x <= 12; x++) div.row - for (var y = 1; y <= 12; y++) div.circle SCSS SCSS를 이용하여 진행. @mixin center..

sliderEffect04 [내부링크]

슬라이드 이펙트 - 이미지 슬라이드(버튼) 버튼을 눌러서 이전과 다음 이미지로 슬라이드 되는 효과를 만들어봅시다. 원본 소스 보기 원본 사이트 html slider__btn에 prev, next 버튼을 만들어 줍니다. 코드보기..

parallaxEffect04 [내부링크]

패럴렉스 이펙트 - 나타나기 스크롤하면서 섹션이 효과와 함께 나타납니다. 원본 소스 보기 원본 사이트 html 섹션들만 남겨둡니다. 코드보기 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를..

mouseEffect02 [내부링크]

마우스 이펙트 - 마우스 따라다니기 (GSAP) 포인터의 좌표값에 따라서 마우스의 움직임과 효과가 있는 마우스 이펙트를 GSAP를 이용하여 만들어 봅시다. (GSAP 라이브러리를 스크립트에 추가해서 진행합니다.) 원..

사이트 반응형 [내부링크]

사이트 - 반응형 지금까지 다양한 유형의 사이트를 만들었습니다. 여러 유형을 합친 사이트를 만들고, 반응형으로 만드는 작업을 해보았습니다. 스와이퍼 프리코드를 이용해서 슬라이더를 작업했습니다. Swiper는..

MySQL 알아보기 [내부링크]

MySQL MySQL은 데이터베이스 소프트웨어입니다. 일반적으로 데이터를 추가하거나 검색, 추출하는 기능을 모두 포함해서 데이터베이스라고 부릅니다. MySQL은 세계에서 가장 많이 쓰이는 오픈 소스의 관계형 데이터..

웹디자인 기능사 실기 - COOKIT [내부링크]

COOKIT 사이트 웹디자인 기능사 실기 연습 원본 소스 보기 원본 사이트 1-1 코드보기 HTML COOKIT 소개 sub-menu1 sub-menu1 sub-menu1 sub-menu1 COOKIT 메뉴 sub-menu2 sub-menu2 sub-menu2 sub-menu2 리뷰 sub..

웹디자인 기능사 실기 - 롯데월드 [내부링크]

롯데월드 사이트 웹디자인 기능사 실기 연습 원본 소스 보기 원본 사이트 1-1 코드보기 HTML 즐길거리 요금/무대혜택 참여프로그램 이용가이드 소통서비스 fff css /* reset */ * { margin: 0; padding: 0; } li {..

parallaxEffect03 [내부링크]

패럴렉스 이펙트 - 숨김 메뉴 / 탑 버튼 메뉴를 아래로 스크롤하면 안보이게 하고, 위로 올리면 나타나게 하였습니다. 페이지의 제일 하단에 도달하면 TOP버튼이 나타나서 위로 상단으로 올라가게 하였습니다. 원..

parallaxEffect02 [내부링크]

패럴렉스 이펙트 - 사이드 메뉴 메뉴를 사이드로 배치하여 봅시다. 원본 소스 보기 원본 사이트 html 이전의 방식에서 parallax__nav이었던 것을 parallax__dot으로 변경해줍니다. 클릭하면 각 섹션으로 이동할..

CSS - animation [내부링크]

CSS - animation 캐릭터가 걷는 애니메이션을 만들어봅시다. HTML border-radius Start Stop CSS .step { height: 700px; background: #43ddf7; position: relative; } .step .stepbox { width: 800px; height: 60..

CSS - intro [내부링크]

animation animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애..

SVG - intro [내부링크]

SGV 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그..

SVG - animation [내부링크]

SVG ANIMATION svg에 애니메이션을 적용해 봅시다. HTML CSS .ani1 { width: 100px; height: 100px; x: 30px; y: 30px; fill: none; stroke: #880E41; stroke-width: 2px; stroke-dasharray: 50; stroke-dashoffs..

ParallaxEffect01 [내부링크]

패럴렉스 이펙트 - 메뉴 이동 메뉴에 맞는 페이지로 이동되는 패럴렉스를 만들어 봅시다. 원본 소스 보기 원본 사이트 이미지로 설명 html Javascript Parallax Effect01 패럴렉스 이펙트 - 메뉴 이동 1 2 3 4 5..

JavaScript MouseOver | MouseEnter [내부링크]

MouseOver, MouseEnter MouseOver, MouseEnter의 차이를 알아봅시다. MouseOver, MouseEnter에 대해서 mouseOver와 mouseEnter는 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 마우스 이벤트이며, 이와..

mouseEffect01 [내부링크]

마우스 이펙트 - 마우스 따라다니기 포인터의 좌표값에 따라서 마우스의 움직임과 효과가 있는 마우스 이펙트를 만들어 봅시다. 원본 소스 보기 원본 사이트 html Only those who dare to fail greatly can ever..

슬라이드 유형01 [내부링크]

사이트 만들기 : 슬라이드 유형01 슬라이드 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS .slider__inner { margin-top: 70..

푸터 유형01 [내부링크]

사이트 만들기 : 푸터 유형01 푸터 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS .footer__menu { display: flex; margin-b..

배너 유형01 [내부링크]

사이트 만들기 : 배너 유형01 배너 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS .banner__inner { background-image: url(..

Prettier 설치 및 오류해결 방법 [내부링크]

Prettier 설치 및 오류해결 방법 visual studio code(vscode)를 사용하면서 자동으로 코드를 정렬해주는 기능으로 Prettier가 있습니다. 사용하게 되면, ctrl + s만으로 자동을 코드의 줄이 맞춰집니다. 적용하는..

jQuery 스타일 메서드 [내부링크]

jQuery 스타일 관련 메서드 jQuery 스타일 관련 메서드를 알아봅시다. css() 메서드 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px");..

jQuery 속성 메서드 [내부링크]

jQuery 속성 관련 메서드 jQuery 속성 관련 메서드를 알아봅시다. attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a"..

jQuery 클래스 메서드 [내부링크]

jQuery 클래스 관련 메서드 jQuery 클래스 관련 메서드를 알아봅시다. addClass() 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(fu..

잔상 공 애니메이션 [내부링크]

잔상 공 잔상이 반복적으로 생기는, 움직이는 공 애니메이션을 만들어 봅시다. HTML 공을 5개 만들어 봅시다. CSS linear-gradient : 적용된 HTML 요소에 선형으로 그래디언트(gradient) 효과를 적용시켜 줍니다...

sliderEffect03 [내부링크]

슬라이드 이펙트 - 좌로 움직이기(연속적으로) 연속적으로 이미지가 좌로 변동되는 것을 만들어 보았습니다. 원본 소스 보기 원본 사이트 html css /* slider */ .slider__wrap { width: 100%; height: 100vh; di..

JavaScript 요소 크기 메서드 [내부링크]

자바스크립트 요소 속성(크기) 요소 속성(크기) 메서드 설명 clientWidth 요소의 가로(패딩 포함, 보더/마진 미포함) clientHeight 요소의 세로(패딩 포함, 보더/마진 미포함) offsetWidth 요소의 가로(패딩/보더..

이미지/텍스트 유형01 [내부링크]

사이트 만들기 : 이미지/텍스트 유형01 이미지/텍스트 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import u..

헤더 유형01 [내부링크]

사이트 만들기 : 헤더 유형01 헤더 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfon..

jQuery 필터 선택자 [내부링크]

필터 선택자 선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다. 필터 선택자 종류 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니..

jQuery 탐색 선택자 [내부링크]

탐색 선택자 기본 탐색 선택자 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("d..

jQuery 속성 선택자 [내부링크]

속성 선택자 JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 종류 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택..

텍스트 유형03 [내부링크]

사이트 만들기 : 텍스트유형03 텍스트 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://web..

텍스트 유형02 [내부링크]

사이트 만들기 : 텍스트유형02 텍스트 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://web..

jQuery 기본 선택자 [내부링크]

jQuery 선택자 JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. jQuery 기본 선택자의 형식은 다음과 같습니다. $("선택자")   |   $("#gnb") 기본 선택자 선택자..

텍스트 유형01 [내부링크]

사이트 만들기 : 텍스트유형01 텍스트 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://web..

GSAP 알아보기 [내부링크]

GSAP GSAP(The GreenSock Animation Platform)은 자바스크립트 로 제어하는 타임라인 기반의 애니메이션 라이브러입니다. GSAP을 사용하면 자바스크립트 애니메이션을 좀 더 쉽게 작성할 수 있습니다. GSAP는 애..

jQuery 알아보기 [내부링크]

jQuery 알아보기 jQuery(제이쿼리)는 웹 사이트를 제작할 때 자주 사용되는 기능들을 쉽게 사용할 수 있도록 모아놓은 자바스크립트 라이브러리를 말합니다. 복잡한 상호작용을 하는 자바스크립트를 쉽게 추가할..

두개의 원이 돌고있는 애니메이션 [내부링크]

두개의 원이 돌고있는 애니메이션 2개의 원이 돌고있는 애니메이션을 만들었습니다. HTML 원을 두개 만듭니다. CSS keyframes을 만든 뒤, transform으로 움직임을 부여합니다. body { height: 100vh; background-..

움직이는 박스 애니메이션 [내부링크]

박스가 점핑하는 애니메이션 사각형이 움직이는 애니메이션입니다. html 박스를 만듭니다. css keyframes을 이용하여 transform을 부여합니다. body { height: 100vh; background-image: linear-gradient(to top,..

sliderEffect01 [내부링크]

슬라이드 이펙트 - 트랜지션 효과 일정 시간을 기준으로 이미지가 변동되는 것을 만들어 보았습니다. 원본 소스 보기 원본 사이트 html css /* slider */ .slider__wrap { width: 100%; height: 100vh; display:..

sliderEffect02 [내부링크]

슬라이드 이펙트 - 좌로 움직이기 이미지가 좌로 움직이는 유형입니다. 애니메이션 효과를 넣었습니다. 원본 소스 보기 원본 사이트 Javascript const sliderInner = document.querySelector(".slider__inner");..

CSS 요소 숨기기 [내부링크]

CSS 요소 숨기기 CSS를 통하여 요소를 숨길 수 있습니다. 다양한 숨기는 방법을 알아봅시다. display: none; (애니메이션X, 영역X) 영역을 차지하지 않고, 공간을 차지하지 않는다. 요소가 없던 것처럼 표시 disp..

QuizEffect05 [내부링크]

객관식(여러문제) 확인하기 : 점수 스크립트를 통해서 객관식문제의 전체문제 중에 몇 문제를 맞았는지 확인해봅시다. 원본 소스 보기 원본 사이트 html javascript를 통해 소스를 넣어주기 위해서, quiz__wrap안..

QuizEffect06 [내부링크]

객관식(여러문제) 확인하기 : 슬라이드 형식 스크립트를 통해서 객관식 여러문제를 한문제씩 출력하여, 정답과 해설을 확인합시다. 원본 소스 보기 원본 사이트 html 기본틀은 그대로 두면서 변동되는 부분만 주..

사슴 일러스트 [내부링크]

사슴 일러스트 사슴 일러스트를 진행해보았습니다. 포토샵으로 목업 적용 했습니다.

CSS 색상 표현 [내부링크]

CSS 색상 표현 CSS의 색상은 글자색(color) 뿐 아니라 배경색(background), 테두리(border)등 다양한 CSS속성들이 적용됩니다. 다양한 색상 표현을 알아봅시다. 색상 이름 색상 이름으로 표현이 가능합니다. .blu..

CSS 단위 종류 [내부링크]

CSS 단위 CSS에는 다양한 형태의 단위가 있으며, 필요에 맞게 사용합시다. 절대 단위 규격이 정해져 있으며, 각 단위들 끼리 값 변환이 가능합니다. 단위 의미 cm 센티미터 단위 mm 밀리미터 단위 in 인치(inch)..

searchEffect03 [내부링크]

searchEffect03 charAt()를 이용하여 속성 첫글자 검색하기. 원본 소스 보기 원본 사이트 HTML keyword 별로 검색이 가능하도록 span 태그를 사용하여 알파벳별로 검색이 가능하도록 만듭니다. charAt()를 이용하..

JavaScript 함수 유형 [내부링크]

함수 유형 01. 함수 유형 : 함수와 매개변수를 이용한 형태 함수와 매개변수를 활용해 함수를 재활용 할 수 있습니다. function func(num, str1, str2){ document.write(num + ". " + str1 + "가 " + str2 + "되..

JavaScript search() [내부링크]

search() search() 메서드는 문자열(정규식)을 검색하고 위치값(숫자)를 반환합니다. "문자열".search("검색값") "문자열".search(정규식 표현) const str1 = "javascript reference"; const currentStr1 = str1...

JavaScript charAt() [내부링크]

charAt() charAt() 메서드는 지정한 인덱스의 문자를 추출하여 문자열을 반환합니다. "문자열".charAt(숫자); const str1 = "javascript reference"; const currentStr1 = str1.charAt(); //j const currentStr2..

JavaScript match() [내부링크]

match() match() 메서드는 문자열을 검색하고 배열을 반환합니다. "문자열".match("검색값") "문자열".match(정규식 표현) const str1 = "javascript reference"; const currentStr1 = str1.match("javascript");..

토끼 일러스트 [내부링크]

일러스트레이터 - 토끼 만들기 일러스트레이터를 이용해서 토끼를 만들어보았습니다. 1. 펜툴로 선을 그려줍니다. (Pen Tool, Width Tool 선을 그립니다.) 2. expand 후 live paint 적용합니다. (색을 칠하는 준..

이미지 스프라이트 / IR 효과 / 백그라운드 표현 [내부링크]

이미지 스프라이트 / IR 효과 / 백그라운드 표현 이미지 스프라이트 / IR 효과 / 백그라운드 표현에 대해서 알아봅시다. 이미지 스프라이트 스프라이트(Sprite) : 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애..

이미지 유형03 [내부링크]

사이트 만들기 : 이미지유형03 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 이미지 유형에 대해 알아봅시다. grid를 사용하였으며, grid-gap 셀 사..

QuizEffect - 60문제 [내부링크]

QuizEffect05 60문제 풀어보기 원본 소스 보기 원본 사이트

블록 구조 / 인라인 구조 [내부링크]

블록 레벨 요소와 인라인요소 1. 블록 레벨 요소 (Block-level Element) 콘텐츠의 흐름이 끊기고, 요소를 구성하는 줄 하나를 다 차지합니다. 마크업 했던 , , 요소들은 블록의 성질을 가지고 있어 화면상 줄 바..

SCSS [내부링크]

SCSS scss는 sass의 3버전에서 등장한 언어입니다. css와 비슷한 구문을 가지고 있으며, css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트입니다. sass기능을 지원하며, css와 거의 같..

강아지 애니메이션 [내부링크]

강아지 애니메이션 PUG와 SCSS를 이용해서 강아지 애니메이션을 만들었습니다. PUG pug를 이용해서 코드를 만듭니다. html보다 간결한 작성이 가능합니다. 들여쓰기로 영역을 구분하기에 닫는 태그를 적을 필요가..

JavaScript toUpperCase() / toLowerCase() [내부링크]

toUpperCase() / toLowerCase() toUpperCase()는 문자열을 대문자로 변경하고 toLowerCase()는 문자열을 소문자로 변경합니다. const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); document.qu..

JavaScript trim() / trimStart() / trimEnd() [내부링크]

trim() / trimStart() / trimEnd() 문자열의 앞/뒤 공백을 제거합니다. trim() : 문자열의 앞/뒤 공백을 제거합니다 trimStart() : 문자열의 앞 공백을 제거합니다 trimEnd() : 문자열의 뒤 공백을 제거합니다 co..

JavaScript concat() [내부링크]

concat() concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. "문자열".concat(문자열) "문자열".concat(문자열, 문자열....) const str1 = "javascript"; const currentStr1 = str1.c..

JavaScript replace() / replaceAll() [내부링크]

replace() / replaceAll() replace() 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다. "문자열".replace("찾을 문자열", "변경할 문자열") "문자열".replace(정규식) "문자열".replace(정규식, "변..

JavaScript split() [내부링크]

split() 문자열에서 원하는 값을 추출 배열로 반환합니다. "문자열".split(구분자); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); const str1 = "javascript reference"; const currentStr1 = st..

JavaScript repeat() [내부링크]

repeat() repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다. const str1 = "javascript"; const currentStr1 = str1.repeat(0); //'' const currentStr2 = str1.repeat(1); //javascript..

JavaScript padStart() / padEnd() [내부링크]

padStart / padEnd padStart() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다. "문자열".padStart(길이) "문자열".padStart(길이, 문자열) const str1 = "456"; const current..

JavaScript includes() [내부링크]

includes() includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다. "문자열".includes(검색값) "문자열".includes(검색값, 시작값) const str1 = "javascript reference"; const cu..

JavaScript 문자열 결합 / 템플릿 문자열 [내부링크]

문자열 : 문자열 결합 / 템플릿 문자열 템플릿 문자열은 내장된 표현식을 허용하는 문자열 방식입니다. //01 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_N1").in..

이미지 유형02 [내부링크]

사이트 만들기 : 이미지유형02 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 이미지 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코..

이미지 유형01 [내부링크]

사이트 만들기 : 이미지유형01 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 이미지 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코..

searchEffect02 [내부링크]

searchEffect02 includes()를 이용하여 검색하기. 타입 검색 기능 추가. 원본 소스 보기 원본 사이트 HTML 데이터 구분을 위해 data-name을 활용합니다. data-type을 추가하여 타입으로도 검색이 가능하도록 하였..

searchEffect01 [내부링크]

searchEffect01 indexOf()를 이용하여 키워드 검색하기. 원본 소스 보기 원본 사이트 HTML 데이터 구분을 위해 data-name을 활용합니다. indexOf()를 이용하여 검색하기 HTML 태그 검색하기 검색하기 a : a 태그..

JavaScript slice() / substring() / substr() [내부링크]

slice() / substring() / substr() slice() 문자열에서 원하는 값을 추출하여 문자열을 반환하기 위한 메서드입니다. 시작 위치가 끝나는 위치보다 작아야하며, 새로운 배열 만드는 때 사용 "문자열".slice(시작..

JavaScript indexOf() / lastIndexOf [내부링크]

indexOf() / lastIndexOf 문자열에서 특정 문자의 위치를 찾고, 숫자를 반환합니다. "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) 내장함수 indexOf() 함수는 문자열에서 원하는 문자열을 검색하..

JavaScript 정규표현식 [내부링크]

정규표현식(RegExp) 정규표현식 객체는 정해진 문자의 패턴을 만들 때 사용합니다. 문자나 숫자 패턴 같은 간단한 정규표현식부터 조금씩 연습하는 것이 좋습니다. var reg = /Javascript/; var reg = new RegExp..

미디어쿼리 [내부링크]

미디어쿼리 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 최소 가로폭이 1000px, 즉 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다..

구조 관련 요소 [내부링크]

구조 관련 요소 HTML5에서는 구조를 설계할 수 있는 구조 관련 요소가 추가되었습니다. main, nav, section, article, aside, header, footer 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 1. HTML 문서..

기본 문법 [내부링크]

CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트만으로..

JavaScript 내장 함수 [내부링크]

내장 함수 내장 함수는 기본적으로 자바스크립트에 내장되어 있는 함수들을 말합니다. 인코딩, 디코딩 함수 URL 주소에 쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그램의 경우 한글과 같은 유니코드 문자..

JavaScript 배열 메서드 - join() / push() / pop() [내부링크]

배열 메서드 배열 메서드 중에서 join(), push(), pop()을 알아봅시다. join() join() 메서드는 배열의 모든 요소를 연결하여 하나의 문자열로 만듭니다. 번호 기본값 메서드 리턴값 const arrNum = [100, 200, 3..

사이트 유형 - 카드 유형03 [내부링크]

사이트 만들기 : 카드유형03 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 카드 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코드를..

이미지 표현 방식 - 벡터, 비트맵 [내부링크]

이미지 표현 방식 이미지 표현 방식인 벡터와 비트맵 방식을 알아봅시다. 벡터 이미지에 표현되는 점에 대한 정보를 저장하여 이미지를 표현합니다. 두 개의 점에 대한 정보를 갖고 있으면 선을 표현할 수 있고,..

사이트 유형 - 카드 유형02 [내부링크]

사이트 만들기 : 카드유형02 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 카드 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코드를..

사이트 유형 - 카드 유형01 [내부링크]

사이트 만들기 : 카드유형01 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 카드 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코드를..

W3C, 웹 접근성, 웹 호환성 [내부링크]

W3C 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직입니다. W3C의 설립취지는 웹의 지속적인 성장을 도모하는 프로토콜과 가이드라인을 개발하여 월드 와이드 웹의 모든 잠재력을 이끌어 내는 것입니다...

QuizEffect04 - 객관식(한문제) 유형 [내부링크]

QuizEffect04 QuizEffect04 문제를 html, css, javascript로 만들어서 풀어봅니다. 원본 소스 보기 선택자 querySelector를 사용하지만, 객관식 문항이 다중이라서 querySelectorAll을 사용합니다. quizChoice, q..

QuizEffect03 - 주관식(여러문제) 유형 [내부링크]

QuizEffect03 QuizEffect03 문제를 html, css, javascript로 만들어서 풀어봅니다. 원본 소스 보기 선택자 querySelector를 사용하지만, 선택해야하는 것이 다중인 경우에 querySelectorAll을 사용합니다. //선택..

JavaScript 요소 선택 [내부링크]

요소 선택 요소를 직접 선택하는 메서드 메서드 설명 getElementByld() document.getElementByld('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document...

QuizEffect02 - 주관식 유형 [내부링크]

QuizEffect02 QuizEffect02 문제를 html, css, javascript로 만들어서 풀어봅니다. 원본 소스 보기 자바스크립트 문제정보와 문제출력 정답을 숨기고 확인하는 것을 자바스크립트를 통해 나타냈습니다. //선택자..

QuizEffect01 - 정답 확인 유형 [내부링크]

QuizEffect01 QuizEffect01 문제를 html, css, javascript로 만들어서 풀어봅니다. 원본 소스 보기 자바스크립트 문제정보와 문제출력 정답을 숨기고 확인하는 것을 자바스크립트를 통해 나타냈습니다. //선택자..

레이아웃05 [내부링크]

레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지..

JavaScript 함수 [내부링크]

함수 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합. 함수의 종류로는 선언적, 익명, 매개변수, 리턴값 함수가 있습니다. 01. 선언적 함수 일반적인 방식. 함수를 선언할 때 이름을 붙여주는 함수..

JavaScript 조건문 [내부링크]

조건문 특정 조건 만족 시(true) 실행하는 명령. 조건문은 if문, switch문이 있습니다. 제어문 분류 제어문 조건문 if, switch 반복문 while, do while, for 중지, 건너뛰기 break, continue 01_ if문 if문에는 3..

레이아웃04 [내부링크]

레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 이번 레이아웃은 전체 영역..

레이아웃03 [내부링크]

레이아웃03 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지..

레이아웃02 [내부링크]

레이아웃02 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지..

레이아웃01 [내부링크]

레이아웃01 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float를 이용한 레이아웃 div태그는 block특성을 가지..

JavaScript 전역변수/지역변수 [내부링크]

전역변수와 지역변수 변수는 함수 블록{}을 기준으로 변수와 선언 위치에 따라 '지역 변수'와 '전역 변수'로 나누어집니다. '전역변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만, '지역변수'는 함..

JavaScript 반복문 [내부링크]

반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며 for문을 가장 많이 사용합니다. while..

JavaScript 데이터 타입 [내부링크]

데이터 타입 변수에 저장되는 데이터 유형으로 Primitive(원시), Object(객체)로 나눠집니다. 원시 = number, string, boolean, undefined, null, symbol 객체 = function, object, array number(숫자) 데이터 nu..

레이아웃 [내부링크]

Layout (레이아웃) CSS에서 요소들을 보기 쉽게, 배치하고 정렬하는 것. 레이아웃을 만드는 방법에는 float, flex, grid가 있다. Layout 종류 방법 1 : float div태그는 block특성을 가지고 있기 때문에 세로 배..

UI/UX 프로젝트 구상 [내부링크]

JavaScript for문 [내부링크]

for문 for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문입니다. for ( 초기값; 조건식; 증감값 ){     실행문 } 0부터 99까지 출력하기 //0부터 99까지 출력하기 for( let i=0; i100; i++ ){..

JavaScript 연산자 [내부링크]

자바스크립트 연산자 프로그햄에 필요한 수식을 만들 때 필요한 것이 연산자. 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 산술 연산자 산술 연산자는 사칙연산을 다루는 기본적..

JavaScript 기본 규칙 [내부링크]

기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 문법이 있습니다. 가장 기본이기 때문에 이 부분을 수지하고 자바스크립트를 공부해야합니다. 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기..