[Do it! HTML5+CSS3 웹 표준의 정석] 01. HTML 기본 다지기

이지스퍼블리싱 고경희님의 [Do it! HTML5+CSS3 웹 표준의 정석] 교재를 보고 정리한 필기입니다.
(참고 및 복습 목적으로 포스팅하였습니다.) 교재 보러가기

📌 1. HTML과의 첫 만남

HTML이란 무엇일까?

• 일반 문서 : 내용을 입력하는 프로그램 = 내용을 확인하는 프로그램

• 웹문서 : 문서를 작성하는 프로그램 ≠ 내용을 확인하는 프로그램

  작성하는 프로그램 : 웹 편집기(web editor)
  보는 프로그램 : 웹 브라우저(web browser)

HTML은 HyperText Markup Language의 줄임말로, 하이퍼텍스트를 마크업하는 언어이다.
즉, 웹에서 자유롭게 오갈 수 있는 웹문서를 만드는 언어가 HTML입니다.

※ HyperText(하이퍼텍스트) : 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능
    Markup(마크업) : 태그(tag)를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것

• 예시

  웹 브라우저 화면에 보이는 웹 문서를 메모장에서 열어 보면 문서의 소스를 볼 수가 있습니다.
  소스에서 꺽쇠 괄호(<, >)로 묶인 부분이 ‘HTML 태그(tag)’이고 이렇게 태그를 붙이는 것을 ‘마크업’이라고 합니다.

  

웹 표준이란 무엇일까?

• HTML5을 웹 표준 기술이라고 합니다.

• 왜 웹 표준이 필요할까?

  웹 표준은 웹 사이트를 만들 때 지켜야 하는 약속들을 정리한 것으로,

  일반 사용자는 장소나 브라우저와 상관없이 쉽게 웹 사이트를 볼 수 있고
  웹 개발자와 디자이너들은 시간을 절약할 수 있습니다.

왜 HTML5와 CSS3를 공부해야 할까?

• 최신 웹 표준에 맞는 웹 사이트를 제작할 수 있습니다.
• 앱 화면을 디자인하기 위한 기초입니다.

• 스스로 이해해 웹 사이트와 블로그를 수정하기 쉽습니다.

  특히, 사이트나 블로그가 브라우저 화면에 보이는 모습을 바꾸고 싶다면 반드시 CSS을 알아야 합니다.

※ 2014년 11월부터 HTML5을 ‘HTML’이라는 이름으로 사용하고 있습니다.

📌 2. 웹 브라우저와 웹 편집기

웹 브라우저 종류와 HTML5 지원 정도

• 웹 브라우저 : 웹 사이트를 볼 때 사용하는 프로그램
• ex) 구글 ‘크롬’, 모질라 ‘파이어폭스’, 마이크로소프트 ‘인터넷 인스플로러’, 마이크로소프트 ‘엣지’

웹 편집기의 종류

• 웹 편집기(web editor) : 웹 문서를 작성할 때 HTML 태그를 입력하는 프로그램
• ex) 텍스트 편집기(메모장), 웹 편집기(권장), 통합개발환경(IDE), 웹 기반 코드 편집기 ※ 이 책에서는 비주얼 스튜디오 코드를 사용합니다.

📌 3. HTML 기본 문서 구조

태그, 이건 꼭 알아두세요!

문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것을 Markup(마크업)이라고 하는데,
마크업할 때 사용하는 약속된 표기법을 '태그(tag)'라고 합니다.

• 태그는 <와 >를 구분합니다.

  웹 문서 소스에는 태그뿐만 아니라 웹 문서의 내용까지 함께 들어 있지만 <와 >로 묶인 부분이 HTML 태그입니다.

• 태그는 소문자를 씁니다.

• 여는 태그와 닫는 태그를 정확히 입력합니다.

  img나 br 태그처럼 닫는 태그가 없는 경우도 있지만 닫는 태그가 필요한 태그에서는 반드시 닫는 태그를 삽입해야 합니다.

• 적당히 들여 씁니다.

  HTML 태그는 기본 속성상 여러 번 띄어쓰기를 하더라도 한 칸의 공백으로 인식합니다.

• 태그는 속성과 함께 사용할 수 있습니다.

  <태그 속성=”속성 값” 속성=”속성 값” …> 형태로 사용할 수 있습니다.
  각 태그에서 사용할 수 있는 속성들이 다르기 때문에 태그와 속성을 함께 익혀두어야 합니다.

  <img src="images/first.jpg" width="350" height="290" alt="시계 이미지">
  

• 포함 관계를 명확히 합니다.

  한 태그 안에 다른 태그를 포함시킬 수 있습니다.

✒️ 간단한 HTML 문서 만들기

• 에밋(Emmet)

  비주얼 스튜디오 코드에서는 웹 문서 태그를 자동으로 입력해 주는 에밋(Emmet) 기능이 있습니다.
  

  ① 문서의 1번 줄을 클릭한 후
  ② !(느낌표)를 입력하고
  ③ Tab키를 누르세요.

  ※ 기능 설정 방법
  파일(File) > 기본 설정(Preferences) > 설정(Settings) > 확장(Extensions) > Emmet > Trigger Expansion On Tab 체크

  

• 코드

  <!DOCTYPE html>
  <html lang="ko">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>내가 처음 만드는 HTML 문서</title>
  </head>
  <body>
      <h1>시간이란...</h1>
      <p>내일 죽을 것처럼 오늘을 살고<br>
      영원히 살 것처럼 내일을 꿈꾸어라. </p>
      <img src="images/first.jpg">  
  </body>
  </html>
  

• 출력 화면

HTML 문서 기본 구조 살펴보기

• 웹

📓 개인 기록용 블로그입니다.
오류가 있을 경우 언제든지 댓글 혹은 메일로 말씀해주시면 감사하겠습니다!

BACK TO TOP ↑