본문 바로가기
전공 공부/HTML5 + CSS3

HTML5+CSS3 1. HTML 기본

westpearl 2020. 7. 22. 17:54

  1. HTML이란?

    • 확장자가 .html인 문서

    • 일반 문서와 웹 문서의 차이점 : 일반 문서는 내용을 입력하는 프로그램과 나중에 그 내용을 확인하는 프로그램이 같지만 웹 문서는 문서를 작성하는 프로그램과 그 내용을 보는 프로그램이 서로 다름.

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

      • 웹 문서를 보는 프로그램 : 웹 브라우저(web browser) ex) 인터넷 익스폴로러, 엣지, 크롬, 파이어폭스

    • HTML은 하이퍼텍스트 마크업 랭귀지의 줄임말 --> 하이퍼텍스트를 마크업하는 언어.

      • 하이퍼텍스트 : 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능.

      • 마크업 : 태그를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것

        따라서, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML

  2. 웹 표준이란?

    HTML5를 웹 표준 기술이라고함, 웹 표준을 지켜 사이트를 제작하면 일반 사용자는 장소, 브라우저 상관없이 쉽게 웹 사이트를 볼 수 있고 웹 개발자와 디자이너들은 시간을 절약할 수 있음.

    HTML5로 문서를 만드는 것이 웹 표준을 지킨 문서를 만드는 기본임

  3. HTML5와 CSS3를 공부해야하는 이유

    1. 최신 웹 표준에 맞는 웹 사이트를 제작할 수 있다.

      • 어떤 기기로 접속하는 웹 사이트의 내용을 제대로 보여주려면 모든 기기에서 지킬 수 있는 약속,즉 웹 표준이 필요한데 그것이 HTML5이고, CSS3를 사용하면 사용자가 접속한 기기에 따라 사이트 레이아웃을 다양하게 바꿀 수 있음 --> 이런 디자인 기법을 '반응형 웹 디자인' 이라고 함

    2. 앱 화면을 디자인하기 위한 기초이다.

      • HTML5와 CSS3가 주목 받는 이유는 전문가들이 사용하는 프로그래밍 언어를 사용하지 않아도 HTML5를 이용해 누구나 application을 만들 수 있기 때문

      • iOS나 안드로이드 같은 운영체제 별로 따로 모바일용 앱을 개발 (네이티브앱) or HTML5의 API를 사용해 모바일 운영체제와 상관없이 실행하는 '웹앱'을 만들 수도 있음.

      • 네이티브앱이든, 웹앱이든 사용자에게 보여주는 앱 화면은 최신 웹 표준인 HTML5와 CSS3를 사용해 디자인 해야한다.

    3. 인터랙티브한 사이트를 만들 수 있음

      • HTML5와 CSS3를 함께 이용하면 인터랙티브한 사이트를 제작할 수 있음.

      • 예를들어 웹 사이트에 동영상을 삽입하려면 예전에는 플래시로 만들거나 기타 다른 외부 프로그램을 사용해야 했지만 HTML5의 <video> 태그를 이용하면 두세 줄의 소스만으로 간단히 동영상을 삽입하고 제어할 수 있음

    4. 소스를 이해해 웹 사이트와 블로그를 수정하기 쉽다.

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

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

    • 크롬 : 구글 / 빠른 업데이트를 통해 HTML5표준에 가장 발 빠르게 대응 -> 최근 가장 많이 사용되는 브라우저

    • 파이어폭스 : 모질라 / 일반 사용자들보다 개발자들이 자주 사용하는 웹 브라우저로 개발 도구와 부가 기능이 뛰어남

    • 인터넷 익스플로러 : 마이크로소프트 / HTML5에 대한 지원은 취약하지만 아직까지 인터넷 익스플로러를 기준으로 하는 사이트가 많기 때문에 국내에서 많이 사용되고 있음.

    • 엣지 : 마이크로소프트 / 마이크로 소프트에서 인터넷 익스플로러 대신 HTML5를 지원하기 위해 새로 개발해 윈돈우 10에서 기본으로 사용하는 웹브라우저.

  5. 프론트엔드와 백엔드

    웹을 제작할 때는 '프론트엔드'와 '백엔드'로 나누어 개발함.

    • 프론트엔드 : 사용자와 직접 마주하는 부분을 가리키는것, 웹 브라우저 화면에 사이트 내용을 보여주는 것. -기술 : HTML, CSS

    • 백엔드 : 회원제 사이트의 사용자 정보나 게시판의 게시물 내용을 저장하고 수정, 삭제 하는 부분.

  6. 웹 편집기의 종류

    웹 문서를 만들 때 HTML태그를 입력하는 프로그램을 '웹 편집기'라고 함.

    • 텍스트 편집기 : 적절한 프로그램x, HTML태그에 익숙하다면 메모장을 이용해서 작성할 수도 있음. 태그 일일이 직접 입력해야하기 때문에 오류 발생하기 쉽다.

    • 웹 편집기 : 웹을 위한 전용 편집기. 태그와 속성, 일반 텍스트 등을 서로 다른 색으로 표시해주므로 소스를 읽기 쉽고 편집기에 따라 태그나 속성의 일부만 입력해도 전체를 완성해주기 때문에 오타로 인한 문제를 줄일 수 O, ex) 노트패드 ++, 에디트 플러스 , 텍스트 메이트, 코다, 드림위버, 비주얼 스튜디오 코드

    • 통합개발환경(IDE) : 웹을 개발할 때 대부분 단순히 HTML만 사용하는 것이 아니라 자바스크립트나 ASP.NET, PHP, node.js 등 여러 언어들을 함께 사용. 웹 IDE는 웹 편집기의 편리함과 함께 사용자에게 필요한 개발 환경을 한꺼뻔에 구축, 사용할 수 있게 해줌. ex) 비주얼 스튜디오 2015, 웹스톰, 서브라임 텍스트

    • 웹 기반 코드 편집기 : 웹 상에서 소스코드를 입력하고 결과를 바로 확인할 수 있는 편집기이다. 웹 코딩을 위한 시스템 환경을 만들거나 별도의 편집기 프로그램 이용하지 x, 브라우저 화면에 코드를 입력하고 결과를 볼 수 있따는 장점이 있음. ex) Codepen, JSFiddle, Liveweave, Plunker

  7. HTML 기본 문서 구조

    1. 태그는 < 와 > 를 이용해 구분함

      • ex) 이미지 삽입할 때, 'image'의 약자인 'img'를 <와>사이에 표시 -> <img>라는 태그 사용.

      • ex) 텍스트 문단을 삽입할 때, 'paragraph'의 약자인 'p'를 사용 -> <p> 라는태그 사용.

    2. 태그는 소문자로 씀.

    3. 여는태그, 닫는태그 정확히 입력

    4. 적당히 들여 씀 - Tab 키 이용

    5. 태그는 속성과 함께 사용할 수 있음.

      • ex) 웹 문서에 이미지를 삽입할 경우, <img> 태그를 사용하는데 <img> 태그에는 이미지 파일의 경로를 알려주는 src 속성과 이미지의 크기를 알려주는 width 속성, height속성, 이미지에 보조 설명을 붙여주는 alt속성 등 여러가지 속성들이 함께 사용됨 --> <img src="images/first.jpg" width="350" height="290" alt="시계 이미지">

    6. 포함 관계를 명확히 함

  8. <!DOCTYPE html>

    <html>

    <head>

        <meta charset="utf-8" />

    <title>내가 처음 만드는 HTML 문서</title>

    </head>

    <body>

    <h1>시간이란..</h1>

    <p>

    내일 죽을 것처럼 오늘을 살고<br />

    영원히 살 것처럼 내일을 꿈꾸어라.

    </p>

        <img src="images/first.jpg" />

    </body>

    </html>

    1. \<!doctype html> - 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻

    2. \<html> ~ \</html> - 웹 문서의 시작과 끝을 나타내는 태그.

      • <html lang="ko"> , <html> 태그에서는 lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있음.

      • de: 독일어, en: 영어, fr: 프랑스어, ja: 일본어, ko:한국어, zh: 중국어

      • 굳이 사용 언어를 명시하는 이유는? 검색사이트에서 특정 언어로 제한해 검색할 때 그 대상이 될 수 있기 때문임. 예를 들어, 검색결과 중 '한국어로 된 문서' 로 범위를 제한할 경우, <html lang="ko">라고 된 문서를 우선검색.

    3. \<head> ~ \</head> - 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분. 여기에 있는 정보는 실제 문서 내용이 아니기 때문에 문서 제목만 브라우저 창에 표시되고 나머지는 웹 브라우저 화면에 표시되지 않음. 스타일 및 스크립트 등이 포함되기도 함.

      • 웹 브라우저에서 보이지 않지만, 웹 브라우저가 알아야 할 정보들은 모두 <head> 부분에 입력. 문서에서 사용할 외부 파일들도 이곳에서 링크.

      • \<title> 태그 - 문서제목

        • \<title> 태그에 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시,

        • ex) <title> 문서제목 </title>

      • \< meta> 태그 - 문자 인코딩 및 문서 키워드, 요약정보

        • \<meta> 태그는 화면에 글자를 표시하는 문자 인코딩 방법을 비롯해 웹 문서 키워드 등을 지정할 수 있음

        • ex) <meta charset="utf-8">

        • \<meta> 태그를 이용해 문서에 대한 간단한 설명을 지정할 수 있음

        • ex) <meta name="description" content="여기에 사이트에 대한 짧은 설명을 입력합니다">

    4. \<body> ~ \</body> - 실제로 웹 브라우저 화면에 나타날 내용. 앞으로 우리가 공부하게 될 HTML 태그들은 대부분 \<body> 태그 안에 들어감.

  9. 웹 문서 마들고 업로드하기

    • 호스팅 서버 준비

티스토리툴바