websinssa blog

padStart() padStart() 메서드는 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다. padStart() padStart() 메서드는 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다. 특징 설명 유형(type) String 버전(version) ES8 결과값(return) 문자열(string) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".padStart(길이) "문자열".padStart(길이, 문자열) "456".padStart(1, '0'); //456 "456".padStart(4, '0'); //0456 "456".padStart(5, '0'); //00456 "456".padStart(6, '1'); //111456 "456".padStart..

padStart() 메서드는 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다. 문자열 변경과 관련된 메서드 padStart() 메서드는 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다. 문자열 변경과 관련된 메서드 padStart() 메서드는 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다. 문자열 변경과 관련된 메서드

replace() replace() 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다. replace() replace() 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다. 특징 설명 유형(type) String 버전(version) ES1 결과값(return) 배열(array) 사용성 ★★★☆☆ 문법(Syntax) "문자열".replace(찾을 문자열) "문자열".replace(찾을 문자열, 변경할 문자열) "문자열".replace(정규식) "문자열".replace(정규식, 변경할 문자열) "javascript reference".replace('javascript', '자바스크립트') //자바스크립트 reference "javascript reference".replace('e',..

push() push() 메서드는 배열 끝에 요소를 추가하고, 배열의 새로운 길이 값을 반환합니다. push() push() 메서드는 배열 끝에 요소를 추가하고, 배열의 새로운 길이 값을 반환합니다. 특징 설명 유형(type) Array 버전(version) ES1 결과값(return) 길이값(length) 사용성 ★★★★☆ 문법(Syntax) "배열".push(요소) "배열".push(요소1, 요소2,...) const arr = [100, 200, 300, 400, 500]; const text1 = arr.push(600); //100, 200, 300, 400, 500, 600 const text2 = arr.push(600,700,800,900); //100, 200, 300, 400, 500,..

join() join() 메서드는 배열의 문자열을 하나로 문자열로 반환합니다. join() join() 메서드는 배열의 문자열을 하나로 문자열로 반환합니다. 특징 설명 유형(type) Array 버전(version) ES1 결과값(return) 문자열(string) 사용성 ★★★★☆ 문법(Syntax) "배열".join(분리기호) const arr = [100, 200, 300, 400, 500]; const text1 = arr.join("*"); //100*200*300*400*500 const text2 = arr.join("-"); //100-200-300-400-500 const text3 = arr.join(); //100,200,300,400,500 const text3 = arr.join(..

trim() trim() 메서드는 문자열의 앞뒤 공백을 제거합니다. 원래 문자열을 수정하지 않고, 새 문자열을 반환합니다. trim() trim() 메서드는 문자열의 앞뒤 공백을 제거합니다. 특징 설명 버전(version) ES5 결과값(return) 문자열 사용성 ★★★☆☆ 문법(Syntax) "문자열".trim() //대문자 변경하기 let result = " javascript reference ".trim(); //javascript reference let result = " 자바스크립트 레퍼런스 ".trim(); //자바스크립트 레퍼런스 let result = " javascript reference ".replace(/^\s+|\s+$/gm,''); //javascript reference ..

slice() slice() 메서드는 문자열에서 원하는 값을 추출하여 새로운 문자열을 반환합니다. slice() slice() 메서드는 문자열에서 원하는 값을 추출하여 새로운 문자열을 반환합니다. 특징 설명 유형(type) String 버전(version) ES1 결과값(return) 문자열(string) 사용성 ★★★★☆ 문법(Syntax) "문자열".slice(시작 위치) "문자열".slice(시작 위치, 끝나는 위치) "javascript reference".slice(0) //javascript reference "javascript reference".slice(1) //avascript reference "javascript reference".slice(2) //vascript referen..

split() split() 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다. split() split() 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다. 특징 설명 유형(type) String 버전(version) ES1 결과값(return) 배열(array) 사용성 ★★★★☆ 문법(Syntax) "문자열".split(구분자) "문자열".split(구분자, 제한) const str1 = "javascript reference"; const currentStr1 = str1.split(''); // ['j','a','v','a','s','c','r','i','p','t','','r','e','f','e','r','e','n','c','e'] const currentStr2 = st..

