HTML Basic

HTML이란

  • HTML(HyperText Markup Language) : 웹에서 자유롭게 오갈 수 있는 웹문서를 만드는 언어.

  • 웹표준 : 웹 사이트를 만들 때 지켜야 할 약속들을 정리한 것.

    • 일반 사용자는 장소와 브라우저에 상관없이 쉽게 웹사이트를 볼 수 있음.

    • 웹 개발자와 디자이너는 시간을 절약.

  • HTML5 & CSS3( 표준안명세 )

    • 최신 웹 표준에 맞는 웹사이트 제작

    • 앱 화면을 디자인을 위한 기초

    • 인터랙티브한 사이트를 만들 수 있음. (사용자들의 동작에 곧바로 반응하는)

    • 소스를 이해해 웹 사이트와 블로그 수정이 쉬움.

웹 브라우저와 웹 편집기

  • 웹 브라우저 : 웹 사이트를 둘러볼 때 사용하는 프로그램, 웹 편집기로 작성한 웹 문서를 화면에 표시

브라우저

제조업체

특징

크롬

구글

HTML5 표준에 가장 발 빠르게 대응하고 있어 최근에 가장 많이 사용

파이어폭스

모질라

개발자들이 자주 사용하는 웹 브라우저 , 개발 도구와 부가 기능이 뛰어남

인터넷 익스플로러

마이크로소프트

국내에서 많이 사용, HTML5에 대한 지원 취약, IE11이후 개발 되지 않고 있음.

엣지

마이크로소프트

IE대신 HTML5를 지원하기 위해 새로 개발. 윈도우 10에서 기본으로 사용하는 웹 브라우지

[HTML5test.com] : 웹 브라우저가 HTML5를 얼마나 지원하는지 알 수 있음.

  • 웹 편집기 : 웹 문서를 작성하는 프로그램

    • 텍스트 편집기 [ 메모장 ]

    • 웹 편집기[ 노트패드++ , 에디트 플러스, 텍스트 메이트, 코다, 드림위버, 비주얼 스튜디오 코드 ] : 웹을 위한 전용 편집기

    • 통합개발환경(IDE)[ 비주얼 스튜디오 2015, 웹스톰, 서브라임 텍스트] : 단순히 HTML만 사용하는 것이 아니라 자바스크립트, ASP.NET등 여러 언어들을 함께 사용.

    • 웹 기반 코드 편집기 : 웹 상에서 코드를 입력하고 결과를 바로 확인 할 수 있는 편집기

HTML 기본 문서 구조

태그(tag) : 마크업 할 때 사용하는 약속된 표기법 1. <, >을 이용해 구분 ex)<p>, <img> 2. 소문자로 쓴다. 3. <p> 여는 태그와 </p>닫는 태그를 정확히 입력 cf)<img>, <br>처럼 닫는 태그가 없는 경우도 있음. 4. 적당히 들여쓴다. (여러번 띄어쓰기를 해도 한 칸의 공백으로 인식) 5. 속성과 함께 사용할 수 있다.

<img src="imgaes/first.jpg" width="350" height="290" alt="이미지">
<!-- src, width, heigth, alt가 속성 이다. -->

  1. 포함관계를 명확히 한다.(한 태그 안에 다른 태그를 포함 할 수 있음.)

HTML기본 구조

<!-- 현재 문서가 HTML5 언어로 작성된 웹문서라는 뜻-->
<!DOCTYPE html>
<!-- 웹문서의 시작과 끝을 나타내는 태그 -->
<html>
    <!-- 웹 브라우저가 웹문서를 해석하기 위해 필요한 정보 입력(웹 브라우저 화면에 표시되지 않음.) -->
  <head>
        <!-- 문자 인코딩 및 문서 키워드, 요약 정보-->
        <!-- title 태그가 오기 이전에 문자 인코딩 방식을 먼저 선언해주는 것이 좋다.-->
      <meta charset="utf-8">
      <title>HTML 문서 제목</title>
    </head>
  <!-- 실제 웹 브라우저 화면에 나타날 내용 -->
  <body>
      <h1>시간이란..</h1>
      <p>내일 죽을 것처럼 오늘을 살고<br>
      영원히 살 것처럼 내일을 꿈꾸어라.</p>
      <img src="images/first.png">
  </body>

