frontend HTML 프로그래밍 기초

실습 예제 모음

1장. 월드와이드웹과 HTML

예제 1-1) 웹페이지 요청하기와 소스 보기

본 예제에서는 url 을 이용해 원하는 웹페이지를 직접 요청하는 과정을 통해 웹의 기본적인 동작구조인 request -> response 개념을 살펴보게 됩니다. 또한 웹브라우저 화면에 보이는 콘텐츠의 소스 보기를 통해 서버에서 전달된 원본 콘텐츠는 텍스트형식으로 된 html 구조라는 것을 확인해 봅니다.

step-1> 웹브라우저 실행하기

크롬 웹브라우저를 실행 합니다. 인터넷 익스플로러/엣지 브라우저도 상관없으나 모든 설명은 크롬을 기준으로 합니다.

step-2> url 입력하기

- 웹프라우저 상단의 URL 창에 다음의 주소중 하나를 입력하고 엔터를 칩니다.
- http://www.naver.com
- http://www.apple.com

step-3> 소스 보기

- 웹브라우저 화면에서 오른쪽 마우스를 눌러 페이지 소스보기를 선택합니다.
- 보이는 텍스트들이 현재 화면을 구성하고 있는 html 소소 입니다.

웹페이지 소스보기

예제 1-2) HTML 기본문서 작성과 실행하기

본 예제에서는 HTML 파일을 생성하고 HTML 문서의 기본 구조를 작성해 봅니다.

step-1> Visual Studio Code 실행

step-2> html 소스코드 작성

다음과 같이 html 코드를 작성합니다. 들여쓰기는 프로그램 소스 작성시 가독성 향상을 위해 중요한 요소 이므로 탭 키를 이용해 반드시 들여쓰기를 하 수 있도록 합니다.

1-2.html

step-3> 실행 및 결과 확인

파일을 선택후 오른쪽 마우스를 눌러 open in browser 메뉴를 선택해 브라우저에서 실행결과를 확인 합니다. 메뉴가 보이지 않을 경우 공통기초->개발환경구축하기 를 다시 참조해 해당 플러그인을 설치후 진행하기 바랍니다.

소스 실행

2장. HTML 기본 태그

예제 2-1) 제목과 문단 태그 활용

본 예제에서는 <h1>부터 <h6>까지 있는 다양한 h태그들과 문단을 나타내는 <p>태그 및 개행을 하는 <br>태그를 이용하여 웹 문서를 작성해봅니다.

2-1.html

실행 결과

예제 2-2) 텍스트 관련 태그 활용

본 예제에서는 텍스트 관련 태그들에는 무엇이 있는지 살펴보고, 각 태그들에 의해 텍스트가 어떻게 변하는지를 살펴봅니다.

2-2.html

실행 결과

예제 2-3) 목록 만들기

본 예제에서는 순서가 있는 목록과 순서가 없는 목록, 두 가지를 작성해봅니다. 또한 type속성을 통해 목록 앞의 불릿이 어떻게 바뀌는지도 확인해봅니다.

2-3.html

실행 결과

예제 2-4) 하이퍼링크 활용

본 예제에서는 <a>태그를 통해 하이퍼링크를 사용해봅니다. <a>태그의 기본적인 사용법을 살표보고 target속성에 대해 알아봅니다. 가천대학교로 연결하는 하이퍼링크를 만들어보는 코드입니다. 파일을 생성하고 하이퍼링크를 만들기 위해 다음과 같이 html 코드를 작성합니다.

2-4.html

실행 결과

링크 실행

예제 2-5) 책갈피 구현 하기

<a>태그를 통해 본문 내에서 특정한 위치로 이동하는 책갈피 기능을 사용해봅니다.

커피숍 메뉴판에서 원하는 항목으로 이동시켜주는 책갈피 기능을 만들어보는 코드입니다. 파일을 생성하고 <ul>을 통해 메뉴판을 만들고 <a>태그를 이용하여 책갈피 기능을 만들기 위해 다음과 같이 html 코드를 작성합니다.

2-5.html

실행 결과

4-2결과

예제 2-6) 인라인, 블럭 태그 차이

인라인, 블럭 태그의 차이를 살펴 봅니다. 대표적인 블럭 태그인 <div> 와 인라인 태그인 <span> 을 사용해 각각의 특징을 확인 합니다.

