HTML

What is HTML

아래 3가지 기술이 웹을 견인한다.

  • HTML : HTML은 구조를 제공한다. 즉, 어떤 구성요소가 HTML 문서에 들어가 있느냐 하는 것이다. 어떻게 생길지, 어떤 색상을 가질지 폰트 크기는 어떨할지 알지 못힌다. 구성요소가 무엇 인지만 말해준다.
  • CSS : 색상과 스타일은 CSS의 역할이다. 색상, 레이아웃, 폰트 스타일, 폰트 크기 등이다.
  • JavaScript : 행동을 제공한다. 페이지에 기능을 제공한다.

HTML이란 Hyper Text Markup Language의 약자이다. 그럼 각각의 단어가 무슨 의미일까?

  • Hyper : 하이퍼텍스트는 다른 텍스트에 링크가 달린 텍스트이다. 한 문서가 다른 문서를 링크하고 그 문서가 또 많은 다른 문서들을 링크한다.
  • Text : 요즘은 그냥 텍스트와 관련된 것만은 아니다. 오늘날 하이퍼미디어는 웹에서 엄청난 역할을 한다. 비디오를 보기도 하고, 음악을 들을 수도 있다. 하이퍼미디어는 하이퍼 텍스트의 확장이다.
  • Markup : 마크업이란, 주석을 달기 위해 뭔가에 표시를 한다는 의미이다. 예를 들어 콘텐츠에 대한 것 일 수 있다.
  • Language : 언어라는 말은 기본적으로 자체적으로 구문상의 의미가 있고, 코딩하는데 옳고 그른 방법이 있다는 말이다.

3개의 핵심 웹 기술이 있는데 그것은 HTML, CSS, 자바스크립트로 서로 잘 협업된다. 각각 그 자체로 특징적이고 정확한 역할이 있으며 서로 부딪히거나 하지 않는다.

Anatomy of a tag

HTML의 핵심은 HTML 태그이다. HTML 태그의 구성요소가 무엇인지 어떻게 HTML 태그를 문장 구성적으로 적절히 코딩하는지 이해하는 것은 꽤 중요하다. 보통 HTML 태그는 오프닝과 클로징 태그를 가진다. 그리고 콘텐츠를 둘러싼다.

<p> content </p>
  • p는 패러그래프의 약자인데, 태그 p는 콘텐츠가 문단으로 취급되어야 한다고 전달한다. 기술적으로 말해서, p는 그것 자체로 요소(element)라고 불린다.

대부분의 HTML 태그가 오프닝 태그와 매치되는 클로징 태그를 가지고 있지만 전부 그런 것은 아니다. br과 hr 태그가 있으며, br 은 행 바꿈을 의미한다. hr은 수평줄을 의미하며 오프닝 태그만을 가진다. 이들은 클로징 태그가 전혀 없다.

<br> 
<hr>

모든 HTML 요소는 이미 정의된 속성을 갖게 된다. 속성은 이름 값 쌍으로, 적용되는 요소 자체에 대한 일종의 메타 값이다. 아래 예시에서, “myId”는 아이디 속성의 값으로서 지정된다. 각 속성은 그 값의 의미에 대해 자체적인 규칙을 가진다. 예를 들어 id 속성은 HTML 문서의 범위 내에서 고유해야 합니다.

<p id="myId"> </p>

속성은 오프닝 태그에서만 명시된다. 클로징 태그에서 속성을 명시할 수 없다.

HTML5에서 따옴표로 속성의 값을 둘러싸는 것은 모든 상황에서 요구되지 않는다. 그럼에도 불구하고 속성 값을 둘러싸는 것은 큰 따옴표나 작은 따옴표가 가장 좋다. 큰 따옴표를 사용하든 작은 따옴표를 사용하든 상관없다. HTML 상에서는 둘 다 같다. 만약의 속성의 값으로 작은 따옴표를 포함하는 경우 아래와 같이 큰 따옴표를 사용해서 둘러싸면 된다.

<p onclick="alert('hi')"> </p>

