STS 121::HTML 프로그래밍 기초

1. 월드와이드웹과 HTML


이번 강좌에서는 프론트엔드 프로그래밍의 근간이 되는 월드와이드웹을 살펴보고 월드와이드웹 콘텐츠 제작을 위해 필수적인 HTML 의 기본 개념과 구조등을 살펴봅니다.

이 강의를 통해 월드와이드웹의 기본 개념과 HTML 문서의 기본 구조를 이해하고 css, javascript 와의 관계를 배우게 됩니다.


01: 월드와이드웹(WWW: World Wide Web)

월드와이드웹은 1989년 유럽물리입자연구소(CERN)의 팀 버너스-리에 의해 개발되어 보편적인 인터넷 서비스로 확대되었습니다. 인터넷은 전세계를 하나로 연결해주는 물리적인 네트워크망으로 TCP/IP라고 하는 통신프로토콜(규약)에 의해 동작 합니다. 월드와이드웹은 대표적인 인터넷 서비중 하나로 언제 어디서나 접속 가능한 정보 서비스 입니다.

html_1-1

웹 프로그래밍 구조

월드와이드웹 서비스를 제공하기 위해서는 서버 컴퓨터와 서버에서 동작하는 일련의 프로그램들이 필요 합니다. 서버에서 동작하는 프로그램 영역을 백엔드(Backend) 라고 합니다.

서비스를 이용하는 쪽은 클라이언트 라고 하며 클라이언트는 스마트폰, 데스크탑 이 대표적입니다. 최근에는 냉장고나 TV에도 인터넷 접속을 위한 모니터가 탑재되어 있는 경우도 있습니다. 클라이언트에서 월드와이드웹 서비스를 이용하려면 웹브라우저 라고 하는 소프트웨어가 필요하며 클라이언트에서 동작하는 프로그램 영역을 프론트엔드(Frontend) 라고 합니다.

html_1-1-1

참고 동영상 강좌

참고 자료

퀴즈

1) 월드 와이드 웹이란 무엇인가

해답보기

다양한 형태의 데이터와 정보에 접근할 수 있도록 해주는 인터넷 서비스

2) 웹과 인터넷에 대해 서술하시오

해답보기

인터넷은 컴퓨터 네트워크 망을 의미하고, 웹은 인터넷 서비스 중 하나입니다.


02: HTML, CSS, JavaScript

html_1-2-1

앞에서 설명한것 처럼 HTML, CSS, JavaScript는 프론트엔드 즉 클라이언트 영역을 구성하는 핵심 프로그램 기술들 입니다. 이들은 개별적으로 사용하지 않고 HTML을 중심으로 각각의 역할에 맞게 기능을 구현해 통합해서 사용하게 됩니다.

HTML(Hyper Text Markup Language)

CSS(Cascading Style Sheet)

JavaScript

다음은 html 만으로 이루어진 콘텐츠와 css 가 적용된 실제 사례 입니다. 왼쪽은 네이버 소스에서 css 부분만 제거한 것이고 오른쪽은 css 를 포함해 디자인을 적용한 화면입니다. 기본 소스는 수정하지 않고 css포함 부분 3줄만 제거한 것으로 css 에 따라 화면이 완전히 새롭게 구성되는 것을 확인할 수 있습니다.

디자인이 적용된 화면에서 실시간으로 변하는 날씨나 인기검색어, 뉴스 속보, 변하는 광고이미지 등이 자바스크립트로 동작하는 것입니다.

html_1-2-2

참고 동영상 강좌

참고 자료

퀴즈

1) HTML은 무엇의 약자인가

해답보기

  • HyperText Markup Language

03. HTML 태그

태그

HTML의 기본 구성요소는 태그(Tag) 이며 태그는 < >를 사용하여 나타냅니다. 태그는 일반적으로 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으며, 종료태그 앞에는 /을 붙여줍니다. 태그의 이름은 규칙으로 정해져 있고 태그마다 역할이 다릅니다.

<시작태그 속성="값" 속성="값"...>태크콘텐츠</종료태그>
<!-- 주석 입니다. -->
<body>
<h2>Hello World</h2>
<hr>
</body>

속성

속성은 HTML 태그에 부가적인 정보를 제공하는 방법 입니다. 예를 들어 그림을 넣기 위해 사용하는 <img> 태그의 경우 그림파일의 위치를 지정하기 위한 src 속성이 있습니다.

<img src="/img/smile.jpg" width="500" height="300">

동영상 강좌

참고 자료

퀴즈

1) 옳게 태그를 사용한 것은 무엇인가

  1. <p>안녕하세요.
  2. <strong><p>안녕하세요<strong><p>
  3. <p>안녕하세요</p>
  4. 안녕하세요.</strong>
해답보기

  • 정답 : 3번

    [1번] <p>안녕하세요. : 태그는 일반적으로 시작과 끝을 표시하는 2개의 쌍으로 이루어져야 합니다.
    [2번] <strong><p>안녕하세요<strong><p> : 태그 안에 다른 태그가 들어 갈 수 있으나 연 순서대로 닫아야 합니다.
    [4번] 안녕하세요.</strong> : 태그는 일반적으로 시작과 끝을 표시하는 2개의 쌍으로 이루어져야 합니다.

2) HTML에서 주석은 어떻게 사용 하는가

해답보기

<!-- 저는 주석입니다. -->

04: HTML 기본 문서 구조

HTML 문서의 기본 골격은 <!DOCTYPE html>, <HTML>, <HEAD>, <TITLE>, <BODY> 태그로 이루어져 있습니다.

html_1-4-1

레이아웃

레이아웃은 화면의 구성요소들을 배치하는 것을 말하는 것으로 웹페이지 디자인을 시작할때 제일 먼저 해야하는 작업입니다. 레이아웃 자체를 표현하는 것은 CSS 영역 이지만 문서의 구조를 레이아웃에 맞춰 설계하는 것은 HTML에서 해야하는 일입니다. 보통 <div> 태그를 이용해 구획을 나누기도 하고 HTML5의 시멘틱태그를 이용하기도 합니다.

html 레이아웃

참고 동영상 강좌

참고 자료

퀴즈

1) HTML의 기본 구조를 서술하시오.

해답보기

<!DOCTYPE html>
<html>
    <head>
    <title> </title>
    </head>
    
    <body>

    </body>
</html>

2) Head에는 어떠한 것이 들어가는가

해답보기

title 태그, meta 태그, 자바 스크립트 및 스타일시트 정의


05: 실습 예제

기본 실습은 통합실습페이지에서 한꺼번에 다루고 있습니다. 아래의 링크를 클릭하면 새창(탭)이 열리고 해당 예제로 이동하게 됩니다.


06: 참고 자료