Language/HTML 8

Webfont 의 적용 (Google Fonts)

웹페이지를 작성하다보면 자신이 원하는 형태의 폰트로 글자가 표시되기를 원할 때가 있다. 이 때 좀 더 쉽게 원하는 폰트를 적용시키는 방법은 웹폰트(webfont)를 적용하는 것이다. https://fonts.google.com/ 구글에서는 위 사이트를 통해 다양한 폰트를 제공하고 있고, 쉽게 적용할 수 있도록 가이드를 하고 있다. 크게 원하는 폰트를 고르고, 그 폰트를 자신의 사이트에 적용하는 것이 큰 골자이다. 사이트에 접속하면 2018년 10월 11일 기준으로 900여개의 font를 제공하고 있다. 화면 오른쪽에는 Languages 를 선택하여 해당 언어에 맞는 폰트를 필터링해서 보여준다. 아래 화면은 언어를 Korean으로 필터를 했을 때의 결과로 보여지는 한글 폰트들이다. 폰트를 보면 Senten..

Language/HTML 2018.10.11

[HTML/CSS] <link href> 그리고 <script src>

데이터를 시각화하기 위해 nvd3.js를 공부해보려고 한다. 그래서 tutorial을 하나씩 따라가 보려 하고 있는데, html 첫줄 부터 막히기 시작한다. 이전에는 tutorial에 tag href는 를 통해 그동안 써와서 연결할 파일의 위치를 의미하는 것은 알겠는데 link, rel 은 생소하다. 정의 The tag defines a link between a document and an external resource.http://www.w3schools.com/ 에 정의된 link tag의 설명을 보면 위와 같다. 외부의 resource와 현재 document의 연결을 정의한다. 즉, 위의 예제를 보면 현재 html과 외부의 nv.d3.css를 연결해주라는 이야기다. nv.d3.css에 정의된 s..

Language/HTML 2016.08.09

Kendo UI, 더 심플한 웹페이지 위한 Framework

Kendo UI는 이미 구현되어 있는 원하는 UI를 골라다 쓸 수 있는 하나의 HTML5/Javascript Framework이다. Kendo UI를 처음 접하게된 계기는 Google Sheet와 같은 수정 가능한 table 을 찾으려다였다. 실시간으로 수정 가능한 table을 Smart Grid라고 하는데, 제일 처음 접했던 Smart Grid는 Kendo UI Grid는 아니었고, 나름 유명한 OpenSource인 SlickGrid였다. [SlickGrid Demo Screenshot] SlickGrid도 나름 깔끔하고 좋았는데, OpenSource 여서 그런지 개발자가 개발을 멈춘 상태이고, Document가 다소 부족한 점이 있었다. 이래저래 짜깁기를 하면서 만들어보고 있었는데, 어려움에 부딪칠때..

Language/HTML 2016.04.06

cURL 을 사용하여 web browser와 동일한 결과 얻기

web server에서 data를 가져오는 coding을 하다보면web browser를 통해 data를 가져오는 결과와 library 혹은 command를 통해 가져오는 결과가 달라서 난감할 때가 있다. 추측해 보건데 header에 달린 element들의 값이 다르거나 없어서 web server에서 이를 인지하고 response를 주지 않기 때문으로 생각된다. 그렇다면 이런 문제가 발생할 때 마다 web browser에서 전달하는 html request 를 잡아서 내용을 분석하고command 혹은 library에서 최대한 비슷하게 header등을 구현해서 보내야 하는 것인가... cURL 이나 library 사용에 있어서 경험이 많고, html header에 대해 깊은 이해가 있다면 별로 큰일이 아닐 수..

Language/HTML 2015.12.22

div와 span의 차이

div와 span의 정의는 우선 다음과 같다. div : HTML내에서 일정 구역을 정의하기 위한 용도 Block element를 group화 하기 위한 용도 The tag defines a division or a section in an HTML document. The tag is used to group block-elements to format them with CSS. span : inline element를 group화 하기 위한 용도 The tag is used to group inline-elements in a document. The tag provides no visual change by itself. The tag provides a way to add a hook to a p..

Language/HTML 2015.11.08

meta tag

HTML 문서를 보다 보면 다음과 같은 tag가 존재한다 ... DOCTYPE 은 문서 HTML 버전을 나타내는 태그은 html 문서의 시작을 알리는 태그는 문서의 일반적인 정보를 포함하고 있는 태그로 아래와 같은 태그를 포함할 수 있다. , , , , , , ... 그렇다면 위 head에 포함될 수 있는 태그 중 meta tag는 무엇을 하는 태그일까.. w3mschools 에서는 다음과 같이 정의하고 있다. Metadata is data (information) about data.The tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable...

Language/HTML 2015.10.15