글을 인용할 경우 blockquote 태그를 활용해 표시해줄 수 있습니다. 이 blockquote 태그는 사용하게 되면 다른 텍스트보다 글이 안쪽으로 써지는 효과를 줍니다. 또한 꼭 인용글이 아니더라도 CSS를 통해 blockquote 태그를 꾸며서 글을 강조할 수 있는 효과도 줄 수 있는 등 다양하게 활용될 수 있는 태그입니다. 이번 포스팅에서는 blockquote 태그의 사용법에 대해 알아보도록 하겠습니다. ※ 참고로 길이가 짧은 인용구를 나타낼 때는 블록으로 감싸는 태그보다는 태그를 사용하는 것이 바람직합니다. [Html] q태그(짧은 인용문) 사용법 & 예제 총정리 blockquote태그(인용문) 사용법 인용 할 내용 사용하는 방법은 blockquote 태그로 텍스트를 감싸주면 됩니다. 인용의 출..
최근에는 영상에 자막을 넣는 것이 거의 필수가 되었습니다. 자막이 청각장애인들이 영상을 볼 수 있도록 해줄뿐더러 주변 소음이나 소리를 들을 수 없는 상황에서 영상의 내용을 이해하는데 도움이 되기 때문입니다. HTML5에서는 track 태그를 활용하여 영상에 자막을 연결해 줄 수 있습니다. 이번 포스팅에서는 track 태그를 활용하여 영상에 자막을 넣는 방법에 대해 알아보도록 하겠습니다. track 태그 사용법 kind 속성 (자막 종류) 속성 값 설명 subtitles 자막을 의미합니다. 소리를 켤 수 있지만 이해할 수 없는 경우, 다른 언어로 번역한 자막일 경우에 사용하며 비디오 영상에 표시됩니다. captions 캡션을 의미합니다. 청각장애인용 자막이거나 소리를 들을 수 없거나 켤 수 없는 경우에 사..
HTML5에 새로 추가된 태그 오디오나 비디오와 같은 멀티미디어를 직접 재생할 수 없었던 과거에는 웹 브라우저에서 플러그인(plug-in) 프로그램을 사용했습니다. 대표적으로 flash가 있죠. 그래서 과거에는 인터넷에서 음악을 듣거나 온라인 강의를 실청하려고 할 때 특정 프로그램을 설치하라는 메시지가 뜨곤 했는데 HTML5에서는 이런 플러그인 없이도 멀티미디어를 사용할 수 있는 태그들이 추가되었습니다. video 태그 사용법 HTML5에서 웹 문서에 영상을 첨부하고 싶다면 태그를 사용합니다. 위의 예제처럼 video 태그와 src에 비디오 파일의 경로만 작성해주면 웹 문서에 영상이 첨부됩니다. 하지만 보통 video태그는 controls(컨트롤 막대) 속성과 함께 사용한다는 것은 알아두셨으면 좋겠습니다..
HTML5에 새로 추가된 태그 오디오나 비디오와 같은 멀티미디어를 직접 재생할 수 없었던 과거에는 웹 브라우저에서 플러그인(plug-in) 프로그램을 사용했습니다. 대표적으로 flash가 있죠. 그래서 과거에는 인터넷에서 음악을 듣거나 온라인 강의를 실청하려고 할 때 특정 프로그램을 설치하라는 메시지가 뜨곤 했는데 HTML5에서는 이런 플러그인 없이도 멀티미디어를 사용할 수 있는 태그들이 추가되었습니다. audio 태그 사용법 HTML5에서 배경음악이나 효과음 등 오디오를 삽입할 때는 태그를 사용합니다. 웹 사이트에 특히 bgm을 설치할 때 많이 사용합니다. audio 태그에서 사용할 수 있는 파일 확장자 설명 mp3 대부분의 음원에서 사용되며 Moving Picture Experts Group에 의해 ..
텍스트만 있는 사이트보다는 다양한 이미지들이 있는 사이트들이 조금 더 직관적이고 예쁜 사이트를 만들 수 있습니다. HTML에서 사이트에서 이미지를 나타낼 수 있는 태그는 태그입니다. 이번 포스팅에서는 태그의 사용법에 대해 알아보도록 하겠습니다. img 태그 사용법 img 태그는 imgage의 줄임말로써 이미지를 삽입해주는 태그입니다. 반드시 src라는 속성을 동반하며 이 src에 이미지 경로를 작성해주셔야 정상적으로 출력됩니다. 참고로 태그는 꼭 사용하지 않아도 됩니다. 이미지 태그의 다양한 속성들은 아래 내용들을 참고해주세요. src 속성 (이미지 경로) See the Pen 이미지 태그 사용법 by wjdxo513 (@wjdxo513) on CodePen. 이미지를 웹 문서에 넣으려면 src속성에 정..
시맨틱 태그란? 시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사입니다. 즉 시맨틱 태그는 의미를 부여한 태그라는 뜻이 됩니다. 태그에 의미를 부여했다고 생각하시면 이해가 편합니다. 이런 시맨틱 태그는 HTML5에서는 처음 등장했습니다. 예를 들자면 나 같은 태그들을 말합니다. 이 태그들은 이름만 봐도 상단과 하단이라는 것을 알겠죠. 이렇게 시맨틱 태그의 등장으로 인해 우리는 태그만 보고서도 문서를 더 쉽게 이해할 수 있게 되었습니다. 시맨틱 태그를 사용해야 하는 이유 웹 문서 레이아웃을 만들 때 시맨틱 태그를 사용하지 않더라도 태그를 활용하여 웹 문서를 똑같이 만들 수 있습니다. 하지만 우리가 시맨틱 태그를 사용해야 하는 이유는 크게 아래의 3가지 이유가 있습니다. HTML..
HTML이란? HTML은 Hyper Text Markup Language의 약자로 이것을 그대로 번역해보자면 하이퍼 텍스트를 마크업 하는 언어라고 할 수 있겠습니다. 여기서 Hyper Text(하이퍼 텍스트)는 웹사이트에서 링크를 클릭해 다른 문서나 사이트로 이동할 수 있는 기능을 의미하고 Markup(마크업)은 태그(tag)를 사용해 문서에서 제목 본문 이미지 등을 표시하는 것을 말합니다. 즉 HTML을 한마디로 정리해보자면 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 태그를 활용한 언어라고 HTML의 정의를 내려볼 수 있겠습니다. 현재는 웹 표준을 제정하는 W3C(World Wide Web Consortium)에서 표준을 권고하고 발전시키고 있습니다. W3C(World Wide Web Consor..
웹사이트를 만들때 아이콘은 필수적인 요소입니다. 아이콘을 사용하면 방문자들에게 좀 더 직관적으로 기능에 대해 어필이 가능하죠. 웹사이트의 기능을 글로 설명하는것이아니라 아이콘 하나로 대체함으로써 좀 더 깔끔한 웹페이지 구축도 가능합니다. 웹사이트에 픽토그램(그림문자)을 쉽게 넣는 방법이 있습니다. 바로 웹 아이콘 폰트를 사용하는 것인데요. 웹 아이콘 폰트는 여러 종류가 있으나 그 중에서 Font Awesome가 제일 유명합니다. Font Awesome이란 이러한 웹 아이콘 폰트를 모아놓은 라이브러리입니다. 이번 포스팅에서는 Font Awesome의 사용법에 대해 다뤄보려 합니다. Font Awesome 공식 사이트 Font-Awesome의 장점 1. Html Font 속성이 모두 사용 가능하다. Font..
HTML5은 기존 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현·제공하도록 진화한 “웹 프로그래밍 언어“입니다. 이 HTML5를 사용하면 웹게임을 쉽게 만들 수 있습니다. 아래는 Html으로 만드는 테트리스 게임입니다. 아래에 war파일 형태로 소스 첨부하오니 하시고 싶으신분은 import해서 한번 해보세요.!! 테트리스 게임 [Html] 으로 만드는 간단한 장애물 피하기게임
HTML5은 기존 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현·제공하도록 진화한 “웹 프로그래밍 언어“입니다. 이 HTML5를 사용하면 웹게임을 쉽게 만들 수 있습니다. 이 HTML5를 사용하면 웹게임을 쉽게 만들 수 있습니다. 아래는 Html으로 만든 간단한 총알 피하기 게임입니다. 처음에는 총알이 느리지만 시간이 갈수록 총알도 빨라지고 많이 나오기때문에 갈 수록 어려워집니다. 아래에 소스 첨부하오니 필요하신 분들은 Import해서 한번 해보세요. 장애물 피하기게임 [Html] 으로 만드는 테트리스 게임
태그는 아주 다방면으로 활용이 가능한 유용한 태그입니다. 주로 와 태그와 함께 웹페이지의 일부분에 스타일을 적용시키기 위해 사용됩니다. span 태그안에 아무런 컨텐츠가 없다면 해당 부분은 아무런 변화가 없지만 span태그 내부에 객체가 들어가면 그 객체의 크기만큼 공간이 할당이 됩니다. 태그로 요소를 감싸면 CSS나 Javascript로 그 부분을 변형시키는것이 가능해 집니다. 태그 사용법 태그 속성 비고 display diplay요소 변경 width 가로크기 height 세로크기 background-color 배경색 변경 color 글자 색 변경 font-style 글자 형식 변경 margin 외부 여백설정 padding 내부 여백설정 border 테두리 설정 1. display는 태그의 요소를 변경..
오늘은 div태그에 대해 알아보겠습니다. div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다. div는 웹페이지에서 논리적 구분을 정의하는 태그입니다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있습니다. 특히 요즘에는 레이아웃 배치를 거의 Div를 활용해 구성하는 추세이기때문에 그 쓰임새는 더 중요해졌다고 말할 수 있겠습니다. div태그 사용법 & 예제 태그 속성 비고 style 스타일 width 가로 크기 height 세로 크기 border 테두리 굵기 background-color 배경 색상 float 정렬 margin 여백 1. style은 태그의 스타일을 지정해주는 것으로 다른 속성들을 사용할 수..
HTML이나 XML같은 언어를 사용하다보면 Margin과 Padding이라는 속성을 많이 보셨을겁니다. 몇몇분들은 이 두가지 속성의 의미를 잘 모르고 쓰시는 분들도 있더군요. 두 속성 다 여백을 주는 의미에서는 같지만. 분명 다른점도 존재합니다. 이번 포스팅에서는 Margin, Padding 속성에 대해 정확히 알아보도록 하겠습니다. Margin과 Padding 두가지 속성의 차이점은 위 사진 하나로 충분히 설명이 가능합니다. Margin은 Object와 화면과의 여백(외부여백)을 말하며 Padding은 Object내의 내부여백을 의미합니다. 그럼 아래 예제를 보면 완벽히 이해할 수 있으실겁니다. 예제 100*100 nomal 100*100 margin 100*100 padding 100*100 marg..