1. SB Admin http://startbootstrap.com/template-overviews/sb-admin/ http://startbootstrap.com/template-overviews/sb-admin-2/ 2. adminLTE http://www.almsaeedstudio.com/ 데모 : http://almsaeedstudio.com/AdminLTE/ 3. charisma 데모: http://usman.it/themes/charisma/ https://github.com/usmanhalalit/charisma http://martian36.tistory.com/1238 3. vinceg 데모 http://vinceg.github.io/Bootstrap-Admin-Theme/buttons..
자바스크립트 라이브러리 중 jQuery는 반응형 웹을 개발할 때 자주 사용됩니다. CSS의 미디어 쿼리와 함께 사용하면 더 일관성 있는 웹 개발을 할 수 있습니다. 자바스크립트에서 인식하는 웹 브라우저의 해상도와 CSS에서 인식하는 해상도에는 미세한 차이가 있기 때문입니다. 이러한 이유 때문에 CSS에서 모든 해상도를 인식하도록 한다면 더 편리하게 반응형 웹을 개발할 수 있습니다. 이 글에서는 CSS 미디어 쿼리와 jQuery를 활용하여 웹 브라우저의 해상도를 인식하는 방법에 대하여 알아볼 것입니다. 자바스크립트는 전통적으로 동적인 웹사이트를 만들 때 많이 사용되는 클라이언트 기반 웹 프로그래밍 언어입니다. 자바스크립트를 누구나 쉽게 사용할 수 있게 만들어진 라이브러리가 몇 개 있는데, jQuery는 그..
2.2 meta 요소 meta 요소는 웹 페이지에 대한 설명(description)이나 키워드(keyword), “UTF-8”이나 문자셋(charset) 등을 블록 내에 설정하는데 사용하는 요소로 다음과 같은 속성들과 함께 사용합니다. 속성 기능 name metadata의 이름을 나타내는 속성. “application-name”, “author”, “description”, “generator”, “keywords”를 속성값으로 사용 가능 http-equiv 문자 인코딩을 설정하거나 몇 초 후 페이지를 다시 로드할 것인지 아니면 해당 페이지에 사용될 스타일시트를 명시하는데 사용 content name, http-equiv 속성과 연관된 Text 형태의 데이터 charset HTML 문서에 대한 문자셋을 ..
HTML5에서 meta 요소(Element)들은 IE, Firefox 같은 웹 브라우저에게 HTML5로 작성된 웹 문서와 관련된 정보를 제공하는데 사용됩니다. 이러한 metadata 요소들은 title, meta, link, style, script 등이 있으며 metadata 요소(들)의 컨테이너 역할을 하는 head 요소 블록 내에 다음과 같이 나타날 수 있습니다. 해당 요소들을 표로 정리하여 간략히 나타내면 다음과 같습니다. 메타 요소 기능 title 웹페이지의 제목을 설정하는데 사용 HTML5 학습 사이트 base 웹페이지와 연관된 기본적인 URL 경로나 목적지(target) 경로 명시하는데 사용 meta 웹페이지의 인코딩 정보, 문서에 대한 저자, 설명, 몇 초 후 다시 읽기(refresh) 등..
HTML5에서 요소(Element)들은 집으로 생각하면 집, 집을 구성하는 벽, 기둥, 식탁, 의자, TV, 컴퓨터와 같이 하나의 독립적으로 존재하는 객체(object)라고 할 수 있습니다. 하지만 지금 설명하는 속성(Attribute)은 요소(Element)처럼 독립적으로 움직이는 형태가 아닌 요소(Element)와 함께 사용되는 것으로 요소(Element)에 종속적입니다. 예를 들어 컴퓨터(Element)를 생각해보면 컴퓨터를 분류할 때 노트북 형태, 데스크탑 형태, 검은색 노트북, 흰색 노트북, … 등 컴퓨터의 형태, 색상 등과 같이 컴퓨터라는 요소(Element)를 구분하는데 도움을 주는 역할을 하는 것이 바로 속성(Attribute)입니다. 속성은 시작 태그 내에 다음과 같은 형식으로 하나 이상..
1.3.1 HTML5의 요소(Element) 작성 방법 HTML5에서 요소(Element)는 일반적으로 다음과 같은 형식으로 HTML5 문서에 나타냅니다. 내용(텍스트, ...) 위에서 보는 것처럼 앞의 을 시작 태그(start tag), 맨 뒤의 을 마침 태그(end tag)라고 하며 웹 브라우저에 의해서 요소이름을 확인하고 해당 요소에 대한 적용은 내용(텍스트, …) 부분에 적용되게 됩니다. 예를 들어 문장의 절이나 단락을 나타내는데 사용되는 p 요소를 이용하여 “혼자 여행가도 안전한 나라” 라는 텍스트를 웹 브라우저를 통해 나타내려면 다음과 같이 하면 됩니다. 혼자 여행가도 안전한 나라 그러면 웹 브라우저에서는 내부적으로 시작 태그인 와 마침 태그인 를 제거하고 웹 브라우저에 다음과 같이 나타냅니다..
1.3 HTML5의 구조(structure) 개인적으로 HTML 문서의 구조를 이해하는 가장 쉬운 방법은 먼저 HTML을 이용하여 만들어진 결과물을 통해 역으로 접근해보는 것이 이론적인 설명보다 빠르다고 생각합니다. 먼저 현재 HTML4.01 버전으로 잘 짜여진 웹 페이지를 보기 위해서 여러분들이 좋아하는 다음, 네이버, 네이트 등의 사이트를 IE, Firefox, Chrome 같은 웹 브라우저로 열어보는 것으로 시작하는데 여기서는 IE를 이용하여 다음(Daum) 사이트에 접속하여 설명합니다. 위 화면엣 F12키를 누르면 아래와 같은 개발자도구가 나타납니다. 주요 부분 코드를 나타내면 다음과 같습니다. 다른 사이트를 보다보면 아직까지 로 시작하는 사이트가 있을것입니다. 이것은 XHTML1.0 표준을 따라..