Giant Danio Fish
본문 바로가기

CodingKing168

이미지 스프라이트 / 백그라운드 표현 / IR 효과 이미지 스프라이트 / IR 효과 / 백그라운드 표현 오늘은 CSS에서 자주 사용하는 이미지 스프라이트, IR 효과 , 백그라운드 표현에 대해서 알려드리겠습니다. 이미지 스프라이트란? 스프라이트(Sprite)이란 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미한다고 한다. 웹의 경우에서는 "여러 개의 이미지를 하나의 이미지로 만들어 놓는 것"을 의미합니다. 이미지 스프라이트는 태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용하여 삽입합니다. 이미지 스프라이트를 이용해서 백그라운드 표현하는 예시를 보여드리겠습니다. 네이버 페이스북 구글 카카오 태그를 작성한 후 가상요소 ::after를 CSS에서 설정합니다. a::after { content: .. 2022. 8. 19.
사이트만들기 - 이미지유형 03 사이트 만들기 이미지 유형03 이미지 유형03은 왼쪽 큰 이미지 한개와 오른쪽 4개의 이미지의 레이아웃 틀을 가지고있으며, 마우스를 이미지에 오버했을때 박스와 아이콘들이 올라오게 만들었습니다. Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 자동차 리스트 제 미래의 차고에 있는 슈퍼카 리스트.. 여러분들께 지금 소개시켜드립니다. 안전벨트 꽉매고 쫒아오세요. 테슬라 미국의 전기자동차 제조업체이다. 본사는 미국 텍사스 오스틴에 두고 있다. 설립자인 일론 머스크가 테크노킹[3]을 맡고 있다. 페이스북 페이지이동 페이지이동 페이지이동 페이지이동 BENZ 독일 메르세데스-벤츠 그룹 산하의 프리미엄 자동차 제조사 페이스북 페이지이동 LAMBORGHINI 1963년에 페루치오 람보르기니에.. 2022. 8. 19.
CSS - SCSS SCSS Sass(SCSS)란 CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다. CSS, SCSS의 차이점 SCSS 와 CSS의 차이점에는 CSS는 id,class로 스타일을 선언해 css에 넣어주는 반면에 SCSS는 $기호를 사용해서 직접 변수를 만든뒤 넣습니다. 예시로 확인하겠습니다. body { font: 100% Helvetica, sans-serif; color: #333; } 위의 표현이 CSS에서 사용하는 기본 표현이라면 SCSS에서는 변수를 선언해 아래쪽처럼 표현할 수 있습니다. $font-stack: Helvetica, sans-serif; $primary-color: #333; body { fon.. 2022. 8. 18.
CSS 강아지 만들기 CSS 이용해서 강아지 만들기 오늘은 css의 에니메이션 효과를 이용해서 강아지를 만들어보겠습니다 결과 See the Pen CSS Dog by younghwan12 (@younghwan12) on CodePen. HTML(Pug) HTML에서 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 CSS(SCSS) CSS에서 S.. 2022. 8. 18.
includes() 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.. 2022. 8. 17.
사이트 만들기 - 이미지 유형02 사이트 만들기 이미지 유형02 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 사진 포즈 사진 찍히는 방법에 대해서 설명드리겠습니다. 포즈는 다양합니다. 우측 사선형 자세히보기 정면 시선형 자세히보기 얼짱 미녀형 자세히보기 CSS 작성 이미지에 마우스 hover 효과를 넣어서 마우스를 위에 올리면 박스가 올라와서 보이고 평소에는 overflow hidden을 사용해 보이지 않게 설정했습니다. /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); .gmark { font-family: 'GmarketSans'; font-weight: 400; } /* reset */ * { margi.. 2022. 8. 17.
사이트만들기 - 이미지 유형01 사이트 만들기 이미지 유형01 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 축구 강의⚽ 축구에 관한 기초, 드리블, 슈팅 강의 리스트 입니다. 축구 기초 강의 축구는 열한명의 선수가 한 팀이되어서 하는 구기종목입니다. 볼라인 아웃, 반칙, 오프사이드, 등등 다양한 규칙이 있으며, 공격수 미드필더 수비수 골키퍼로 나뉩니다. 후보5명까지 있습니다. 자세히 보기 축구 기초 강의 축구는 열한명의 선수가 한 팀이되어서 하는 구기종목입니다. 볼라인 아웃, 반칙, 오프사이드, 등등 다양한 규칙이 있으며, 공격수 미드필더 수비수 골키퍼로 나뉩니다. 후보5명까지 있습니다. 자세히 보기 CSS 작성 /* fonts */ @import url('https://webfontworld.githu.. 2022. 8. 17.
Search Effect02 Search Effect02 검색기능 예제2번입니다. indexOf로 만든 1번과는 다르게 includes()를 사용해서 제작하였습니다.includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다. 그래서 사용자가 입력한 값을 미리 만들어놓은 input박스의 요소를 포함하고 있다면 보이게, 없다면 숨겨서 제작하였습니다. 원본 소스 보기 원본 사이트 보기 HTML 작성 searchEffect01 번과 마찬가지로 사용자가 이용 하기 위한 input 박스를 만들어 줍니다. 검색 대상도 데이터 이름으로 설정해 둡니다. includes()를 이용하여 검색하기 CSS 속성 검색하기 검색하기 플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요! 전체 속성 갯수 : 0 align-colo.. 2022. 8. 17.
문자열 결합 / 템플릿 문자열 문자열 : 문자열 결합 / 템플릿 문자열 템플릿 문자열은 내장된 표현식을 허용하는 문자열 리터럴{}입니다. `string text` //문자열 결합 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.write(str1 + str2); // 자바스크립트제이쿼리 //숫자(number) 결합 const num1 = 100; const num2 = 200; document.write(num1 + num2); //300 //문자열 결합 const text1 = "모던"; const text2 = "자바스크립트"; const text3 = "핵심"; document.write("나는 " + text1 +"(modern) " + text2 +"(javascript) "+ .. 2022. 8. 17.
문자열 관련 메서드 (replace(), replaceAll()) replace() / repalaceAll() replace() 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다. "문자열".replace("찾을 문자열", 변경할 문자열) "문자열".replace(정규식) "문자열".replace(정규식, 변경할 문자열) /g는 global의 약자로 여러개를 찾는다는 의미다. const str1 = "jcavscript reference"; const cirrentStr1 = str1.replace("javascript", "자바스크립트"); //자바스크립트 reference const cirrentStr2 = str1.replace("j", "J"); //Javascript reference const cirrentStr3 = str1.replace("e".. 2022. 8. 17.
문자열 관련 메서드 repeat() repeat() repeat() 메서드는 복사하여, 복사한 새로운 문자열을 반환합니다. str.repeat(count); const str1 = "javascript"; const currentStr1 = str1.repeat(0); //"" 0번 반복이므로 빈란이나옵니다. const currentStr2 = str1.repeat(1); //"javascript" const currentStr3 = str1.repeat(2); //"javascriptjavascript" 2022. 8. 17.
문자 관련 메서드 (padStart(), padEnd()) padStart() / padEnd() padStart/padEnd() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다. str.padStart(targetLength [, padString]) 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 con.. 2022. 8. 17.
문자열 관련 메서드 concat() concat() concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. 기존배열을 변경하지 않으며, 추가된 새로운 배열을 반환합니다. array.concat([value1[, value2[, ...[, valueN]]]]) const str1 = "javascript"; const currentStr1 = str1.concat("reference"); //javascriptreference const currentStr2 = str1.concat(" ", "reference"); //javascript reference const currentStr3 = str1.concat(", ", "reference"); //javascript, reference const curren.. 2022. 8. 17.
문자열 관련 메서드 (trim(), trimStart(), trimEnd()) trim() / trimStart() / trimEnd() trim() 메서드는 앞, 뒤 공백을 제거합니다. trimstart는 말그대로 앞쪽 공백, trimEnd는 뒤쪽 공백, trim은 공백을 전부 없앱니다. str.trim() // 예시입니다. const str1 = " javascript "; const currentStr1 = str1.trim(); //javascript const str2 = " javascript "; const currentStr2 = str2.trimStart(); //javascript const str2 = " javascript "; const currentStr2 = str2.trimEnd(); // javascript 2022. 8. 17.
문자열 관련 메서드 소문자 대문자(toUpperCase(), toLowerCase()) toUpperCase() / toLowerCase() toUpperCase() : 문자열을 대문자로 변경 하고 toLowerCase() : 문자열을 소문자로 변경 한다. str.toUpperCase() // 예시입니다. const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); //JAVASCRIPT const str2 = "JAVASCRIPT"; const currentStr2 = str2.toLowerCase(); //javascript 2022. 8. 17.
문자열 관련 메서드 split() split() 문자열에서 원하는 값을 추출하여 문자열을 반환하는 메서드입니다. "문자열".split(구분자); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); // 예시입니다. const str1 = "jcavscript reference" const currentStr1 = str1.split(''); //['j', 'c', 'a', 'v', 's', 'c', 'r', 'i', 'p', 't', ' ', 'r', 'e', 'f', 'e', 'r', 'e', 'n', 'c', 'e'] const currentStr2 = str1.split(' '); //['jcavscript', 'reference'] const currentStr3 = str1.split('', 1); //.. 2022. 8. 17.
Search Effect01 Search Effect 검색기능입니다. 쉽게 말해서 input박스를 만든 뒤에 input 박스에 사용자가 입력한 결과 값을 미리 만들어 놓은 리스트와 한글자씩 비교해 가면서 같은 단어들만 보이게 만드는 기능입니다. 원본 소스 보기 원본 사이트 보기 HTML 작성 사용자가 이용 하기 위한 input 박스를 만들어 줍니다. 검색 대상도 데이터 이름으로 설정해 둡니다. indexOf()를 이용하여 검색하기 HTML 태그 검색하기 검색하기 a : a 태그는 다른 페이지 이동을 설정합니다. abbr : abbr 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. acronym : acronym 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. address : address 태그는 웹 페이지의 연락처 정보를 .. 2022. 8. 16.
문자열 관련 메서드 (indexOf() / lastindexOf()) indexOf() / lastindexOf() indexOf는 문자열에서 특정 문자의 위치를 찾고 숫자를 반환합니다. 일치하는 값이 없을 시 -1을 반환합니다. lastindexOf는 indexOf와 같이 위치를 찾고 숫자를 반환하지만 기준점이 끝이 시작입니다. "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) "문자열".lastindexOf(검색값) "문자열".lastindexOf(검색값, 위치값) // 예시입니다. const str1 = "javascript reference"; const currentStr1 = str1.indexOf("javascript"); //0 const currentStr2 = str2.indexOf("reference"); //11 const .. 2022. 8. 16.
문자열 관련 메서드 (slice(), susbstring(), substr()) 문자열 관련 메서드 자바스크립트 문자열 관련 메서드중 오늘은 slice(), susbstring(), 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 reference const curr.. 2022. 8. 16.
정규식 표현 정규 표현식 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. 정규 표현식 객체 주요 패턴 패턴 설명 abc abc 문자열을 검색합니다. /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색합니다. /[abc]d/는 'ad', 'bd', 'cd' [^abc] a, b, c를 제외한 문자 하나를 검색합니다. /[^abc]d/는 'ed', 'fd', 'gd' [A-Z] 알파벳 대문자 문자를 검색합니다. [a-a] 알파벳 소문자 문자를 검색합니다. [0-9] 0-9까지의 숫자를 검색합니다. . 하나의 문자를 검색합니다. 만약 '마침표' 문자 그대로의 의미를 사용할 경우 '￦.'으로 표현해야 합니다. \w 알파벳, 숫자, _를 검색합니다. \W 알파벳, 숫자, _를.. 2022. 8. 16.
구조관련요소 구조 관련 요소 01. 반응형웹 MENU01 MENU02 MENU03 MENU04 MENU05 콘텐츠 그룹01 콘텐츠 그룹02 주요 기사 광고 경기도 안산시 031)123-4567 eodnjs9605@gmail.com COPYRIGHT ⓒ All rights reserved. 결과 보기 원본 소스 보기 원본 사이트 보기 2022. 8. 15.
CSS 미디어 쿼리 미디어 쿼리(media query) 뷰포트의 해상도에 따라 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 iPho.. 2022. 8. 13.
CSS 기본문법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트 만으로 사용할 수도 있습니다. 또한 인라인 스타일시트는 대체로 거의 사용하지 않지만, 가장 우선순위가 높아서 꼭 필요한경우 편리하게 사용할 수 있습니다. CSS에서 주석은 /* */로 표현합니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 예시 // 예시입니다. 우리를 기쁘게 하는 것들. 결과 우리를 기쁘게 하는 것들 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *... 2022. 8. 13.
내장 함수 내장 함수 내장 함수란 자바스크립트에 기본적으로 내장되어 있는 함수들을 말합니다. 인코딩, 디코딩 함수 URL주소에 쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 이런 ㄱ녕우 인코딩 함수를 이용하여 문자를 부호화시키고 부호화된 문자를 다시 디코딩 함수를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent() 영문, 숫자와 () -_ . ~ * ! ' 을 제외한 문자를 인코딩합니다. decodeURIComponent() encodeURIComponent() 의 디코딩 함수 예시 // 예시입니다. var encodeStr = '자바스크립트'; console.log(encodeURICo.. 2022. 8. 13.
배열 관련 메서드(join(), push(), pop()) 배열 관련 메서드 자바스크립트 배열 관련 메서드중 오늘은 join(), push(), pop()에 대해서 소개드리려고 합니다. join() 배열 요소 문자열을 결합할 수 있고, 문자열을 반환할 수 있습니다. 자주쓰이며 중요합니다! 예시로 설명 드리겠습니다. // 예시입니다. const arrNum = [100, 200, 300, 400, 500]; const text1 = arrNum.join(''); //리턴값이 공백 없이 나옵니다. const text2 = arrNum.join(' '); //리턴값이 공백을 추가해서 나옵니다. const text3 = arrNum.join('★'); //리턴값에 ★을 추가해서 나옵니다. const text4 = arrNum.join('-'); //리턴값에 -을 추가해.. 2022. 8. 11.
사이트 만들기 - 카드 유형03 사이트 만들기 카드 유형03 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 건축의 세계 나무 나무는 나무질로 된 줄기 또는 가지를 가진 여러해살이 식물을 통틀어 이르는 말이다. 나무는 흔히 지구에서 가장 거대한 단일 생명체라고 알려져 있다. 나무가 무엇인지는 누구나 다 알지만, 막상 엄밀하게 정의되지 않는 식물의 분류이다. 다양한 나무들을 보면 나무들끼리 서로 유전자상의 공통점이 많이 있을 것 같지만, 실은 나무들은 다양한 식물들이 생존에 유리한 방향으로 진화하는 과정에서 서로 독립적으로 도달한 이상적인 형태이다. 김나무에오18 resources 딸기 딸기는 쌍떡잎식물의 이판화군 장미목 장미과의 여러해살이풀 혹은 그 열매를 가리킨다. 학문적 관점에 따라 딸기를 과일, 과채류.. 2022. 8. 10.
벡터와 비트맵 벡터와 비트맵 컴퓨터 그래픽에서 이미지 표현방식은 크게 두가지로 구분되는데, 백터와 비트맵 방식입니다. 이 둘에 대해서 알아봅시다. 벡터 벡터 방식은 점과 점을 연결함으로써 수학적 함수관계에 의해 이미지를 표현하여 선과 면을 만들어냅니다. 이렇게 만들어진 선이 두껫값과 색상 값, 곡률값을 갖거나 면이 색상 값을 가지면서 이런 점, 선, 면의 요소들이 모여 그래픽을 만들게 되는 것입니다. 여기서 벡터의 점은 좌표계(x,y)로 구성되기 때문에 비트맵의 픽셀과 달리 이미지의 크기 조절이나 변형 때문에 해상도가 깨지지 않습니다. 돋보기로 봐야 할 만큼 크기를 줄이거나 건물에 붙일 만큼 크기를 키워도 깨짐 현상이 없습니다. 그러므로 크기조절이 자유로워야 하는 로고나 여러 포인트로 조정되어야 하는 서체, 캐릭터 등.. 2022. 8. 9.
사이트 만들기 - 카드 유형02 사이트 만들기 카드 유형02 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 시멘틱 태그를 이용해서 구역에 맞게 태그를 작성합니다. 큰 틀을 만들면서 확인해 가면서 제작합니다. 화살표 모양은 svg파일을 불러와 만들었습니다. 배고픈 동물들 동물들은 항상 배가고픕니다. 다양한 동물들이 어떻게 살아가는지, 사냥은 어떻게 하는지 알아보도록 합시다. 북극 여우 북극에 사는 여우입니다. 일반적인 여우와는 다르게 북극은 항상 겨울이기에 북극곰을 따라다니며 먹고.. 사자 사자는 동물의 왕이라고 하죠, 고양이과 포유류이며, 의외로 사냥에 참여하지 않고, 사냥해온 고기를.. 표범 표범또한 고양이과 포유류입니다. 고기를 주식으로 섭취하며 고릴라들또한 위협하는 몇안되는 포식자.. 햄스터 햄스터는.. 2022. 8. 9.
사이트 만들기 - 카드 유형01 사이트 만들기 카드 유형01 Figma 일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다. HTML 작성 시멘틱 태그를 이용해서 구역에 맞게 태그를 작성합니다. 큰 틀을 만들면서 확인해 가면서 제작합니다. 축구 강의⚽ 축구에 관한 기초, 드리블, 슈팅 강의 리스트 입니다. 축구 기초 강의 축구는 열한명의 선수가 한 팀이되어서 하는 구기종목입니다. 볼라인 아웃, 반칙, 오프사이드, 등등 다양한 규칙이 있으며, 공격수 미드필더 수비수 골키퍼로 나뉩니다... 더 자세히 보기 드리블 기초 강의 드리블 할 때는 툭툭 발 바로 앞에 공이 있다고 생각을 하면서 합니다. 드리블 하면서 공을 보면서 하지 말고 시선을 정면으로 유지한채 연습하도록 합시다... 더 자세히 보기 슈팅 기초 강의 슈팅 할 때는 일단 어디로 찰지.. 2022. 8. 8.
웹 표준/ 웹 접근성/ 웹 호환성의 관계 웹 표준과 웹 호환성 웹 표준(Web Standards) 정의 웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미합니다. 웹 표준 준수 이유 국내 웹의 현실은 특정 브라우저와 사용자 등의 이용환경과 비표준 페이지 및 과도한 플러그인 사용으로 장애인, 노약자를 포함한 모든 사용자들에게 운영체제 및 웹 브라우저 등의 정보 접근 제약이 있다. 따라서 브라우저의 종류나 버전에 상관없이 모든 사용자들이 동일한 웹사이트를 볼 수 있도록 웹 표준기술 작업이 필요하며 웹 표준 준수는 웹 접근성 준수를 위한.. 2022. 8. 8.
광고 준비중입니다

티스토리툴바