태그는 표의 제목을 설정합니다. 테이블 제작시 접근성 향상을 위한 제목을 적어주어야 합니다. 태그는 표의 제목을 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML4 시각적 표현 가운데 정렬 사용성 ★★★☆☆ 정의(Definition) 태그는 표의 제목을 설정합니다. 태그는 기본적으로 가운데 정렬로 표시됩니다. align 속성은 HTML5에서 지원되지 않습니다. table과 관련된 태그(table Related Tags) 태그는 표를 설정합니다. 태그는 표의 제목을 설정합니다. 태그는 표의 헤더 영역을 그룹화합니다. 태그는 표의 본문 영역을 그룹화합니다. 태그는 표의 푸터 영역을 그룹화합니다. 태그는 표의 행을 설정합니다. 태그는 표의 열(셀)을 ..

태그는 텍스트 줄바꿈이 필요할 때 설정합니다. 태그는 텍스트 줄바꿈이 필요할 때 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 미적용( ) 버전 HTML4 시각적 표현 - 사용성 ★★★★☆ 정의(Definition) 태그는 텍스트 줄바꿈이 필요할 때 사용합니다. 여백이 필요할 때 태그의 사용은 적절치 않으며, CSS 속성 중에 margin, padding 또는 line-height를 사용합니다. HTML4에서는 태그 작성시 슬러시('/')가 필요하지만, HTML5에서는 의무적인 사항은 아니기 때문에 생략도 가능합니다. 비교(Compare) 텍스트 줄바꿈을 원하다면, 태그를 사용합니다 텍스트 줄바꿈 할 지점을 원하다면 태그를 사용합니다. 예제1(Sample) 줄바꿈을 설정..

태그는 다른 페이지 이동을 설정합니다. 페이지 주소 뿐만 아니라, 메일 주소, 전화 번호 등도 연결할 수 있으며, 아이디(#) 값으로 페이지 내에서도 이동이 가능합니다. 태그는 다른 페이지 이동을 설정합니다. 특징 설명 요소 인라인 구조(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML4 시각적 표현 밑줄과 파란색으로 표시 사용성 ★★★★★ 정의(Definition) 태그는 클릭하면 다른 페이지로 이동합니다. 현재 페이지에서 다른 페이지 URL로 연결하는 것을 하이퍼링크라고 합니다. 태그는 페이지 주소 뿐만 아니라, 메일 주소, 전화 번호 등도 연결할 수 있습니다. 태그는 아이디(#id)로 이동 할 수 있습니다. 태그는 target 속성을 이용하면 새로운 브라우저 창에서 페이지 이동을 ..

animation-iteration-count animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-iteration-count animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다. 특징 설명 기본 값 animation-iteration-count : none; 적용 animation 버전 CSS3 사용성 ★★★★☆ 정의(Definition) animation-iteration-count 속성은 애니메이션 ..

background-color background-color 속성은 백그라운드 색을 설정합니다. 기본 값은 투명하게 설정되어 있으며, 색상 표현 방식에 따라 키워드, 헥사코드, RGB, HSL 등으로 표현 할 수 있습니다. background-color background-color 속성은 백그라운드 색을 설정합니다. 특징 설명 기본 값 background-color : transparent 적용 background 버전 CSS1 사용성 ★★★★★ 정의(Definition) background-color 속성은 백그라운드 색을 설정합니다. 백그라운드와 관련된 속성(Background Related Properties) background 속성은 백그라운드 속성을 일괄적으로 설정합니다. background..

background background 속성은 백그라운드 속성을 일괄적으로 설정합니다. background 속성은 CSS를 통해 이미지를 표현하는 방법으로 HTML에 태그와 비교가 됩니다. 이미지의 의미가 있다면 태그를 사용하고, 의미가 없고 장식용에 가깝다면 background 속성을 이용합니다. background 속성은 고정, 위치, 컬러, 기준점, 반복, 사이트를 통해 컨트롤 할 수 있습니다. background background 속성은 백그라운드 속성을 일괄적으로 설정합니다. 특징 설명 기본 값 background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: non..

backdrop-filter backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다. backdrop-filter backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다. 특징 설명 기본 값 backdrop-filter : none 적용 animation 버전 CSS3 사용성 ★★★☆☆ 정의(Definition) backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다. 요소의 배경을 반투명 설정하여야 효과를 확인할 수 있습니다. 그래픽 효과와 관련된 속성(Graphic Related Properties) filter 속성은 그래픽 효과를 설정합니다. backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다. background-blend-mode 속성은 배..