본문 바로가기

Webstoryboy

Category

Explanation

REFERENCE/HTML

(146)
[HTML] <wbr> 태그는 줄바꿈 할 위치를 정의할 때 사용합니다. 태그의 사용은 제한적입니다. 일반적인 한글이나 영어에서는 해당이 되지 않습니다. 의미가 없는 단어나 해석 할 수 없는 단어의 줄바꿈을 할 때 사용합니다. 예를 들면 의미적 전달이 안되는 브라우저의 주소가 가장 적절한 예가 될 것입니다. 단어의 줄바꿈이나 글자의 줄바꿈을 컨트롤 하고 싶다면 word-break 속성을 사용합니다. 태그는 줄바꿈 할 위치를 정의할 때 사용합니다. 특징 설명 카테고리 플로우 콘텐츠(Flow Content), 프레이징 콘텐츠 (Phrasing content) 속성 글로벌 속성 적용(Global Attributes), 이벤트 속성 적용(Event Attributes) 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그..
[HTML] <video> 웹 문서에 동영상을 재생하는 미디어 플레이어입니다. 비디오의 너비와 정보를 지정하고 여러가지 속성을 지정할 수 있습니다. 비디오를 지원하는 파일은 mp4, webM, avi, ogg가 있으며, 브라우저마다 지원하는 파일이 다릅니다. 모든 브라우저의 호환성을 맞추기 위해서는 여러가지 파일을 동시에 사용하여야 합니다. 태그를 사용하여 비디오 파일을 불러올 수 있습니다. 태그는 미디어 영상을 정의합니다. 특징 설명 카테고리 플로우 콘텐츠(Flow Content), 프레이징 콘텐츠(Phrasing Content), 임베디드 콘텐츠(Embedded Content), 펠퍼블 콘텐츠(Palpable Content) 속성 글로벌 속성 적용(Global Attributes), 이벤트 속성 적용(Event Attribut..
[HTML] <var> 태그는 수학적인 변수나 프로그램의 변수를 쓸 때 사용합니다. 일반적으로 기울기체로 표시되지만 브라우저마다 다릅니다. 태그는 수학적인 변수나 프로그램의 변수를 정의합니다. 특징 설명 카테고리 플로우 콘텐츠(Flow Content), 프레이징 콘텐츠(Phrasing content), 팰퍼블 콘텐츠(palpable Content) 속성 글로벌 속성 적용(Global Attributes) 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML5 시각적 표현 이탤릭체 정의(Definition) 태그는 수학적인 변수나 프로그램의 변수를 정의합니다. 비교(Compare) 컴퓨터 소스 코드를 나타내는 텍스트는 태그를 사용합니다. 수학적인 변수나 프로그램의 변수를 나타내는 텍스트..
[HTML] <ul> 일반적인 글이나 문장을 쓴다면 태그를 사용합니다. 태그는 일반적인 글 보다는 목록 형식의 글을 사용할 때 씁니다. 목록을 쓸 때 순서가 상관이 없다면 태그를 사용하며, 순서가 상관이 있다면 태그를 사용합니다. 무엇인가를 설명하고 정의할 때는 태그를 사용합니다. 목록형 태그에는 각각의 항목이 있기 때문에 이 때에는 태그를 같이 사용해야 합니다. 태그의 경우에는 또는 를 같이 사용합니다. 태그 안에는 또 다른 태그 또는 태그가 올 수 있으며, 2단 3단 목록형 태그로도 사용가능합니다. 목록형 태그를 사용하면 블릿기호가 생깁니다. ul 태그는 점과, 사각형 점이 생기고, ol 태그는 번호가 생기며, dl은 아무것도 생기지 않습니다. 이런 블릿기호는 CSS list-style-type에서 설정이 가능합니다. 태..
[HTML] <u> 태그는 HTML4에서는 밑줄을 표시하기 위해서 사용하였습니다. 하지만 밑줄 기능은 CSS로 충분히 표현 가능하기 때문에 더 이상 사용하지 않게 되었습니다. HTML5에서는 철자 오류 및 주석 표시를 위한 태그로 의미가 변경되었습니다. 이 태그는 밑줄을 표시하기 위한 디자인적인 요소로 사용하면 안됩니다. 철자 오류 및 주석 표시를 위한 태그입니다. 밑줄을 표시하기 위함이라면 text-decoration 속성을 이용하면 됩니다 태그는 철자 오류가 포함된 단락을 표시하며, 빨간색 물결 밑줄 스타일로 오류를 표시합니다. 태그는 맞춤법이 틀린 단어를 표시할 때 정의합니다. 특징 설명 카테고리 플로우 콘텐츠(Flow Content), 프레이징 콘텐츠(Phrasing content), 팰퍼블 콘텐츠(palpable ..
[HTML] <tt> 태그는 타자모양의 텍스트를 보여주기 위한 태그입니다. HTML5에서 지원하지 않으며, 지금은 사용하지 않는 태그입니다. 구버전의 브라우저에서는 작동 될 수 있지만 최신 브라우저에서는 지원되지 않을 수 있습니다. 사용을 권하지 않습니다. 소스코드를 텍스트를 표현하고 싶다면 , 프로그램 변수 텍스트를 표현하고 싶다면 , 프로그램 출력결과 텍스트를 표현하고 싶다면 , 키보드 텍스트를 표현하고 싶다면 태그를 사용합니다. 디자인적인 요소를 위함이라면 CSS를 사용합니다. 태그는 타자모양의 텍스트를 정의합니다. 특징 설명 카테고리 플로우 콘텐츠(Flow Content), 프레이징 콘텐츠(Phrasing content), 팰퍼블 콘텐츠(palpable Content) 속성 글로벌 속성 적용(Global Attribu..
[HTML] <track> 태그는 태그와 태그의 자막을 설정합니다. 자막은 vvt 파일을 이용하여 사용합니다. 태그는 미디어 요소의 자막을 정의합니다. 특징 설명 카테고리 해당 없음 속성 글로벌 속성 적용(Global Attributes), 이벤트 속성 적용(Event Attributes) 요소 해당 없음 닫는 태그 닫는 태그 사용 안함() 버전 HTML5 시각적 표현 자막 표시 정의(Definition) 태그는 미디어 요소의 자막을 설정합니다. 태그는 태그 또는 태그와 같이 사용합니다. 속성(Property) 속성 값(예) 설명 버전 default default 트랙 중에 가장 기본이 되는 트랙에 설정합니다. - kind captions chapters descriptions metadata subtitles 트랙의 제목을 설정..
[HTML] <tr> 태그는 표의 행을 만들때 사용합니다. 는 (데이터 셀)와 (헤더 셀) 요소를 같이 사용합니다. 태그는 표의 행을 정의합니다. 특징 설명 카테고리 해당없음(None) 속성 글로벌 속성 적용(Global Attributes), 이벤트 속성 적용(Event Attributes) 요소 해당없음(None) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML4 시각적 표현 행을 만듦 정의(Definition) 표의 행을 정의합니다. 비교(Compare) 태그는 표를 정의합니다. 태그는 표의 행을 정의합니다. 태그는 표의 셀을 정의합니다. 태그는 표의 행이나 열에 머리말을 정의합니다. 태그는 요소의 제목을 설정합니다. 태그는 내의 열의 공통 속성을 정의합니다. 태그는 요소의 그룹화를 정의합니다. 태그는 표의 헤더를 그..
[HTML] <title> 태그는 브라우저의 제목 또는 탭에 표시되는 문서의 제목을 표시합니다. 타이틀에는 텍스트만 설정할 수 있으며, 태그들은 무시됩니다. 웹 사이트의 가장 중요한 제목을 표시하며, 검색에 있어서도 가장 중요한 부분입니다. 제목은 검색 결과 페이지를 나열하는 순서를 결정하는데 가장 중요한 구성요소이며, 독자의 주의를 끌 수 있는 가장 중요한 부분입니다. 그래서 독자의 주의를 표시하기 위하며 의미 없는 단어의 작업은 검색에 있어 효율적이지 못하며, 한 단어 또는 두 단어의 제목도 피하는게 좋습니다. 검색 엔진은 일반적으로 페이지에 제목 중 50~60자 정도만 표시해 줍니다. 그래서 그 이상 쓰는 것도 좋지 않습니다. 그 이후의 글자는 생략 될 수 도 있습니다. 자신의 사이트 내에서 가장 핵심적인 부분만 제목으로 설..
[HTML] <time> 태그는 시간의 특정 기간을 나타낼 때 사용합니다. 날짜를 인식하기 위해서는 datetime 속성을 같이 사용하며 엔진 결과나 알림 같은 기능을 개선 할 수 있습니다. 시간은 24시간을 기준으로 설정하며 날짜는 그레고리력(Gregorian calendar)을 기준으로 표현합니다. 태그는 날짜와 시간을 정의합니다. 특징 설명 카테고리 플로우 콘텐츠(Flow Content), 프레이징 콘텐츠(Phrasing Content), 팰퍼블 콘텐츠(palpable Content) 속성 글로벌 속성 적용(Global Attributes), 이벤트 속성 적용(Event Attributes) 요소 블록 요소(Block Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML5 시각적 표현 시각적인 표현은 없음, 브..
[HTML] <thead> 태그는 표를 만들 때 사용합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 , , 를 사용하며, 행과 열을 나타내는 , 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 됩니다. 태그는 표의 헤더를 그룹화합니다...
[HTML] <th> 태그는 표를 만들 때 사용합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 , , 를 사용하며, 행과 열을 나타내는 , 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 됩니다. 태그는 표의 행이나 열에 머리말을..