Basic Document Structure

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Coursera is Cool!</title>
</head>
<body>
Coursera is SO cool! I am learning so much!
</body>
</html>
  • ”<!doctype html>” : 웹은 표준에 순응하지 않는 페이지로 가득 차 있었다. 브라우저는 페이지를 정확히 렌더링 하기 위해 브라우저는 doc 타입 선언을 사용해서 준수 및 비준수 페이지를 구분했다. 비준수 페이지는 쿼크 모드라고 불리는 상태로 렌더링 된다. 그리고 준수 페이지는 표준 모드라고 불리는 상태로 렌더링 된다. 만약 HTML 페이지 선언을 안한다면 이는 브라우저에게 페이지가 HTML 표준을 따르지 않는 것이라는 신호를 주는 것이다. HTML5 doctype 선언을 항상 사용해라.
  • head : 헤드 태그는 페이지의 주요 콘텐츠를 묘사하는 아이템을 포함한다. 여기에는 페이지, 페이지 타이틀, 다른 외부 리소스 등, 페이지를 적절히 렌더링하기 위해 필요한 것들을 묘사하는 것이 포함된다. 핵심은 메인 콘텐츠에 대한 메타데이타 일부를 담고 있다는 것이다. 필수 요건은 아니라도, 항상 캐릭터 세트를 명시하는 것이 좋다. 브라우저에게 웹페이지의 콘텐츠 해석 방법을 알려준다. 가장 일반적으로 사용되는 캐릭터 세트는 UTF8 이다. 타이틀은 실제 필수 요구 태그 중 하나이다. 이게 없으면 HTML은 유효하지 않게 된다.
  • body : 바디 태그는 사용자에게 보여지는 모든 콘텐츠의 근원이다. ‘viewport’라고 부르기도 한다.

브라우저가 HTML 페이지를 오픈할 때 항상 HTML 코드를 상단에서 하단으로 순차적으로 렌더링하거나 해석한다. 그래서 doctype 선언을 먼저 해석하게 하고 그 다음 HTML 태그를, 그 다음 헤드 태그 등등으로 해서 마지막으로 클로징 HTML 태그에 도착한다.

HTML Content Models

전통적 콘텐츠 모델 구조하에서 블록 레벨 요소나 인라인 요소로 나뉜다. 블록레벨 요소는 새 줄에서 시작되도록 렌더링 한다. CSS에서 그걸 바꿀 수 있지만, HTML에서 블록 레벨 요소를 명시할 때마다 브라우저는 자동적으로 그 요소를 문서의 흐름에서 새 줄에 넣는다. 블록레벨 요소는 인라인 요소나 블록레벨 요소를 안에 포함시킬 수 있다.

인라인 요소는 같은 줄에 렌더링 한다. 여러 개의 인라인 요소를 나란히 두게 되면, 마치 새 줄 캐릭터가 없는 것처럼, 이들은 모두 같은 줄에 있게 된다. 인라인 요소는 또한 제한사항이 있어서 인라인 요소에 다른 인라인 요소만 가질 수 있다. 다시 말하면,인라인 요소는 콘텐츠의 일부로, 블록레벨 요소는 포함시킬 수 없다는 것이다.

HTML5에서는 블록 레벨 요소와 인라인 요소를 보다 복잡한 일련의 콘텐츠 카테고리로 바꾸었다.

블록 레벨 요소는 HTML 5에서 플로우 콘텐츠라 불리고, 인라인 요소는 프레이징 콘텐츠로 불린다.

블록 레벨 요소에서 가장 대표적인 것은 div이고, 인라인 요소 중 가장 대표적인 것은 span 요소이다. div 요소는 “division”을 의미하고 span 요소는 span 을 의미한다.

아래는 간단한 예시이다.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>div and span elements</title>
</head>

<body>
<div> *** DIV 1 : Some content here ***</div>
<div> *** DIV 2 : Following right after div 1 ***</div>
<span>*** SPAN 1 : Following right after div 2 ***</span>
<div>
    *** DIV 3 : Following right after span1
    <span>*** SPAN 2 : INSIDE div 3 ***</span>
    Continue content of div 3 ***
</div>
</body>

</html>

그리고 아래는 위의 HTML을 브라우저로 통해 봤을때 결과이다.

