본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

제가 배웠던것을 한곳에 정리해보았어요!

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

총 방문자

728x90

NEW

1

5

새 글

-

최근에 올라온 새 글의 게시물을 한줄로 나열해봤습니다! * PC버전은 [shift] + 마우스 스크롤 [UP/DOWN]을 같이 눌러 왼쪽/오른쪽 스크롤이 가능합니다.
카테고리 없음 test2 test2
TIP "Cannot use import statement outside a module" 오류 해결 "Cannot use import statement outside a module" 오류 해결 NodeJS를 학습하던 도중에 패키지를 가져오기위해 require가 아닌 import를 사용했더니 발생한 문제를 해결해보자 package.json에 타입 추가 while과 if를 통한 방법입니다. 기본적으로 package.json 에 type이 없다면 모듈 처리방식이 common.js 의 require 방식이된다. 따라서, ES6의 import - export를 사용하려면 루트 디렉토리에 있는 package.json 파일에 "type": "module"를 추가해야한다. { 'name': 'study-nodejs', 'version': '1.0.0', 'type': 'module', 'description': '..
프로그래머스 프로그래머스 1단계 : 콜라 문제! 프로그래머스 1단계 콜라중의 콜라는 다이어트 맥콜 🍾 콜라 문제!를 풀어보도록 하겠습니다 콜라 문제! while과 if를 통한 방법입니다. 1. 매개변수로는 a,b,n으로 설정해 받아주고 2. answer에는 0을, remain에는 n값을 담아줍니다 3. a가 remain의 초과일때까지 while을 반복시켜주고 4. remain 나누기 a 곱하기 b를 한 값을 정수로 바꿔 answer에 더해줍니다 5. remain 나누기 a 곱하기 b + remain 나누기 a 한 값을 더해준뒤 remain에 넣어주어 정답을 도출해냅니다. const solution = (a, b, n) => { let answer = 0; let remain = n; while (true) { if (a > remain) { break..
프로그래머스 프로그래머스 1단계 : 소수 찾기 ! 프로그래머스 1단계 소수찾기 문제를 풀어볼까요? 소수 찾기! for과 if를 통한 방법입니다. 1. 2부터 소수를 구하고자 하는 구간의 모든 수를 나열한다. 그림에서 회색 사각형으로 두른 수들이 여기에 해당한다. 2. 2는 소수이므로 오른쪽에 2를 쓴다. 3. 자기 자신을 제외한 2의 배수를 모두 지운다. 4. 남아있는 수 가운데 3은 소수이므로 오른쪽에 3을 쓴다. 5. 자기 자신을 제외한 3의 배수를 모두 지운다. function solution(n) { let answer = 0; const arr = new Array(n+1).fill(true); for(let i = 2; i
프로그래머스 프로그래머스 1단계 : 2016! 프로그래머스 1단계 2022년에 2016년 문제를 풀어볼까요? 2016년! for과 push를 통한 방법입니다. 1. 1월 1일부터 a월 b일까지 며칠 차이인지 저장할 변수 2. a달 전까지의 모든 달에 대해 각 달의 날짜 수 더해줌 3. b일 더해주고 1월 0일이 아닌 1월 1일부터 시작하므로 1 빼줌 function solution(a, b) { let arr = [0, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; let week = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]; let passedDays = 0; for (let i = 1; i < a; i++) passedDays += arr[i]; passed..
프로그래머스 프로그래머스 1단계 : 이상한 문자 만들기 프로그래머스 1단계 k - 번째 숫자를 구해보자 K번째 수! for과 push를 통한 방법입니다. 1. 단어를 split 함수로 조각내고 words에 넣습니다 2. 이중 반복문으로 각 단어에 들어가 인덱스로 홀수자리인지, 짝수자리인지 판별 3. 그후로 짝수자리는 toUpperCase(), 홀수자리는 toLowerCase()를 통해서 각각 변환 4. 해당 값은 answer에 더함 5. 마지막으로 if 조건문으로 단어사이에 공백을 추가 function solution(s) { let answer = ''; let words = s.split(' '); for (let i = 0; i < words.length; i++) { for(let j = 0; j < words[i].length; j++) { if(j..
프로그래머스 프로그래머스 1단계 : K번째 수! 프로그래머스 1단계 k - 번째 숫자를 구해보자 K번째 수! for과 push를 통한 방법입니다. 1. commands의 길이 만큼 반복. 2. 자르고 정렬 : slice(시작점, 끝점).sort(오름차순 정렬) 3. answer에 n번째 숫자 push function solution(array, commands) { var answer = []; for(var i=0; i{return a-b}); answer.push(list[commands[i][2]-1]); } return answer; } K번째 수 : 다른 사람 풀이 for/if 와 sort를 통한 방법입니다. 1. commands 각 배열의 요소들을 map의 from(시작), to(끝), k(k번째 수) 인자로 주면서 명시적으로 표현했고 2...
프로그래머스 프로그래머스 1단계 : 최소직사각형! 프로그래머스 1단계 최소직사각형 문제를 풀어보자 🔳 최소직사각형! map과 Push를 통해 정답을 도출해내는 방법입니다. 1. 가로 혹은 세로가 긴 명함이지만 명함은 회전 시킬 수 있기 때문에 2. 가로와 세로 중 더 큰 값을 가로에 3. 작은 값은 세로가 되도록 명함의 사이즈들을 변경합니다. 4. 가로 길이 중 max값 * 세로 길이 중 max값을 통해 5. 모든 명함이 들어갈 수 있는 최소 사이즈 반환 function solution(sizes) { let arr = sizes.map(size => size[0] > size[1] ? [size[0], size[1]] : [size[1], size[0]]); const width = []; const height = []; for (let i = 0;..
프로그래머스 프로그래머스 1단계 : 문자열 내 마음대로 정렬하기! 프로그래머스 1단계 문자열 내 마음대로 정렬하기 문제를 풀어보자 👩🏻‍💻 문자열 내 마음대로 정렬하기! sort를 통해 정렬하고, if를 통해 반환할 값을 정해주는 방법니다. 1. sort() 메서드를 이용하여 strings의 각 문자열의 n번 째 글자를 비교해 알맞은 숫자를 리턴 2. 오름차순으로 정렬해줍니다. 3. 최종 answer 반환 function solution(strings, n) { let answer = strings.sort((a, b) => { if(a[n] > b[n]) return 1; if(a[n] b) return 1; if(a s1[n] === s2[n] ? s1.localeCompare(s2) : ..
프로그래머스 프로그래머스 1단계 : 시저 암호! 프로그래머스 1단계 시저 암호 문제를 풀어보자 ✂️ 시저 암호! split과 map을 사용하여 답을 도출해낸 방법입니다. 1. split 으로 문자열을 나누었을때 띄어쓰기가 포함되어 있으므로 띄어쓰기가 있으면 그대로 return 합니다 2. 문자라면 두번째 줄로 넘어가며 해당 문자를 대문자로 바꿔서 문자를 아스키코드로 변환하고 n을 더했을때 90(아스키코드에서 Z에 해당) 초과라면 값을 나타낼 수 없고 3. 만약 90을 초과한다면 해당 값에서 26(알파벳 갯수)을 빼주고 그게 아니라면 n을 더한 그 값만 return 해주면 됩니다. function solution(s, n) { return s.split('').map(v => { if(v === ' ') return v; return v.toUpperC..

JS 응용하기

-

최근에 올라온 JS 응용하기의 게시물을 한줄로 나열해봤습니다! * PC버전은 [shift] + 마우스 스크롤 [UP/DOWN]을 같이 눌러 왼쪽/오른쪽 스크롤이 가능합니다.
JS 응용하기 게임 이펙트 01 : 뮤직플레이어 / 시계 구현 패럴렉스 이펙트_07 각 span태그가 감싸여있지 않은 문장들을 span태그로 감싸 각 이미지와 span태그에 after/before 요소를 통해 효과를 주도록 해보겠습니다 👩🏻‍💻 HTML 코드 HTML 코드는 바탕화면에 5가지 아이콘을 구성하기 위해 icon의 배치만 적절히 해주기 위해서, 각 아이콘을 만들어 주도록 합니다🏄‍♂️ gamneeffect SOURCE VIEW 얼마나 알고있나 CSS 속성...! 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 기억이 나지 않으면 힌트보기를 한번 이용할 수 있습니다. 2:00 검색하기 게임 시작 :3 전체 속성 갯수 : 0 현재 맞춘 갯수 : 0 다시 도전하기 SOURCE VIEW 게임 01 게임 02 게임 03 뮤직 소스 보기 1 Music p..
JS 응용하기 서치 이펙트 07 서치 이펙트_07 각 요소가 정확히 있는지 확인 후 일정 시간이 지나면 SVG와 맞은 갯수를 출력해주는 예제를 구현해보도록 하겠습니다 👩🏻‍💻 HTML 코드 HTML 코드는 크게 신경쓸것이 없으나, 서치게임, 오디오, 꿀벌 SVG 형성을 위한 HTML 뼈대이므로 잘 작성해줍니다 🏄‍♂️ CSS 속성 검색 이벤트 CSS 랜덤 검색하기 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 기억이 나지 않으면 힌트보기를 한번 이용할 수 있습니다. 2:00 검색하기 버튼을 누르면 게임이 시작됩니다. 전체 속성 갯수 : 0 현재 맞춘 갯수 : 0 다시 도전하기 CSS 코드 : 애니메이션 본 CSS를 통해 살을 붙여줍니다 👀 /* * { margin: 0; padding: 0; box-sizing: borde..
JS 응용하기 슬라이드 이펙트 06 슬라이더 이펙트_06 이미지 5개를 기준으로 맨 뒷부분에 첫 이미지를, 맨 앞부분에 마지막 이미지를 추가해 마지막 이미지에 도달시 순간적으로 첫 이미지로 이동시켜 무한으로 이동시키는것과 같은 효과를 지닌 예제를 만들어 보도록 하겠습니다 👩🏻‍💻 HTML 코드 HTML 코드는 크게 신경쓸것이 없으나, 슬라이드를 구현하기 위해 하단과 같이 코드를 작성해 뼈대를 생성해줍시다 🏄‍♂️ 이미지1 이미지2 이미지3 이미지4 이미지5 prev next CSS 코드 : 애니메이션 CSS를 통해 각각 dot과 active 클래스를 생성해 슬라이드 닷 까지 구성해줍니다. 👀 /* slider */ .slider__wrap { /* background: #000; */ width: 100%; height: 100vh; /*..
JS 응용하기 슬라이드 이펙트 07 슬라이더 이펙트_07 닷 메뉴를 클릭하면 해당 이미지로 이동하고 플레이/정지 클릭 여부에 따라 슬라이드를 멈춰주는 예제를 만들어보도록 하겠습니다~ 👩🏻‍💻 HTML 코드 HTML 코드는 크게 신경쓸것이 없으나, 슬라이드를 구현하기 위해 하단과 같이 코드를 작성해 뼈대를 생성해줍시다 🏄‍♂️ 이미지1 이미지2 이미지3 이미지4 이미지5 prev next CSS 코드 : 애니메이션 CSS를 통해 각각 dot과 active 클래스를 생성해 슬라이드 닷 까지 구성해줍니다. 👀 /* slider */ .slider__wrap { /* background: #000; */ width: 100%; height: 100vh; /* background-color: #ccc; */ display: flex; align-i..
JS 응용하기 패럴렉스 이펙트_07 : 각 문장에 딜레이를 걸어 효과주기 🐢 패럴렉스 이펙트_07 각 span태그가 감싸여있지 않은 문장들을 span태그로 감싸 각 이미지와 span태그에 after/before 요소를 통해 효과를 주도록 해보겠습니다 👩🏻‍💻 HTML 코드 HTML 코드는 크게 신경쓸것이 없으나, 각 desc에 data-delay를 추가시켜 각 애니메이션에 딜레이를 줄겁니다!🏄‍♂️ 01 section1 우리는 사랑하는 친구들에 의해서만 알려진다. 02 section2 사랑은 눈으로 보지 않고 마음으로 보는 거지. 03 section3 두 분은 상처 하나 입지 않고, 대용사가 된 셈이오. 04 section4 그의 믿음은 그가 쓰는 모자의 유행처럼 변한다. 05 section5 잘 있거라! 우리가 언제 다시 만날지는 아무도 모른다. 06 section6 죄를 짓고..
JS 응용하기 패럴렉스 이펙트_06 : 각 글자마다 효과주기 ✨ 패럴렉스 이펙트_06 각 문자들을 한글자씩 쪼개 태그로 감싸준뒤 그 텍스트에 각각 애니메이션을 주도록 하겠습니다 ₍ · з · ₎ HTML 코드 HTML 코드는 크게 신경쓸것이 없으나, 각 desc에 split 클래스가 달려있는것을 자바스크립트로 인식시켜 span으로 각각 한글자씩 쪼개줄거기 때문에 split 클래스명을 꼭 적도록 해야해요! 01 section1 우리는 사랑하는 친구들에 의해서만 알려진다. 02 section2 사랑은 눈으로 보지 않고 마음으로 보는 거지. 03 section3 두 분은 상처 하나 입지 않고, 대용사가 된 셈이오. 04 section4 그의 믿음은 그가 쓰는 모자의 유행처럼 변한다. 05 section5 잘 있거라! 우리가 언제 다시 만날지는 아무도 모른다. 06 sect..
JS 응용하기 마우스 이펙트_06 : 좌표에 따라 텍스트를 움직이고 포인터에 변화주기! 마우스 이펙트 만들기! 마우스 위치에 따라 이미지들이 좌우로 움직이고 텍스트에 마우스가 올라가면 커서가 커지는 효과를 만들어볼게요! HTML 코드 : 뼈대 마우스 이펙트의 핵심은 cursor를 구성하는것이에요! 꼭 간단한 div를 통한 Cursor를 구성하도록 합시다! Pain Past Pain Past is pleasure. is pleasure. 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다 CSS 코드 : 살 1. 마우스가 이미지에 닿으면 반전이 되게끔 "mouse__cursor" 클래스에 "mix-blend-mode: difference;"를 설정해줍시다! 2. 화면을 절반으로 나눠 왼쪽에 오렌지 박스를 하나 만들어 놓습니다! .mouse__wrap { color: #fff; height: 10..
JS 응용하기 패럴렉스 이펙트_06 : 스크롤 값에 따라 텍스트를 순차적으로 나오게 하기 패럴렉스 이펙트_06 : 스크립트로 각 span에 CSS 애니메이션 적용하기 방법은 여러가지가 있겠지만 각 요소의 offsetTop값이 scrollTop(현재 스크롤 값) 이상이 되면 .split span의 요소를 찾아 애니메이션을 적용시키는 이펙트를 구현해보도록 하겠습니다! HTML 코드 : 뼈대 간단한 html 구조를 만들어 뼈대를 구성해보도록 합시다! 01 section1 우리는 사랑하는 친구들에 의해서만 알려진다. 02 section2 사랑은 눈으로 보지 않고 마음으로 보는 거지. 03 section3 두 분은 상처 하나 입지 않고, 대용사가 된 셈이오. 04 section4 그의 믿음은 그가 쓰는 모자의 유행처럼 변한다. 05 section5 잘 있거라! 우리가 언제 다시 만날지는 아무도 모른다..
JS 응용하기 서치 이펙트_05 : 중요도 갯수에 부합하는 CSS 속성 & 중요도에 따른 CSS 속성 찾기! 서치 이펙트_05 : 중요도 갯수에 부합하는 CSS 속성 & 중요도에 따른 CSS 속성 찾기! 방법은 여러가지가 있겠지만 switch와 dataset을 통해 중요도와 특수한 조건에 따른 결과를 찾아 출력시켜주는 searchEffect를 구현해보도록 하겠습니다~~ HTML 코드 : 뼈대 간단한 html 구조를 만들어 뼈대를 구성해보도록 합시다! filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 찾은 속성 갯수 : 0 CSS 코드 : 살 이제 뼈대를 구성하였으니 살을 붙여 searchEffect를 구현하기위한 준비를 마치겠습니다. * { margin: 0; padding: 0; b..
JS 응용하기 서치 이펙트_04 : map/find를 사용하여 원하는 CSS 속성 찾기! 서치 이펙트 만들기! JS의 map/find를 적절히 활용해 원하는 CSS 속성을 찾는 이펙트를 만들어보도록 하겠습니당~~~ HTML 코드 : 뼈대 간단한 html 구조를 만들어 뼈대를 구성해보도록 합시다! 쏘-스보기 퀴-즈 이펙트 쏘-스 보기.exe HTML JAVASCRIPT CSS X find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 표시됩니다!! 찾은 속성 갯수 : 0 CSS 코드 : 살 이제 뼈대를 구성하였으니 살을 붙여 searchEffect를 구현하기위한 준비를 마치겠습니다. * { margin: 0; padding: 0; box-sizing: border-box; font-family: "NexonLv1Gothic"; color: ..

CSS 애니메이션

-

최근에 올라온 CSS 애니메이션의 게시물을 한줄로 나열해봤습니다! * PC버전은 [shift] + 마우스 스크롤 [UP/DOWN]을 같이 눌러 왼쪽/오른쪽 스크롤이 가능합니다.
CSS 애니메이션 마우스를 따라가는 눈알 효과 만들어보기! 공이 돌아가는 애니메이션을 구현해보자~! 이번에는 눈알이 마우스를 따라 돌아가는 효과를 한번 구현해볼게요!! HTML 코드 html 코드는 별로 작성할게 없습니다 하단과 같이 작성 후 원하는 글자를 .text 클래스에 작성해 커스텀 하면 되더라구요! ABCDE CSS 코드 기본 적으로 모든 요소가 가운데에 정렬되고 살을 붙여주기 위해 하단과 같이 css 코드를 작성합니다. *{ margin: 0; padding: 0; box-sizing: border-box; } html, body{ height: 100%; overflow: hidden; } .wrapper{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width..
CSS 애니메이션 CSS를 통해 로딩화면 만들어보기 : 가운데를 중심으로 돌아가는 원들 공이 돌아가는 애니메이션을 구현해보자~! 공이 .ball 클래스를 중심으로 .ball:after가 360도로 돌아가는 효과를 구현해보도록 하겠습니다. 기대되는 마음을 품고 가~~~~~~보자고 HTML 코드 공이 돌아갈 수 있게 공들을 .ball 클래스를 적어 만들어주었어요! CSS 코드 사실상 이번 예제의 핵심인데 아래의 사항들을 생각하며 만들어 주시면 되더라구요! 1. .ball 클래스는 absolute로 설정해 중심을 각각 top,left,transform을 통해 가운데로 중심을 잡고 2. 그 .ball 클래스의 원을 :after를 이용해 생성해줍니다 3. .ball 주위를 돌아갈 수 있게 떨어트리기 위해서 :after에 absolute를 설정해 top을 0으로 설정해 떨어트려 만들어 줍니다 body..
CSS 애니메이션 점점 Long 해졌다가 Short 해지는 박스 애니메이션 만들기 늘어나는 박스 애니메이션 구현하기! 박스가 천천히 돌아가면서 점점 Long 해졌다가 short해지는 애니메이션을 가진 3D 박스를 구현해보도록 하겠습니다. HTML 코드 간단하게 HTML을 구성해 뼈대를 구축해봅시다! codi CSS 코드 0. cube 클래스를 가진 이번 주제인 박스는 기본적으로 rotate라는 애니메이션을 통해 돌아가도록 설정해주고 1. 각각 좌표값에 맞게 keyframes를 구성해준뒤 'front/back/right/left/bottom/top'의 이름으로 설정합니다. 2. 각 면이 돌아가는 박스에 맞춰 translate로 같이 이동시켜주고 3. scaleY를 통해 박스가 늘어나도록 해줍니다. body{ background-color: #222; height: 100vh; persp..
CSS 애니메이션 CSS로 3D hover 효과를 구현해보자! 3D 이펙트 오버 효과! 이야 오늘 정말 괜찮은 애니메이션이 올라온거 같아요 마우스를 오버했을때 3D 효과를 주는듯한 오버 효과인데 이번 시간에 한번 배워보도록 하겠습니다 가~~~~~~~~~~~~~~~~~~~~~~~보자고 ♪ ( - ࿀ - و(و " HTML 코드 : 이번 예제는 각각 왼쪽 오른쪽 사진에 오버했을때 앞뒷면을 다른 사진으로 구성하는것이 특징인데 그러기 위해서는 하단과 같이 작성하여 [front/back]각각의 사진을 img태그를 사용하여 넣어줍시다! Mouse Hover Effect 마우스 올리면 UP 💙 Mouse Hover Effect 마우스 내리면 DOWN 👇 Mouse Hover Effect 마우스 올리면 RIGHT 👉 Mouse Hover Effect 마우스 내리면 LEFT 👈 C..
CSS 애니메이션 원이 펄럭이는 애니메이션 만들어보기! 웨이브 애니메이션 주기! PUG와 SCSS를 통해 원을 생성하고 그 원이 펄럭이는듯한 애니메이션을 구현해보도록 하겠습니다! HTML 코드 : PUG를 사용 이번 예제는 PUG를 사용하여 HTML 보다 효율적으로 작업 해보겠습니다 각 원을 만들어주기 위해 for문을 통해 반복시켜 생성해줍니다. div.circle-wrap - for (var x = 1; x
CSS 애니메이션 무한으로 뛰어오르는 공 만들어 보자! 무한으로 튀어다니는 공을 만들어보자. 무한정으로 튀어오르는 공을 css를 통해 만들어보도록 하겠습니다. HTML 무한으로 튀어오르는 공의 형태륾 만들어주기 위해 'wrapper'클래스를 가진 div 박스를 만들어줍니다. CSS x축과 y축의 이동을 통해 무한으로 돌아가는 공을 만들어 주기 위해 translatex 와 translatey를 이용한 키프레임을 만들어줍니다!! *{ box-sizing:border-box; } body{ background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; ma..
CSS 애니메이션 통통 굴러가는 네모박스 📦 통통 굴러가는 네모 박스 통통 굴러가는 네모 박스를 한번 만들어보겠습니다! HTML 코드 하단의 예제용 html을 통해 클래스 .box를 만들어줍니다. CSS 코드 하단의 예제용 CSS을 통해 통통 굴러가는 애니메이션을 만듭니다. body { height: 100vh; background-image:linear-gradient(to top, #fff, 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: ab..
CSS 애니메이션 빙글빙글 돌아가는 원 만들기! 빙글빙글 돌아가는 원 빙글빙글 돌아가는 원 두개를 한번 만들어보겠습니다! HTML 코드 하단의 예제용 html을 통해 클래스 .circle1~2를 만들어줍니다. CSS 코드 하단의 예제용 CSS을 통해 클래스 .circle1~2를 만들어줍니다. CSS 코드 하단의 예제용 CSS을 통해 클래스 .circle1~2를 만들어줍니다. See the Pen Untitled by kimsangjunv1 (@kimsangjunv1) on CodePen.

제이쿼리 공부

-

최근에 올라온 제이쿼리 공부의 게시물을 한줄로 나열해봤습니다! * PC버전은 [shift] + 마우스 스크롤 [UP/DOWN]을 같이 눌러 왼쪽/오른쪽 스크롤이 가능합니다.
jQuery 제이쿼리 style 관련 메서드에 대하여.... 🦑 스타일 관련 메서드 이번 시간에는 살을 붙여주는 스타일과 관련된 메서드에 대해 알아보겠습니다~~ css() 메서드 요소에 class 속성을 추가시켜주는 메서드 입니다~~! 실행 분류 형식 취득 &("div").attr("width"); 생성, 변경 &("div").css("background-color", "red").css("padding", "10px"); &("div").css({"background-color", "red", padding: "10px" }); 콜백 함수 &("div").css("width", function(index, w) { // index는 각 div 요소의 index 0, 1, 2 // w는 각 div요소의 width 값 return css 속성 // 각 div 요소의 c..
jQuery attrClass? prop? 이 두가지 메서드에 대하여 알아보자! 속성 관련 메서드 이번 시간에는 클래스 속성과 관련된 메서드에 대해 알아보겠스빈다! attrClass() 메서드 요소에 class 속성을 추가시켜주는 메서드 입니다~~! 실행 분류 형식 취득 &("a").attr("href"); 생성, 변경 &("a").attr("href", "http://icoxpublih.com").attr("target", "_blank"); &("a").attr({href: "http://icoxpublih.com", target: "_blank"}); 콜백 함수 &("a").attr("href", function(index, h) { // index는 각 a 요소의 index 0, 1, 2 // h는 각a요소의 href 속성 return attribute(속성) // 각 a 요..
jQuery 4가지! 클래스 메서드? 클래스 관련 메서드 이번 시간에는 클래스와 관련된 메세드에 대해 알아보겠스빈다! addClass() 메서드 요소에 class 속성을 추가시켜주는 메서드 입니다~~! 실행 분류 형식 추가 대 소문자 구분 없이 정규표현식과 문자열을 비교합니다. 추가 $("").addClass(function(index, className) { //index는 각 div 요소의 index 0, 1, 2 //className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가했습니다. }); 내용1 내용2 내용3 예시 See the Pen example by kimsangjunv1 (@kimsangjunv1) on CodePen. removeClass() 메서드 요소에 class..
jQuery 속성 선택자에 대해 araboza~~~ jQuery : 속성 선택자? 속성 선택자란 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따진 후 해당 요소를 선택해주는 함수에요! 속성 선택자 종류 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 요소를 선택하며, 'abc' 앞뒤로 연결된 문자가 없어야 합니다..
jQuery 필터 선택자에 대해 알아보자! 무야호~~~~! jQuery : 필터 선택자? 필터 선택자란 선택자에 ":"이 붙은 선택자를 필터 선택자로 명명하고 있어요! 필터 선택자 종류 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("td:first") 첫 번째 td요소를 선택합니다. :last $("td:last") 마지막 번째 td요소를 선택합니다. :header $(":header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li요소를 선택하며, index는 0번이 첫 번째 요소입니다. :gt() $("li:gt(0)") index가 0보다 큰 li요소들을 선택합니다. :lt() $..
jQuery 기본/탐색&기타탐색 선택자는 대체 뭘까? jQuery 제이쿼리란 HTML의 클라이언트 조작을 단순화 하도록 설계된 자바스크립트 라이브러리로써 오픈 소프트웨어이며 jQuery 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인 되었고, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공합니다. 다운로드 방식은? 크롬 브라우저에서는 jQuery 라이브러리를 복사해야 하는 번거로움이 있기 때문에 크롬브라우저에서 다운을 받을 경우 웹페이지에 있는 라이브러리 코드 전체를 복사하여 웹 에디터에서 붙여 넣고 jquery-3.3.1.min.js로 저장해주면 됩니다. [다운로드 바로가기] : 이곳에서 'Download the compressed, production jQuery 3...

SITE 제작

-

최근에 올라온 SITE 제작의 게시물을 한줄로 나열해봤습니다! * PC버전은 [shift] + 마우스 스크롤 [UP/DOWN]을 같이 눌러 왼쪽/오른쪽 스크롤이 가능합니다.
SITE 제작 사이트 유형 종합_02 : 버그 픽스와 함께 사이트 유형 종합의 완성도를 UP! 사이트 유형 종합_02 저번에는 기초적인 유형의 틀 자체만 만들었었는데 지금까지 만들었던 사이트 유형들을 모두 조합해 버그들을 fix한 사이트 유형을 만들어보도록 하겠습니다~! HTML 코드 햄버거 메뉴 / swiper을 이용한 이미지 슬라이드 이 두가지만 유의해 저번 유형때 만들었던 코드에 추가시켜줍니다. ##햄버거 메뉴 : html 코드에 적혀있는 span은 햄버거 메뉴의 막대기 역할을 담당합니다. ##swiper : 슬라이드 유형 구현을 위한 기본적인 틀이 잡혀있는 플러그인을 사용하기 위해 하단과 같은 코드를 삽입하였습니다. 어디로 가볼까? #새하얀_눈. 눈 덮힌 마을 속 고히 잠들어 있는 새싹들 자세히 보기 사이트 보기 어디로 가볼까? #새하얀_눈. 눈 덮힌 마을 속 고히 잠들어 있는 새싹들 자세..
SITE 제작 사이트 유형 종합해보기! 사이트 유형 종합 해보자! 지금까지 만들어두었던 사이트 유형들을 모두 종합해 하나의 홈페이지로 만들어 보았습니다 자 그럼 가볼까요~~~~~~~~~~? HTML 작성 각 종 예제들의 코드를 종합해줍니다. 체크용 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 #여행_가자! 슬라이드 영역 이미지 영역 이미지 텍스트 영역 카드 영역 배너 영역 텍스트 영역 푸터 영역 로그인 #여행_가자! 자연으로 슬라이드 영역 이미지 영역 이미지 텍스트 영역 카드 영역 배너 영역 텍스트 영역 푸터 영역 슬라이드 영역 어디로 가볼까? #새하얀_눈. 눈 덮힌 마을 속 고히 잠들어 있는 새싹들 자세히 보기 사..
SITE 제작 내.디.코 : 티스토리 스킨 만들어보기_01 '내'가 '디'자인 해보고 '코'딩하기 요번에 한거는 숙제는 아닌데 선생님이 저번주쯤인가 PHP로 블로그를 만들어보신다고 하셨었는데 다들 기억나시나요? 그때 저한테 디자인 해보라고 말씀해주셔서 바로 그날 학원 끝나고 두개정도 만들어두었는데 무언가.... 조별작업도 그렇고 다른 배울것들도 많아서 왠지모르게 그대로 스윽 묻히게 될거같더라구요 그래서 차마 만들어둔건 못버리겠어서 눈물 똑똑 흘려가며 기록으로나마 남기려고 제가 직접 만들어보기 시작했어요🥲 이번것은 그 두개 중 첫번째 입니다! 피그마를 통해 레이아웃 잡아보기 디지-탈 느낌 조금 감도는 느낌으로 구상해봤는데 너무 강했으려나.. 뭐 아무렴 어떻습니까 ^^b 뭔가 블로그라고 해서 꼭 블로그하면 떠오르는 모습들로 가기보다는 조금은 다르게 가고싶어서 이렇게..
SITE 제작 패럴렉스 효과_03 : TOP 버튼과 네비 메뉴를 스크롤에 따라 변화시켜보자! 패럴렉스 이펙트_03 구현하기 이번 예제는 하단과 같은 기능을 구현해보도록 하겠습니다 1. 이전 스크롤값과 현재 스크롤값을 비교 후 스크롤을 올렸을때 이전 스크롤값보다 작으니 메뉴가 나타나는 기능 2. scrollTop값과 브라우저 내부 높이값을 더한 값보다 스크롤되지 않은 브라우저 내부 높이 보다 작을때 "top" 버튼에 클래스 show를 붙여 top버튼이 브라우저 맨 하단까지 내렸을때 버튼이 보이는 기능 HTML 작성 Top버튼 구현을 위해 하단 부분을 이전 예제에 추가시킵니다. Top CSS 작성 이번 예제 구현을 위한 살을 붙여줍니다! /* parallax__nav */ #parallax__nav { position: fixed; right: 20px; top: -200px; z-index: 20..
SITE 제작 스크롤시 패럴렉스 효과의 2번째 예시를 구현해보자! 패럴렉스 이펙트_02 구현하기 스크롤을 내릴때 각 요소의 위치마다 번호에 show를 붙여 해당 속성의 스타일을 불어넣는 에제를 구현해보도록 하겠습니다! 동작원리 말로만 설명해드리면 이해가 어려울 수 있기에 하단의 사진을 통해 설명해드리겠습니다. HTML 작성 스크롤을 내릴때마다 선택되는 메뉴를 구현하기 위해 하단의 구조를 HTML에 추가시켜줍니다.. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 CSS 작성 간단한 CSS 를 통한 살을 붙여줍니다. /* parallax__nav */ #parallax__nav { position: fixed; right: 20px; top: 20px; z-index: 2000; background-color: rgba(0, 0, 0, 0.4); padd..
SITE 제작 배너 유형 01 한번 만들어 봅시다! 배너 유형_01 배너가 될 구간을 한번 같이 작업해보아요~~~~~! Figma 우선 피그마를 통해 기초적인 틀을 잡습니다! HTML html을 통해 간단한 구조의 뼈대를 작성해봅시다!! 배너 영역 오늘의 도시는 여기다! 다양하고 다채로운 도시의 모습은 이곳을 참조하세요! https://www.youtube.com/channel/UCqVDpXKLmKeBU_yyt_QkItQ/ 도시 속 모습_01 CSS 생각보다 구현 요소가 적으므로 붙여줄 살(css코드)도 적습니다. .banner__inner { background-image: url(../img/BANNER-TYPE01.jpg); background-repeat: no-repeat; background-position: center; background-..
SITE 제작 슬라이드 타입_01 : 기초 슬라이드 배너_01 슬라이드가 될 배너를 구현해보겠습니다! Figma 우선 피그마를 통해 기초적인 틀을 잡습니다! HTML html을 통해 기본적인 예제를 만들 뼈대를 구성합니다! 슬라이드 영역 CITY SIGHTSEEING 각각의 도시는 고유의 모습이 있습니다 한국은 과연 어떤 모습일까요? 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 CSS 이제 완성된 뼈대에 살을 붙여주어 슬라이드를 완성하기 위해 CSS를 작성해줍시다! .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background: url(../img/slider_bg01.jpg) no-repeat center / ..
SITE 제작 CSS를 통해 '다크모드'를 구현해보자! 다크모드? 다크모드는 평소 밝은 디자인이 위주였던 근래(?)의 디자인을 기기의 수명과 사용자의 눈 건강을 위하여 어두운 디자인으로 고려된 모드를 의미하는데요 오늘은 간단한 방법을 통해 각자의 사이트에 손쉽게 적용 할 수 있는 방법을 가져와봤어요! CSS : 적용법 사용자의 모바일/컴퓨터의 시스템 테마에 맞춰 각 css 스타일이 적용될 수 있도록 prefers-color-scheme를 사용합니다. @media(prefers-color-scheme: dark){ background-color: #12121a; /* !important는 사용자 개개인의 적용 가능 여부에 따라 사용하세요 ^^b! */ } CODEPEN : 적용예시 벌써 끝이네요! 생각보다 어려운것이 없습니다. 상단의 css만 적용해준다면 그 ..
SITE 제작 이미지/텍스트 유형 사이트 만들기! 이미지 텍스트 유형 만들기! 피그마를 이용해 그리드를 생성 후 각 규격에 맞게 요소들을 구성합니다. HTML 코드 웹 표준을 준수하기 위해 태그는 시멘틱 태그를 사용해 작성하며 효율적인 코드 작성을 위해 div태그를 여러개 만드는것이 아닌 한 태그안에 클래스를 다중으로 삽입합니다. 코드보기
SITE 제작 헤더 타입 사이트 만들기~ 헤더 영역 만들기! 피그마를 이용해 그리드를 생성 후 각 규격에 맞게 요소들을 구성합니다. HTML 코드 웹 표준을 준수하기 위해 태그는 시멘틱 태그를 사용해 작성하며 효율적인 코드 작성을 위해 div태그를 여러개 만드는것이 아닌 한 태그안에 클래스를 다중으로 삽입합니다. 코드보기 web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 CSS코드 폰트는 'NexonLv1Gothic'를 이용하고 .card 클래스를 생성해 카드 Ui를 구현합니다. 코드보기 @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-w..

illustration

-

최근에 올라온 illustration의 게시물을 한줄로 나열해봤습니다! * PC버전은 [shift] + 마우스 스크롤 [UP/DOWN]을 같이 눌러 왼쪽/오른쪽 스크롤이 가능합니다.
일러스트레이터 그리는 사람 표정 쏙 뺏어가는 사슴 펜툴로 그려보기! 펜툴 어도비 일러스트레이터는 벡터 이미지를 손쉽게 만들 수 있는데 이번 시간에는 펜툴을 이용한 심경이 복잡해보이는 사슴 이미지를 만들어보도록 하겠습니다~~~ 1. 시작이 좋습니다 이렇게 차근차근히 중심부터 그려나가봅니다. 2. 이때쯤부터 저도 사슴표정과 같아지기 시작합니다. 3. 다 한줄알고 줌 아웃 했던거였는데 제가 경솔했네요 4. 과정은 힘들었으나 이렇게 완성하고 보니 뿌듯하네요 ^^ 다시 해볼거냐고 누군가 물어본다면 안할거같습니다. 5. 색도 이쁘게 넣어보았습니다 ^_^ 색칠하고나니 더 뿌듯하네용 6. 다른 여러가지 색도 넣어보았습니다 근데 마음에 들었던건 없었고 마우스만 시계 바늘 계속 돌아가듯이 돌리기만 했네요 마치며.. 과정은 힘들었으나 다 완성된 모습을 보니 마음이 괜히 뿌듯해졌습니다 덕분에..
일러스트레이터 펜툴을 이용한 토끼와 여러 그림 그려보기! 펜툴 어도비 일러스트레이터는 벡터 이미지를 손쉽게 만들 수 있는데 이번 시간에는 펜툴을 이용한 벡터 이미지를 만들어보도록 하겠습니다 오른쪽 하단에 위치한 예시 그림을 통해 펜툴을 이용해서 그림을 그립니다. 완성 그림에 색을 입힐때에는 반드시 구조를 깨서 색을 입혀줘야합니다, 이유는 추후 이미지에 변형이 일어나면 구상하고 기획했던 치수에서 벗어날 가능성이 생기기에 꼭 유의하며 제작합니다

자바스크립트 공부

-

최근에 올라온 자바스크립트 공부의 게시물을 한줄로 나열해봤습니다! * PC버전은 [shift] + 마우스 스크롤 [UP/DOWN]을 같이 눌러 왼쪽/오른쪽 스크롤이 가능합니다.
Javascript 배열 수정/찾기/포함여부를 알 수 있는 5가지 메서드에 대해서 알아보자! slice/splice slice : 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. splice : 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. const arrNum1 = [100, 200, 300]; const arrNum2 = [400, 500, 600]; const arrConcat = arrNum1.concat(arrNum2); const arrSpread = [...arrNum1, ...arrNum2]; indexOf/LastIndexOf indexOf : 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환해요 LastIndexOf : 주어진 값과 일..
Javascript concat&reduce/reduceRight에 대하여 알아보자~! concat 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. const arrNum1 = [100, 200, 300]; const arrNum2 = [400, 500, 600]; const arrConcat = arrNum1.concat(arrNum2); const arrSpread = [...arrNum1, ...arrNum2]; reduce/reduceRight 1. 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. 2. 누적기에 대해 함수를 적용하고 배열의 각 값 (오른쪽에서 왼쪽으로)은 값을 단일 값으로 줄여야합니다. const arrNum1 = [100, 200, 300]; const arrNum2 = [400, 500, 600..
Javascript reverse() / sort() : 배열 순서 반전 및 정렬해주는 메서드들! reverse 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다 const arrNum1 = [100, 200, 300, 400, 500]; const arrNumReverse = arrNum1.reverse(); sort 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. const arrNum2 = [100, 200, 300, 400, 500]; const arrNumSort2 = arrNum2.sort(); 예시보기 번호 기본값 메서드 리턴값 1 [100,200,300,500,500] push(600) 2 [100,200,300,500,500] push(600) 3 [100,200,300,500,500] push(600) 4 [100,20..
Javascript unshift / shift 메서드 : 배열 맨 앞에 추가 또는 제거해주는 메서드 두가지! Unshift 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다. const arrNum1 = [100, 200, 300, 400, 500]; const arrNumUnshift = arrNum1.unshift(600); 번호 기본값 메서드 리턴값 결과값 1 [100,200,300,400,500] push(600) 100,200,300,400,500,600 100,200,300,400,500,600 shift 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다. const arrNum2 = [100, 200, 300, 400, 500]; const arrNumShift = arrNum2.shift(600); 번호 기본값 메서드 리턴값 ..
Javascript 펼침연산자 / 비구조화 / 객체구조분해에 대해 araboza 펼침연산자 - 복사 펼침연산자를 사용해 데이터를 복사합니다! { const obj = { a : 100, b : 200, c : "javascript" } const name1 = obj.a; //객체의 a키 값을 상수 name1에 저장 const name2 = obj.b; //객체의 b키 값을 상수 name2에 저장 const name3 = obj.c; //객체의 c키 값을 상수 name3에 저장 document.write(name1); //상수 name1 출력 document.write(name2); //상수 name2 출력 document.write(name3); //상수 name3 출력 } 결과보기 100200javascript 펼침연산자-추가 펼침연산자를 사용해 데이터를 추가합니다! //추가의 ..
Javascript 재귀,콜백,스코프/클로저,클래스에 대한 정리 재귀함수 : 자기 자신을 호출 재귀함수란? 자기 자신을 호출시켜주는 함수입니다! // 반복적으로 function func(num){ if(num { console.log("funcB가 실행되었습니다. "); callback(); },1000); } function funcC(){ setTimeout(()=>{ console.log("funcC가 실행되었습니다. "); callback(); },1000); } function funcD(){ setTimeout(()=>{ console.log("funcD가 실행되었습니다. "); },1000); } // 출력 되기 전에 콜백함수를 통해 출력 값을 뒤바꿈 // 1초 뒤에 funcA가 실행되었을때 funcB를 불러들임 funcA(function(){ funcB..
Javascript mouseover & mouseenter 이벤트에 대해서 알아볼까? mouseenter/mouseover의 차이점에는 무엇이 있을까? 비슷한듯 다른 두 이벤트는 각각 미세한 차이가 있는데요 한번 이번 시간에는 그 차이에 대하여 알아보겠습니다 ^^v 이해를 돕기위해 가시적인 부분을 생각하여 좌표값도 넣어주었습니다 mouseover "mouseeover" 이벤트는 직접 이벤트를 걸지 않은 자식 요소에 마우스 포인터가 와도 발생하는 이벤트 입니다. 예시:: mouseover - 어느곳에 마우스를 가져다 대도 계산됩니다. 마우스를 올려보세요! [마우스가 올라오면 숫자가 카운팅 됩니다!] clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px ..
Javascript 요소 크기를 정하는 속성 및 메서드에 대하여..! 요소의 크기를 정할 수 있는 메서드? 메서드를 통해 변경하고자 하는 요소의 크기를 정할 수 있으며, 총 갯수는 약 15가지가 되더라구요,, 오늘은 이것에 대하여 알아보겠습니다! Dimensions width() - 요소의 가로(패딩/보더/마진 미포함) height() - 요소의 세로(패딩/보더/마진 미포함) innerWidth() clientWidth 요소의 가로(패딩포함, 보더/마진 미포함) innerHeight() clientHeight 요소의 세로(패딩포함, 보더/마진 미포함) outerWidth() offsetWidth 요소의 가로(패딩/보더포함, 마진 미포함) outerHeight() offsetHeight 요소의 세로(패딩/보더포함, 마진 미포함) outerWidth(true) - 요소의 가로..
Javascript 함수 유형 : 객체 생성자 / 프로토 타입 / 객체 리터럴 프로토 타입 함수 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지이고 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다 function func(num, name, word){ // const num = num; // 원래는 이렇게 const num에는 무엇 무엇 하나하나 지정해주었는데 this.num = num; //this 라는걸 쓰면서 재활용을 한다. this.name = name; //name이라는 변수에 name 매배변수의 값 1 저장 this.word = word; //word이라는 변수에 word 매배변수의 값 1 저장 }..
Javascript search() 함수에 대하여 search() search 함수는 indexOf랑 비슷한 역할을 담당하며, 숫자값과 위치값을 적지 않아도 찾아주는것이 특징입니다. ::사용방법 1. indexOf랑 비슷한 역할을 하며 2. 숫자값 위치값을 적지 않는다 3. "문자열".search("검색값"); 4. "문자열".search(정규식 표현); const str1 = "javascript reference" const currentStr1 = str1.search("javascript"); // 0번째부터 값이 있고 있으니까 맨앞의 0이 나옵니다. const currentStr2 = str1.search("reference"); // 11이 나옵니다 const currentStr3 = str1.search("j"); // 맨 앞에 j가 있으니..

HTML

-

최근에 올라온 HTML의 게시물을 한줄로 나열해봤습니다! * PC버전은 [shift] + 마우스 스크롤 [UP/DOWN]을 같이 눌러 왼쪽/오른쪽 스크롤이 가능합니다.
HTML 블록/인라인 구조에 대해 알아보자! 블록/인라인 구조...? 블록구조와 인라인구조는 각각의 특성이 있는데 이번 시간에 알아봅시다! ::블록구조 태그 한개가 화면상에 보이는 한 줄을 모두 차지하게 되며 여러 블록구조 태그를 사용할시 블록을 쌓듯이 계속 아래로 쌓여갑니다. ::인라인구조 태그 한개가 한줄에 모두 표현되며 여러 인라인구조 태그를 사용할시 오른쪽 방향으로 계속해서 쌓여갑니다. 인라인 구조 블록 구조 a address abbr article acronym aside b noscript bdo form big div br h1~6 button header em section img table input ul label ol script hr select figure span figcaption textarea fieldset stro..
HTML HTML의 구조와 관련된 요소를 알아보자~~ 구조와 관련된 요소? 구조와 관련된 요소로 주로 사용되는 시멘틱 태그인, header/section/footer/nav/article/aside에 관한 설명입니다. 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 HTML 문서의 헤더 영역을 의미하는 태그로 제목, 내비게이션(메뉴), 검색 등의 내용을 포함할 수 있습니다. 텍스트, 인라인 요소, 블록 레벨 요소를 포함 가능하며 , 태그는 포함할 수 없습니다. HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며, 섹션 주세에 대한 제목 요소 ( ~ ) 를 포함하는것이 좋습니다. 텍스트, 인라인 요소, 블록레벨 요소를 포함할 수 있습니다. HTML 문서의 가장 하단 부분(푸터)을 의미하는 태그로 섹션 작성자, 저작권에 대한 정보, 관..
HTML 벡터/비트맵 비트맵 비트맵이란? 비트맵 그래픽이란 픽셀 하나하나의 조합으로 이미지를 표현하는 방식이며 정교하고 화려하게 표현 가능케하고 사진 이미지에 주로 사용되며 웹에서 이미지를 표시할 때는 비트맵 이미지를 사용합니다 비트맵의 단점? 비트맵은 크기를 늘리거나 줄이게 되면 이미지가 깨지게 되며 쉽게 말하자면 사진이 흐릿해지는 현상이 생깁니다. 비트맵의 확장자는? 비트맵의 확장자로는 [jpg, jpeg, png, gif] 가 있습니다. 벡터 그래픽 벡터 그래픽이란? 벡터 그래픽은 수학적원리를 이용해 그림을 표현하는 방식이며, 특성상 이미지의 크기를 늘리고 줄여도 손상되지 않습니다. 벡터 그래픽의 단점? 복잡한 그림을 표현할때는 컴퓨터에 엄청난 부담을 준다는 단점이 있기에 빠른 정보를 출력해야하는 웹에서는 정교한 그림엔..
HTML W3C 웹 표준에 대하여 알아보자~~~!!! 웹 표준을 위한 가이드라인 W3C 웹표준 W3C의 설립 취지는 웹의 지속적인 성장을 도모하는 프로토콜과 가이드라인을 개발하여 월드 와이드 웹의 모든 잠재력을 이끌어 내는 것이며, 설립 목적인 웹 표준과 가이드라인 개발을 수행하고 지금까지의 결과로 지난 10년간 80여개의 W3C 권고안을 발표하였습니다. 그 덕에 많은 브라우저들이 탄생했음에도 W3C의 활동으로 인해 규칙이 정해져 통일된 웹 브라우저 환경이 조성되었습니다. 웹 표준 웹 표준이란? 1. 웹에서 표준적으로 사용되는 기술 또는 규칙 2. 표준화 단체인 w3c가 권고한 표준안에 따라 웹사이트를 작성해야한다. 3. 표준 스펙을 잘 지키는 것 뿐만 아니라 구조적 마크업과 표현 레이아웃 및 사용자 행쥐 제어를 잘 분리하는 구축 방식이다. 중요한 이유? ..
HTML 블록/인라인 요소가 뭘까? 블록/인라인 HTML에 존재하는 모든 요소는 어떻게 보일지 각 display를 지니게 되어있는데 , 블록과 인라인 두가지로 정해진다. 01. 블록 요소 블록 요소는 한 라인을 모두 차지하는 속성을 지니고 있습니다. { lt;head> 블록 레벨 요소 블록 레벨 요소 블록 레벨 요소 성질 줄 바꿈이 생깁니다. } ,, 요소들은 블록의 성질을 지니고 있어 화면상 줄 바꿈 현상이 일어남 02. 인라인 요소 인라인 요소는 블록 레벨 요소와 달리 줄 바꿈 특성이 없고 행이 바뀌지 않고 한줄 출력을 하며, 요소의 너비도 해당 라인의 전체가 아닌 HTML 요소의 내용 만큼만 차지 { 인라인 요소 인라인 요소는 한 줄로 출력됩니다. } , 요소들은 인라인 성질을 지니고 있어 행이 안바뀌고 한줄 출력 됨 요소 유형 특징..
HTML 시멘틱 마크업에 대하여 01. 시멘틱 마크업 시멘틱 사전적 의미는 '의미론적인'이라는 해석, 의미에 부합하는 태그를 사용하라는 뜻 마크업을 해야하는 이유는 모든 사람들이 정보를 동일하게 받아들일 수 있는 환경이 아닐수도 있기 예를들어 시각장애인의 경우 html 문서의 콘텐츠 정보를 음성으로 전달해야하는데 이럴경우 전달을 위한 태그의 의미가 적절해야한다. { 반응형웹 } 위와 같이 할시 그저 '반응형웹'이라고만 읽어주기 떄문에 제목인지 알 수가 없다. { 반응형웹 } 위와 같이 해야만 이 부분을 '반응형웹' 헤딩 일이라고 읽어준다면 이 부분이 제목인지 알 수 있게 됩니다.
HTML 기본 규칙 mark up 기본 규칙 마크업을 할 때 기본적으로 알고 있어야 하는 문법들 1. 요소는 시작 태그와 종료 태그가 있어야 합니다. 요소는 시작 태그와 종료 태그가 있어야 한다(o) 요소는 시작 태그와 종료 태그가 있어야 한다. (x) 태그 중에는 종료 태그가 없는 요소들도 있습니다. 이러한 요소를 '빈 요소(empty element)'라고 하는데, 자주 사용되는 빈 요소에는 ,,,,, 등이 있습니다. 2. 요소는 제대로 중첩되어야 합니다. 중첩된 요소가 있을 때는 바르게표현해야한다.(o) 중첩된 요소가 있을 때는 바르게표현해야한다.(x) 마지막에 정의한 태그를 가장 먼저 닫아야 한다는 뜻인데, 이러한 중첩 관계를 부모와 자식관계라고도 합니다. 여기에서는 태그가 부모 요소가 되고, 태그가 자식 요소가 됩니..
HTML HTML : 기초 HTML 기본 문서 html 요소는 요소와 로 구성되어 있으며, 요소 안에는 , , , , 등의 요소들이 올 수 있습니다 요소명 설명 HTML 문서의 설명, 키워드, 문서의 작성자 등을 지정합니다. HTML 문서의 제목을 지정합니다. 외부의 CSS 파일을 HTML 문서에 연결할 때 사용합니다. HTML 문서 내에서 스타일(CSS)을 정의합니다. 자바스크립트를 HTML 문서 내부에서 정의하거나 외부에서 자바스크립트 파일을 불러올 때 사용합니다. [예시 1-1]에서 나 처럼 태그 내부에 부가적인 설정값을 선언하는 것을 속성(attribute)이라고 합니다. lang 속성은 HTML 문서에서 사용하는 언어를 말하며 lang="ko"는 한국어, lang="en" 영어를 의미 lang 속성 중요이유 언어 설정에 ..

CSS

-

최근에 올라온 CSS의 게시물을 한줄로 나열해봤습니다! * PC버전은 [shift] + 마우스 스크롤 [UP/DOWN]을 같이 눌러 왼쪽/오른쪽 스크롤이 가능합니다.
CSS CSS 애니메이션 : 걸어가는 이미지 만들기! CSS 이미지 애니메이션 각각의 장면을 연속적으로 등장시켜 움직이는듯한 애니메이션을 줄 수 있습니다! CSS 하단의 CSS 백그라운드 포지션이 최대 본인이 적용하려는 이미지의 해상도에 맞게끔 설정해줍니다! .step { height: 700px; background: #7e7e7e; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(https://github.com/kimsangjunv1/coding/blob/main/animation/img/ani1.jpg?raw=true); border-radius: 0; position: absolute; left: 50%; top: 50%; transform: tr..
CSS CSS 애니메이션 : 요소의 움직임! SVG로 도형 만들어보기 svg 태그안에 rect를 point로 수치를 조정해 도형을 구현해낼 수 있는데 한번 이번 시간에는 해당 부분에 대하여 학습해봅시다! animation 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝나고 난 뒤 어떤 값을 적..
CSS svg를 이용해 애니메이션을 구현해보자! SVG ANIMATION svg에 애니메이션을 줄 수도 있습니다 해당 부분에 대하여 학습해봅시다! 기초적인 애니메이션 stroke-width 값을 조정하는 애니메이션을 만들어 기존에 만들어둔 벡터 도형(선)에 애니메이션을 불어넣습니다! HTML 하단의 HTML 코드를 입력하여 기초 뼈대를 잠아주고 대신 stroke-width값이 조절 가능한 애니메이션이 동작 할 수 있도록 stroke-width값을 각각 도형에 알맞게 넣어줍니다. CSS : KEYFRAMES CSS 작성시 stroke-width 값을 조절하는 애니메이션을 만들어 줍시다! .ani1 { width: 100px; height: 100px; x: 30px; y: 30px; fill: none; stroke: #880E41; stroke-wid..
CSS svg로 도형 만들기! SVG ANIMATION svg 태그안에 rect를 point로 수치를 조정해 도형을 구현해낼 수 있는데 한번 이번 시간에는 해당 부분에 대하여 학습해봅시다! 벡터 이미지 벡터 이미지란 아무리 확대하여도 깨지지 않는 이미지를 의미하는데요, 보통 일러스트레이터에서 사용하는 도형이 벡터 이미지 입니다! SVG 클리핑 마스크 포토샵에 클리핑 마스크를 이용하면 변화시키고 싶은 도형에 다양한 변화를 줄 수 있듯, css로도 해당 부분에 대한 처리가 가능합니다 SVG SVG
CSS 요소...를 숨...겨보자...! 요소를 숨기는 방법 요소를 숨기기 위해서는 총 5가지 방법이 있으며 해당 부분에 대해 알아보겠습니다. CSS : 예제용 간단한 예제를 만들어보기 위해 하단의 CSS를 작성하였습니다. .example{ background-color: #5f29d3; color: #fff; padding: 20px; border-radius: 10px; opacity: 1; } .example p{ padding: 15px; } .example:hover p.one{ display:none; } .example:hover p.two{ visibility: hidden; } .example:hover p.three{ opacity: 0; transition: all 0.25s; } .example:hover p.four{ w..
CSS 색을 정의하는 총 7가지의 다양한 방법! CSS 색상표현 CSS에서는 총 3가지 [색상 이름으로 표현/RGB 섹상값으로 표현/16진수 색상값으로 표현] 로 나뉘는데 각 표현에 대하여 배워보곘습니다. 색상의 이름으로 표현하는 방법 색상의 고유 이름으로 표현이 가능하며 대소문자를 구별하지 않으며, w3c에서 정의한 총 16개의 HTML4 표준 색상 이름은 아래와 같습니다. color: gray color: aqua color: black color: blue color: fuchsia color: green color: lime color: maroon color: navy color: olive color: purple color: red color: silver color: teal color: yellow color: white RGB 색상값..
CSS 스프라이트/ir효과/백그라운드 표현 방법에 대하여 가~보자고~! 스프라이트란? 여러가지의 이미지가 한 이미지 안에 모여 있는것을 말합니다 스프라이트 예시 제작해보기 스프라이트에 들어갈 각 그림간의 간격은 추후 background-position을 쉽게 파악하기 위해 좌표가 딱 50으로 떨어지게끔 작업해주고 스프라이트 이미지를 만들어 줍니다. CSS 코드 버튼의 글자는 가리고 이미지만 보여주기 위해 ir효과를 주어 글자는 숨기고 그림만 띄우게 css를 작성하겠습니다. 또한 간단한 hover효과를 주어 눈으로 좀 더 확인이 편하게 해보겠습니다. ir효과 : 리더기는 텍스트만 읽기 가능하기 때문에 이미지 설명을 위해 사용하며 시각적으로 불편함이 없도록 텍스트만 안보이게 숨겨주고 실제로 설명은 붙어있지만 이미지만을 보여줄때 사용하는 방법입니다. ir 효과 CSS코드보기 /*..
CSS SCSS에 대해 알아봅시당~~ SCSS란? sass란 Syntactically Awesome Style Sheets의 약자로 CSS에서 복잡하게 넣었던 요소들을 scss를 통해 간단하게 표현 가능케해서 가독성을 높여주고 유지보수를 쉽게 해줍니다. SCSS 표기 예시 $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } SASS 표기 예시 $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color CSS 기존 사용 예시 body { font: 100% Helv..
CSS 꼬리 흔드는 강아지를 만들어보자! 꼬리 흔드는 강아지 만들기 강아지를 만들어 보겠습니다! 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 코드로 보기 SCSS 코드 SCSS를 통해 불편하게 적었던 CSS를 편하게 적고 강아지에게 동적효과를 주기위해 animation 효과를 줍니다! $dog-width: 100px; $interval: 200ms; $..
CSS 미디어 쿼리...? 미디어 쿼리(media query) 미디어 쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나이며, 반응형 웹 디자인에서는 미디어 쿼리를 사용해 적용하는 스타일을 기기마다(화면 크기마다) 전환할 수 있습니다. 상단의 예시는 최소 가로폭이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결한다는 뜻입니다. 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 또한 다음 트로이 (http://troy.labs.daum.net/)에서는 기기별 해상도를 제공하고 실제 작..

LAYOUT

-

최근에 올라온 LAYOUT의 게시물을 한줄로 나열해봤습니다! * PC버전은 [shift] + 마우스 스크롤 [UP/DOWN]을 같이 눌러 왼쪽/오른쪽 스크롤이 가능합니다.
LAYOUT 레이아웃 배치 방법 05 : [float,grid,flex] 레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조이며, 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float을 이용한 레이아웃 float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법 입니다 * { margin: 0; height: 0; } #wrap { width: 100%; margin: 0 auto; background-color: #000; } #header { width: 100%; height: 100px; background-color: #EEEBE9; } #nav { width: 100%; height: 100px; background-color: #B9AAA5; } #main { width..
LAYOUT 레이아웃 배치 방법 04 : [float,grid,flex] 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조이며, 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데에 요소들이 들어갈 영역을 설정합니다. float을 이용한 레이아웃 float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법 입니다, 다만 float를 사용할때는 레이아웃이 깨지는 경우가 생기는데 이럴때는 깨지는 영역에 clear:both를 사용하면 되며, 좀 더 올바른 방법으로는 clearfix를 사용해 해결하는 방법이 주로 사용되곤 합니다. *{ margin: 0; padding: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; b..
LAYOUT 레이아웃 배치 방법 03 : [float,grid,flex] 레이아웃03 이번 레이아웃은 전체 영역이 들어간 구조이며, 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float을 이용한 레이아웃 float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법 입니다, 다만 float를 사용할때는 레이아웃이 깨지는 경우가 생기는데 이럴때는 깨지는 영역에 clear:both를 사용하면 되며, 좀 더 올바른 방법으로는 clearfix를 사용해 해결하는 방법이 주로 사용되곤 합니다. *{ margin: 0; } body{ background-color: #fff3e0; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; ..
LAYOUT 레이아웃 배치 방법 02 : [float,grid,flex] 레이아웃02 이번 레이아웃은 전체 영역이 들어간 구조이며, 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float을 이용한 레이아웃 float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법 입니다 *{ margin: 0; } #wrap { width: 1200px; margin: 0 auto; } #body{ background-color: #E8F5E9; } #header{ width: 100%; height: 100px; background-color: #C8E6C9; } #nav{ width: 100%; height: 100px; background-color: #A5D6A7; } #aside{ width..
LAYOUT 레이아웃 배치 방법 01 : [float,grid,flex] 레이아웃01 이번 레이아웃은 전체 영역이 들어간 구조이며, 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float을 이용한 레이아웃 float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법 입니다 *{ margin: 0; } body{ background-color: #fff3e0; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; background-color: #ffe0b2 } #nav { width: 100%; height: 100px; background-color: #ffcc80; } #aside { widt..

PRESENTATION

-

최근에 올라온 PRESENTATION의 게시물을 한줄로 나열해봤습니다! * PC버전은 [shift] + 마우스 스크롤 [UP/DOWN]을 같이 눌러 왼쪽/오른쪽 스크롤이 가능합니다.
PRESENTATION UI/UX 기획하기 #발표자료

전체보기 more

728x90
반응형

#HASH_TAGS

-

1

내일은 즐거운 월요일 오늘은 내가바로 오징어! 오늘 조업 마감했습니다. 슬라이드 결과 : 월요일 메서드 이건 또 뭐람 공부 제이쿼리 코드 오징어 1Kg 당 3000원 필터선택자 ImageSlideEffect scroll-snap-type HTML 오징어 두마리 포획 완료 코딩 JQuery 멈추지 않는 ' j ' 시리-즈 다크모드 Method 오징어 한마리 수확 완료! 화사한가요? 선택해주세요 숙제가 다양해서 너무 좋아요 울적하니 꽃을 달아봤습니다 오늘도 웹표준은.. scroll-snap-align

티스토리툴바