프로트엔드 개발을 위한 HTML 학습하기

HTML 학습하기

HTML 시작하기

웹과 인터넷, HTML의 문서의 탄생에 대해서 알아봅니다. 학습하기

개발환경

실습을 위한 브라우저와 코드 편집기를 설치합니다. 또한, 작성한 HTML 코드를 실행해 볼 수 있는 확장 기능들에 대해서 알아보도록 합니다. 자세히

  • 브라우저 종류 및 설치
  • 코드 편집기 및 vscode, 확장 패키지

HTML 문서와 요소

HTML 문서란 무엇이고, 어떻게 작성을 하는지에 대해서 알아 보도록 합니다.

용어정리

본격적으로 HTML 문서 작성법을 학습하기 위해서는 몇가지 용어에 대해서 알아 두어야 합니다. HTML을 배우다 보면 태그, 속성이라는 이야기를 많이 들어 봅니다. 이를 다른 말로 요소라고도 이야기를 합니다. HTML 요소란 무엇인지에 대하여 학습해 보도록 하겠습니다.

문서구조

HTML 문서 구조에 대해서 알아 봅니다.

코드작성

HTML 테그 학습하기

본격적인 HTML 테그에 대해서 학습해 보도록 합니다. 테그 학습하기

  • 텍스트 요소
  • 하이퍼링크 요소
  • 문서목록 요소
  • 표 요소

공간 분할 태그

현대 웹 페이지는 공간 분할 태그를 서용­하여 웹 페이지의 레이아웃을 설계합니다. 가장 대표적인 공간 분할 태그는 div 태그입니다.

HTML5와 시맨틱 태그

시만텍 테그는 HTML 5.x에 도입된 기능으로, 문서를 해석할때 표현을 명백히 하기 위한 테그들 입니다.

이미지

웹 페이지에 이미지를 삽입합니다.

  • img
  • figure : 캡션대상 지정하기
  • figcaption

백터 그래픽 SVG

멀티미디어

html5에서 다양한 멀티미디어 테그를 지원합니다.

  • embed
  • object, param

오디오 태그

오디오 태그는 웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML5 태그입니다.

  • audio

비디오 태그

비디오 태그는 웹 페이지에서 동영상을 볼 수 있게 만들어줍니다.

  • video
  • track : 동영상 화면에 자막 추가하기

폼 테그

입력 양식은 시용자에게 입력받는 공간을 의미합니다. 웹2.0 시대를 접어들면서 서버와의 데이터를 주고 받는 상호 관계를 가지게 됩니다. 이를 위하여 정보를 입력하고 전달하기 위해서 폼을 사용합니다.

  • form 테그

  • 입력요소 : input

  • Select : 목록 나열하기

  • Textarea

  • Button

  • 기타

CSS 디자인 적용

초창기 웹은 단순한 정보의 전달만을 목적으로 했습니다. 기존에 HTML 문서 마크업 만으로도 충분한 정보를 전달 할 수 있었으나, 최근에는 UI를 고려하여 보기 좋은 화면을 꾸며 표시를 하는 것이 더욱더 중요해 졌습니다.

HTML도 UI를 꾸밀수 있는 몇개의 태그와 속성들을 가지고 있지만, 이는 충분하지 않습니다. 과거에는 이러한 UI 디자인인을 작은 이미지들을 중간에 삽입을 하면서 해결을 하였지만, 이제는 CSS를 통하여 UI의 화면을 꾸며지게 되어 있습니다. 이제는 HTML 과 CSS는 하나의 세트로 같이 학습하여 웹사이트를 만드는 것이 추세입니다. CSS 학습은 별도의 사이트로 정리해 두었습니다. css 학습하기

DOM 요소와 제어하기

javascript 학습하기

참고도서

본 사이트는 HTML에 대한 간단한 정보들만을 요약하였습니다. 보다 더 상세한 HTML학습을 위해서는 다음과 같은 참고 도서를 이용하여 깊이있는 학습을 하는 것이 좋습니다.