*** DIV 1 : Some content here ***
*** DIV 2 : Following right after div 1 ***
*** SPAN 1 : Following right after div 2 ***
*** DIV 3 : Following right after span1 *** SPAN 2 : INSIDE div 3 *** Continue content of div 3 ***

Heading Elements

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Heading Elements</title>
</head>
<body>
  <header>
    header element - Some header information goes here. Usually consists of company logo, some tag line, etc. Sometimes, navigation is contained in the header as well.
    <nav>nav (short for navigation) element - Usually contains links to different parts of the web site.</nav>
  </header>
  <h1>Main Heading of the Page (hard not to have it)</h1>
  <section>
    Section 1
    <article>Article 1</article>
    <article>Article 2</article>
    <article>Article 3</article>
  </section>
  <section>
    Section 2
    <article>Article 4</article>
    <article>Article 5</article>
    <article>Article 6</article>
    <div>Regular DIV element</div>
  </section>
  <aside>
    ASIDE - Some information that relates to the main topic, i.e., related posts.
  </aside>

  <footer>
    JHU Copyright 2015
  </footer>
</body>
</html>
  • header : 헤더 태그는 기본적으로 페이지에 대한 헤더 정보를 담고 있다. 보통은 회사 로고, 태그 라인, 때로는 네비게이션으로 구성된다.
  • nav : 네비 태그는 웹사이트 내에 네비게이션용으로 사용되는 콘텐츠를 의미한다.
  • h1 : HTML의 헤딩을 표현하는데 사용된다. h1이 가장 중요한 헤딩을 표현하며 숫자가 높을수록 중요도가 떨어진다.
  • section : 문서내의 섹션을 정의하는데 사용된다. 서로 관계있는 내용끼리 분리할 때 사용한다. 관련있는 article을 묶는데 사용할 수도 있다.
  • article : article은 내용이 독립적이고, 홀로 설 수 있는 내용을 담는다. 주로 블로그 글, 포럼 글, 뉴스 기사 등을 담는다.
  • aside : 페이지 전체 내용과는 어느정도 관련성이 있지만, 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담는다.
  • footer : footer요소는 주로 저작권 정보나 서비스 제공자 정보 등을 담는다. 주로 사이트 하단에 위치한다.

semantic 요소가 HTML 코드, 페이지, 구조를 보다 의미 있게 표현한다. 하지만 일반적인 div 나 span 보다 많은 기능을 제공하지는 않는다.

Lists

리스트는 유용한 HTML 구조로 관련 콘텐츠들을 그룹화하도록 해준다. 웹페이지의 구조적인 네비게이션 부분을 위해 리스트를 종종 사용한다.

unordered list

순서가 없는 리스트를 생성할 때는 ul 태그를 사용하면 된다. 리스트 내의 모든 아이템은 li 태그에 있다. 리스트 아이템이라고도 한다. 중요한것은 ul 요소에 허용되는 유일한 것은 li 요소 뿐이라는 것이다. 그 외에는 허용되지 않는다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Unordered Lists</title>
</head>
<body>
  <h1>Unordered list</h1>
  <div>
    My typical dinner shopping list:
    <ul>
      <li>Milk</li>
      <li>Donuts</li>
      <li>Cookies
        <ul>
          <li>Chocolate</li>
          <li>Sugar</li>
          <li>Peanut Butter</li>
        </ul>
      </li>
      <li>Pepto Bismol</li>
    </ul>
  </div>
</body>
</html>

ordered list

ul 태그가 “순서대로 정렬된 리스트”라는 의미의 “ol” 태그로 교체된 것을 볼수 있다. 그러나 li 아이템은 정확히 같다. 그리고 정렬된 리스트 내에서 서브 리스트를 취급하는 방식은 정렬되지 않은 리스트를 처리할 때와 완전히 똑같다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ordered Lists</title>
</head>
<body>
  <h1>Ordered list</h1>
  <div>
    Oreo cookie eating procedure:
    <ol>
      <li>Open box</li>
      <li>Take out cookie</li>
      <li>Make a Double Oreo
        <ol>
          <li>Peel off the top part</li>
          <li>Place another cookie in the middle</li>
          <li>Put back the top part</li>
        </ol>
      </li>
      <li>Enjoy!</li>
    </ol>
  </div>