</html>
<!-- html 태그 이외의 내용은 검색엔진에서 인식하지 않음. -->

  • <!DOCTYPE> : 문서 유형을 지정

    • DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의한다.

    • 웹 브라우저에 우리가 제공할 HTML 문서를 어떤 HTML 버전의 해석방식으로 구조화를 하면되는지 알려주며, HTML은 크기 1, 2, 3, 4, X-, 5 버전이 있다.

    • 현재 표준 모드는 HTML5이다.

      <!-- HTML 5 -->
<!DOCTYPE html>

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • <html></html> : 웹 문서 시작을 알림

    • html 태그 내부의 내용만 브라우저에서 인식하고, 검색엔진에서 사용할 수 있다.

    • lang은 어떤 언어를 사용하는 것인지 명시할 수 있으며, 검색 사이트에서 특정 언어로 제한해 검색할 때 대상이된다.

    • ISO 639-1 코드목록

    <html lang="ko">
<!-- 한국어를 사용 할 것이라고 알릴 수 있음
   사용 언어를 명시하면 검색 사이트에서 특정 언어로 제한해 검색할 때 대상이 됨 -->

  • <head></head> : 브라우저에게 정보를 주는 태그 (화면에 보이지 않지만 웹 브라우저가 알아야 할 정보들을 모두 입력한다.)

    • <title></title> : 문서 제목 (즐겨찾기 추가시 title태그 안의 내용으로 추가되며, Tab상단에 타이틀로 노출된다.)

    • <meta> : 문자 인코딩 및 문서 키워드, 요약 정보

      <meta name="description" content="여기에 사이트에 대한 짧은 설명" charset="인코딩 방식">

      • charset : 문자 인코딩되는 방식 설정

      • content : http-equiv와 name 특성값을 담는다.

      • mdn meta tag

      <!-- 문자 인코딩 설정 -->
<meta charset="UTF-8" >
<!-- 반응형 웹사이트를 위해 필요한 meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 작성자 -->
<meta name="author" content="dh0023">
<!-- 사이트에 대한 간략한설명 -->
<meta name="description" content="meta tag practice example">
<!-- ie 브라우저를 지원하기 위해 필요한 경우 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

    • <link> : 외부 문서 가져오는 태그

      <link href="외부 문서 파일 경로" rel="relationship" type="해당 외부 문서 타입">

      • href : 링크된 리소스의 절대/상대적 경로

      • hreflnag :링크된 리소스의 언어이며 언어가 다른 경우에만 사용하면 된다. 일반적으로는 생략

      • rel : 링크와 문서의 관계 ( stylesheet, icon 등)

      • MDN link

    • <style> : 내부 스타일 시트 정의 웹 문서 안에서 사용할 스타일

      • body 태그 내부에도 작성해도 무관하나, <head></head> 내부에서 정의하는 것이 좋다.

      <style>
  css 정보 
</style>

    • mime type : MDN MIME type 에서 명시적으로 type을 선언해줘야하는 경우에 종류를 확인할 수 있다.

    • <base> : 문서 안의 모든 상대 URL이 사용할 기준을 정하며, 문서에 하나의 <base> 요소만 존재한다.

      <base href="경로">

  • <body></body> : 실제 브라우저에 표시될 내용

특수 문자 및 특수 기호 사용하기

화면표시

특수기호

화면표시

특수기호

&

&amp;

공백 한 칸

&nbsp;

<

&lt;

>

&gt;

"

&quot;

ㅣ

&#124;

(

&#40;

)

&#41;

,

&#44;

-

&#45;

'

&acute;

웹 문서 살펴 보기

서버컴퓨터에 웹 문서를 옮겨야 다른 사람이 볼 수 있다. 닷홈[무료 호스팅 서비스]

  • FTP(File Transfer Protocol) : 서버와 클라이언트간에 파일을 주고 받을 수 있게 해주는 파일 전송 프로토콜 [FileZilla]

  • 위지위그 편집기(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다

참고

PreviousUdacity - Responsive ImagesNextCSS Basic

Last updated