CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브 Reference204 address 태그는 문서 관련 연락처 콘텐츠 영역을 설정합니다. Reference/HTML 태그는 문서 관련 연락처 콘텐츠 영역을 설정합니다. by @webs 2022. 11. 15. 태그는 문서 관련 연락처 콘텐츠 영역을 설정합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML4 시각적 표현 기울임꼴 사용성 ★★★☆☆ 정의(Definition) 태그는 사이트 주소, 전화번호, 이메일, 소설미디어, 위치 등을 표시합니다. 태그는 회사 정보, 회사 이름, 회사 주소 등과 관련된 정보를 표시합니다. 태그는 , , , 등 연락처 정보가 필요한 곳에 사용할 수 있습니다. 태그는 연락처와 관련 없는 내용이라면 태그를 사용합니다. 태그는 연락처 정보 보다 더 광범위한 정보를 포함 할 수 없습니다.(시간을 나타내는 time 태그등) 태그는 .. 2022. 11. 17. trimEnd 메서드는 뒤 공백을 제거하고, 새로운 문자열을 반환합니다. Reference/Javascript trimEnd() 메서드는 뒤 공백을 제거하고, 새로운 문자열을 반환합니다. by @webs 2022. 11. 17. trimEnd() trimEnd() 메서드는 뒤 공백을 제거하고, 새로운 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.trimEnd() 버전(version) ES10 결과값(return) 문자열(string) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".trim() //공백 제거하기 let result = " javascript reference ".trimEnd(); // javascript reference 문자열(string) : 문자열을 설정합니다. 정의(Definition) trimEnd() 메서드는 문자.. 2022. 11. 17. trimStart() 메서드는 앞 공백을 제거하고, 새로운 문자열을 반환합니다. Reference/Javascript trimStart() 메서드는 앞 공백을 제거하고, 새로운 문자열을 반환합니다. by @webs 2022. 11. 10. trimStart() trimStart() 메서드는 앞 공백을 제거하고, 새로운 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.trimStart() 버전(version) ES10 결과값(return) 문자열(string) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".trim() //공백 제거하기 let result = " javascript reference ".trimStart(); //javascript reference 문자열(string) : 문자열을 설정합니다. 정의(Definition) trimStar.. 2022. 11. 17. trim() 메서드는 앞/뒤 공백을 제거하고, 새로운 문자열을 반환합니다. Reference/Javascript trim() 메서드는 앞/뒤 공백을 제거하고, 새로운 문자열을 반환합니다. by @webs 2022. 11. 10. trim() trim() 메서드는 앞/뒤 공백을 제거하고, 새로운 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.trim() 버전(version) ES5 결과값(return) 문자열(string) 사용성 ★★★☆☆ 문법(Syntax) "문자열".trim() //대문자 변경하기 let result = " javascript reference ".trim(); //javascript reference let result = " 자바스크립트 레퍼런스 ".trim(); //자바스크립트 레퍼런스 let result = " java.. 2022. 11. 17. padEnd 메서드는 주어진 길이에 맞게 뒤 문자열을 채우고, 새로운 문자열을 반환합니다. Reference/Javascript padEnd() 메서드는 주어진 길이에 맞게 뒤 문자열을 채우고, 새로운 문자열을 반환합니다. by @webs 2022. 11. 10. padEnd() padEnd() 메서드는 주어진 길이에 맞게 뒤 문자열을 채우고, 새로운 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.padEnd() 버전(version) ES8 결과값(return) 문자열(string) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".padEnd(길이) "문자열".padEnd(길이, 문자열) "456".padEnd(1, '0'); //456 "456".padEnd(4, '0'); //4560 "456".padEnd(5, '0'); //45600 "456".padEn.. 2022. 11. 17. padStart 메서드는 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다. Reference/Javascript padStart() 메서드는 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다. by @webs 2022. 11. 10. padStart() padStart() 메서드는 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.padStart() 버전(version) ES8 결과값(return) 문자열(string) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".padStart(길이) "문자열".padStart(길이, 문자열) "456".padStart(1, '0'); //456 "456".padStart(4, '0'); //0456 "456".padStart(5, '0'); /.. 2022. 11. 17. repeat 메서드는 주어진 횟수만큼 반복 복사하여, 새로운 문자열을 반환합니다. Reference/Javascript repeat() 메서드는 주어진 횟수만큼 반복 복사하여, 새로운 문자열을 반환합니다. by @webs 2022. 11. 10. repeat() repeat() 메서드는 주어진 횟수만큼 반복 복사하여, 새로운 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.repeat() 버전(version) ES6 결과값(return) 배열(Array) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".repeat(숫자) "javascript reference".repeat(0); //'' "javascript reference".repeat(1); //javascript reference "javascript reference".repeat(2); //.. 2022. 11. 17. text-overflow 속성은 텍스트가 영역을 벗어 났을 때 속성을 설정합니다. Reference/CSS text-overflow 속성은 텍스트가 영역을 벗어났을 때 속성을 설정합니다. by @webs 2022. 11. 16. text-overflow text-overflow 속성은 텍스트가 영역을 벗어났을 때 속성을 설정합니다. 텍스트가 줄바꿈이 없이 한줄이고 지정한 영역 이외에는 안보이도록 설정해야 text-overflow 속성 설정이 가능합니다. 보통 한줄 효과를 쓸 때 많이 사용합니다. 텍스트가 줄바꿈이 없이 한줄로 표현하려면, white-space: nowrap을 설정하고, 지정한 영역 이외에 안보이도록 설정하려면, overflow: hidden을 설정해야 합니다. 특징 설명 기본값 text-overflow : clip 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(D.. 2022. 11. 16. text-justify 속성은 양쪽 정렬을 했을 때 정렬 유형을 설정합니다. Reference/CSS text-justify 속성은 양쪽 정렬을 했을 때 정렬 유형을 설정합니다. by @webs 2022. 11. 16. text-justify text-justify 속성은 양쪽 정렬을 했을 때 정렬 유형을 설정합니다. 양쪽 정렬을 할 경우 간격 등에 문제가 생길 수 있기 때문에, 이 부분을 단어 또는 글자 사이에 간격을 조정하여, 정렬을 깔끔하게 할 수 있습니다. 일반적인 영어 보다는 아랍어나 일본어 등에 미세한 조정이 필요할 때 사용합니다. 특징 설명 기본값 text-justify : auto 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-justify 속성은 양쪽 정렬을 했을 때 정렬 유형을 설정합니다. text-justify 속성은 tex.. 2022. 11. 16. text-indent 속성은 문단 들여쓰기 속성을 설정합니다. Reference/CSS text-indent 속성은 문단 들여쓰기 속성을 설정합니다. by @webs 2022. 11. 15. text-indent text-indent 속성은 문단 들여쓰기 속성을 설정합니다. 한글에서 들여쓰는 문단의 첫 번째 줄에 빈칸을 만들어 문단이 시작되는 것을 말합니다. text-indent 속성은 빈칸 부분을 설정해 주는 역할을 하며, text-indent: -9999px 속성을 이용하여 글씨를 숨길때 쓰기도 했습니다. 하지만 이 방법은 접근성에 맞지 않으므로 추천하지 않습니다. 특징 설명 기본값 text-indent : 0 적용 text 버전 CSS1 사용성 ★★☆☆☆ 정의(Definition) text-indent 속성은 문단 들여쓰기 속성을 설정합니다. text-inde.. 2022. 11. 16. text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다. Reference/CSS text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다. by @webs 2022. 11. 9. text-underline-offset text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다. 텍스트에 underline 속성이 설정된 경우와 텍스트 언더라인 스타일이 solid, double, dotted, dashed, wavy인 경우에 설정 가능합니다. 특징 설명 기본값 text-underline-offset : auto 적용 text 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다. 텍스트 라인과 관련된 속성 text-decorat.. 2022. 11. 15. footer 태그는 문서 관련 정보 및 관련 링크 콘텐츠 영역을 설정합니다. Reference/HTML 태그는 문서 관련 정보 및 관련 링크 콘텐츠 영역을 설정합니다. by @webs 2022. 11. 15. 태그는 문서 관련 정보 및 관련 링크 콘텐츠 영역을 설정합니다. 사이트와 관련된 정보, 저작권, 연락처, 사이트 맵, 관련된 문서 링크 등을 제공합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML5 시각적 표현 없음 사용성 ★★★★☆ 정의(Definition) 태그는 문서 관련 정보 및 관련 링크 콘텐츠 영역을 설정합니다. 태그는 사이트와 관련된 정보, 저작권, 연락처, 사이트 맵, 관련된 문서 링크를 제공합니다. 태그는 연락처 정보를 설정하는 요소가 포함 될 수 있습니다. 섹션과 관련된 태그 태그는 주제별 그룹의 콘텐츠 섹션을 설정.. 2022. 11. 15. header 태그는 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정합니다. Reference/HTML 헤더 영역 주제별 영역 내용 독립된 주제 영역 내용 사이드 영역 내용 푸터 영역 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ❌ ❌ ❌ ○ ○ ○ ○ ○ ○ 참고(Reference) https://html.spec.whatwg.org/multipage/sections.html#the-header-element 2022. 11. 15. aside 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. Reference/HTML 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. by @webs 2022. 11. 15. 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. 웹 페이지의 메인 콘텐츠와 관련된 사이드의 정보, 광고 등 부분적인 정보를 나타낼 때 사용합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML5 시각적 표현 없음 사용성 ★★★★☆ 정의(Definition) 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. 태그는 웹 페이지의 메인 콘텐츠와 관련된 사이드의 정보, 광고 등 부분적인 정보를 나타낼 때 사용합니다. 섹션과 관련된 태그(Section Related Tag) 태그는 문서의 주요 콘텐츠 영역을 설정합니다. 태그는 주제별 그룹의 .. 2022. 11. 15. article 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다. Reference/HTML 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다. by @webs 2022. 11. 15. 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다. 포럼, 신문기사, 잡지, 블러그 항목, 게시판 글 등 콘텐츠의 독립적인 항목을 나타낼 때 사용하며, 각각의 주제마다 제목도 표시해야 합니다. 태그는 하나의 주제를 나타낸다면, 은 주제를 묶는 독립적인 콘텐츠를 나타내지만, 요소 안에 요소가 올 수 있으며, 요소 안에도 요소가 올 수 있습니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML5 시각적 표현 없음 사용성 ★★★★☆ 정의(Definition) 태그는 사이트의 독립적인 컨텐츠 섹션을 설정합니다. 태그는 포럼, 신문기사, 잡지, 블러그 항목, 게시.. 2022. 11. 15. section 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. Reference/HTML section 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. by @webs 2022. 11. 14. 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. 주제별로 제목 요소를 사용하는 것이 좋으며, 문서의 스타일링 요소나, 그룹화 요소가 아닙니다. 스타일 지정 목적이나 그룹화가 필요하다면 태그를 사용합니다. 주요 콘텐츠와 단독으로 콘텐츠를 표현하고 싶다면, , , 요소를 사용하는 것이 적절합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML5 시각적 표현 없음 사용성 ★★★★☆ 정의(Definition) 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. 태그는 식별할 수단이 필요하기 때문에 제목을( ~ )을 설정하는 것을 추천합니다. 태그는 .. 2022. 11. 15. main 태그는 문서의 주요 콘텐츠 영역을 설정합니다. Reference/HTML 태그는 문서의 주요 콘텐츠 영역을 설정합니다. by @webs 2022. 11. 14. 태그는 문서의 주요 콘텐츠 영역을 설정합니다. 웹 문서의 핵심이 될 수 있는 내용을 포함하며, 문서에서 한번만 사용이 가능합니다. 개념적 요소의 섹션이기보다는 영역을 표현하기 위한 태그입니다. 그렇기 때문에 DOM 구조에 영향을 미치지 않으며, 정보 제공용을 위한 요소입니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML5 시각적 표현 없음 사용성 ★★★☆☆ 정의(Definition) 태그는 문서의 주요 콘텐츠 영역을 설정합니다. 태그는 문서의 핵심이 되는 내용을 포함하고 있으며, 사이드 메뉴, 네비게이션 링크, 로고 영역, 검색 영역 등 반복되는 영역은.. 2022. 11. 14. replaceAll 메서드는 특정 문자열을 모두 교체하여, 새로은 문자열을 반환합니다. Reference/Javascript replaceAll 메서드는 특정 문자열을 모두 교체하여, 새로은 문자열을 반환합니다. by @webs 2022. 11. 14. replace() replaceAll() 메서드는 특정 문자열을 모두 교체하여, 새로은 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.replaceAll() 버전(version) ES1 결과값(return) 배열(Array) 사용성 ★★★☆☆ 문법(Syntax) "문자열".replaceAll(찾을 문자열) "문자열".replaceAll(찾을 문자열, 변경할 문자열) "문자열".replaceAll(정규식) "문자열".replaceAll(정규식, 변경할 문자열) "javascript reference".repla.. 2022. 11. 14. replace 메서드는 특정 문자열을 교체하여, 새로은 문자열을 반환합니다. Reference/Javascript replace 메서드는 특정 문자열을 교체하여, 새로은 문자열을 반환합니다. by @webs 2022. 11. 10. replace() replace() 메서드는 특정 문자열을 교체하여, 새로은 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.replace() 버전(version) ES1 결과값(return) 배열(Array) 사용성 ★★★☆☆ 문법(Syntax) "문자열".replace(찾을 문자열) "문자열".replace(찾을 문자열, 변경할 문자열) "문자열".replace(정규식) "문자열".replace(정규식, 변경할 문자열) "javascript reference".replace('javascript', '자바스크립트') .. 2022. 11. 14. split 메서드는 구분자를 이용하여, 여러개의 문자열을 반환합니다. Reference/Javascript split 메서드는 구분자를 이용하여, 여러개의 문자열을 반환합니다. by @webs 2022. 11. 10. split() split() 메서드는 구분자를 이용하여, 여러개의 문자열(배열)을 반환합니다. 구분자는 문자열에서 끊어야 할 부분을 의미합니다. 정규식 표현도 가능하며, 두 글자 이상일 경우 그 부분 문자열 전체가 일치해야 끊어집니다. 구분자를 설정하면, 해당 구분자는 삭제되고, 남은 문자열이 배열로 반환됩니다. 특징 설명 유형(type) String.prototype.split() 버전(version) ES1 결과값(return) 배열(Array) 사용성 ★★★★☆ 문법(Syntax) "문자열".split(구분자) "문자열".split(구분자, 제한) on.. 2022. 11. 14. text-underline-position 속성은 언더 라인의 위치를 설정합니다. Reference/CSS text-underline-position 속성은 언더 라인의 위치를 설정합니다. by @webs 2022. 11. 13. text-underline-position text-underline-position 속성은 언더 라인의 위치를 설정합니다. text-underline이 설정되어 있는 경우 라인의 위치를 under로 설정할 수 있으며, left와 right속성은 글씨가 세로 모드일 경우에 적용이 됩니다. 특징 설명 기본값 text-underline-position : auto 적용 text 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) text-underline-position 속성은 언더 라인의 위치를 설정합니다. text-underline-position 요.. 2022. 11. 13. text-decoration-skip-ink 속성은 언더 라인의 글씨 겹침을 설정합니다. Reference/CSS text-decoration-skip-ink 속성은 언더 라인의 글씨 겹침을 설정합니다. by @webs 2022. 11. 9. text-decoration-skip-ink text-decoration-skip-ink 속성은 언더 라인의 글씨 겹침을 설정합니다. 글씨와 라인이 겹칠 때 어떤 부분을 우선순위로 할지 정해줍니다. 라인의 종류에는 solid, double, dotted, dashed, wavy가 있으며, 글씨 크기나 라인의 크기에 따라 글씨가 겹쳐서 안보이는 경우 설정하기 좋습니다. 특징 설명 기본값 text-decoration-skip-ink : auto 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-decoration-skip-i.. 2022. 11. 12. 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. 이전 1 ··· 3 4 5 6 7 8 다음