</body>
</html>

HTML Character Entity Reference

  • &lt; : <
  • &gt; : >
  • &amp; : &
  • &copy; : ©

HTML를 브라우저에서 해석할 때 왼쪽 꺽쇠괄호를 태그의 시작이라고 해석한다. 따라서 원하는대로 결과가 나오지 않을 수 있다. 이런 경우 Character Entity Reference를 사용해야 한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML Entities</title>
</head>
<body>
<h1>Don't be afraid to be &lt;then a 100% success &amp; &gt;more:</h1>
<p>
  &quot;It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood; who strives valiantly; who errs, who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds; who knows great enthusiasms, the great devotions; who spends himself in a worthy cause; who at the best knows in the end the triumph of high achievement, and who at the worst, if he fails, at least fails while daring greatly, so that his place shall never be with those cold and timid souls who neither know victory&nbsp;nor&nbsp;defeat.&quot;
</p>
<p>Theodor Roosevelt 1910 &copy; Copyright</p>
</body>
</html>
  • &quot; : "
  • &nbsp; : “vitory nor defeat”을 무조건 같은 줄에 보이고 싶을때 위 예제와 같이 하면 된다. &nbsp; 를 단어사이의 많은 공백을 원할 때 사용하는 경우가 있다. 하지만 이는 Character Entity Reference를 잘 못 사용하는 것이다. 추가 여백을 주고 싶은 경우 <span> 태그로 텍스트를 둘러 싸고 여백을 적용하는게 좋다.

&quot; 를 사용하면 인코딩 이슈를 피할수 있다. HTML Characeter Entity Reference로 렌더링 문제를 해결할 수 있으며 키보드에 존재하지 않는 캐릭터를 사용 가능하게 해준다.

Linking

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Internal Links</title>
</head>
<body>
  <h1>Internal Links</h1>
  <section>
    We can link to a file in the same directory as this HTML file like this:
    <a href="same-directory.html" title="same dir link">Linking to a file in the same directory</a>

    <a href="same-directory.html" title="same dir link">
      <div> DIV Linking to a file in the same directory</div>
    </a>
  </section>
</body>
</html>
  • 링크 생성 방법은 href 속성을 가진 요소를 명시하는 것이다.“href”는 하이퍼텍스트 레퍼런스를 의미한다. “href”의 값은 상대 혹은 절대 URL이 될 수 있다.
  • 위 예제는, 인터널 링크, 즉 애플리케이션에 있는 내부 웹페이지를 가리키는 링크이다. 링크들은 모두 상대 URL 링크이다. 디렉토리 정보는 제공하고 있지 않으므로 브라우저는 same-directory.html이 같은 디렉토리에 존재할 것이라고 생각한다.
  • a 태그에 대해서 title 속성을 명시하는 것이 좋다. title 속성은 시각 장애자들이 웹페이지를 볼 수 있도록 하는 스크린 리더에 의해 사용된다. a 태그 오프닝과 클로징 사이의 콘텐츠는 웹페이지에서 보게 될 콘텐츠이다
  • 위의 예제를 보면 div 태그를 a 태그로 둘러싼다. 그럼 인라인 요소 안에서 블록 레벨 요소인 div를 사용하는 건가? W3C 스펙에 정의된 a 태그를 살펴보면 a 태그는 플로우 콘텐츠와 프래이징 콘텐츠 양 쪽 다 된다. 즉, HTML 5의 a 태그는 인라인 요소이자 동시에 블록레벨 요소이다. 이로 인해 a 태그를 가져다가 그 안에서 div 태그를 에워쌀 수 있다.
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <h1 id="top">External Links</h1>
  <section>
    <p>
      Let's link to a Facebook Fan page I created for this course!
      <!-- link to Facebook page WITH TARGET-->
      <a href="http://www.facebook.com/CourseraWebDev" 
      target="_blank" title="Like Our Page!">Course Facebook Page</a>
    </p>
  </section>
