레이블이 HTML인 게시물을 표시합니다. 모든 게시물 표시
레이블이 HTML인 게시물을 표시합니다. 모든 게시물 표시

3월 21, 2016

superscript (윗첨자), subscript (아랫첨자) 삽입하는 방법. (markdown/html)

순수 markdown 문법

  • superscript: ^(text)^
  • subscript: ~(text)~

만약 text 사이에 공백이 있다면 공백에 \ (escape) 처리를 해줘야 함. ex) ^hello\ world!^


html tag 사용

markdown에서는 위의 문법을 지원하지 않는 경우가 있음. github 에서는 위의 문법을 지원하지 않는데, 이런 경우엔 html tag를 사용. markdown 뿐 아니라 html에서도 사용 가능.

  • superscript: <sup>superscript</sup>
  • subscript: <sub>subscript</sub>

2월 05, 2016

html 문서에 이미지 삽입 : img 태그

descriptions

html 페이지에 이미지를 삽입하는 태그. 기술적으로, 이미지는 직접 html 페이지에 삽입되는 것이 아니라 단지 링크가 되는 것. img 태그는 html 페이지에 이미지를 위한 공간을 잡아주는 것뿐

attributes

  • src : 이미지의 url.
  • alt : 이미지 대신에 표시될 텍스트. 페이지 읽어주기 모드에서 그림을 대체.
  • height : 이미지의 세로 길이를 지정
  • width : 이미지의 가로 너비를 지정

예시

  • 다른 폴더에서 이미지 가져오는 경우 :
  • <img src="/images/stickman.gif" alt="Stickman" width="24" height="39">

  • 다른 웹페이지에서 이미지 가져오는 경우 :
  • <img src="http://www.w3schools.com/images/lamp.gif" alt="Lamp" width="15" height="15">


참고

2월 03, 2016

html id attribute : html global attribute

global attribute id

id attribute는 html의 global attribute로 동일한 html 문서 내에서 html element에 고유한 id를 부여해줌. id attrib.은 style sheet의 고유한 style을 가르키거나 javascript가 조작하려는 특정 html element를 가르키게 하는데 많이 쓰인다. 또한 HTML4 이후로 html anchor로도 사용된다.



reference

HTML id Attribute

1월 28, 2016

HTML anchor - 웹페이지 내 원하는 부분으로 이동하는 링크 만들기

HTML anchor란?

같은 webpage 내에서 특정 문단 등으로 이동할 수 있게 해주는 일종의 링크.

예시> 사용 방법, 참고


사용 방법

<a> 태그와 name attribute를 사용. name attribute는 HTML5 에서 deprecated.

  1. destination 지정: <a name="anchor_name"> destination_string</a>를 지정
  2. departure link 만들기 : <a>태그 사용한 링크 다는 방식과 동일하게 링크 삽입. 단, url 주소 맨 마지막에 (url)#anchor_name 덧붙임
  3. 만약 같은 웹페이지 내에서의 이동이라면 url 주소를 생략한채 #anchor_name만 입력도 가능.

<a> 태그와 id attribute를 사용.
  1. destination 지정 :
    <a name="anchor_name"> destination_string</a>를 지정
  2. departure link 만들기 : <a>태그 사용한 링크 다는 방식과 동일하게 링크 삽입. 단, url 주소 맨 마지막에 (url)#anchor_name 덧붙임
  3. 만약 같은 웹페이지 내에서의 이동이라면 url 주소를 생략한채 #anchor_name만 입력도 가능.


참고

How to Link to a Specific Line or Paragraph on a Web Page Using HTML
by Christopher Heng, thesitewizard.com

1월 12, 2016

Blogger에서 code 삽입하는 법: Gist, 기타..

Gist 사용

  1. GitHubGist 접속 후 오른쪽 상단의 New gist 선택
  2. 소스코드를 입력한 후 Create private 혹은 Create public을 선택. private은 검색 엔진에 잡히지 않아 내가 url을 공유한 사람만이 접근 가능.

  3. 상단의 Embed에 나온 script 태그를 복사해 html 문 내의 원하는 위치에 삽입
  4. 이렇게 삽입한 코드는 Gist에서 수정 시 블로그에도 자동으로 반영이 된다고 함.

기타

12월 22, 2015

HTML 자주 쓰는 태그


Tag 목록

  • <pre> </pre>
  • preformatted. 미리 포맷된 텍스트를 나타냄. 이 요소 내부의 텍스트는 HTML 적용 전 텍스트에 적용된 그대로의 비례, 글꼴로 표시됨. 고정폭 띄어쓰기를 제공하여 tab과 같은 역할로도 사용 가능

  • <br>
  • 줄바꾸기

  • <blockquote> </blockquote>
  • 인용 구문 문단 지정

  • <p> </p>
  • 단 지정


escape character

  • < : &lt
  • > : &gt
  • & : &amp
  • : : &#58
  • ; : &#59

주의

<xmp> </xmp> 삽입된 코드( ; < > , HTML태그 등 )를 그대로 보여주는 태그.
But deprecated. 쓰지 말것.

현재 <xmp>를 대신할 태그가 없어 다소 번거롭긴하지만 escape 캐릭터를 매번 사용하는 방법 외에는 뾰족한 수가 없는 듯

참고

Atom: Github에서 출시한 오픈소스 텍스트 에디터

  1. 개요
  2. GitHub에서 만든 hackable 텍스트 에디터. 크롬의 오픈소스와 HTML, CSS를 이용하여 작성했으며, 이들 언어를 사용하여 커스터마이징이 가능.

  3. 설치 순서
    1. atom download
    2. extantion 설치
    3. setting > install 에서 extention 이름으로 찾기

      • emmet
      • minimap
      • script

    4. 기타 개별적인 커스터마이징 적용