HTML 코딩과 과 글자 디자인; Typography

글자; Typo 와 문자; Character

`글자; Typo`란 인쇄와 타이포그래픽 분야에서 사용하는 용어로, 한 개의 알파벳, 숫자, 기호 등으로 이루어진 단일한 그래픽 요소를 말한다. 글자꼴 = 글골(폰트)에 따라 각 글자의 모양고 스타일이 달라진다. 예를 들어 한글자모 "ㄱ", 알파벳 "A", 숫자 "9", 기호 "&" 등이 모두 하나의 글자이다.

 

`문자; Character` 란 사람이 사용하는 언어에서 의미를 나타내는 최소 단위를 말한다. 한 문자는 하나의 코드 포인트; Code Point 로 나타내며 코딩의 문자열 처리에서 사용된다. 예로, 알파벳 'A' 는 하나의 문자로 유니코드; Unicode 는 U+0041로 표현된다. 문자열은 하나 이상의 문자 셋이다.

 

따라서, `글자; Typo` 라는 단어는 HTML 과 CSS 언어로 글자디자인; Typography 할 때 사용할 것이며, `문자; Charactor` 라는 단어는 파이썬, 자바스크립트에서 데이터 처리 및 인코딩, 디코딩 등의 코딩 작업 사용할 것이다.

 

HTML 의 글자 디자인

HTML 의 글자 속성

Device	Extra Small	Small	Medium	Large	Extra Large
Base Font	16px	17px	18px	19px	20px
<h1>	32px	34px	36px	38px	40px
<h2>	28px	29px	31.5px	33.25px	35px
<h3>	24px	25.5px	27px	28.5px	30px
<h4>	20px	21.25px	22.5px	23.75px	25px
<h5>	18px	19.125px	20.25px	21.375px	22.5px
<h6>	16px	17px	18px	19px	20px
<small>	14px	14.875px	15.75px	16.625px	17.5px

 

글자디자인

<hgroup>
  <h4>1 Gorinthians</h4>
  <h6>Chapter 13 Verse 13</h6>
</hgroup>
<article data-theme="light">
  <p>
    <sup>13:13</sup>
    And now these three remain: faith, hope, and <strong>love</strong>. But the greatest of these is <u>love</u>
  </p>
</article>
<mark>--- </mark>
<abbr title=" Hyper Text Markup Language">HTML</abbr>

 

1 Gorinthians

Chapter 13

¹³ And now these three remain: faith, hope, and love. But the greatest of these is love

HTML cite

 

Blockquote

<blockquote>
  "Everyone in this country should learn how to program because it teaches you how to think"
  <footer>
    <cite>- Steve Jobs</cite>
  </footer>
</blockquote>

 

"Everyone in this country should learn how to program because it teaches you how to think"

- Steve Jobs

 

HTML Forms

<form>

  <!-- Grid -->
  <div class="grid">

    <!-- Markup example 1: input is inside label -->
    <label for="firstname">
      First name
      <input type="text" id="firstname" name="firstname" placeholder="First name" required>
    </label>

    <label for="lastname">
      Last name
      <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
    </label>

  </div>

  <!-- Markup example 2: input is after label -->
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" placeholder="Email address" required>
  <small>We'll never share your email with anyone else.</small>

  <!-- Button -->
  <button type="submit">Submit</button>

</form>

 

First name Last name

Email address We'll never share your email with anyone else.

 

Progress & Loading

<progress value="25" max="100"></progress>
<progress></progress>
<button aria-busy="true">Please wait…</button>
<button aria-busy="true" class="secondary"></button>
<article aria-busy="true"></article>
<a href="#" aria-busy="true">Generating link, please wait…</a>

 

Generating link, please wait…