본문 바로가기

Reference/HTML25

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.
h1 ~ h6 태그는 각 섹션의 제목을 설정합니다. Reference/HTML ~ 태그는 각 섹션의 제목을 설정합니다. by @webs 2022. 11. 17. ~ ~ 태그는 각 섹션의 제목을 설정합니다. 6단계로 구분하여, 작성하며 순차적으로 작성합니다. 제목 요소는 문서에서 가장 중요한 제목을 설정하며, 보통 한번만 작성합니다. ~ 요소는 단계별로 폰트 사이트와 굵기가 설정되어 있습니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML4 시각적 표현 볼드체 및 글씨 크기 사이즈 사용성 ★★★★★ 정의(Definition) ~ 태그는 각 섹션의 제목을 6단계로 설정합니다. 태그는 가장 높은 단계의 제목이며, 태그는 가장 낮은 단계의 제목입니다. ~ 태그는 글씨 크기를 위해 사용하지 않습니다. 글씨 크기는 CSS의 fo.. 2022. 11. 17.
address 태그는 문서 관련 연락처 콘텐츠 영역을 설정합니다. Reference/HTML 태그는 문서 관련 연락처 콘텐츠 영역을 설정합니다. by @webs 2022. 11. 15. 태그는 문서 관련 연락처 콘텐츠 영역을 설정합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용 버전 HTML4 시각적 표현 기울임꼴 사용성 ★★★☆☆ 정의(Definition) 태그는 사이트 주소, 전화번호, 이메일, 소설미디어, 위치 등을 표시합니다. 태그는 회사 정보, 회사 이름, 회사 주소 등과 관련된 정보를 표시합니다. 태그는 , , , 등 연락처 정보가 필요한 곳에 사용할 수 있습니다. 태그는 연락처와 관련 없는 내용이라면 태그를 사용합니다. 태그는 연락처 정보 보다 더 광범위한 정보를 포함 할 수 없습니다.(시간을 나타내는 time 태그등) 태그는 .. 2022. 11. 17.
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.
meta 태그는 문서의 메타 정보를 설정합니다. Reference/HTML 태그는 문서의 메타 정보를 설정합니다. by @webs 2022. 11. 11. 태그는 문서의 메타 정보를 설정합니다. 메타 정보는 웹 페이지 컨텐츠가 아닌 웹 문서 자체의 정보를 표현하는 방법입니다. 메타 정보에는 사이트 키워드, 설명, 저자, 검색엔진노출, 제작날짜, 모바일 화면, 리로딩, 공유 정보 등 다양한 정보를 선택하여 설정할 수 있습니다. 특징 설명 요소 - 닫는 태그 적용 버전 HTML4 시각적 표현 없음 사용성 ★★★★★ 정의(Definition) 태그는 문서의 메타 정보를 설정합니다. 태그는 표면적으로 표시되지 않지만, 문서에 대한 정보를 제공합니다. 태그는 사이트에 대한 설명, 키워드, 저자 등 여러가지 정보를 제공합니다. 태그는 검색엔진 및 키워드 노출에 .. 2022. 11. 11.
title 태그는 문서의 제목을 설정합니다. Reference/HTML 태그는 문서의 제목을 설정합니다. by @webs 2022. 7. 4. 브라우저 상단의 제목 탭에 표시가 됩니다. 타이틀에는 텍스트만 설정 할 수 있으며, 웹 문서에서 가장 중요한 제목을 표시합니다. 검색 노출에 영향을 미치므로, 핵심적인 제목을 표시해주는게 좋습니다. 제목은 검색 결과 페이제에 순서를 결정하는 중요한 부분이므로, 독자의 주의를 표시하기 의미 없는 단어 선택은 좋지 않습니다. 자신의 사이트 내에서 가장 핵심적인 부분만 제목으로 설정하는게 좋으며, 중복적으로 사용하는 것도 검색 결과를 부정확하게 만들 수 있으므로 가장 중요한 제목은 한 번 정도 핵심적으로 사용하는 것이 좋습니다. 특징 설명 요소 - 닫는 태그 적용 버전 HTML4 시각적 표현 없음 사용성 ★★★★.. 2022. 11. 10.
style 태그는 문서의 스타일 정보를 설정합니다. Reference/HTML 태그는 문서의 스타일 정보를 설정합니다. by @webs 2022. 7. 4. 태그는 문서의 스타일 정보를 설정합니다. 스타일을 설정하는 방법은 여러가지가 있습니다. 그 중 태그를 통해서 스타일을 설정하는 방법입니다. 특징 설명 요소 - 닫는 태그 적용 버전 HTML4 시각적 표현 없음 사용성 ★★★★★ 정의(Definition) 태그는 문서의 스타일 정보를 설정합니다. 태그는 3. 외부 링크로 설정하는 방법 : 이 방법을 가장 많이 사용함 문서와 관련된 태그(Document Related Tag) 태그는 문서의 최상단 요소를 나타냅니다. 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 참고(Reference) htt.. 2022. 11. 8.
link 태그는 문서의 외부 리소스를 설정합니다. Reference/HTML 태그는 문서의 외부 리소스를 설정합니다. by @webs 2022. 7. 4. 태그는 문서의 외부 리소스를 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 없음 버전 HTML4 시각적 표현 없음 사용성 ★★★★★ 정의(Definition) 태그는 문서의 외부 리소스를 설정합니다. 태그는 일반적을 스타일시트 파일을 주로 연결하지만 파비콘이나 웹폰트를 연결 할 때도 사용합니다. CSS 연동은 요소를 사용하고, SCRIPT 연동은 요소를 사용합니다. 문서와 관련된 태그(Document Related Tag) 태그는 문서의 최상단 요소를 나타냅니다. 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○.. 2022. 11. 6.
base 태그는 문서의 기본 URL을 설정합니다. Reference/HTML 태그는 문서의 기본 URL을 설정합니다. by @webs 2022. 7. 4. 태그는 문서의 기본 URL을 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 참고(Reference) https://html.spec.whatwg.org/multipage/semantics.html#the-base-element 2022. 11. 4.
head 태그는 문서 정보에 해당하는 내용을 설정합니다. Reference/HTML head 태그는 문서 정보에 해당하는 내용을 설정합니다. by @webs 2022. 7. 4. 예제2(Sample) head 요소 안에 올 수 있는 요소 예제입니다. 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 참고(Reference) https://html.spec.whatwg.org/multipage/semantics.html#the-head-element 2022. 11. 3.
html 태그는 문서의 최상단 요소를 나타냅니다. Reference/HTML 태그는 문서의 최상단 요소를 나타냅니다. by @webs 2022. 7. 4. 태그는 문서의 최상단 요소를 나타냅니다. 요소에는 언어를 설정하면 음성 도구 및 번역 도구에 도움을 줍니다. 웹 문서에 작성에 가장 기본이 되는 루트 요소이며, 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 참고(Reference) https://html.spec.whatwg.org/multipage/semantics.html#the-html-element 2022. 11. 2.
body 태그는 문서 본문에 해당하는 내용을 설정합니다. Reference/HTML 태그는 문서 본문에 해당하는 내용을 설정합니다. by @webs 2022. 7. 4. 태그는 문서 본문에 해당하는 내용을 설정합니다. 문서에서 한번만 사용 할 수 있으며, 문서 설정시 필수적으로 들어가는 요소입니다. 태그는 문서 본문에 해당하는 내용을 설정하지만, 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 참고(Reference) https://html.spec.whatwg.org/multipage/sections.html#the-body-element 2022. 11. 1.
hr 태그는 단란 요소간의 주제별 구분을 설정합니다. Reference/HTML 태그는 단란 요소간의 주제별 구분을 설정합니다. by @webs 2022. 7. 4. 태그는 단란 요소간의 주제별 구분을 설정합니다. 단순 줄바꿈을 위함이라면 태그를 사용합니다. 주제를 구분하기 위한 요소이며, 시각적인 표현은 CSS를 통해 설정합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 없음 버전 HTML4 시각적 표현 수평선 사용성 ★★☆☆☆ 정의(Definition) 태그는 horizontal rule의 약자이며, 단란 요소간의 주제별 구분을 위해 설정합니다. 태그는 연극에서 주제를 구분하거나, 책에서 화제 변경을 구분하기 위해 사용합니다. 태그는 시각적인 부분보다 의미론적으로 사용하므로, 시간적인 표현은 CSS를 통해 표현합니다. 크로스브라우.. 2022. 11. 1.
br 태그는 텍스트 줄바꿈이 필요할 때 설정합니다. Reference/HTML 태그는 텍스트 줄바꿈이 필요할 때 설정합니다. by @webs 2022. 7. 4. 태그는 텍스트 줄바꿈이 필요할 때 설정합니다. 단순 줄바꿈을 위한 용도이기 때문에 스타일적인 요소가 필요하다면 CSS 속성을 사용합니다. 여백을 주기 위함이라면 CSS 속성 margin, padding 또는 line-height 사용을 권장합니다. 의미없는 글자에 줄바꿈을 원하다면 태그를 사용합니다. 문단간에 주제 분리를 위한 줄바꿈이 필요하다면 태그를 사용합니다. 특징 설명 요소 인라인 구조(Inline Element) 닫는 태그 없음 버전 HTML4 시각적 표현 줄바꿈 사용성 ★★★★☆ 정의(Definition) 태그는 텍스트 줄바꿈이 필요할 때 사용합니다. 태그는 줄을 바꾸는 의미 밖에 없.. 2022. 10. 31.
wbr 태그는 줄바꿈 할 위치를 설정할 때 사용합니다. Reference/HTML 태그는 줄바꿈 할 위치를 설정할 때 사용합니다. by @webs 2022. 7. 4. 태그는 줄바꿈 할 위치를 설정할 때 사용합니다. 태그의 사용은 제한적입니다. 일반적인 한글이나 영어에서는 해당이 되지 않습니다. 의미가 없는 단어나 해석 할 수 없는 단어의 줄바꿈을 할 때 사용합니다. 예를 들면 의미적 전달이 안되는 브라우저의 주소가 가장 적절한 예가 될 것입니다. 단어의 줄바꿈이나 글자의 줄바꿈을 컨트롤 하고 싶다면 word-break 속성을 사용합니다. 줄바꿈을 해주는 태그와 동일하지만, 태그는 줄바꿈을 해야 될 상황에 오면 줄바꿈을 해줍니다. 특징 설명 요소 인라인 구조(Inline Element) 닫는 태그 없음 버전 HTML5 시각적 표현 줄바꿈 사용성 ★★☆☆☆ 정.. 2022. 10. 30.
abbr 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. Reference/HTML 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. by @webs 2022. 7. 4. 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. abbr은 abbreviation의 약자로, "약자 또는 생략어"라는 의미를 가집니다. title 속성을 사용하여 전체 단어를 지정 할 수 있으며, 용어에 대한 정의를 나타내는 태그와 같이 사용하여 설정할 수 있습니다. 특징 설명 요소 인라인 구조(Inline Element) 닫는 태그 적용 버전 HTML4 시각적 표현 점선(브라우저마다 틀림) 및 툴팁 사용성 ★★☆☆☆ 정의(Definition) 태그는 abbreviation의 약자로, "약자 또는 생략어"라는 의미를 가집니다. 태그를 사용할 경우 번역 시스템이나 검색 시스템에게 유용한 .. 2022. 10. 28.
a 태그는 다른 페이지 이동을 설정합니다. Reference/HTML 태그는 다른 페이지 이동을 설정합니다. by @webs 2022. 7. 4. 태그는 다른 페이지 이동을 설정합니다. 페이지 주소 뿐만 아니라, 메일 주소, 전화 번호 등도 연결할 수 있으며, 아이디(#) 값으로 페이지 내에서도 이동이 가능합니다. 특징 설명 요소 인라인 구조(Inline Element) 닫는 태그 적용 버전 HTML4 시각적 표현 밑줄과 파란색으로 표시 사용성 ★★★★★ 정의(Definition) 태그는 클릭하면 다른 페이지로 이동합니다. 현재 페이지에서 다른 페이지 URL로 연결하는 것을 하이퍼링크라고 합니다. 태그는 페이지 주소 뿐만 아니라, 메일 주소, 전화 번호 등도 연결할 수 있습니다. 태그는 아이디(#id)로 이동 할 수 있습니다. 태그는 target.. 2022. 7. 4.