coding for _

검색 이펙트 03 html, css, js - 알파벳별 목록 리스트 결과 원본 소스 보기 JavaScript 이번엔 charAt 메서드를 통해 알파벳별 목록 리스트를 만들었습니다.

charAt() charAt 메서드는 문자열에서 특정 인덱스에 위치하는 유니코드 단일문자를 반환합니다. charAt() //"문자열".charAt(숫자); const str1 = "javascript reference"; const currentStr1 = str1.charAt() //j const currentStr2 = str1.charAt("0") //j const currentStr3 = str1.charAt("1") //a const currentStr4 = str1.charAt("2") //v

match() match() 메서드는 문자열이 정규식과 매치되는 부분을 검색합니다. match() //"문자열".match(검색값) const str1 = "javascript reference"; const currentStr1 = str1.match("javascript") //[javascript] const currentStr2 = str1.match("reference") //[reference] const currentStr3 = str1.match("r") //[r] const currentStr4 = str1.match(/reference/) //[reference] const currentStr5 = str1.match(/Reference/) //null const currentStr6 ..

search() search() 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.sear..

search() search() 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.sear..

함수 유형 (Function Type) 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합 1. 함수 유형 : 함수와 매개변수를 이용한 형태 코드를 재활용하기 위해 함수를 사용한다. function func(num, str1, str2){ document.write(num+ ". " + str1 + "가" + str2 + "되었습니다. " + " ") } func("1","함수", "실행") //1. 함수가 실행되었습니다. func("2","자바스크립트", "실행") //2. 자바스크립트가 실행되었습니다. func("3","제이쿼리", "실행") //3. 제이쿼리가 실행되었습니다. 2. 함수 유형 : 함수와 변수를 이용한 형태 function func(num, str1, str..

pug & Scss로 고양이 animation 만들기 pug & Scss 활용해보기 결과 See the Pen cat animation by kimm99604 (@kimm99604) on CodePen. 코드펜 페이지 pug pug는 html을 조금 더 세련되게 쓸 수 있는 템플릿 언어, express 뷰 엔진이다. npm으로 설치할 수 있다. 라면에 밥 말아서 먹고 싶다 이렇게 쓰는 것을 p 라면에 밥 말아서 먹고 싶다 처럼 쓸 수 있다. .cat .ear.ear--left .ear.ear--right .face .eye.eye--left .eye-pupil .eye.eye--right .eye-pupil .muzzle Scss css보다 간단한 scss로 스타일을 주었다. $color-black: #..

이미지 스프라이트(Image Sprite) | ir 효과 | 백그라운드 표현 이미지 스프라이트(Image Sprite), ir 효과, 백그라운드 표현에 대해 알아봅시다. CSS 이미지 스프라이트(Image Sprite) 이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 이미지 스프라이트를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편합니다. 예제 figma 다음 예제는 하나의 이미지를 가지고 6개의 아이콘을 만드는 예제입니다. 6개의 아이콘을 만들기 위해 6개의 이미지를 사용하는..

block | inline 블록레벨 요소와 인라인 요소에 대해 알아봅시다. block 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다. 예제 See the Pen block by kimm99604 (@kimm99604) on CodePen. 요소는 텍스트의 레이아웃을 완전히 바꿔, 이전과 자기 자신의 텍스트, 그리고 이후의 세 부분으로 나눠버렸습니다. block 요소 , , , , , inline 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다. 보통 인라인 요소는 데이터와 다른 인라인 요소만 포함할 수 있으며, 블록 요소는 포함할 수 없습니다. 예제 See the Pen inline by kimm99..

SASS | SCSS 스타일 시트 언어 (Style Sheets) CSS | SCSS | SASS 정의 CSS : Cascading Style Sheets - 종속형 시트 SASS : Syntactically Awesome Style Sheets - 문법적으로 어썸한 스타일시트 SCSS : Sassy CSS - SASS의 3버전에서 새롭게 등장한 스타일 시트 SASS(SCSS)사용 이유 (장점) 웹에서는 분명 CSS만 동작하지만 프로젝트의 크기가 커지고 고도화될수록 유지보수에 큰 어려움이 생기게 됩니다. SASS(SCSS)는 이러한 이슈를 해소시켜 줄 수 있습니다. ex) 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 SCSS | SASS 차이점 SAS..