공부하고 또 공부하는

이미지 스프라이트(Image Sprite)란 여러 개의 이밈지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청을 해야만 하므로 웹 페이지의로딩 시간이 오래 걸리게 됩니다. 이미지 스프라이트(Image Sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다. 또한, 많은 이미지 파일을 관린하는 대신 몇 개의 스프라이트 이미지 파일만을 관리하면 되므..

메타(meta) 태그 란 HTML 문서가 어떤 내용을 다모 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있는 것/브라우저나 검색로봇에게 해당 페이지 정보를 알려주는 기능이 있어 직접적으로 meta 태그를 이용하여 표기해준다. 이 표기방법 중 페이스북의 오픈그래프 프로토콜을 사용하는 것이 og 태그이다! 오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하게 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌습니다. 그 간편함으로 인하여 현재는 그 창시자인 페이스북은 물론이고 네이버 블록, 카카오..

HTML5 관련 내용을 확인할 수 있는 사이트로서 KISA에서 운영하는 사이트입니다. 공모 사업 및 진단 도구, 브라우저 및 이용체제 통계등을 페이지 내에서 볼 수 있습니다. 이외에 HTML5 관련 최신 자료 및 기술 관련 내용등도 같이 확인이 가능합니다.

[개요] HTML 파일을 작성했는데, 한글이 깨져서 보이는 현상이 나타날 수 있습니다. 이는 파일의 인코딩 방식과 웹브라우저가 사용하는 인코딩 방식이 서로 달라서 나타나는 문제로 하나의 인코딩 방식으로 통일해 주어야 합니다. [인코딩 방식] 현재 가장 많이 사용되는 인코딩 방식으로는 크게 euc-kr과 UTF-8 방식이 있습니다. euc-kr은 원래 영어만을 고려한 1byte 길이의 ASCII 라는 인코딩 방식을 확장하여 한글을 사용할 수 있도록 만든 2byte 길이의 국가 언어 코드입니다. 국가 언어코드, 즉 우리나라에서만 쓸 수 있도록 만든 코드이며 세계 어디에서나 공통으로 사용되는 인코딩 방식이 아니기 때문에, 다른 언어를 사용하는 환경(외국 등)에서는 한글 페이지를 제대로 볼 수 없는 문제가 발생..

[개요] HTML은 한 회사가 단독으로 제작한 언어가 아니며, 상용되고 있는 대다수의 브라우저들이 독자적으로 파일을 해석하므로 표준이 잘 정해져있지 않았습니다. 신기술을 사용하기 위해서 adobe flash 같은 플러그인 형태의 기술을 사용하다가, 이를 HTML 언어 자체적으로 표준화 한 것이 HTML5입니다. HTML5 등장 이전에도 표준이 전혀 없지는 않았는데, 그 이전에는 주로 XHTML이나 HTML4를 사용했습니다. [XHTML] XML + HTML의 합성어로 HTML보다 엄격한 문법을 가집니다. 대표적으로 태그처럼 닫는 태그가 없는 태그는 끝에 공백과 함께 />를 붙여주어야 하고, 태그가 트리구조로 이루어져야 합니다. : 틀림 : 맞음 첫번째 문자두번째 문자 : 틀림 첫번째 문자두번째 문자 : ..

[개요] 태그는 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그입니다. 페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보를 제공할 수 있도록 해주는 태그입니다. 닫는 태그가 없는 태그로, 태그의 속성을 통해 정보를 제공합니다. 태그를 이용하여 description, keywords, author, subject, classification 등의 정보를 표기할 수 있으며, 검색 엔진은 이런 정보를 적극적으로 활용합니다. [사용법] [HTML 입력]

[개요] 태그는 웹 페이지에서의 입력 양식을 의미합니다. 로그인 창이나, 회원가입 폼 등이 이에 해당됩니다. 텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 벡엔드 서버에 양식이 전달되어 정보를 처리하게 됩니다. [속성] name : 폼의 이름 action : 폼 데이터가 전송되는 백엔드 URL method : 폼 전송방식(GET / POST) [개요 - input태그] 태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그입니다. 실제로 사용자가 양식을 입력하기 위한 태그는 태그 등이 사용됩니다. type 속성을 통해 종류를 나타내며, name을 통해 데이터의 이름, value를 통해 기본값을 지정합니다. [type - 속성] text : 일반문자 pas..

[개요] 태그는 list의 약자로, 목록을 만드는 태그입니다. 이 태그는 단독으로 쓰이지 않으며 혹은태그 내부에 들어갑니다, 태그는 단순히 리스트 나열 뿐만 아니라 메뉴등을 만들때도 사용합니다. 이줌 리스트를 만들기 위해서는 이나 하위에 다시 이나 태그를 쓰면 됩니다. [속성] : 번호를 매겨 순서가 있는 (ordered list) 목록을 만듭니다. : 순서없이 모양으로 (unordered list) 목록을 만듭니다. [사용법] 목록1 목록2 [HTML 입력] [결과]

[개요] 태그는 태그처럼 특별한 기능을 갖고 있지 않고, CSS와 함께 쓰입니다. 태그와의 차이점은 display 속성이 block이 아닌, inline이라는 점인데, 이는 CSS display 항목에서 세부 정보를 알 수 있습니다. 이 둘의 차이를 쉽게 설명하자면, 는 줄 바꿈이 되지만, 은 줄 바꿈이 되지 않는다는 점입니다. [사용법] 내용 [HTML 입력] [결과]

[개요] 태그는 웹 페이지의 제목을 나타내는 태그입니다. 웹페이지 본문에는 보이지 않으며, 브라우저의 탭 등에서 확인할 수 있습니다. 문서의 제목을 알리는 용도 뿐만 아니라, 검색 엔진 등에서 가장 크게 보여지는 텍스트이므로 페이지의 특성을 드러내는 제목을 작성하는 것이 중요합니다. [사용법] HTML title 태그 [HTML 입력] [결과]