2-6.html

실행 결과

3장. 이미지와 테이블

예제 3-1) 이미지 태그 활용 - url

<img>태그를 통해 이미지를 보여줍니다. 인터넷에 있는 이미지를 이미지 주소를 통해 본문에 추가해보고 크기를 조정해봅니다. 또한 alt 속성을 직접 사용해보고 어떻게 나타나는지 확인합니다.

step-1> 이미지 준비

웹 사이트에서 원하는 이미지를 찾습니다. 원하는 이미지를 우클릭하고 이미지 주소 복사를 클릭해 이미지의 주소를 복사합니다.

이미지 찾기

step-2> html 소스코드 작성

파일을 생성하고 이미지를 본문에 추가하기 위해 다음과 같이 코드를 작성합니다. img태그의 src속성에는 복사해두었던 이미지의 주소를 넣어줍니다.

3-1.html

step-3> 실행 및 결과 확인

브라우저에서 실행결과를 확인 합니다.

3-1결과

step-4> 이미지 크기 조절

이미지의 크기를 임의적으로 조절해봅니다. 높이와 너비의 조절을 위해 다음의 코드가 추가 되었습니다. width, height 를 제거 하면 원본 크기로 나타납니다.

<img src="https://t1.daumcdn.net/cfile/tistory/17441F41509D287F03" width="100px" height="100px">

step-5> alt 속성 적용

alt속성의 적용 여부를 확인하기 위해 이미지의 주소를 일부로 틀리게 설정해봅시다.

<hr>
<img src="https://XXX" alt="가천대 로고">

step-7> 실행 및 결과 확인

브라우저에서 실행결과를 확인 합니다. 이미지가 오류 등으로 인해 보여지지 않을 경우, alt속성의 값이 이미지 대신 표시됩니다.

실행결과

예제 3-2) 이미지 태그활용 - 로컬이미지

컴퓨터에 저장되어있는 로컬이미지를 본문에 추가해봅니다.

step-1> img 폴더 생성하기

step-2> html 소스코드 작성

파일을 생성하고 이미지를 본문에 추가하기 위해 다음과 같이 코드를 작성합니다.

step-4> 실행 및 결과 확인

브라우저에서 실행결과를 확인 합니다.

예제 3-3) 테이블 만들기

<table>태그 및 <td>, <tr>, <th> 태그들을 이용하여 테이블을 만들어봅니다.

인적사항이 정리되어 있는 테이블을 작성하는 코드입니다. 파일을 생성하고 <table>을 통해 테이블을 만들고 <tr>태그를 이용하여 테이블의 행을, <td>태그를 이용하여 각 행의 요소를 생성하기 위해 다음과 같이 html 코드를 작성합니다.

3-3.html

실행 결과

테이블 병합

4. 입력양식

예제 4-1) 입력양식 활용 - 검색창 만들기

form을 이용하여 text입력창과 제출버튼으로 이루어진 검색창을 만들어봅니다.

4-1.html

파일을 생성하고 form태그 안에 <input type="text">로 텍스트 입력란을, <input type="submit">로 전송 버튼을 만들기위해 다음과 같이 html 코드를 작성합니다.

step-2> 실행 및 결과 확인

브라우저에서 실행결과를 확인 합니다.

입력양식예제

Quiz-1) 테이블 병합

이번 문제는 복잡한 테이블 구조를 직접 구현해 보는 퀴즈 입니다. 실행결과를 보고 동일한 결과가 나올 수 있도록 <table>태그를 이용해 코드를 작성 합니다.

실행 결과

5-4결과

힌트 보기

  • colspan 과 rowspan 을 이용.
  • 시작 td를 중심으로 합쳐지는 td 나 tr은 작성 하지 않음.
  • 테이블 크기 지정: <table width="300px" height="300px">.

Quiz-2) 가입 신청서 만들기

다양한 입력 양식을 이용해 간단한 회원가입 신청서를 만드는 예제 입니다.

실행 결과

6-2결과

힌트 보기

  • 드롭다운 목록은 <select> 태그를 사용.
  • 라디오버튼과 체크박스는 그룹을 만들기 위해 name 속성을 동일하게 사용.