CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브 Reference204 substring 메서드는 문자열에서 시작 위치에서 종료 위치 값을 추출하여, 새로운 문자열을 반환합니다. Reference/Javascript substring() 메서드는 문자열에서 시작 위치에서 종료 위치 값을 추출하여, 새로운 문자열을 반환합니다. by @webs 2022. 11. 10. substring() substring() 메서드는 문자열에서 시작 위치에서 종료 위치 값을 추출하여, 새로운 문자열을 반환합니다. 원래 문자열을 변경되지 않으며, slice() 메서드는 시작값이 끝나는 값보다 크면 값을 추출할 수 없지만, substring() 메서드는 시작 값이 끝나는 값보다 크면 인수가 교환되어 값을 추출합니다. 특징 설명 유형(type) String.prototype.substring() 버전(version) ES1 결과값(return) 문자열(String) 사용성 ★★★☆☆ 문법(Syntax).. 2022. 11. 10. slice 메서드는 시작 위치에서 종료 위치 값을 추출하여, 새로운 문자열 및 배열을 반환합니다. Reference/Javascript slice() 메서드는 시작 위치에서 종료 위치 값을 추출하여, 새로운 문자열 및 배열을 반환합니다. by @webs 2022. 11. 10. slice() slice() 메서드는 시작 위치에서 종료 위치 값을 추출하여, 새로운 문자열 및 배열을 반환합니다. 즉 시작값과 끝값을 복사하여, 새로운 객체로 반환합니다. 원본은 변하지 않습니다. slice() 메서드는 배열 또는 문자열에서 사용 가능합니다. 특징 설명 유형(type) String.prototype.slice() / Array.prototype.slice() 버전(version) ES1 결과값(return) 문자열(String) or 배열(Array) 사용성 ★★★★☆ 문법(Syntax) "문자열".slice.. 2022. 11. 10. text-decoration-color 속성은 글자 라인의 색상 속성을 설정합니다. Reference/CSS text-decoration-color 속성은 글자 라인의 색상 속성을 설정합니다. by @webs 2022. 11. 9. text-decoration-color text-decoration-color 속성은 글자 라인의 색상 속성을 설정합니다. 컬러 속성을 적용하기 위해서는 기본적으로 text-decoration-line: underline이 설정 되어 있어야 합니다. 언더 라인의 위치와 색상, 종류 등도 세부적으로 변경이 가능합니다. 특징 설명 기본값 text-decoration-color : currentcolor 적용 text 버전 CSS3 사용성 ★★★☆☆ 정의(Definition) text-decoration-color 속성은 글자 라인의 색상 속성을 설정합니다. te.. 2022. 11. 9. text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다. Reference/CSS text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다. by @webs 2022. 11. 4. text-align-last text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다. 특징 설명 기본값 text-align-last : auto 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다. text-align-last : start 속성은 left와 같아 보이지만 글씨의 방향이 반대라면 차이가 납니다. text-align-last : end 속성은 right와 같아 보이지만 글씨의 방향이 반대라면 차이가 납니다. text-al.. 2022. 11. 8. style 태그는 문서의 스타일 정보를 설정합니다. Reference/HTML 태그는 문서의 스타일 정보를 설정합니다. by @webs 2022. 7. 4. 태그는 문서의 스타일 정보를 설정합니다. 스타일을 설정하는 방법은 여러가지가 있습니다. 그 중 태그를 통해서 스타일을 설정하는 방법입니다. 특징 설명 요소 - 닫는 태그 적용 버전 HTML4 시각적 표현 없음 사용성 ★★★★★ 정의(Definition) 태그는 문서의 스타일 정보를 설정합니다. 태그는 3. 외부 링크로 설정하는 방법 : 이 방법을 가장 많이 사용함 문서와 관련된 태그(Document Related Tag) 태그는 문서의 최상단 요소를 나타냅니다. 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 참고(Reference) htt.. 2022. 11. 8. concat() 메서드는 매개변수로 전달된 문자열을 받어, 결합된 새로운 문자열을 반환합니다. Reference/Javascript concat() 메서드는 매개변수로 전달된 문자열을 받어, 결합된 새로운 문자열을 반환합니다. by @webs 2022. 11. 7. concat() concat() 메서드는 매개변수로 전달된 문자열을 받어, 결합된 새로운 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.concat() / Array.prototype.concat() 버전(version) ES1 결과값(return) 문자열(String) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".concat(문자열, 문자열,....) "배열".concat(문자열, 문자열,....) const str = "javascript"; str.concat("reference"); //jav.. 2022. 11. 8. at 메서드는 지정한 숫자를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다. Reference/Javascript at() 메서드는 지정한 숫자를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다. by @webs 2022. 11. 7. at() at() 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다. 양수와 음수 모두 설정 할 수 있으며, 음수 값의 경우 뒤에서부터 인덱스 값을 설정합니다. at() 메서드는 배열 또는 문자열에서 둘다 사용이 가능합니다. 특징 설명 유형(type) String.prototype.at() / Array.prototype.at() 버전(version) ES6 결과값(return) 문자열 요소 or undefined 사용성 ★★☆☆☆ 문법(Syntax) "문자열".at(인덱스) "javascript r.. 2022. 11. 7. link 태그는 문서의 외부 리소스를 설정합니다. Reference/HTML 태그는 문서의 외부 리소스를 설정합니다. by @webs 2022. 7. 4. 태그는 문서의 외부 리소스를 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 없음 버전 HTML4 시각적 표현 없음 사용성 ★★★★★ 정의(Definition) 태그는 문서의 외부 리소스를 설정합니다. 태그는 일반적을 스타일시트 파일을 주로 연결하지만 파비콘이나 웹폰트를 연결 할 때도 사용합니다. CSS 연동은 요소를 사용하고, SCRIPT 연동은 요소를 사용합니다. 문서와 관련된 태그(Document Related Tag) 태그는 문서의 최상단 요소를 나타냅니다. 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○.. 2022. 11. 6. text-align 속성은 텍스트 정렬 방식을 설정합니다. Reference/CSS text-align 속성은 텍스트 정렬 방식을 설정합니다. by @webs 2022. 7. 4. text-align text-align 속성은 텍스트 정렬 방식을 설정합니다. start와 end 속성은 텍스트의 방향이 다를 경우 left와 right의 차이점을 알 수 있습니다. 특징 설명 기본값 text-align : left 적용 text 버전 CSS1 사용성 ★★★★★ 정의(Definition) text-align 속성은 텍스트 정렬 방식을 설정합니다. text-align : start 속성은 left와 같아 보이지만 글씨의 방향이 반대라면 차이가 납니다. text-align : end 속성은 right와 같아 보이지만 글씨의 방향이 반대라면 차이가 납니다. text-alig.. 2022. 11. 5. base 태그는 문서의 기본 URL을 설정합니다. Reference/HTML 태그는 문서의 기본 URL을 설정합니다. by @webs 2022. 7. 4. 태그는 문서의 기본 URL을 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 참고(Reference) https://html.spec.whatwg.org/multipage/semantics.html#the-base-element 2022. 11. 4. charCodeAt 메서드는 지정한 숫자의 유니코드 값을 반환합니다. Reference/Javascript charCodeAt 메서드는 지정한 숫자의 유니코드 값을 반환합니다. by @webs 2022. 7. 4. charCodeAt() charCodeAt() 메서드는 지정한 숫자(index)의 유니코드 값을 반환합니다. 특징 설명 유형(type) String.prototype.charCodeAt() 버전(version) ES1 결과값(return) 숫자(UTF-16) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".charCodeAt(숫자) "javascript reference".charCodeAt() //106 "javascript reference".charCodeAt('0') //106 "javascript reference".charCodeAt('1') //97.. 2022. 11. 4. animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다. Reference/CSS animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다. by @webs 2022. 11. 4. animation animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-name: none; animation-duration: 0s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animati.. 2022. 11. 4. head 태그는 문서 정보에 해당하는 내용을 설정합니다. Reference/HTML head 태그는 문서 정보에 해당하는 내용을 설정합니다. by @webs 2022. 7. 4. 예제2(Sample) head 요소 안에 올 수 있는 요소 예제입니다. 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 참고(Reference) https://html.spec.whatwg.org/multipage/semantics.html#the-head-element 2022. 11. 3. endsWith 메서드는 끝나는 문자열에서 검색하여 불린을 반환합니다. Reference/Javascript endsWith 메서드는 끝나는 문자열에서 검색하여 불린을 반환합니다. by @webs 2022. 7. 4. endsWith() endsWith() 메서드는 끝나는 문자열에서 검색하여 불린(true, false)을 반환합니다. 특징 설명 유형(type) String.prototype.endsWith() 버전(version) ES6 결과값(return) 불린(true or false) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".endsWith(검색 문자열)" "문자열".endsWith(검색 문자열, 위치값)" "javascript reference".endsWith('reference') //true "javascript reference".endsWith('e'.. 2022. 11. 3. animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다. Reference/CSS animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다. by @webs 2022. 7. 4. animation-timing-function animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-timing-function : linear; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-timing-fun.. 2022. 11. 3. startsWidth 메서드는 시작하는 문자열에서 검색하여 불린을 반환합니다. Reference/Javascript startsWidth 메서드는 시작하는 문자열에서 검색하여 불린을 반환합니다. by @webs 2022. 7. 4. startsWidth() startsWidth() 메서드는 시작하는 문자열에서 검색하여 불린(true, false)을 반환합니다. 특징 설명 유형(type) String.prototype.startsWidth() 버전(version) ES6 결과값(return) 불린(true or false) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".startsWidth(검색 문자열)" "문자열".startsWidth(검색 문자열, 위치값)" "javascript reference".startsWith('javascript') //true "javascript .. 2022. 11. 2. html 태그는 문서의 최상단 요소를 나타냅니다. Reference/HTML 태그는 문서의 최상단 요소를 나타냅니다. by @webs 2022. 7. 4. 태그는 문서의 최상단 요소를 나타냅니다. 요소에는 언어를 설정하면 음성 도구 및 번역 도구에 도움을 줍니다. 웹 문서에 작성에 가장 기본이 되는 루트 요소이며, 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 참고(Reference) https://html.spec.whatwg.org/multipage/semantics.html#the-html-element 2022. 11. 2. animation-play-state 속성은 애니메이션 진행상태를 설정합니다. Reference/CSS animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. by @webs 2022. 7. 4. animation-name animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-name : none; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 애니메이션과 관련된 속성.. 2022. 11. 2. match() 메서드는 문자열을 검색하고 배열 문자값을 반환합니다. Reference/Javascript match() 메서드는 문자열을 검색하고 배열 문자값을 반환합니다. by @webs 2022. 7. 4. match() match() 메서드는 문자열(정규식)을 검색하고 문자값(배열)을 반환합니다. 특징 설명 유형(type) String.prototype.match() 버전(version) ES1 결과값(return) 배열(array) 사용성 ★★★☆☆ 문법(Syntax) "문자열".match(검색값)" "문자열".match(정규식 표현)" "javascript reference".match('javascript') //javascript "javascript reference".match('reference') //reference "javascript refere.. 2022. 11. 1. body 태그는 문서 본문에 해당하는 내용을 설정합니다. Reference/HTML 태그는 문서 본문에 해당하는 내용을 설정합니다. by @webs 2022. 7. 4. 태그는 문서 본문에 해당하는 내용을 설정합니다. 문서에서 한번만 사용 할 수 있으며, 문서 설정시 필수적으로 들어가는 요소입니다. 태그는 문서 본문에 해당하는 내용을 설정하지만, 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 참고(Reference) https://html.spec.whatwg.org/multipage/sections.html#the-body-element 2022. 11. 1. hr 태그는 단란 요소간의 주제별 구분을 설정합니다. Reference/HTML 태그는 단란 요소간의 주제별 구분을 설정합니다. by @webs 2022. 7. 4. 태그는 단란 요소간의 주제별 구분을 설정합니다. 단순 줄바꿈을 위함이라면 태그를 사용합니다. 주제를 구분하기 위한 요소이며, 시각적인 표현은 CSS를 통해 설정합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 없음 버전 HTML4 시각적 표현 수평선 사용성 ★★☆☆☆ 정의(Definition) 태그는 horizontal rule의 약자이며, 단란 요소간의 주제별 구분을 위해 설정합니다. 태그는 연극에서 주제를 구분하거나, 책에서 화제 변경을 구분하기 위해 사용합니다. 태그는 시각적인 부분보다 의미론적으로 사용하므로, 시간적인 표현은 CSS를 통해 표현합니다. 크로스브라우.. 2022. 11. 1. animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. Reference/CSS animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. by @webs 2022. 7. 4. animation-name animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-name : none; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 애니메이션과 관련된 속성.. 2022. 11. 1. animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다. Reference/CSS animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다. by @webs 2022. 7. 4. animation-iteration-count animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-iteration-count : none; 적용 animation 버전 CSS3 사용성 ★★★★☆ 정의(Definition) animation-iteration-count .. 2022. 11. 1. search() 메서드는 문자열을 검색하고 위치값을 반환합니다. Reference/Javascript search() 메서드는 문자열을 검색하고 위치값을 반환합니다. by @webs 2022. 7. 4. search() search() 메서드는 문자열(정규식)을 검색하고 위치값(숫자)을 반환합니다. 정규식 표현을 통해 검색이 가능하며, 일치하는 값이 있으면 위치(인덱스) 값을 반환하고, 없으면 -1을 반환합니다. search() 메서드 숫자를 반환하지만, match() 메서드는 문자값(배열)을 반환하는 것이 다릅니다. 특징 설명 유형(type) String.prototype.search() 버전(version) ES1 결과값(return) 숫자(index) or -1 사용성 ★★★☆☆ 문법(Syntax) "문자열".search(검색값)" "문자열".search(정규식.. 2022. 11. 1. includes() 메서드는 문자열 포함 여부를 검색하여, 불린을 반환합니다. Reference/Javascript includes() 메서드는 문자열 포함 여부를 검색하여, 불린을 반환합니다. by @webs 2022. 7. 4. includes() includes() 메서드는 문자열 포함 여부를 검색하여 불린(true, false)을 반환합니다. 특징 설명 유형(type) String.prototype.includes() 버전(version) ES6 결과값(return) 불린(true or false) 사용성 ★★★☆☆ 문법(Syntax) "문자열".includes(검색값) "문자열".includes(검색값, 위치값) "javascript reference".includes('javascript') //true "javascript reference".includes('j') .. 2022. 11. 1. lastIndexOf() 메서드는 문자열에서 특정 문자의 위치를 역순으로 찾습니다. Reference/Javascript lastIndexOf() 메서드는 문자열에서 특정 문자의 위치를 역순으로 찾습니다. by @webs 2022. 7. 4. lastIndexOf() lastIndexOf() 메서드는 문자열에서 특정 문자의 위치를 역순으로 찾습니다. 문자열 내에 문자들은 왼쪽부터 순번이 매겨지고, 결과 값으로 순번이 반환됩니다. 만약 찾는 문자가 없다면, -1 값을 반환합니다. 특징 설명 유형(type) String.prototype.lastIndexOf() 버전(version) ES1 결과값(return) 숫자(mumber) 사용성 ★★★☆☆ 문법(Syntax) "문자열".lastIndexOf(검색값) "문자열".lastIndexOf(검색값, 위치값) "javascript refere.. 2022. 10. 31. animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. Reference/CSS animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. by @webs 2022. 7. 4. animation-fill-mode animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-fill-mode : none 적용 animation 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정.. 2022. 10. 31. br 태그는 텍스트 줄바꿈이 필요할 때 설정합니다. Reference/HTML 태그는 텍스트 줄바꿈이 필요할 때 설정합니다. by @webs 2022. 7. 4. 태그는 텍스트 줄바꿈이 필요할 때 설정합니다. 단순 줄바꿈을 위한 용도이기 때문에 스타일적인 요소가 필요하다면 CSS 속성을 사용합니다. 여백을 주기 위함이라면 CSS 속성 margin, padding 또는 line-height 사용을 권장합니다. 의미없는 글자에 줄바꿈을 원하다면 태그를 사용합니다. 문단간에 주제 분리를 위한 줄바꿈이 필요하다면 태그를 사용합니다. 특징 설명 요소 인라인 구조(Inline Element) 닫는 태그 없음 버전 HTML4 시각적 표현 줄바꿈 사용성 ★★★★☆ 정의(Definition) 태그는 텍스트 줄바꿈이 필요할 때 사용합니다. 태그는 줄을 바꾸는 의미 밖에 없.. 2022. 10. 31. 이전 1 ··· 4 5 6 7 8 다음
