CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브 Webs352 i 태그는 주의 텍스트와 다른 의미의 텍스트로 구분할 때 설정합니다. Reference/HTML i 태그는 주의 텍스트와 다른 의미의 텍스트로 구분할 때 설정합니다. by @webs 2022. 12. 28. 태그는 주의 텍스트와 다른 의미의 텍스트로 구분할 때 설정합니다. 태그는 이탤릭체를 표현하기 위한 속성이였으나, 현재는 주의 텍스트와 다른 의미의 텍스트로 구분할 때 사용하는 속성으로 변경되었습니다. 태그는 기술 용어, 외국어, 생각 등을 표현할 때 설정하고, 이탤릭체로 표현됩니다. 이탤릭체로 표현하기 위해서 태그는 적절하지 않으며, CSS의 font-style: italic을 사용합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용(~) 버전 HTML4 시각적 표현 이탤릭체로 표시 사용성 ★☆☆☆☆ 정의(Definition) 태그는 주의 .. 2022. 12. 28. mark 태그는 중요성과 강조를 고려하지 않는 단순 참고용 표시를 할 때 설정합니다. Reference/HTML mark 태그는 중요성과 강조를 고려하지 않는 단순 참고용 표시를 할 때 설정합니다. by @webs 2022. 12. 28. 태그는 중요성과 강조를 고려하지 않는 단순 참고용 표시를 할 때 설정합니다. 태그는 사용자가 중요하다고 생각하지 않을 수 있는 부분에 주의를 끌기 위해 표시를 사용할 수 있으며, 현재 맥락과 관련이 있거나 하이라이트 부분을 표시할 때 사용할 수 있습니다. 단순하게 노란색 배경을 위해 사용하지 않고, CSS의 background 사용을 권장합니다. 텍스트의 중요성을 강조하기 위해서는 strong 요소를 사용하고, 중요성을 전달하지 않고 주의를 끌기 위함이라면 b 요소를 사용합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용(.. 2022. 12. 28. strong 태그는 내용에 대한 중요성, 심각성, 긴급성을 표현할 때 설정합니다. Reference/HTML strong 태그는 내용에 대한 중요성, 심각성, 긴급성을 표현할 때 설정합니다. by @webs 2022. 12. 28. 태그는 내용에 대한 중요성, 심각성, 긴급성을 표현할 때 설정합니다. 요소는 텍스트의 경고 또는 알림을 표시하는데 사용하며, 긴급성을 요하는 부분에 사용합니다. 요소는 텍스트를 강조를 하지만, 문장의 의미를 변경하지 않습니다. 요소는 글씨가 굵게 표현됩니다. 만약 글씨를 굵게 표현하기 위함이라면, CSS font-weight를 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용(~) 버전 HTML4 시각적 표현 볼드체로 표시 사용성 ★★★★★ 정의(Definition) 태그는 내용에 대한 중요성, 심각성, 긴급성을 표현할 .. 2022. 12. 28. concat 메서드는 매개변수로 전달된 배열을 받어, 결합된 새로운 배열을 반환합니다. Reference/Javascript concat 메서드는 매개변수로 전달된 배열을 받어, 결합된 새로운 배열을 반환합니다. by @webs 2022. 11. 7. concat() concat() 메서드는 매개변수로 전달된 배열을 받어, 결합된 새로운 배열을 반환합니다. 특징 설명 유형(type) String.prototype.concat() / Array.prototype.concat() 버전(version) ES1 결과값(return) 문자열(String) or 배열(Array) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".concat(문자열, 문자열,....) "배열".concat(문자열, 문자열,....) const str = "javascript"; str.concat("reference").. 2022. 12. 14. 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(인덱스) const arr = [1, 2,.. 2022. 12. 14. reverse 메서드는 배열 요소의 순서를 반대로 하고, 반대로 된 배열을 반환합니다. Reference/Javascript reverse 메서드는 배열 요소의 순서를 반대로 하고, 반대로 된 배열을 반환합니다. by @webs 2022. 12. 12. reverse() reverse() 메서드는 배열 요소의 순서를 반대로 하고, 반대로 된 배열을 반환합니다. 특징 설명 유형(type) array.prototype.reverse() 버전(version) ES1 결과값(return) 배열(array) 사용성 ★★★☆☆ 문법(Syntax) "배열".reverse() const arr = [100, 200, 300, 400, 500]; const text1 = arr.reverse(); console.log(text1) //[500, 400, 300, 200, 100] 배열(array) : 배열.. 2022. 12. 14. pop 메서드는 배열 마지막 요소를 제거하고, 제거한 요소를 반환합니다. Reference/Javascript pop 메서드는 배열 마지막 요소를 제거하고, 제거한 요소를 반환합니다. by @webs 2022. 12. 12. pop() pop() 메서드는 배열 마지막 요소를 제거하고, 제거한 요소를 반환합니다. 특징 설명 유형(type) array.prototype.pop() 버전(version) ES1 결과값(return) 제거한 요소 사용성 ★★★☆☆ 문법(Syntax) "배열".pop() const arr = [100, 200, 300, 400, 500]; const text = arr.pop(); console.log(text) //500 console.log(arr) //[100, 200, 300, 400] 배열(array) : 배열을 설정합니다. 정의(Definit.. 2022. 12. 13. shift 메서드는 배열 처음 요소를 제거하고, 제거한 요소를 반환합니다. Reference/Javascript shift 메서드는 배열 처음 요소를 제거하고, 제거한 요소를 반환합니다. by @webs 2022. 12. 12. shift() shift() 메서드는 배열 처음 요소를 제거하고, 제거한 요소를 반환합니다. 특징 설명 유형(type) array.prototype.shift() 버전(version) ES1 결과값(return) 제거한 요소 사용성 ★★★☆☆ 문법(Syntax) "배열".shift() const arr = [100, 200, 300, 400, 500]; const text = arr.shift(); console.log(text) //100 console.log(arr) //[200, 300, 400, 500] 배열(array) : 배열을 설정합니다. .. 2022. 12. 13. unshift 메서드는 배열 앞에 요소를 추가하고, 배열의 새로운 길이 값을 반환합니다. Reference/Javascript unshift 메서드는 배열 앞에 요소를 추가하고, 배열의 새로운 길이 값을 반환합니다. by @webs 2022. 12. 12. unshift() unshift() 메서드는 배열 앞에 요소를 추가하고, 배열의 새로운 길이 값을 반환합니다. 특징 설명 유형(type) array.prototype.unshift() 버전(version) ES1 결과값(return) 길이값(length) 사용성 ★★★☆☆ 문법(Syntax) "배열".unshift(요소) "배열".unshift(요소1, 요소2,...) const arr = [100, 200, 300, 400, 500]; const text1 = arr.unshift(600); //600, 100, 200, 300, 400.. 2022. 12. 13. push 메서드는 배열 끝에 요소를 추가하고, 배열의 새로운 길이값을 반환합니다. Reference/Javascript push() 메서드는 배열 끝에 요소를 추가하고, 배열의 새로운 길이값을 반환합니다. by @webs 2022. 12. 12. push() push() 메서드는 배열 끝에 요소를 추가하고, 배열의 새로운 길이값을 반환합니다. 특징 설명 유형(type) array.prototype.push() 버전(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 = a.. 2022. 12. 13. join 메서드는 배열의 요소를 추가하여, 하나의 문자열로 반환합니다. Reference/Javascript join 메서드는 배열의 요소를 추가하여, 하나의 문자열로 반환합니다. by @webs 2022. 12. 12. join() join() 메서드는 배열의 요소를 추가하여, 하나의 문자열로 반환합니다. 특징 설명 유형(type) array.prototype.join() 버전(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 tex.. 2022. 12. 13. font-variant-numeric 속성은 숫자에 대한 글꼴 글리프를 설정합니다. Reference/CSS font-variant-numeric 속성은 숫자에 대한 글꼴 글리프를 설정합니다. by @webs 2022. 12. 8. font-variant-numeric font-variant-numeric 속성은 숫자에 대한 글꼴 글리프(표시 형태)를 설정합니다. 특징 설명 기본값 font-variant-numeric : normal 적용 font 버전 CSS3 사용성 ☆☆☆☆☆ 정의(Definition) font-variant-numeric 속성은 숫자에 대한 글꼴 글리프(표시 형태)를 설정합니다. font-variant와 관련된 속성 font-variant 속성은 글꼴 글리프(표시 형태)를 일괄적으로 설정합니다. font-variant-ligatures 속성은 글꼴 글리프(표시 형태.. 2022. 12. 11. font-variant-ligatures 속성은 글꼴 글리프가 겹쳤을 때 설정합니다. Reference/CSS font-variant-ligatures 속성은 글꼴 글리프가 겹쳤을 때 설정합니다. by @webs 2022. 12. 8. font-variant-ligatures font-variant-ligatures 속성은 글꼴 글리프(표시 형태)가 겹쳤을 때 설정합니다. 특징 설명 기본값 font-variant-ligatures : normal 적용 font 버전 CSS3 사용성 ☆☆☆☆☆ 정의(Definition) font-variant-ligatures 속성은 글꼴 글리프(표시 형태)가 겹쳤을 때 설정합니다. font-variant와 관련된 속성 font-variant 속성은 글꼴 글리프(표시 형태)를 일괄적으로 설정합니다. font-variant-ligatures 속성은 글꼴 글리.. 2022. 12. 11. font-variant-emoji 속성은 이모지 글꼴 글리프를 설정합니다. Reference/CSS font-variant-emoji 속성은 이모지 글꼴 글리프를 설정합니다. by @webs 2022. 12. 8. font-variant-emoji font-variant-emoji 속성은 이모지 글꼴 글리프(표시 형태)를 설정합니다. 특징 설명 기본값 font-variant-emoji : normal 적용 font 버전 CSS3 사용성 ☆☆☆☆☆ 정의(Definition) font-variant-emoji 속성은 이모지 글꼴 글리프(표시 형태)를 설정합니다. font-variant와 관련된 속성 font-variant 속성은 글꼴 글리프(표시 형태)를 일괄적으로 설정합니다. font-variant-ligatures 속성은 글꼴 글리프(표시 형태)가 겹쳤을 때 설정합니다. fon.. 2022. 12. 11. font-variant-east-asian 속성은 아시아 언어 글꼴 글리프를 설정합니다. Reference/CSS font-variant-east-asian 속성은 아시아 언어 글꼴 글리프를 설정합니다. by @webs 2022. 12. 8. font-variant-east-asian font-variant-east-asian 속성은 아시아 언어 글꼴 글리프(표시 형태)를 설정합니다. 특징 설명 기본값 font-variant-east-asian : normal 적용 font 버전 CSS3 사용성 ☆☆☆☆☆ 정의(Definition) font-variant-east-asian 속성은 아시아 언어 글꼴 글리프(표시 형태)를 설정합니다. font-variant와 관련된 속성 font-variant 속성은 글꼴 글리프(표시 형태)를 일괄적으로 설정합니다. font-variant-ligatures 속.. 2022. 12. 11. font-variant-caps 속성은 소문자/대문자에 대한 글꼴 글리프를 설정합니다. Reference/CSS font-variant-caps 속성은 소문자/대문자에 대한 글꼴 글리프를 설정합니다. by @webs 2022. 12. 11. font-variant-caps font-variant-caps 속성은 소문자/대문자에 대한 글꼴 글리프(표시 형태)를 설정합니다. 특징 설명 기본값 font-variant-caps : normal 적용 font 버전 CSS3 사용성 ☆☆☆☆☆ 정의(Definition) font-variant-caps 속성은 소문자/대문자에 대한 글꼴 글리프(표시 형태)를 설정합니다. font-variant와 관련된 속성 font-variant 속성은 글꼴 글리프(표시 형태)를 일괄적으로 설정합니다. font-variant-ligatures 속성은 글꼴 글리프(표시 형.. 2022. 12. 11. font-variant-alternates 속성은 글꼴 글리프의 대체 형태를 설정합니다. Reference/CSS font-variant-alternates 속성은 글꼴 글리프의 대체 형태를 설정합니다. by @webs 2022. 12. 8. font-variant-alternates font-variant-alternates 속성은 글꼴 글리프(표시 형태)의 대체 형태를 설정합니다. 특징 설명 기본값 font-variant-alternates : normal 적용 font 버전 CSS3 사용성 ☆☆☆☆☆ 정의(Definition) font-variant-alternates 속성은 글꼴 글리프(표시 형태)의 대체 형태를 설정합니다. font-variant와 관련된 속성 font-variant 속성은 글꼴 글리프(표시 형태)를 일괄적으로 설정합니다. font-variant-ligatures 속.. 2022. 12. 11. font-variant-position 속성은 글꼴 글리프의 위치를 설정합니다. Reference/CSS font-variant-position 속성은 글꼴 변형 형태의 위치를 설정합니다. by @webs 2022. 12. 8. font-variant-position font-variant-position 속성은 글꼴 변형 형태의 위치를 설정합니다. 위 첨자, 아래 첨자로 배치된 글리프의 위치를 설정합니다. 특징 설명 기본값 font-variant-position : normal 적용 font 버전 CSS3 사용성 ☆☆☆☆☆ 정의(Definition) font-variant-position 속성은 글꼴 글리프(표시 형태)의 위치를 설정합니다. font-variant-position 속성은 위 첨자, 아래 첨자로 배치된 글리프의 위치를 설정합니다. font-variant와 관련된 속성.. 2022. 12. 11. font-variant 속성은 글꼴 변형 형태를 일괄적으로 설정합니다. Reference/CSS font-variant 속성은 글꼴 변형 형태를 일괄적으로 설정합니다. by @webs 2022. 12. 8. font-variant font-variant 속성은 글꼴 변형 형태를 일괄적으로 설정합니다. font-variant 속성은 소문자 폰트를 대문자로 변경해주는 기능만 있었지만, 현재는 다양한 추가 속성 기능이 추가되었습니다. 글꼴에 대한 위치, 변형, 대체 문자, 겹쳤을 때 등 다양한 글꼴 지원을 위한 설정이 현재 개발 중이며, 아직까지 모든 브라우저 및 폰트에 적용되지 않습니다. 특징 설명 기본값 font-variant : normal 적용 font 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) font-variant 속성은 글꼴 변형 형태를 일괄적으로 설.. 2022. 12. 10. font-variation-settings 속성은 가변 폰트를 설정합니다. Reference/CSS font-variation-settings 속성은 가변 폰트를 설정합니다. by @webs 2022. 12. 10. font-variation-settings font-variation-settings 속성은 가변 폰트를 설정합니다. 가변 폰트는 폰트에 따라 지원여부가 다르니, 가변 폰트가 적용되는 폰트를 사용해야 합니다. 가변 폰트란 width(너비), weight(두께), slant(기울기) 등을 자유롭게 표현되는 폰트를 말합니다. 특징 설명 기본값 font-variation-settings : normal 적용 font 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) font-variation-settings 속성은 가변 폰트를 설정합니다. 가변 폰트란? widt.. 2022. 12. 10. font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다. Reference/CSS font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다. by @webs 2022. 12. 8. font-size-adjust font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다. font-size-adjust 속성은 현재(2022년 기준) 호환성이 좋지 않기 때문에, 사용에 있어 효율성이 좋지 못합니다. 이 속성은 웹 문서에 두개 이상의 폰트를 사용할 경우 또는 첫 번재 설정한 폰트가 없어서, 두번째 폰트롤 로딩이 되는 경우 UI가 깨질 수 있습니다. 폰트의 크기, 간격 등이 틀리기 때문에 생각지도 못한 뒤틀림이 발생 할 수 있습니다. font-size-adjust 속성은 폰트의 기준점을 대문자가 아닌 소문자로 기준으로 하기 때.. 2022. 12. 8. font-weight 속성은 폰트의 두께를 설정합니다. Reference/CSS font-weight 속성은 폰트의 두께를 설정합니다. by @webs 2022. 12. 8. font-weight font-weight 속성은 폰트의 두께를 설정합니다. 폰트의 두께는 100~900까지 설정 할 수 있습니다. 이것은 폰트가 9가지 두께로 설정되어 있으며, 선택이 가능합니다. 만약 해당 폰트 두께가 없다면, 가장 가까운 두께로 선택하게 됩니다. 보통은 두껍게 bold 속성을 많이 사용하는 편입니다. 특징 설명 기본값 font-weight : normal 적용 font 버전 CSS1 사용성 ★★★★☆ 정의(Definition) font-weight 속성은 폰트의 두께를 설정합니다. font-weight 요소는 두께를 숫자로 설정할 수 있습니다. font-weight.. 2022. 12. 8. font-style 속성은 폰트의 스타일을 설정합니다. Reference/CSS font-style 속성은 폰트의 스타일을 설정합니다. by @webs 2022. 12. 8. font-style font-style 속성은 폰트의 스타일을 설정합니다. 특징 설명 기본값 font-style : normal 적용 font 버전 CSS1 사용성 ★★★★☆ 정의(Definition) font-style 속성은 폰트의 스타일을 설정합니다. 폰트와 관련된 속성 font 속성은 폰트에 관한 설정을 일괄적으로 설정합니다. font-family 속성은 폰트 종류를 설정합니다. font-size 속성은 폰트 사이즈 속성을 설정합니다. font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다. font-style 속성은 폰트의 스타일을 설정합니다. font-.. 2022. 12. 8. font-size 속성은 폰트 사이즈 속성을 설정합니다. Reference/CSS font-size 속성은 폰트 사이즈 속성을 설정합니다. by @webs 2022. 12. 8. font-size font-size 속성은 폰트 사이즈 속성을 설정합니다. 사이즈는 키워드를 사용할 수 있지만, 잘 사용하지 않습니다. 사이즈는 CSS 단위를 통해 주로 설정하는 편이며, 반응형 작업시 em, rem, vw를 많이 사용합니다. 특징 설명 기본값 font-size : medium 적용 font 버전 CSS1 사용성 ★★★★☆ 정의(Definition) font-size 속성은 폰트 사이즈 속성을 설정합니다. font-size 속성은 키워드 또는 CSS 단위로 설정할 수 있습니다. 일관된 크기의 폰트를 작성하려면 px 단위를 사용하지만, 상대적으로 변해야 하는 사이즈라면,.. 2022. 12. 8. font-family 속성은 폰트 종류를 설정합니다. Reference/CSS font-family 속성은 폰트 종류를 설정합니다. by @webs 2022. 12. 7. font-family font-family 속성은 폰트 종류를 설정합니다. 사용자 컴퓨터에 폰트가 설치되어 있다면, 폰트가 구현됩니다. 만약 폰트가 없다면 나오지 않지만, 웹폰트(@font-face)를 설정한다면, 자동으로 다운받고 브라우저에 해당 폰트를 구현할 수 있습니다. 사용자마다 폰트가 없을수도 있기 때문에 여러가지 폰트 설정이 가능하며, 쉼표(,)를 통해 연속적으로 작성하면 됩니다. 폰트 이름이 한글이거나 빈칸이 있다면, 오류를 일으킬 수 있으니 큰따옴표("")로 감싸주면 됩니다. 특징 설명 기본값 font-family : 폰트 이름 적용 font 버전 CSS1 사용성 ★★★★☆.. 2022. 12. 8. border-collapse 속성은 표의 테두리 분리 여부를 설정합니다. Reference/CSS border-collapse 속성은 표의 테두리 분리 여부를 설정합니다. by @webs 2022. 12. 7. border-collapse border-collapse 속성은 표의 테두리 분리 여부를 설정합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만, 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고, 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 ,.. 2022. 12. 7. border-spacing 속성은 표의 테두리 간격을 설정합니다. Reference/CSS border-spacing 속성은 표의 테두리 간격을 설정합니다. by @webs 2022. 12. 7. border-spacing border-spacing 속성은 표의 테두리 간격을 설정합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만, 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고, 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 , , 를 사용하며.. 2022. 12. 7. table 태그는 표를 설정합니다. Reference/HTML 태그는 표를 설정합니다. by @webs 2022. 12. 6. 태그는 표를 설정합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만, 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고, 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 , , 를 사용하며, 행과 열을 나타내는 , , 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을.. 2022. 12. 7. 이전 1 ··· 6 7 8 9 10 11 12 13 다음
