본문 바로가기

Webstoryboy

Category

Explanation

HTML/Alphabet

(25)
<code> 태그는 컴퓨터 소스 코드를 표현할 때 설정합니다. 태그는 컴퓨터 소스 코드를 표현할 때 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML4 시각적 표현 monospace 글꼴 사용성 ★★☆☆☆ 정의(Definition) 태그는 컴퓨터 소스 코드를 표현할 때 설정합니다. 태그는 브라우저의 기본 글꼴 및 고정 폭으로 표현됩니다. CSS를 설정하면 기본 글꼴은 무시됩니다. 태그는 사용시 화면 여백을 그대로 표현하기 위해서 태그와 같이 사용합니다. 비교(Compare) 컴퓨터 소스 코드를 나타내는 텍스트는 태그를 사용합니다. 수학적인 변수나 프로그램의 변수를 나타내는 텍스트는 태그를 사용합니다. 컴퓨터 프로그램으로 출력된 결과물을 나타내는 텍스트는 태그..
<cite> 태그는 저작물의 출처 표기를 설정합니다. 태그는 저작물의 출처 표기를 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML4 시각적 표현 이탤릭체 사용성 ★★★☆☆ 정의(Definition) 태그는 저작물의 출처 표기를 설정하며, 제목을 포함합니다. 태그는 책, 시, 악보, 대본, 노래, 영화, TV 프로그램, 게임, 회화, 연극, 오페라, 전시회, 뮤지컬, 컴퓨터 프로그램 사이트, 웹 페이지, 블로그, 포럼게시물, 트윗등 작품의 제목 인용에 사용합니다. 태그는 이탤릭체로 표현이 되며, 원하지 않으면 font-style: normal;로 설정 가능합니다. 비교(Compare) 짧은 인용문을 설정 한다면 태그를 사용합니다. 긴 인용문을 설정 한다면 태..
<center> 태그는 텍스트를 가운데 정렬합니다. CSS 속성이 기능을 대신하고 있기 때문에 현재는 사용하지 않습니다. 태그는 텍스트를 가운데 정렬합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용( ~ ) 버전 HTML4(HTML5에서 지원하지 않습니다.) 시각적 표현 가운데 정렬 사용성 ☆☆☆☆☆ 정의(Definition) 태그는 가운데 정렬을 할 때 사용합니다. 태그는 HTML5에서 지원하지 않습니다. 대신 CSS를 사용합니다. 인라인 구조에서 가운데 정렬은 CSS의 text-align : center를 사용합니다. 블록 구조에서 가운데 정렬은 CSS의 margin: 0 auto를 사용합니다. display: flex와 dispaly: grid를 통해서도 가운데 정렬이 가능합니다. 예제..
<caption> 태그는 표의 제목을 설정합니다. 테이블 제작시 접근성 향상을 위한 제목을 적어주어야 합니다. 태그는 표의 제목을 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML4 시각적 표현 가운데 정렬 사용성 ★★★☆☆ 정의(Definition) 태그는 표의 제목을 설정합니다. 태그는 기본적으로 가운데 정렬로 표시됩니다. align 속성은 HTML5에서 지원되지 않습니다. table과 관련된 태그(table Related Tags) 태그는 표를 설정합니다. 태그는 표의 제목을 설정합니다. 태그는 표의 헤더 영역을 그룹화합니다. 태그는 표의 본문 영역을 그룹화합니다. 태그는 표의 푸터 영역을 그룹화합니다. 태그는 표의 행을 설정합니다. 태그는 표의 열(셀)을 ..
<canvas> 태그는 비트맵 방식의 그림을 설정합니다. canvas API와 WebGL API를 통해 그래픽과 애니메이션을 만듭니다. 태그는 비트맵 방식의 그림을 설정합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용( ~ ) 버전 HTML4 시각적 표현 기본적 버튼 디자인(브라우저마다 다름) 사용성 ★★★★☆ 정의(Definition) 태그는 비트맵 방식의 그림을 설정합니다. 태그는 canvas API와 WebGL API를 통해 그래픽과 애니메이션을 만듭니다. 태그는 태그와 달리 닫는 태그를 사용해야 합니다. 태그는 자바스크립트를 사용하여 설정합니다. 태그의 크기는 CSS를 통해 설정할 수 있지만, 렌더링을 통해 이미지 크기가 변경되어 왜곡 될 수 있습니다. 비교(Compare) 태그는 비..
<button> 태그는 클릭 할 수 있는 버튼을 정의할 때 사용합니다. 태그는 클릭 할 수 있는 버튼을 정의할 때 사용합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML4 시각적 표현 기본적 버튼 디자인(브라우저마다 다름) 사용성 ★★★★☆ 정의(Definition) 태그는 클릭 할 수 있는 버튼을 정의할 때 사용합니다. 태그는 데이터를 전송하기 위한 버튼이라면 type 속성을 설정해야합니다. 태그는 CSS를 통해 버튼 디자인 작업을 할 수 있습니다. 속성(Property) 속성 값(예) 설명 버전 autofocus autofocus 페이지가 로드한 후 자동으로 포커스를 설정합니다. disabled disabled 버튼을 비활성화 합니다. - form form="fo..
<br> 태그는 텍스트 줄바꿈이 필요할 때 설정합니다. 태그는 텍스트 줄바꿈이 필요할 때 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 미적용( ) 버전 HTML4 시각적 표현 - 사용성 ★★★★☆ 정의(Definition) 태그는 텍스트 줄바꿈이 필요할 때 사용합니다. 여백이 필요할 때 태그의 사용은 적절치 않으며, CSS 속성 중에 margin, padding 또는 line-height를 사용합니다. HTML4에서는 태그 작성시 슬러시('/')가 필요하지만, HTML5에서는 의무적인 사항은 아니기 때문에 생략도 가능합니다. 비교(Compare) 텍스트 줄바꿈을 원하다면, 태그를 사용합니다 텍스트 줄바꿈 할 지점을 원하다면 태그를 사용합니다. 예제1(Sample) 줄바꿈을 설정..
[HTML] <body> 태그는 사이트 본문에 해당하는 모든 콘텐츠를 포함하는 섹션을 설정합니다. 문서에서 한 번만 사용됩니다. 태그는 사이트 본문에 해당하는 모든 콘텐츠를 포함하는 섹션을 설정합니다. 특징 설명 요소 블록 요소(block Element) 닫는 태그 적용( ~ ) 버전 HTML4 시각적 표현 - 사용성 ★★★★★ 정의(Definition) 태그는 사이트 본문에 해당하는 모든 콘텐츠를 포함하는 섹션을 설정합니다. 태그는 문서에서 한 번만 사용됩니다. 비교(Compare) 태그는 사이트 본문에 해당하는 모든 콘텐츠를 포함하는 섹션을 설정합니다. 태그는 사이트의 독립적인 컨텐츠 섹션을 설정합니다. 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. 태그는 내부 페이지 및 외부 페이지에 대한 탐색 링크를 제공하는 페이지 섹..
[HTML] <blink> 태그는 텍스트를 깜박이게 설정합니다. 현재는 사용하지 않으며 오래된 태그입니다. 이 기능은 CSS Animation이 대신 할 수 있습니다. 태그는 텍스트를 깜박이게 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML4(HTML5에서 지원하지 않습니다.) 시각적 표현 글씨가 깜박임 사용성 ☆☆☆☆☆ 정의(Definition) 태그는 텍스트를 깜박이게 합니다. 태그는 현재 사용하지 않으며, 오래된 태그입니다. CSS Animation을 통해 깜박임 효과를 구현 할 수 있습니다. 예제1(Sample) 깜박이게 설정하는 예제입니다. 현재는 작동하지 않습니다. blink 태그는 깜박이게 설정합니다. 현재는 사용하지 않으며 오래된 태그입니다. HTML CS..
[HTML] <blockquote> 태그는 긴 문장의 인용문을 설정합니다. 인용된 정보 출처는 cite 속성을 통해 설정합니다. 태그는 긴 문장의 인용문을 설정합니다. 특징 설명 요소 블록 요소(block Element) 닫는 태그 적용( ~ ) 버전 HTML4 시각적 표현 여백이 생김 사용성 ★★★☆☆ 정의(Definition) 인용(quotation)을 표현하는 태그는 태그와 태그가 있습니다. 태그는 전체 문장에 해당하는 긴 인용문에 사용합니다. 태그는 인용된 정보 출처는 cite 속성을 통해 설정합니다. 태그를 사용하면 자동으로 여백이 생깁니다. 여백이 목적이라면 CSS를 사용합니다. 태그는 블록 요소이며, 태그는 인라인 요소입니다. , 태그를 같이 사용하여, 인용문을 더 정확하게 사용할 수 있습니다. 비교(Compare) 짧은 인용..
[HTML] <big> 태그는 텍스트의 크기를 크게 설정합니다. CSS가 그 기능을 대신하기 때문에 현재는 사용하지 않는 태그입니다. 태그는 텍스트의 크기를 크게 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML4(HTML5에서 지원하지 않습니다.) 시각적 표현 - 사용성 ☆☆☆☆☆ 정의(Definition) 태그는 글씨 크기를 크게 해주지만 CSS가 그 기능을 대신하기 때문에 HTML5에서는 지원하지 않습니다. 비교(Compare) 글씨를 특별한 이유로 평범한 글자와 구분하기 위해서는 태그를 사용합니다. 글씨를 중요성과 관련성을 전달하지 않고, 다른 텍스트와 구별 할 때 태그를 사용합니다. 글씨를 강조하고 싶다면 태그를 사용합니다. 글씨의 중요성을 강조하고 싶다면 태..
[HTML] <bdo> 태그는 텍스트의 방향을 설정합니다. 텍스트의 읽는 방향이 다른 나른 언어를 위해 사용합니다. 태그는 텍스트의 방향을 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML5 시각적 표현 - 사용성 ★☆☆☆☆ 정의(Definition) 태그는 텍스트의 방향을 설정합니다. 태그는 텍스트의 읽는 방향이 다른 나른 언어를 위해 HTML5에서 새로 생긴 태그입니다. 태그는 CSS를 통해 텍스트의 방향(unicode-bidi)을 설정할 수 있습니다. 태그는 dir 속성을 같이 사용하여 방향을 설정합니다. 비교(Compare) 태그는 텍스트의 방향을 자동으로 설정합니다. 태그는 텍스트의 방향을 설정합니다. direction 속성은 콘텐츠 요소의 방향을 설정합니다...
[HTML] <bdi> 태그는 텍스트의 출력 방향 영역을 설정합니다. 일반적인 글은 왼쪽에서 오른쪽으로 읽지만, 아랍어나 히브리어는 오른쪽에서 왼쪽으로 읽을 때 사용합니다. 태그는 텍스트의 출력 방향 영역을 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML5 시각적 표현 - 사용성 ★☆☆☆☆ 정의(Definition) 태그는 텍스트의 출력 방향 영역을 설정합니다. 일반적인 글은 왼쪽에서 오른쪽으로 읽지만, 아랍어나 히브리어는 오른쪽에서 왼쪽으로 읽을 때 태그를 사용합니다. 태그는 텍스트의 읽는 방향이 다른 언어를 위해 HTML5에서 새로 생긴 태그입니다. 태그는 텍스트 표기 방향을 자동으로 인식하고 제어를 합니다. 태그는 CSS를 통해 텍스트의 방향(unicode-bi..
[HTML] <basefont> 태그는 문서의 기본 폰트, 사이즈, 종류를 설정합니다. 지금은 CSS에서 이 기능을 구현하기 때문에 현재는 사용하지 않습니다. 태그는 문서의 기본 폰트, 사이즈, 종류를 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 Self-closing() 버전 HTML4(HTML5에서 지원하지 않습니다.) 시각적 표현 - 사용성 - 정의(Definition) 태그는 문서의 기본 폰트, 사이즈, 종류를 설정합니다. 태그는 섹션 안에 설정합니다. 는 HTML5에서 지원되지 않으며, 그 기능은 CSS가 대신 합니다.(font, font-family, font-size, font-size-adjust, font-style, font-variant, font-weight, @font-face..
[HTML] <base> 태그는 모든 문서의 기본이 되는 URL을 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 참고 사이트(Reference) MDN W3
[HTML] <b> 태그는 다른 텍스트와 구별 할 때 설정합니다. 텍스트는 굵게 표시되지만, 중요성을 강조하지 않으며, 텍스트를 굵게 설정하기 위해서 사용하지 않습니다. 태그는 다른 텍스트와 구별 할 때 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML4 시각적 표현 볼드체 사용성 ★★☆☆☆ 정의(Definition) 태그는 텍스트의 중요성과 관련성을 전달하지 않고, 다른 텍스트와 구별 할 때 설정합니다. 태그는 일반적으로 키워드, 제품의 리뷰, 기사 리드문 등에 사용합니다. 태그는 태그는 제목 요소로 사용하지 않습니다. 제목 요소는 ~ 태그를 사용합니다. 태그는 , , 에 해당 되지 않고, 특별한 정보 전달의 의미가 없을 때 고려해서 사용합니다. 태그는 단순하게 ..
[HTML] <audio> 태그는 오디오 파일을 설정합니다. 태그는 오디오 파일을 설정합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML5 시각적 표현 - 사용성 ★★☆☆☆ 정의(Definition) 태그는 오디오 파일을 설정합니다. 태그는 오디오 파일을 재생할 때 src 속성 또는 태그를 사용합니다. 태그는 controls 속성이 지정되지 않으면, 시각적인 표시가 없으며, 이 경우 브라우저의 기본 컨트롤이 표시됩니다. 기본 컨트롤러에는 테두리(border), 굴곡(border-radius), 간격(padding, margin) 등을 설정할 수 있습니다. 오디오 플레이어 개별 구성 요소(버튼, 아이콘, 글꼴 등)는 스타일을 지정할 수 없으며, 컨트롤 디자인은 브라우저마다 다릅니..
[HTML] <aside> 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. 웹 페이지의 메인 콘텐츠와 관련된 사이드의 정보, 광고 등 부분적인 정보를 나타낼 때 사용합니다. 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용( ~ ) 버전 HTML5 시각적 표현 - 사용성 ★★★★★ 정의(Definition) 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. 태그는 웹 페이지의 메인 콘텐츠와 관련된 사이드의 정보, 광고 등 부분적인 정보를 나타낼 때 사용합니다. 섹션 관련 요소(Section Related Elements) 태그는 사이트 본문에 해당하는 모든 콘텐츠를 포함하는 섹션을 설정합니다. 태그는 사이트의 독립적인 컨텐츠 섹션을 설정합니다...
<article> 태그는 사이트의 독립적인 컨텐츠 섹션을 설정합니다. 독립적인 컨텐츠에는 포럼, 신문기사, 잡지, 블러그 항목, 게시판 글 등이 있으며, 각각의 컨테츠에는 제목(~)이 표시되어야 합니다. 태그는 사이트의 독립적인 컨텐츠 섹션을 설정합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용( ~ ) 버전 HTML5 시각적 표현 - 사용성 ★★★★★ 정의(Definition) 태그는 사이트의 독립적인 컨텐츠 섹션을 설정합니다. 태그는 포럼, 신문기사, 잡지, 블러그 항목, 게시판 글 등 콘텐츠의 독립적인 항목을 나타냅니다. 태그는 독립적인 컨텐츠의 내용이 명시적으로 나열되고, 각각의 컨테츠에는 제목(~)이 표시되어야 합니다. 은 하나의 주제를 나타낸다면, 은 주제를 묶는 독립적인 콘텐츠를 ..
[HTML] <area> 태그는 이미지 맵의 영역을 정의합니다. 이미지 위에 가상의 영역을 만들어서 클릭을 유도할 수 있습니다. 하지만 접근성에 있어 좋지 않기 때문에 현재는 많이 사용하지 않습니다. 태그는 이미지 맵의 영역을 정의합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML4 시각적 표현 - 사용성 ★☆☆☆☆ 정의(Definition) 태그는 이미지 위에 영역 링크를 정의 할 때 간편하게 사용할 수 있습니다. 태그는 , 태그와 같이 사용합니다. 태그 shape 속성을 통해 영역을 모양(rect, circle, poly)을 설정합니다. 태그 cords 속성을 통해 영역을 위치를 설정합니다. cords의 위치 값은 프로그램을 통해 좌표 값을 얻는 방법이 쉽습니다. 태그의 ..
[HTML] <applet> ) 버전 HTML4(HTML5에서 지원하지 않습니다.) 시각적 표현 - 사용성 - 정의(Definition) 태그는 자바 애플랫 요소를 설정합니다. 태그는 자바 애플랫 요소를 사용하기 위한 개발자 소스였으나, 현재는 사용하지 않으며, 태그를 사용합니다. 크로스브라우징(CrossBroswing) HTML5에서 지원하지 않습니다. 대신 태그와 태그를 이용합니다. 호환성(Compatibility) 6 7 8 9 10 11 ❌ ❌ ○ ❌ ❌ ○ ○ ○ ○ ○ ○ ○ ❌ ❌ 참고 사이트(Reference) MDN
[HTML] <address> 태그는 웹 페이지의 연락처 정보를 설정합니다. 사이트 주소, 전화번호, 이메일, 소설미디어, 위치 등의 정보와, 회사 정보, 회사 이름, 회사 주소 등과 관련된 정보를 표시합니다. 태그는 웹 페이지의 연락처 정보를 설정합니다. 특징 설명 요소 블록 요소(Block Element) 닫는 태그 적용( ~ ) 버전 HTML4 시각적 표현 기울임꼴 사용성 ★★★★☆ 정의(Definition) 태그는 사이트 주소, 전화번호, 이메일, 소설미디어, 위치 등을 표시합니다. 태그는 회사 정보, 회사 이름, 회사 주소 등과 관련된 정보를 표시합니다. 태그는 , , , 등 연락처 정보가 필요한 곳에 사용할 수 있습니다. 태그는 연락처와 관련 없는 내용이라면 태그를 사용합니다. 태그는 연락처 정보 보다 더 광범위한 정보를 ..
[HTML] <acronym> 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. 현재는 사용하지 않고 태그를 사용합니다. 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. 특징 설명 요소 인라인 구조(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML4(HTML5에서 지원되지 않습니다.) 시각적 표현 점선(브라우저마다 틀림) 및 툴팁 사용성 ☆☆☆☆☆ 정의(Definition) 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. 는 HTML4 태그이고, HTML5에서 지원되지 않는 오래된 태그입니다. 일부 브라우저에서 작동 될 수 있지만 사용을 권장하지 않습니다 크로스브라우징(CrossBroswing) HTML4에서는 약어에 대해서는 를 사용하고, HTML5에서는 약어를 로 사용합니다. 예제1(Sample) 줄임말..
[HTML] <abbr> 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. abbr은 abbreviation의 약자로, "약자 또는 생략어"라는 의미를 가집니다. title 속성을 사용하여 전체 단어를 지정 할 수 있으며, 태그와 같이 사용하여 정의할 수 있습니다. 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. 특징 설명 요소 인라인 구조(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML4 시각적 표현 점선(브라우저마다 틀림) 및 툴팁 사용성 ★★☆☆☆ 정의(Definition) 태그는 abbreviation의 약자로, "약자 또는 생략어"라는 의미를 가집니다. 태그를 사용할 경우 번역 시스템이나 검색 시스템에게 유용한 정보를 제공합니다. 태그는 title 속성을 사용하여 전체 단어를 지정 할 수 있습니..
[HTML] <a> 01. 참고 : 블록구조/인라인구조 난이도 쉬움 태그는 다른 페이지 이동을 설정합니다. 페이지 주소 뿐만 아니라, 메일 주소, 전화 번호 등도 연결할 수 있으며, 아이디(#) 값으로 페이지 내에서도 이동이 가능합니다. 태그는 다른 페이지 이동을 설정합니다. 특징 설명 요소 인라인 구조(Inline Element) 닫는 태그 적용( ~ ) 버전 HTML4 시각적 표현 밑줄과 파란색으로 표시 사용성 ★★★★★ 정의(Definition) 태그는 클릭하면 다른 페이지로 이동합니다. 현재 페이지에서 다른 페이지 URL로 연결하는 것을 하이퍼링크라고 합니다. 태그는 페이지 주소 뿐만 아니라, 메일 주소, 전화 번호 등도 연결할 수 있습니다. 태그는 아이디(#id)로 이동 할 수 있습니다. 태그는 target 속성을..
1