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

Reference204

tbody 태그는 표의 본문 영역 그룹을 설정합니다. Reference/HTML 태그는 표의 본문 영역 그룹을 설정합니다. by @webs 2022. 12. 6. 태그는 표의 본문 영역 그룹을 설정합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만, 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고, 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 , , 를 사용하며, 행과 열을 나타내는 , , 등을 사용합니다. 여기에 접근성을 위해 s.. 2022. 12. 7.
thead 태그는 표의 헤더 영역 그룹을 설정합니다. Reference/HTML 태그는 표의 헤더 영역 그룹을 설정합니다. by @webs 2022. 12. 6. 태그는 표의 헤더 영역 그룹을 설정합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만, 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고, 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 , , 를 사용하며, 행과 열을 나타내는 , , 등을 사용합니다. 여기에 접근성을 위해 s.. 2022. 12. 7.
offsetWidth 속성은 요소의 가로 값을 가져옵니다. Reference/Javascript offsetWidth 속성은 요소의 가로 값을 가져옵니다. by @webs 2022. 12. 02. offsetWidth offsetWidth 속성은 요소의 가로 값(보더/패딩 포함)을 가져옵니다. 데이터 값을 수정할 수 없고, 값만 가져올 수 있는 읽기 전용 속성입니다. 특징 설명 유형(type) HTMLElement.offsetWidth 버전(version) ES1 결과값(return) 정수(integer) 사용성 ★★☆☆☆ 문법(Syntax) HTMLElement.offsetWidth document.querySelector(".box").offsetWidth 요소(element) : 선택할 요소를 설정합니다. 정의(Definition) offsetWidth 속.. 2022. 12. 2.
offsetTop 속성은 요소의 Y축 위치 값을 가져옵니다. Reference/Javascript offsetTop 속성은 요소의 Y축 위치 값을 가져옵니다. by @webs 2022. 12. 02. offsetTop offsetTop 속성은 요소의 Y축 위치 값(문서 기준)을 가져옵니다. 데이터 값을 수정할 수 없고, 값만 가져올 수 있는 읽기 전용 속성입니다. 특징 설명 유형(type) HTMLElement.offsetTop 버전(version) ES1 결과값(return) 정수(integer) 사용성 ★★★☆☆ 문법(Syntax) HTMLElement.offsetTop document.querySelector(".box").offsetTop 요소(element) : 선택할 요소를 설정합니다. 정의(Definition) offsetTop 속성은 요소의 Y축 위.. 2022. 12. 2.
offsetLeft 속성은 요소의 X축 위치 값을 가져옵니다. Reference/Javascript offsetLeft 속성은 요소의 X축 위치 값을 가져옵니다. by @webs 2022. 12. 02. offsetLeft offsetLeft 속성은 요소의 X축 위치 값(문서 기준)을 가져옵니다. 데이터 값을 수정할 수 없고, 값만 가져올 수 있는 읽기 전용 속성입니다. 특징 설명 유형(type) HTMLElement.offsetLeft 버전(version) ES1 결과값(return) 정수(integer) 사용성 ★★☆☆☆ 문법(Syntax) HTMLElement.offsetLeft document.querySelector(".box").offsetLeft 요소(element) : 선택할 요소를 설정합니다. 정의(Definition) offsetLeft 속성은 요.. 2022. 12. 2.
offsetHeight 속성은 요소의 세로 값을 가져옵니다. Reference/Javascript offsetHeight 속성은 요소의 세로 값을 가져옵니다. by @webs 2022. 12. 02. offsetHeight offsetHeight 속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다. 데이터 값을 수정할 수 없고, 값만 가져올 수 있는 읽기 전용 속성입니다. 특징 설명 유형(type) HTMLElement.offsetHeight 버전(version) ES1 결과값(return) 정수(integer) 사용성 ★★☆☆☆ 문법(Syntax) HTMLElement.offsetHeight document.querySelector(".box").offsetHeight 요소(element) : 선택할 요소를 설정합니다. 정의(Definition) offsetH.. 2022. 12. 2.
clientLeft 속성은 요소의 X축 위치 값을 가져옵니다. Reference/Javascript clientLeft 속성은 요소의 X축 위치 값을 가져옵니다. by @webs 2022. 12. 02. clientLeft clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다. 위치 값만 가져올 수 있으며, 수정할 수 없는 읽기 전용 속성입니다. element.getBoundingClientRect()에서도 속성 값을 가져올 수 있습니다. 특징 설명 유형(type) Element.clientLeft 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) element.clientLeft document.querySelector(".box").clientLeft 요소(element) : 선택할 요.. 2022. 12. 2.
clientTop 속성은 요소의 Y축 위치 값을 가져옵니다. Reference/Javascript clientTop 속성은 요소의 Y축 위치 값을 가져옵니다. by @webs 2022. 11. 17. clientTop clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다. 위치 값만 가져올 수 있으며, 수정할 수 없는 읽기 전용 속성입니다. element.getBoundingClientRect()에서도 속성 값을 가져올 수 있습니다. 특징 설명 유형(type) Element.clientTop 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) element.clientTop document.querySelector(".box").clientTop 요소(element) : 선택할 요소를 설정합.. 2022. 12. 2.
clientWidth 속성은 요소의 가로 값을 가져옵니다. Reference/Javascript clientWidth 속성은 요소의 가로 값을 가져옵니다. by @webs 2022. 11. 17. clientWidth clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다. 마진과 보더 값이 있다면, 포함되어 있지 않습니다. 가로 값만 가져올 수 있으며, 수정할 수 없는 읽기 전용 속성입니다. 익스프롤러에서 사용된 오래 사용된 속성이며, element.getBoundingClientRect()에서도 속성 값을 가져올 수 있습니다. 특징 설명 유형(type) Element.clientWidth 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) element.clientWidth docu.. 2022. 12. 2.
clientHeight 속성은 요소의 세로 값을 가져옵니다. Reference/Javascript clientHeight 속성은 요소의 세로 값을 가져옵니다. by @webs 2022. 11. 17. clientHeight clientHeight 속성은 요소의 세로 값(마진/보더 불포함)을 가져옵니다. 마진과 보더 값이 있다면 포함되어 있지 않습니다. 높이 값만 가져올 수 있으며, 수정할 수 없는 읽기 전용 속성입니다. 익스프롤러에서 사용된 오래 사용된 속성이며, element.getBoundingClientRect()에서도 속성 값을 가져올 수 있습니다. 특징 설명 유형(type) Element.clientHeight 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) element.clientHeight .. 2022. 12. 2.
text-shadow 속성은 텍스트 그림자를 설정합니다. Reference/CSS text-shadow 속성은 텍스트 그림자를 설정합니다. by @webs 2022. 11. 30. text-shadow text-shadow 속성은 텍스트 그림자를 설정합니다. x축, y축 길이를 통해 그림자의 길이를 설정하고, blur를 통해 뿌연 정도를 컨트롤 할 수 있습니다. 다중 속성을 이용하여 실제 느낌의 그림자 연출도 가능합니다. 특징 설명 기본값 text-shadow : none 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-shadow 속성은 텍스트 그림자를 설정합니다. text-shadow 속성의 blur는 뿌연 정도를 나타내는 속성입니다. text-shadow 속성의 color를 설정하지 않으면 기본 컬러색으로 설정됩니다. 비.. 2022. 11. 30.
text-emphasis-color 속성은 텍스트에 강조 표시 색상을 설정합니다. Reference/CSS text-emphasis-color 속성은 텍스트에 강조 표시 색상을 설정합니다. by @webs 2022. 11. 29. text-emphasis-color text-emphasis-color 속성은 텍스트에 강조 표시 색상을 설정합니다. text-emphasis-style을 속성을 설정하고, 색상을 표시합니다. 특징 설명 기본값 text-emphasis-color : currentcolor 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-emphasis-color 속성은 텍스트에 강조 표시 색상을 설정합니다. 비교(Compare) text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정합니다. text-emphasis-style .. 2022. 11. 30.
text-emphasis-position 속성은 텍스트에 강조 표시 위치를 설정합니다. Reference/CSS text-emphasis-position 속성은 텍스트에 강조 표시 위치를 설정합니다. by @webs 2022. 11. 29. text-emphasis-position text-emphasis-position 속성은 텍스트에 강조 표시 위치를 설정합니다. 이 속성은 아시아권 언어(일본어, 한국어, 중국어 등)를 위한 강조 표시이며, 가로 모드일 때에는 left, right 속성으로 컨트롤 할 수 있습니다. 특징 설명 기본값 text-emphasis-position : over right; 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-emphasis-position 속성은 텍스트에 강조 표시 위치를 설정합니다. text-emphasis-pos.. 2022. 11. 30.
text-emphasis-style 속성은 텍스트에 강조 표시 스타일을 설정합니다. Reference/CSS text-emphasis-style 속성은 텍스트에 강조 표시 스타일을 설정합니다. by @webs 2022. 11. 29. text-emphasis-style text-emphasis-style 속성은 텍스트에 강조 표시 스타일을 설정합니다. 글씨를 강조하고 싶을때 글시 위에 강조 표시를 설정할 수 있으며, 위치, 색상, 스타일을 설정 할 수 있습니다. 특징 설명 기본값 text-emphasis-style : none 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-emphasis-style 속성은 텍스트에 강조 표시 스타일을 설정합니다. 비교(Compare) text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정합니다. text.. 2022. 11. 30.
text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정합니다. Reference/CSS text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정합니다. by @webs 2022. 11. 29. text-emphasis text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정합니다. 색상 변경은 text-emphasis-color, 위치 변경은 text-emphasis-position, 모양 변경은 text-emphasis-style로 설정이 가능합니다. 특징 설명 기본값 text-emphasis: text-emphasis-style | text-emphasis-color 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정합니다. text-emphasi.. 2022. 11. 30.
valueOf 메서드는 객체의 원시값을, 문자열로 반환합니다. Reference/Javascript valueOf 메서드는 객체의 원시값을, 문자열로 반환합니다. by @webs 2022. 11. 23. valueOf() valueOf() 메서드는 객체의 원시값을, 문자열로 반환합니다. 특징 설명 유형(type) String.prototype.valueOf() 버전(version) ES1 결과값(return) 문자열(string) 사용성 ★★★☆☆ 문법(Syntax) "문자열".valueOf() //문자열 반환하기 "javascript reference".valueOf(); //javascript reference 문자열(string) : 문자열을 설정합니다. 정의(Definition) valueOf() 메서드는 객체의 원시값을, 문자열로 반환합니다. toStrin.. 2022. 11. 24.
toString() 메서드는 데이터를 문자열로 변환하고, 반환합니다. Reference/Javascript toString 메서드는 데이터를 문자열로 변환하고, 반환합니다. by @webs 2022. 11. 24. toString() toString() 메서드는 데이터를 문자열로 변환하고, 반환합니다. 특징 설명 유형(type) String.prototype.toString() Object.prototype.toString() Number.prototype.toString() Array.prototype.toString() Date.prototype.toString() Boolean.prototype.toString() 버전(version) ES1 결과값(return) 문자열(string) 사용성 ★★★☆☆ 문법(Syntax) "문자열".toString() //문자열 반환.. 2022. 11. 24.
toUpperCase 메서드는 문자열을 대문자로 설정하고, 대문자 문자열을 반환합니다. Reference/Javascript toUpperCase 메서드는 문자열을 대문자로 설정하고, 대문자 문자열을 반환합니다. by @webs 2022. 11. 17. toUpperCase() toUpperCase() 메서드는 문자열을 대문자로 설정하고, 대문자 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.toUpperCase() 버전(version) ES1 결과값(return) 문자열(string) 사용성 ★★★☆☆ 문법(Syntax) "문자열".toUpperCase() //대문자로 변경하기 "javascript reference".toUpperCase(); //JAVASCRIPT REFERENCE 문자열(string) : 문자열을 설정합니다. 정의(Definition).. 2022. 11. 23.
toLowerCase 메서드는 문자열을 소문자로 설정하고, 새로운 문자열을 반환합니다. Reference/Javascript toLowerCase 메서드는 문자열을 소문자로 설정하고, 새로운 문자열을 반환합니다. by @webs 2022. 11. 17. toLowerCase() toLowerCase() 메서드는 문자열을 소문자로 설정하고, 새로운 문자열을 반환합니다. 특징 설명 유형(type) String.prototype.toLowerCase() 버전(version) ES1 결과값(return) 문자열(string) 사용성 ★★★☆☆ 문법(Syntax) "문자열".toLowerCase() //소문자로 변경하기 "JAVASCRIPT REFERENCE".toUpperCase(); //javascript reference 문자열(string) : 문자열을 설정합니다. 정의(Definition).. 2022. 11. 23.
kbd 태그는 키보드 입력요소를 표현할 때 설정합니다. Reference/HTML 태그는 키보드 입력요소를 표현할 때 설정합니다. by @webs 2022. 11. 15. 태그는 키보드 입력요소를 표현할 때 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용 버전 HTML4 시각적 표현 monotype 폰트로 표현 사용성 ★☆☆☆☆ 정의(Definition) 태그는 키보드 입력요소를 표현할 때 설정합니다. 태그는 키보드, 음성입력, 입력장치에 의한 텍스트를 표현할 때 사용합니다. 태그는 시각적으로 브라우저 기본 폰트 monospace으로 표현됩니다. 코드와 관련된 태그 및 속성 태그는 소스 코드를 표현할 때 설정합니다. 태그는 수학적인 변수나 프로그램의 변수를 표현할 때 설정합니다. 태그는 프로그램 출력 결과물을 표현할 때 .. 2022. 11. 22.
var 태그는 수학적인 변수나 프로그램의 변수를 표현할 때 설정합니다. Reference/HTML 태그는 수학적인 변수나 프로그램의 변수를 표현할 때 설정합니다. by @webs 2022. 11. 15. 태그는 수학적인 변수나 프로그램의 변수를 표현할 때 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용 버전 HTML4 시각적 표현 이탤릭체 사용성 ★☆☆☆☆ 정의(Definition) 태그는 수학적인 변수나 프로그램의 변수를 표현할 때 설정합니다. 기울임체 사용을 위한 요소 설정은 적절하지 않습니다. 기울기를 위함이라면 CSS 속성을 설정합니다. 코드와 관련된 태그 및 속성 태그는 소스 코드를 표현할 때 설정합니다. 태그는 수학적인 변수나 프로그램의 변수를 표현할 때 설정합니다. 태그는 프로그램 출력 결과물을 표현할 때 설정합니다. 태그는.. 2022. 11. 22.
code 태그는 소스 코드를 표현할 때 설정합니다. Reference/HTML 태그는 소스 코드를 표현할 때 설정합니다. by @webs 2022. 11. 15. 태그는 소스 코드를 표현할 때 설정합니다. 코드를 표현할 때에는 공백도 표현되어야 하기 때문에 태그와 같이 사용하게 됩니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용 버전 HTML4 시각적 표현 monospace 폰트로 표현 사용성 ★★★☆☆ 정의(Definition) 태그는 소스 코드를 표현할 때 설정합니다. 태그는 브라우저의 기본 글꼴 및 고정 폭으로 표현됩니다. CSS를 설정하면 기본 글꼴은 무시됩니다. 태그는 사용시 화면 공백을 그대로 표현하기 위해서 태그와 같이 사용합니다. 코드와 관련된 태그 및 속성 태그는 소스 코드를 표현할 때 설정합니다. 태그는 수.. 2022. 11. 22.
pre 태그는 마크업의 공백을 그대로 보여줍니다. Reference/HTML 태그는 마크업의 공백을 그대로 보여줍니다. by @webs 2022. 11. 15. 태그는 마크업의 공백을 그대로 보여줍니다. 코드를 보여줄 때 공백과 줄바꿈을 그대로 보여주기 때문에 태그와 같이 사용됩니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용 버전 HTML4 시각적 표현 monospace 폰트로 표현 사용성 ★★★☆☆ 정의(Definition) 태그는 마크업의 공백을 그대로 보여줍니다. 태그는 코드를 표현할 때 태그와 같이 사용합니다. 마크업의 한칸 이상 공백은 브라우저에서 한칸으로 표현됩니다. 두칸이상의 공백을 표현하고 싶다면 를 사용해야 합니다. 줄바꿈과 관련된 태그 및 속성 태그는 텍스트 줄바꿈을 설정합니다. 태그는 의미가 없는 텍스.. 2022. 11. 22.
hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다. Reference/CSS hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다. by @webs 2022. 11. 19. hyphens hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다. 단어에서 줄바꿈이 될때 하이픈(-)으로 연결해주는 작업을 설정하는 방법입니다. 특징 설명 기본값 hyphens : manual 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다. 줄바꿈과 관련된 속성 및 태그 white-space 속성은 줄바꿈, 공백 여부를 설정합니다. word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. overflow-w.. 2022. 11. 21.
overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다. Reference/CSS overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다. by @webs 2022. 11. 19. overflow-wrap overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다. 태그와 동일한 기능입니다. 한국어는 적용되지 않으며, 영어에 적용됩니다. 특징 설명 기본값 overflow-wrap : normal 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다. overflow-wrap 속성은 한국어에는 적용되지 않습니다. overflow-wrap 속성은 태그와 기능이 동일합니다. 줄바꿈과 관련된 속성 및 태그 white-space 속성은 줄바꿈, 공백 .. 2022. 11. 21.
word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. Reference/CSS word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. by @webs 2022. 11. 19. word-break word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. 줄바꿈을 할 때 단어를 기준으로 할지 말지 여부를 설정 할 수 있으며, 한국어를 기준으로 word-break: keep-all; 속성만 사용 가능합니다. 특징 설명 기본값 word-break : normal 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. 줄바꿈과 관련된 속성 및 태그 white-space 속성은 줄바꿈, 공백 여부를 설정합니다. word-brea.. 2022. 11. 21.
white-space 속성은 줄바꿈 및 공백을 설정합니다. Reference/CSS white-space 속성은 줄바꿈 및 공백을 설정합니다. by @webs 2022. 11. 19. white-space white-space 속성은 줄바꿈 및 공백을 설정합니다. white-space: pre 속성은 태그와 기능이 동일합니다. 마크업의 공백은 화면으로 표현될 때 한칸의 공백으로 인식합니다. white-space 속성 마크업상의 공백을 화면에 그대로 표현해 주며, 줄바꿈이나 줄 속성도 설정 할 수 있습니다. 특징 설명 기본값 white-space : normal 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) white-space 속성은 줄바꿈, 공백을 설정합니다. white-space : pre 속성은 태그와 기능이 동일합니다. whit.. 2022. 11. 21.
h1 ~ h6 태그는 각 섹션의 제목을 설정합니다. Reference/HTML ~ 태그는 각 섹션의 제목을 설정합니다. by @webs 2022. 11. 17. ~ ~ 태그는 각 섹션의 제목을 설정합니다. 6단계로 구분하여, 작성하며 순차적으로 작성합니다. 제목 요소는 문서에서 가장 중요한 제목을 설정하며, 보통 한번만 작성합니다. ~ 요소는 단계별로 폰트 사이트와 굵기가 설정되어 있습니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML4 시각적 표현 볼드체 및 글씨 크기 사이즈 사용성 ★★★★★ 정의(Definition) ~ 태그는 각 섹션의 제목을 6단계로 설정합니다. 태그는 가장 높은 단계의 제목이며, 태그는 가장 낮은 단계의 제목입니다. ~ 태그는 글씨 크기를 위해 사용하지 않습니다. 글씨 크기는 CSS의 fo.. 2022. 11. 17.

티스토리툴바