본문 바로가기
CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브

Webs352

substr 메서드는 시작 위치에서 길이 값을 추출하여, 새로운 문자열을 반환합니다. Reference/Javascript substr 메서드는 문자열 시작 위치에서 길이 값을 추출하여, 새로운 문자열을 반환합니다. by @webs 2022. 11. 11. substr() substr() 메서드는 문자열 시작 위치에서 길이 값을 추출하여, 새로운 문자열을 반환합니다. 현재는 더 이상 사용하지 않습니다. ECMA 표준 명세서에 사용하지 않음을 권장하고 있으며, 곧 제거될 것입니다. 특징 설명 유형(type) String.prototype.substr() 버전(version) ES1 결과값(return) 문자열(String) 사용성 ❌ 문법(Syntax) "문자열".substr(시작 위치) "문자열".substr(시작 위치, 길이) "javascript reference".substr(0) .. 2022. 11. 11.
meta 태그는 문서의 메타 정보를 설정합니다. Reference/HTML 태그는 문서의 메타 정보를 설정합니다. by @webs 2022. 11. 11. 태그는 문서의 메타 정보를 설정합니다. 메타 정보는 웹 페이지 컨텐츠가 아닌 웹 문서 자체의 정보를 표현하는 방법입니다. 메타 정보에는 사이트 키워드, 설명, 저자, 검색엔진노출, 제작날짜, 모바일 화면, 리로딩, 공유 정보 등 다양한 정보를 선택하여 설정할 수 있습니다. 특징 설명 요소 - 닫는 태그 적용 버전 HTML4 시각적 표현 없음 사용성 ★★★★★ 정의(Definition) 태그는 문서의 메타 정보를 설정합니다. 태그는 표면적으로 표시되지 않지만, 문서에 대한 정보를 제공합니다. 태그는 사이트에 대한 설명, 키워드, 저자 등 여러가지 정보를 제공합니다. 태그는 검색엔진 및 키워드 노출에 .. 2022. 11. 11.
text-decoration 속성은 텍스트 라인 속성을 일괄적으로 설정합니다. Reference/CSS text-decoration 속성은 텍스트 라인 속성을 일괄적으로 설정합니다. by @webs 2022. 11. 11. text-decoration text-decoration 속성은 텍스트 라인 속성을 일괄적으로 설정합니다. 라인의 굵기를 설정하고 싶다면, text-decoration-thickness 속성을 사용하고, 라인의 색상을 설정하고 싶다면, text-decoration-color 속성을 사용하고, 라인의 종류를 설정하고 싶다면, text-decoration-style 속성을 사용하고, 라인의 위치를 설정하고 싶다면, text-decoration-line 속성을 사용합니다. 여러개의 효과를 동시에도 사용이 가능합니다. 특징 설명 기본값 text-decoration-co.. 2022. 11. 11.
text-decoration-thickness 속성은 글자 라인의 굵기 속성을 설정합니다. Reference/CSS text-decoration-thickness 속성은 글자 라인의 굵기 속성을 설정합니다. by @webs 2022. 11. 9. text-decoration-thickness text-decoration-thickness 속성은 글자 라인의 굵기 속성을 설정합니다. text-decoration: underline을 설정해야, 굵기 조절이 가능합니다. 특징 설명 기본값 text-decoration-thickness : auto 적용 text 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) text-decoration-thickness 속성은 글자 라인의 굵기 속성을 설정합니다. text-decoration-thickness 속성은 text-decoration-line .. 2022. 11. 11.
text-decoration-line 속성은 글자 라인의 위치 속성을 설정합니다. Reference/CSS text-decoration-line 속성은 글자 라인의 위치 속성을 설정합니다. by @webs 2022. 11. 9. text-decoration-line text-decoration-line 속성은 라인의 위치를 설정합니다. 언더라인을 아래, 위 또는 중간에 설정할 수 있으며, 여러가지 라인을 동시에도 설정할 수 있습니다. 라인의 컬러, 종류, 굵기도 설정이 가능하며, 글씨와 라인의 겹칩 현상, 포지션 값 등을 디테일하게 수정할 수 있습니다. 특징 설명 기본값 text-decoration-line : underline 적용 text 버전 CSS3 사용성 ★★★☆☆ 정의(Definition) text-decoration-line 속성은 글자 라인의 위치 속성을 설정합니다. 텍.. 2022. 11. 10.
title 태그는 문서의 제목을 설정합니다. Reference/HTML 태그는 문서의 제목을 설정합니다. by @webs 2022. 7. 4. 브라우저 상단의 제목 탭에 표시가 됩니다. 타이틀에는 텍스트만 설정 할 수 있으며, 웹 문서에서 가장 중요한 제목을 표시합니다. 검색 노출에 영향을 미치므로, 핵심적인 제목을 표시해주는게 좋습니다. 제목은 검색 결과 페이제에 순서를 결정하는 중요한 부분이므로, 독자의 주의를 표시하기 의미 없는 단어 선택은 좋지 않습니다. 자신의 사이트 내에서 가장 핵심적인 부분만 제목으로 설정하는게 좋으며, 중복적으로 사용하는 것도 검색 결과를 부정확하게 만들 수 있으므로 가장 중요한 제목은 한 번 정도 핵심적으로 사용하는 것이 좋습니다. 특징 설명 요소 - 닫는 태그 적용 버전 HTML4 시각적 표현 없음 사용성 ★★★★.. 2022. 11. 10.
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.

티스토리툴바