본문 바로가기
Webstoryboy
분류 전체보기
(864)
HTML
(126)
Alphabet
(25)
Topic
(2)
CSS
(238)
Alphabet
(24)
Topic
(0)
JAVASCRIPT
(226)
Alphabet
(65)
Topic
(5)
JQUERY
(158)
Alphabet
(19)
Topic
(0)
GSAP
(36)
Alphabet
(7)
Topic
(0)
SVG
(80)
Alphabet
(0)
Topic
(0)
CANVAS
(0)
Alphabet
(0)
Topic
(0)
검색
Category
Explanation
Refer
Tutor
Fonts
WebGL
CSS
분류 전체보기
(864)
썸네일형
리스트형
[HTML] <track>
태그는 태그와 태그의 자막을 설정합니다. 자막은 vvt 파일을 이용하여 사용합니다. 태그는 미디어 요소의 자막을 정의합니다. 특징 설명 요소 해당 없음 닫는 태그 닫는 태그 사용 안함() 버전 HTML5 시각적 표현 자막 표시 정의(Definition) 태그는 미디어 요소의 자막을 설정합니다. 태그는 태그 또는 태그와 같이 사용합니다. 속성(Property) 속성 값(예) 설명 버전 default default 트랙 중에 가장 기본이 되는 트랙에 설정합니다. - kind captions chapters descriptions metadata subtitles 트랙의 제목을 설정합니다. 트랙의 챕터를 설정합니다. 트랙의 설명을 설정합니다. 트랙의 메타데이터를 설정합니다. 트랙의 자막 설정합니다. - lab..
[HTML] <tr>
태그는 표의 행을 설정합니다. 태그는 표를 만들 때 사용합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 , , 를 사용하며, 행과 열을 나타내는 , 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 됩니다. 태..
[HTML] <title>
태그는 브라우저의 제목 또는 탭에 표시되는 문서의 제목을 표시합니다. 타이틀에는 텍스트만 설정할 수 있으며, 태그들은 무시됩니다. 웹 사이트의 가장 중요한 제목을 표시하며, 검색에 있어서도 가장 중요한 부분입니다. 제목은 검색 결과 페이지를 나열하는 순서를 결정하는데 가장 중요한 구성요소이며, 독자의 주의를 끌 수 있는 가장 중요한 부분입니다. 그래서 독자의 주의를 표시하기 위하며 의미 없는 단어의 작업은 검색에 있어 효율적이지 못하며, 한 단어 또는 두 단어의 제목도 피하는게 좋습니다. 검색 엔진은 일반적으로 페이지에 제목 중 50~60자 정도만 표시해 줍니다. 그래서 그 이상 쓰는 것도 좋지 않습니다. 그 이후의 글자는 생략 될 수 도 있습니다. 자신의 사이트 내에서 가장 핵심적인 부분만 제목으로 설..
[HTML] <time>
태그는 시간의 특정 기간을 나타낼 때 사용합니다. 날짜를 인식하기 위해서는 datetime 속성을 같이 사용하며 엔진 결과나 알림 같은 기능을 개선 할 수 있습니다. 시간은 24시간을 기준으로 설정하며 날짜는 그레고리력(Gregorian calendar)을 기준으로 표현합니다. 태그는 날짜와 시간을 정의합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML5 시각적 표현 시각적인 표현은 없음, 브라우저가 인식할 수 있음 정의(Definition) 태그는 날짜와 시간을 정의합니다. Datetime 속성 datetime은 브라우저가 인식할 수 있는 속성입니다. 데이터 타임은 형식에 맞게 작성하여야 합니다. 년도만 표시하는 경우 : 2019 년도와 달을..
[HTML] <thead>
태그는 표의 헤더 영역을 그룹화합니다. 태그는 표를 만들 때 사용합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 , , 를 사용하며, 행과 열을 나타내는 , 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 됩..
[HTML] <th>
태그는 행이나 열에 타이틀을 설정합니다. 태그는 표를 만들 때 사용합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 , , 를 사용하며, 행과 열을 나타내는 , 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 ..
[HTML] <tfoot>
태그는 표의 푸터 영역을 그룹화합니다. 태그는 표를 만들 때 사용합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 , , 를 사용하며, 행과 열을 나타내는 , 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 됩..
[HTML] <textarea>
태그는 여러줄의 텍스트를 편집할 수 있습니다. 코멘트 또는 피드백 양식으로 크기와 여러가지 속성을 설정할 수 있습니다. 접근성을 위해 요소를 같이 사용하며, 서버에 전송하기 위해 name 속성도 같이 사용합니다. row와 col 속성을 사용하면 텍스트 영역을 지원할 수 있으며, 브라우저마다 기본 값이 다를 수 있습니다. maxlength 속성을 이용하면 최대 문자수와 최소 문자수를 지정할 수 있으며, 필수 요소인 경우 필수요소로 설정할 수 있습니다. wrap 속성은 글의 줄바꿈을 설정할 수 있으며, placeholder를 이용하면 텍스트 영역의 미리보기 힌트 글자를 설정 할 수 있습니다. 태그는 여러줄의 텍스트를 편집할 수 있는 컨트롤을 정의합니다. 특징 설명 요소 인라인 요소(Inline Element..
[HTML] <template>
태그는 페이지가 로드 될 때 렌더링되지 않고 자바스크립트를 이용하여 HTML을 표현해주는 태그입니다. 템플릿을 설정하고 내용은 스크립트를 통해 처리하는 방식입니다. 웹 문서에 사용하기 위한 템플렛을 정의합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML5 정의(Definition) 웹 문서에 사용하기 위한 템플렛을 정의합니다. 호환성(Compatibility) 6 7 8 9 10 11 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능
[HTML] <td>
태그는 표의 열(셀)을 설정합니다. 태그는 표를 만들 때 사용합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 , , 를 사용하며, 행과 열을 나타내는 , 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 됩니다..
[HTML] <tbody>
태그는 표의 본문 영역을 그룹화합니다. 태그는 표를 만들 때 사용합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 , , 를 사용하며, 행과 열을 나타내는 , 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 됩..
[HTML] <table>
태그는 표를 설정합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 , , 를 사용하며, 행과 열을 나타내는 , 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 됩니다. 태그는 표를 설정합니다. 특징 설명 요소 ..
[HTML] <svg>
SVG(Scalable Vector Graphics)는 벡터 방식의 2차원 그림을 그리기 위한 XML기반의 마크업 언어입니다. SVG는 텍스트 기반의 표준 방식이며, HTML이나 CSS를 이용하여 사용 할 수 있습니다. SVG는 XML 파일을 기반으로 하고 있기 때문에 인덱싱이나 압축이 가능하며, 일러스트레이터와 같은 프로그램을 통해 편집도 가능합니다. SVG는 1999년부터 W3C(World Wide Web Consortium)에 개발한 표준 언어입니다. 태그는 벡터 방식의 그림을 정의합니다. 특징 설명 요소 - 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML4 정의(Definition) 태그는 벡터 방식의 그림을 정의합니다. 비교(Compare) 태그는 비트맵 방식의 그림을 정의합니다. 태그는 벡터..
[HTML] <sup>
태그는 텍스트의 위첨자를 사용할 때 쓰입니다. 주로 수학적인 공식에서 많이 사용하게 됩니다. 태그는 디자인적인 요소를 사용하는 것은 적합하지 않습니다. 태그의 위치는 변경이 필요한 경우에는 vertical-align 속성을 사용하면 변경할 수 있으며, 이런 모양이나 위치는 브라우저마다 틀릴 수 있으니 확인이 필요합니다. 태그는 텍스트 위첨자를 정의합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML4 시각적 표현 문자의 절반 위로 위치하고, 작은 글씨로 표현 정의(Definition) 태그는 텍스트 위첨자(Superscript)를 정의합니다. 태그는 첨자 텍스트는 문자의 절반 위로 위치하고, 작은 글씨로 표현됩니다. 비교(Compare) 글씨..
[HTML] <summary>
태그는 접기/펼치기 목록을 설정합니다. 자바스크립트를 이용하여 컨텐츠 내용을 숨기고 보여줄 수 있는 기능을 HTML 태그를 통해 구현할 수 있습니다. 접기/펼치기 목록의 제목은 태그를 통해 설정합니다. 태그는 요소에 대한 요약 또는 제목을 정의합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML5 정의(Definition) 태그는 요소에 대한 요약 또는 제목을 정의합니다. 태그에는 제목 태그나 강조 태그를 사용할 수 있습니다. 비교(Compare) 접기/펼치기 목록을 사용시 태그를 사용합니다. 접기/펼치기 목록의 제목은 태그를 사용합니다. Sample1 태그와 태그의 사용 예제입니다. 결과 더 자세한 정보를 알고 싶다면? 접기/펼치기 목록은 de..
[HTML] <sub>
태그는 텍스트의 아래첨자를 사용할 때 쓰입니다. 주로 수학적인 공식이나 화학식에서 많이 사용하게 됩니다. 태그는 디자인적인 요소를 사용하는 것은 적합하지 않습니다. 태그의 위치는 변경이 필요한 경우에는 vertical-align 속성을 사용하면 변경할 수 있으며, 이런 모양이나 위치는 브라우저마다 틀릴 수 있으니 확인이 필요합니다. 태그는 텍스트 아래첨자를 정의합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML4 시각적 표현 문자의 절반 아래로 위치하고, 작은 글씨로 표현 정의(Definition) 태그는 텍스트 아래첨자(Subscript)를 정의합니다. 태그는 문자의 절반 아래로 위치하고, 작은 글씨로 표현됩니다. 태그는 수학 공식이나 화..
[HTML] <style>
) 버전 HTML4 정의(Definition) 태그는 웹 문서에 대한 스타일 정보를 정의합니다. 태그는 한 문서에서 여러번 사용할 수 있습니다. 스타일을 표현하는 방법 인라인 스타일(inline style) : 태그에 직접 사용하는 방법 인터널 스타일(internal style) : head 태그 안에 사용하는 방법 익스터널 스타일(external style) : 외부 파일로 연결하는 방법 속성(Property) 속성 값(예) 설명 버전 media media = "screen" 미디어 유형을 설정합니다. - type type = "text/css" 스타일 유형을 설정합니다. - title title = "name" 간단한 제목을 설정합니다. - scoped scoped 부모와 자식요소의 관계를 설정합니다..
[HTML] <strong>
태그는 텍스트의 중요성을 강조할 때 설정합니다. 일반적으로 텍스트는 굵게 표현이 됩니다. 태그는 다른 태그와 유사한 점이 있기 때문에 비교하며 적절한 곳에 사용해야 합니다. 태그와 태그는 출력되는 모양이 같지만 태그는 컨텐츠의 중요성을 강조하는 반면 태그는 텍스트의 주의를 끌기 위함입니다. 태그와 태그는 강조하는 태그이지만 의미에 있어 약간의 차이가 있습니다. 예를 들면 "나는 너를 사랑해"하고 할 때 사랑해를 강조하기 위해 태그를 사용할 수 있습니다. 하지만 태그는 "여기는 매우 위험합니다. 들어가지 마세요" 라고 할 경우 중요성과 심각성, 긴급성의 의미까지 내포하기 때문에 보다는 태그가 더 적절합니다. 태그는 텍스트의 중요성을 강조할 때 설정합니다. 특징 설명 요소 인라인 요소(Inline Eleme..
[HTML] <strike>
태그는 현재 사용하지 않는 태그입니다. 텍스트 위에 취소선(수평선)을 표현하기 위해 사용한 태그이지만 현재는 태그 또는 태그가 그 역할을 대신하고 있습니다. 태그는 취소선(수평선)을 표현합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML4(사용하지 않는 태그) 시각적 표현 글씨 중앙 수평선 정의(Definition) 태그는 취소선(수평선)을 표현합니다. 태그는 오래된 태그이므로 태그를 사용합니다. 비교(Compare) 문서에서 삭제된 텍스트틀 표시하려면 태그를 사용합니다. 문서에서 삽입된 텍스트를 표시하려면 태그를 사용합니다. 정확하지 않고, 관련성이 없는 텍스트를 표시하려면 태그를 사용합니다. Sample1 최소선을 나타내기 위한 예제입니..
[HTML] <span>
태그는 콘텐츠 요소를 표현하기 위한 인라인 요소이며, 의미가 없는 그룹화 요소입니다. 적절한 의미에 맞는 요소가 없거나 그룹화할 때 사용하며 요소와 비교가 됩니다. 태그는 블록구조이며 태그는 인라인 구조입니다. 태그는 인라인 요소 그룹화를 정의합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML4 정의(Definition) 태그는 인라인 요소 그룹화를 정의합니다. 태그는 주변 요소와 구별하기 위하거나 다른 적절한 태그가 없는 경우에 사용합니다. 태그는 CSS 스타일링 사용을 위해 설정하는 경우가 많습니다. 비교(Compare) 블록 요소를 그룹화한다면 태그를 사용합니다. 인라인 요소를 그룹화한다면 태그를 사용합니다. Sample1 적절하게 사..
[HTML] <source>
태그는 , 요소 및 요소에 소스를 지정하는데 사용합니다. 닫는 태그가 없는 빈요소입니다. 태그는 미디어 요소에 대한 소스를 지정하는데 사용합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용 안함 버전 HTML5 정의(Definition) 태그는 미디어 요소에 대한 소스를 지정하는데 사용합니다. 태그는 , , 요소들을 지원합니다. 속성(Property) 속성 값(예) 설명 버전 media media = "value" 미디어 쿼리를 설정합니다. - size size 다양한 페이지 레이아웃에 대한 이미지 크기를 설정합니다 - src src = "URL" 미디어의 경로를 설정합니다. - srcset srcset = "URL을" 화면 크기 및 해상도에 따라 이미지를 설정합..
[HTML] <small>
태그는 저작권 및 법적인 텍스트에 설정합니다. 태그는 저작권 및 법적인 텍스트에 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML4 시각적 표현 기본 글씨보다 작게 표현 사용성 정의(Definition) 태그는 저작권, 면책조항, 주의사항, 법적 제한 사항, 주석표시에 사용합니다. 태그는 부가정보를 나타내는 주석표시이므로, 여러 단락이나 광범위한 텍스트가 포함된 섹션에서는 사용하지 않습니다. 크로스브라우징(CrossBroswing) HTML4에서는 작은 글씨를 표현하는데 사용했지만, HTML5에서는 저작권 및 주석 표시에 사용합니다. 비교(Compare) 글씨를 특별한 이유로 평범한 글자와 구분하기 위해서는 태그를 사용합니다. 글씨를 ..
[HTML] <select>
태그는 선택 목록을 설정합니다. 태그는 선택 목록을 태그를 사용하여 설정하며, 접근성을 위하여 요소를 사용하며, id와 for 속성을 설정합니다. 태그는 선택 목록을 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML4 시각적 표현 선택 메뉴 사용성 정의(Definition) 태그는 선택 목록을 설정합니다. 태그는 선택 목록을 태그를 사용하여 설정합니다. 태그는 접근성을 위하여 요소를 사용하며, id와 for 속성을 설정합니다. 태그와 태그는 선택 목록을 보여주는 것은 똑같지만, 는 사용자가 선택 목록에 없는 값도 사용할 수 있으면, 일치하는 데이터 값이 있으면 바로 선택할 수 있습니다. 비교(Compare) 태그는 선택 목록을 설정합니..
[HTML] <section>
태그는 주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용하며, 각 섹션에는 ~ 요소를 자식으로 포함시켜 식별해야 합니다. 태그는 스타일링 요소가 아니기 때문에 그룹화나 편의를 위함이라면 태그를 사용하는 것이 좋습니다. 태그는 주제별 그룹의 콘텐츠 섹션을 정의합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML5 사용성 정의(Definition) 태그는 주제별 그룹의 콘텐츠 섹션을 정의합니다. 태그는 탭 페이지, 홈페이지의 소개, 연락처, 뉴스항목 등과 같이 주제별로 분류 할 수 있습니다. 태그에는 제목을 나타내는 ~ 태그가 포함되어야 합니다. 태그는 문장이나 문서의 스타일링 요소가 아닙니다. 스크립트의 편의나 영역을 위함이라면 태그가 좋습니다. 태그가..
[HTML] <script>
) 버전 HTML4 정의(Definition) 태그는 스크립트 코드를 포함하거나 외부 스크립트를 연결할 수 있습니다. 스크립트를 지원하지 않는 브라우저 사용자를 위해서 를 설정합니다. 크로스브라우징(CrossBroswing) HTML4에서는 type 속성이 필수이지만, HTML5에서는 선택사항입니다. HTML5에서는 async 속성이 새로 생겼습니다. 속성(Property) 속성 값(예) 설명 버전 async async 외부파일 연동시 비동기 방식을 설정합니다. charset charset = "UTF-8" 외부 파일의 문자 인코딩 방식을 설정합니다. - defer defer 페이지가 완료되면 외부 파일을 실행시킵니다. - src src = "URL" 외부 파일 주소를 설정합니다. - type type ..
[HTML] <samp>
태그는 컴퓨터 프로그램으로 출력된 결과물을 나타내는 텍스트를 표현합니다. 스크립트의 결과값을 나타낼 때 사용하며 monotype의 폰트로 표현이 됩니다. 태그는 프로그램으로 출력된 결과물을 나타내는 텍스트를 정의합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML4 시각적 표현 monotype 폰트 정의(Definition) 태그는 프로그램으로 출력된 결과물을 나타내는 텍스트 정의합니다. 비교(Compare) 컴퓨터 소스 코드를 나타내는 텍스트는 태그를 사용합니다. 수학적인 변수나 프로그램의 변수를 나타내는 텍스트는 태그를 사용합니다. 컴퓨터 프로그램으로 출력된 결과물을 나타내는 텍스트는 태그를 사용합니다. 키보드 입력요소를 나타내는 텍스트는..
[HTML] <s>
요소는 텍스트에 취소선을 나타냅니다. 더 이상 텍스트와 관련이 없거나 적절하지 않은 것을 나타낼 때 사용합니다. 문서 편집을 위한 텍스트 수정은 또는 태그를 사용합니다. 태그는 정확하지 않거나 올바르지 않은 텍스트를 정의합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML4 시각적 표현 가운데 선 정의(Definition) 요소는 텍스트가 정확하지 않고, 관련성이 없는 내용을 표시하는데 사용합니다. 문서를 편집하는 경우라면 태그와 태그를 사용합니다. 태그는 주로 할인된 가격에 표시합니다. 단순하게 취소선을 보여주고 싶다면 text-decoration:line-through;을 통하여 설정할 수 있습니다. 크로스브라우징(CrossBroswing..
[HTML] <ruby>
태그는 루비 문자를 정의합니다. 루비 문자란 한자에 대한 읽는 법이나 일반적인 읽기 방법과 다르게 읽을 때 작은 글씨로 표현해주는 문자를 의미합니다. 태그는 루비 문자를 정의하며, 태그는 상단에 작은 주석 글씨를 나타내며, 태그는 루비 태그가 지원되지 않을 경우 괄호('(')를 표현해주는 역할을 합니다. 태그는 발음을 나타내며, 태그는 텍스트 컨테이너 역할을 합니다. 태그는 루비 문자를 정의합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML5 시각적 표현 상단에 작은 글씨로 표현 정의(Definition) 태그는 루비 문자를 정의합니다. 루비 문자란 한자에 대한 읽는 법이나 일반적인 읽기 방법과 다르게 읽을 때 작은 글씨로 표현해주는 문자를..
[HTML] <rtc>
태그는 루비 문자를 정의합니다. 루비 문자란 한자에 대한 읽는 법이나 일반적인 읽기 방법과 다르게 읽을 때 작은 글씨로 표현해주는 문자를 의미합니다. 태그는 루비 문자를 정의하며, 태그는 상단에 작은 주석 글씨를 나타내며, 태그는 루비 태그가 지원되지 않을 경우 괄호('(')를 표현해주는 역할을 합니다. 태그는 발음을 나타내며, 태그는 텍스트 컨테이너 역할을 합니다. 태그는 루비 문자의 텍스트 영역을 정의합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML5 정의(Definition) 태그는 루비 문자의 텍스트 영역을 정의합니다. 비교(Compare) 루비 문자를 정의한다면 태그를 사용합니다. 루비 문자의 상단 주석을 표현하려면 태그를 사용합..
[HTML] <rt>
태그는 루비 문자의 상단 주석을 정의합니다. 루비 문자란 한자에 대한 읽는 법이나 일반적인 읽기 방법과 다르게 읽을 때 작은 글씨로 표현해주는 문자를 의미합니다. 태그는 루비 문자를 정의하며, 태그는 상단에 작은 주석 글씨를 나타내며, 태그는 루비 태그가 지원되지 않을 경우 괄호('(')를 표현해주는 역할을 합니다. 태그는 발음을 나타내며, 태그는 텍스트 컨테이너 역할을 합니다. 태그는 루비 문자의 상단 주석을 정의합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML5 정의(Definition) 태그는 태그는 루비 문자의 상단 주석을 정의합니다. 비교(Compare) 루비 문자를 정의한다면 태그를 사용합니다. 루비 문자의 상단 주석을 표현하려..
1
···
16
17
18
19
20
21
22
···
29
Alphabet
A
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
B
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<blink>
<body>
<br>
<button>
C
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
D
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
E
<em>
<embed>
F
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
H
<h1>~<h6>
<head>
<header>
<hgroup>
<hr>
<html>
I
<i>
<iframe>
<img>
<input>
<ins>
K
<kbd>
<keygen>
L
<label>
<legend>
<li>
<link>
M
<main>
<map>
<mark>
<marquee>
<menu>
<menuitem>
<meta>
<meter>
N
<nav>
<noframes>
<noscript>
O
<object>
<ol>
<optgroup>
<option>
<output>
P
<p>
<param>
<picture>
<pre>
<pregress>
Q
<q>
R
<rp>
<rt>
<rtc>
<ruby>
S
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
T
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
U
<u>
<ul>
V
<var>
<video>
W
<wbr>
Topic
A
블록/인라인 구조
시멘틱 태그
Alphabet
A
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
B
backdrop-filter
backface-visibility
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
background
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
C
caption-side
caret-color
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
D
direction
display
E
empty-cells
F
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
G
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-area
grid-template-columns
grid-template-rows
H
hanging-punctuation
height
hyphens
I
isolation
J
justify-content
L
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
M
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
mix-blend-mode
O
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
P
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
Q
quotes
R
resize
right
T
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
U
unicode-bidi
user-select
V
vertical-align
visibility
W
white-space
width
word-break
word-spacing
word-wrap
Z
z-index
Topic
1
CSS란?
Alphabet
문자열 검색
indexOf()
lastIndexOf()
search()
match()
charAt()
charCodeAt()
includes()
startsWidth()
endWidth()
문자열 변경
slice()
substring()
substr()
split()
replace()
replaceAll()
concat()
repeat()
padStart()
padEnd()
trim()
trimStart()
trimEnd()
toLowerCase()
toUpperCase()
toString()
클래스 변경
classList.add()
classList.remove()
classList.toggle()
classList.contains()
classList.replace()
속성 변경
setAttribute()
getAttribute()
removeAttribute()
hasAttribute()
hasAttributes()
배열 변경
join()
shift()
unshift()
pop()
push()
크기 설정
innerWidth
innerHeight
outerWidth
outerHeight
위치 및 크기
clientWidth
clientHeight
clienTop
clienLeft
offsetWidth
offsetHeight
offsetTop
offsetLeft
offsetParent
getBoundingClientRect()
getClientRect()
스크롤
pageXOffset
pageYOffset
scrollX
scrollY
scroll()
scrollTo()
scrollBy()
scrollLeft
scrollTop
scrollIntoView()
Topics
자바스크립트
소개
기초
변수
연산자
데이터 저장하기
소개
변수
배열
객체
데이터 불러오기
변수
배열
객체
데이터 실행하기
선언적 함수
익명 함수
매개 함수
리턴값 함수
화살표 함수
내부 함수
즉시실행 함수
파라미터 함수
아규먼트 함수
재귀 함수
클래스
데이터 제어하기
if문
if문 생략
다중 if문
중첩 if문
삼항 연산자
switch문
while문
do while문
for문
중첩 for문
break문
continue문
자바스크립트
변수
변수
변수의 종류
변수의 유형
변수의 변환
배열
배열
연산자
산술 연산자
대입 연산자
증감 연산자
비교 연산자
논리 연산자
비트 연산자
문자열 결합 연산자
연산자 우선순위
조건문
if문
if~else문
다중 if문
중첩 if문
switch문
조건부 연산자
반복문
while문
do while문
for문
for in 반복문
중첩 for문
break문
continue문
함수
함수
함수의 사용형태
함수의 사용형태
선언적 함수
익명 함수
매개변수가 있는 함수
arguments 함수
리턴 값이 있는 함수
재귀 함수
콜백 함수
내부 함수(스코프)
객체 생성자 함수
프로토타입 함수
템플릿 리터럴
화살표 함수
내장 함수
객체
내장 객체
Object 객체
String 객체
Number 객체
Date 객체
Array 객체
Math 객체
정규표현 객체
브라우저 객체
window 객체
navigator 객체
screen 객체
history 객체
location 객체
문서 객체
선택자
이벤트
이벤트
애니메이션 이벤트
마우스 이벤트
+ clientX
+ clientY
+ offsetX
+ offsetY
+ pageX
+ pageY
+ screenX
+ screenY
클립보드 이벤트
드래그 이벤트
포커스 이벤트
URL 이벤트
인풋 이벤트
키보드 이벤트
페이지 전환 이벤트
터치 이벤트
트랜지션 이벤트
UI 이벤트
휠 이벤트
튜토리얼
인덱스
샘플
Topics
클래스
css()
addClass()
hasClass()
removeClass()
toggleClass()
속성
attr()
removeAttr()
prop()
removeProp()
val()
크기
width()
innerWidth()
outerWidth()
height()
innerHeight()
outerHeight()
위치
offset()
offsetParent()
position()
scrollLeft()
scrollTop()
Topics
제이쿼리
기본
선택자
기본 선택자
계층 선택자
속성 선택자
기본 필터 선택자
내용 필터 선택자
보임 필터 선택자
자식요소 필터 선택자
폼 요소 필터 선택자
탐색
트리구조
.children()
.closest()
.find()
.next()
.nextAll()
.nextUntil()
.parent()
.parents()
.parentUntil()
.prev()
.prevAll()
.prevUntil()
.siblings()
필터링
.eq()
.filter()
.first()
.has()
.is()
.last()
.map()
.not()
.slice()
기타
.add()
.addBack()
.contents()
.each()
.end()
속성
Attributes
.attr()
.prop()
.removeAttr()
.removeProp()
.val()
CSS
.addClass()
.css()
.hasClass()
.removeClass()
.toggleClass()
Dimensions
.height()
.innerHeight()
.innerWidth()
.outerHeight()
.outerWidth()
.width()
Offset
.offset()
.offsetParent()
.position()
.scrollLeft()
.scrollTop()
Data
.data()
.removeData()
변경
DOM Insertion
.wrap()
.wrapAll()
.wrapInner()
.append()
.appendTo()
.html()
.prepend()
.prependTo()
.text()
.after()
.brfore()
.insertAfter()
.insertbrfore()
DOM Removal
.detach()
.empty()
.remove()
.unwrap()
DOM Replacement
.clone()
.replaceAll()
.replaceWith()
애니메이션
Basic
.hide()
.show()
.toggle()
Fading
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
Sliding
.slideDown()
.slideToggle()
.slideUp()
Animtion
.animate()
.clearQueue()
.delay()
.dequeue()
.finish()
.queue()
.stop()
이벤트
Browser Events
.resize()
.scroll()
.ready()
Event handler
.bind()
.delegate()
.off()
.on()
.one()
.trigger()
.triggerHandler()
.unbind()
.undelegate()
Form Events
.blur()
.change()
.focus()
.focusin()
.focusout()
.select()
.submit()
Keyboard Events
.keydown()
.keypress()
.keyup()
Mouse Events
.click()
.contextMenu()
.dblclick()
.hover()
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
Topics
gsap
gsap.to()
gsap.from()
gsap.fromTo()
gsap.getById()
gsap.set()
gsap.timeline()
gsap.getProperty()
Topics
mGsapTopic
Topics
mSvg
Topics
mSvgTopic
Topics
mCanvas
Topics
mCanvasTopic
티스토리툴바
@web's Reference
구독하기