</body>
</html>
  • 타겟 속성은, _blank로서 브라우저로 하여금 새로운 탭이나 새로운 창에서 열도록 강제한다. 장점은 사람들이 집중력이 짧기 때문에 다른 웹사이트로 링크를 통해 갈 경우 원래 웹사이트로 다시 돌아오질 않을 가능성이 높기 때문이다. 보통은 사용자가 웹사이트를 완전히 떠나기를 원치 않는다. 그래서 “target=”_blank”는 매우 유용하다.

link same page

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <h1 id="top">Links to Sections of The Same Page</h1>
  <section>
    <ul>
      <!-- Link to every section in the page -->
      <li><a href="#section1">#section1</a></li>
      <li><a href="#section2">#section2</a></li>
      <li><a href="#section3">#section3</a></li>
      <li><a href="#section4">#section4</a></li>
      <li><a href="#section5">#section5</a></li>
      <li><a href="#section6">#section6</a></li>
    </ul>

  </section>

  <section id="section1">
    <h3>(#section1) Section 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur ....</p>
  </section>

  <section id="section2">
    <h3>(#section2) Section 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis voluptatibus facere repellat deserunt sint,...</p>
  </section>
  <section id="section3">
    <h3>(#section3) Section 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit....</p>
  </section>
  <section id="section4">
    <h2>(#section4) Section 4</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus culpa, voluptatibus obcaecati sunt reiciendis, ...</p>
  </section>
  <section id="section5">
    <h2>(#section5) Section 5</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur libero, a voluptate, quasi rem id! ...</p>
  </section>
  <div>
    <h2><a name="section6">(#section6) Section 6</a></h2>
    <p>
      Back to top: <a href="#top">Back to Top</a>
    </p>
  </div>
</body>
</html>
  • 여기 설정된 링크는 모두 href 속성의 값으로 일정한 포맷을 가진다. “#”에다가 section1, 2 등의 이름이 따라온다. 이 링크들이 가리키는 것은 같은 페이지의 섹션이다.
  • 여러가지 방식으로 섹션을 식별할 수 있다. 어떤 태그에든, 섹션명이 달린 id를 포함시키는 것이다. 섹션명이 # 표시를 포함하고 있지 않다는 것을 주의해라. 그 섹션에 연결된 링크만이 # 표시를 가지고 있다.
  • 특정 섹션을 클릭한 이후에, URL을 복사해서 친구에게 북마크로 보낼 수 있다. 해당 URL을 브라우저에 갖다 붙이면 이 페이지로 이동한 후 식별자에 의해 지시되는 섹션으로 곧바로 가게 된다.

Image

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Displaying Images</title>
</head>
<body>
<h1>Don't be afraid to be &lt;then a 100% success:</h1>
<p>
  <img src="picture-with-quote.jpg" width="400" height="235" alt="Picture with a quote"> &quot;It is not the critic who counts; not the man who ...
</p>
<p>
<img src="http://lorempixel.com/output/nature-q-c-640-480-1.jpg" width="640" height="480">
</p>
<p>Theodore Roosevelt 1910 &copy; Copyright</p>
</body>
</html>
  • 이미지는 img 태그를 사용하여 보여진다. 그리고 img 태그의 src 속성은 이미지 파일을 가리키는 URL 이다. URL은 정규 링크 a 태그에서 보았던 href와 별 차이가 없다. 상대 URL 일 수도 있고 혹은 절대 URL일 수도 있다. 심지어 외부 링크 일 수도 있다.
  • 높이와 너비를 명시하는 것이 항상 좋다.
  • 시각 장애자들을 돕기 위해 사용되는 스크린 리더에서 사용하는 alt 속성이 있다.
  • img 태그는 인라인 요소이다.
  • 이미지의 너비와 높이를 명시한 경우에는 설사 이미지가 로드되고 있지 않더라도 시각적 스페이싱과 비쥬얼 레이아웃은 의도했던대로 된다. 따라서 가능하다면 이미지 태그의 높이와 너비를 항상 명시하는 것이 좋다. 그렇지 않을 경우 레이아웃이 깨질 수 있다.