태그는 비디오 파일을 재생하기 위한 html5 규약의 태그입니다. 앞의 두 가지 미디어 태그인 이미지 태그 img, 사운드 태그인 audio에서도 그랬지만 항상 src가 미디어 속성 경로(비디오 파일의 위치)를 지정하기 전에 들어가는 데 src는 해당 미디어 속성의 경로를 정의(Sorce)하게 됩니다. 비디오 태그의 기본 형태는 아래와 같은 모습을 취하게 됩니다. 비디오 태그와 관련된 속성들의 의미는 아래와 같습니다. - controls : 재생, 일시정지, 볼륨, 재시작 등의 버튼이 있는 비디오 컨트롤러를 불러옵니다. - autoplay : 자동으로 비디오를 재생합니다. 비디오 데이터의 로딩이 완료되지 않았더라도 재생할 준비가 되면 재생을 시작합니다. - loop : 동영상의 재생이 모두 끝나면 동영상..
이전 포스팅에서 웹 페이지에 삽입되는 미디어 태그에는 이미지, 사운드(오디오), 비디오의 세 가지가 있다고 언급하였습니다. 이번 포스팅에서는 오디오 포맷 형식의 파일을 삽입하는 오디오 태그에 관하여 알아볼까 합니다. 이번 포스팅에서 살펴볼 태그는 html5에서 새롭게 추가된 속성입니다. 태그는 음악이나 오디오 파일을 재생하기 위한 태그를 말하며, 표현 기본 공식은 아래의 이미지와 같습니다. 위의 코드를 티스토리 페이지에 삽입해 보면 어떻게 보여지는지 테스트해보았습니다. 물론 첨부 파일을 통해 cow.mp3파일을 업로드시킨 다음 코딩하였습니다. wav 형식의 사운드 파일은 익스플로러에서는 지원되지 않습니다. 가장 호환성이 좋은 mp3 형식의 사운드 파일은 익스플로러를 포함한 모든 브라우저에서 지원되므로 예..
Media 태그란 동영상을 링크하는 Video 태그, 사운드를 링크하는 Audio 태그, 이미지를 링크하는 Img 태그를 말합니다. 다시 말해, Video 태그는 비디오 동영상을 문서 내에 삽입할 때, Audio 태그는 오디오를 문서 내에 삽입할 때, Img 태그는 이미지나 사진 등을 문서 내에 삽입할 때 사용합니다. 태그는 페이지에 이미지를 삽입해야 할 경우에 사용하는 태그입니다. 태그는 'src'라는 필수 속성이 있어야 합니다. 티스토리의 경우에 신에디터를 쓰고는 있지만 유일한 불만이 구에디터에서 처럼 img 태그가 자동으로 들어가지 않는 다는 점입니다. 이미지 검색을 신경 쓰지 않을 수 없는 것이 추세인데 신에디터의 경우에는 img 태그를 이미지에 넣으려면 수동으로 직접 삽입해야 합니다. html ..
태그는 레이아웃을 나눌 때 사용하는 태그로 콘텐츠의 형태를 변형시키지는 않지만 하위에 있는 여러 요소를 묶어 스타일을 변경시킬 수 있습니다. Division Maker의 줄임말로 영역을 구분 짓는 태그 엘리먼트로 작동하게 됩니다. 는 블럭 레벨 항목(Block Level Element : 해당 항목의 앞뒤 항목들이 가로로 이어지지 않고 엔터 입력의 경우처럼 줄 바꿈이 이루어지는 요소)으로 앞과 뒤에 있는 항목들을 줄 바꿈 시킵니다. 다은 기본 요소들과 비교해 볼 때 , , , 는 모두 기본적으로는 와 같은 역할을 합니다. 차이점이 있다면 div 태그에 의미를 부여한 것입니다. 예를 들어 내용이 하나의 독립된 콘텐츠라면 대신에 을 사용합니다. 바꿔 말해 , , , 모두가 로 대신 사용할 수 있으나 보다 적..
, , 태그들이 목록을 단순 열거 또는 정의할 때 쓰였다는 것은 이미 배웠습니다. , , 태그들 역시 목록을 정의할 때 쓰이지만, 다른 점이 있다면 이 경우에는 사전이 특정 단어의 뜻을 풀어쓰는 것처럼 단어에 대한 그 의미를 정의할 경우에 쓰이는 목록이라는 점입니다. - : Definition List의 약자이며 정의 목록을 말합니다. 주로 정의 목록의 시작점과 끝점에 쓰입니다. - : Definition Term의 약자이며 정의할 용어를 말합니다. 그 의미를 알아야 할 단어 또는 용어 등을 의미합니다. - : Definition Description의 약자이며 용어의 설명 또는 그 의미 해석을 말합니다. 위의 내용을 예제화한 내용의 코드는 아래와 같습니다. dl : Definition List의 약자이..
태그는 Ordered List의 줄임말로 순서가 있는 목록을 표현할 경우에 사용한다고 이전 포스팅에서 배웠습니다. - 이전 포스팅 참조 : itfix.tistory.com/647 그렇다면, ol 태그는 미리 정해진 방식으로만 순서가 표시되어야 하는 걸까요? 아닙니다. ol 태그는 type을 이용하여 처럼 표기하여 리스트의 표현 방식을 직접 지정할 수 있습니다. 사용할 수 있는 속성값은 아래와 같습니다. - 속성값 1 : 10진수 숫자로 순서를 표현하게 됩니다. ex) 1, 2, 3 - 속성값 a : 소문자 알파벳 순서로 순서를 표현하게 됩니다. ex) a, b, c - 속성값 A : 대문자 알파벳 순서로 순서를 표현하게 됩니다. ex) A, B, C - 속성값 i : 로마 숫자 소문자로 순서를 표현하게 ..
아래의 ol, ul, li 세 가지 태그는 모두 목록을 정의할 때 주로 메뉴에서 쓰입니다. 태그는 Ordered List의 약자로 순서가 있는 목록을 말합니다. 태그는 Unordered List의 약자로 순서가 없는 목록을 말합니다. 태그는 List Item의 약자로 각각의 항목들을 나열할 때 쓰는 태그입니다. 아래는 예제 태그 입니다. 1억 5억 10억 벤츠 아우디 재규어 위 코드 블록 내용 중 body 부분을 발췌하여 넣으면 아래와 같습니다. 1억 5억 10억 벤츠 아우디 재규어 위의 예제에서 보다시피 태그는 순서가 있는 목록인 태그와 순서가 없는 목록인 태그 모두에서 아이템 내용 역할을 하는 태그로 작동합니다.
1. 와 태그 태그는 굵은 글꼴을 표현하고 싶을 때 사용하며, 태그는 굵은 글꼴을 표현하는 것 외에도 해당 글의 중요성을 강조하고자 하는 용도로 사용됩니다. W3C에서는 강조하기 위해 이나 을 사용할 것을 권장하고 있습니다. 따라서, 결론적으로 HTML5 표준을 따른 다고 하면 태그보다는 태그를, 태그보다는 태그를 사용하는 것이 부합합니다. b 태그와 strong 태그의 사용례는 아래와 같습니다. - b 태그의 사용례 입니다. - strong 태그의 사용례 입니다. 위의 내용에서 body 부분만을 발췌한 모습은 아래와 같습니다. - b 태그의 사용례 입니다. - strong 태그의 사용례입니다. 위의 외관에서 보면 두 태그 사이에 차이점이 없어 보이지만 브라우저는 b태그나 i태그는 단순 색상의 변경 또는..
태그는 텍스트의 내용 중 하이라이트 표시를 하여 특정 문장이나 단어를 강조하고 싶은 경우에 사용할 수 있습니다. 티스토리의 경우에 에디터 자체에 글자의 배경색 기능이 있으므로 티스토리를 이용하시는 분들에게는 큰 의미는 없습니다. 마크 태그가 이런 의미를 가지고 있다 정도로만 이해하시면 될 것 같습니다. 다만, 마크 태그는 노란색을 기본 색상으로 하므로 이러한 점에서 모든 색상을 선택할 수 있는 티스토리 에디터와는 다르다고 할 수도 있습니다. 마크 태그의 소스 코드 예제의 모습은 아래와 같습니다. mark 태그는 단어를 강조하고 싶은 경우에 배경에 하이라이트 색상을 주는 역할을 합니다. 위의 코드에서 body 태그 내용에 들어간 부분을 나타내면 아래와 같이 보이게 됩니다. mark 태그는 단어를 강조하고 ..
태그는 윗 첨자에 사용하며, 태그는 아랫 첨자를 나타낼 때 사용합니다. 작은 글자를 표현하는 용도로는 사용하지 않으며 화학기호나 수학공식 또는 수학기호 등의 첨자 문자를 표현해야 할 경우에 주로 사용하게 됩니다. 즉, sup는 Superscript(윗첨자)를 나타내며, sub는 Subscript(아랫 첨자)를 나타냅니다. 예제에서 태그를 사용하는 모습은 아래와 같습니다. x = log28 2x = 8 x = 3 body 부분에 들어간 모습을 분리해 내면 아래와 같이 보여지게 됩니다. x = log28 2x = 8 x = 3