본문 바로가기
Code/길벗 학습단 16기 - HTML

길벗 학습단 16기 - HTML통합 - 1주차 학습인증

by Beyonder 2025. 8. 10.

https://www.yes24.com/product/goods/108748709

 

코딩 자율학습 HTML + CSS + 자바스크립트 - 예스24

코딩을 몰라도 걱정 제로, 이 책 하나로 충분히 웹 개발을 시작할 수 있다!이 책은 코딩 초보자가 문법을 빠르고 재밌게 배울 수 있도록 실무에서 주로 사용하는 내용을 쏙쏙 골라 다양한 예제와

www.yes24.com

 

1주차
1일
2일
3일
4일
5일
목차
1장 Hello, HTML + CSS + 자바스크립트
1.1 개발 환경 설정하기
1.2 첫 번째 HTML 문서 만들기
2장 HTML 문서 작성을 위한 기본 내용 살펴보기
2.1 HTML의 기본 구성 요소
2.2 HTML의 기본 구조
2.3 HTML의 특징 파악하기
3장 실무에서 자주 사용하는 HTML 필수 태그 다루기
3.1 텍스트 작성하기
3.2 그룹 짓기
3.3 목록 만들기
3.4 링크와 이미지 넣기
3.5 텍스트 강조하기
3장 실무에서 자주 사용하는 HTML 필수 태그 다루기
3.6 폼 구성하기
3.7 표만들기
3.8 멀티미디어 설정하기
3.9 웹 페이지 구조를 설계하는 시맨틱 태그
3.10 태그의 종류에 상관없이 사용하는 글로벌 속성
4장 웹 스타일링을 위한 CSS 기초 배우기
4.1 CSS 문법 살펴보기
4.2 CSS 적용하기

 

Part 1 HTML로 웹 구조 설계하기

 

1장 Hello, HTML + CSS + 자바스크립트

 

_1.1 개발 환경 설정하기

1.1.1 코드 작성을 위한 코드 에디터 설치하기

  • 모든 체크박스를 선택

1.1.2 VSCode 확장 프로그램 설치하기

  • Live Server/Ritwick Dey: 작성한 HTML 코드를 실시간으로 확인할 수 있는 확정 프로그램
  •  Auto Rename Tag/Jun Han: 시작 태그와 종료 태그를 자동으로 수정
  • HTML to CSS autocompletion/sonurkarim: HTML 문서에서 class 속성으로 작성한 값을 연결된 CSS 파일에서 자동 완성도되록 지원
  • HTML CSS Support/ecmel: CSS 파일에서 작성한 클래스나 아이디 선택자 값을 연결된 HTML 문서 id 속성과 class 속성값으로 적을 때 자동 완성 지원
  • Code Runner/Jun Han: 자바스크립트 코드의 실행을 VSCode 내부에서 할 수 있게 지원.  자바스크립트 공부시 유용

1.1.3 실행을 위한 웹 브라우저 설치


_1.2 첫 번째 HTML 문서 만들기

2장 HTML 문서 작성을 위한 기본 내용 살펴보기


_2.1 HTML의 기본 구성 요소

2.1.1 태그

<태그명>

2.1.2 속성

<태그명 속성명="속성값">

2.1.3 문법

  • 콘텐츠가 있는 문법
  • 콘텐츠가 없는 문법
    • <br>

2.1.4 주석

<!-- 주석 내용 -->


_2.2 HTML의 기본 구조

2.2.1 DTD

Document Type Definition:  항상 처음에 넣어야 함.

<!DOCTYPE html>

2.2.2 html 태그

HTML 문서의 시작과 끝.  모든 태그는 html 태그 안에 작성.

2.2.3 head 태그

  • meta 태그: 메타데이터 정의에 사용
<meta charset="UTF-8">
  • title 태그 - 모든 문서의 제목을 지정.  반드시 1개의 title을 사용하고, HTML문서마다 중복되지 않도록 주의 (구글 검색엔진에서 신뢰도 영향)
<title>My First Web Page!</title>

 

2.2.4 body 태그

웹 브라우저에 노출되는 모든 내용.


_2.3 HTML의 특징 파악하기

2.3.1 블록 요소와 인라인 요소

2.3.2 부모, 자식, 형제 관계

 

2.3.3 줄 바꿈과 들여쓰기



3장 실무에서 자주 사용하는 HTML 필수 태그 다루기


_3.1 텍스트 작성하기

3.1.1 hn 태그

제목이나 주제를 나타내는 텍스트를 표현할 때 사용.  n에 들어가는 숫자는 중요도를 표시.

3.1.2 p 태그

본문의 문단(paragraph) 작성에 사용

3.1.3 br 태그

문단에서 줄 바꿈에 사용

3.1.4 blockquote 태그

출처에서 인용한 문단 단위의 텍스트 작성에 사용.  출처가 확실한 인용문은 cite 속성으로 출처 경로를 명시해야 함.

  • 반드시 한 개 이상의 p 태그를 포함해야 함.  그래서 p태그 내용에 blockquote는 포함할 수 없음을 주의.

3.1.5 q 태그

문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용.  해당 콘텐츠는 큰따옴표(" ")로 묶임.

3.1.6 ins와 del 태그

각각 새로 추가된 텍스트임을 나타낼 때, 삭제된 기존 텍스트임을 나타낼 때 사용.  ins에는 밑줄이, del에는 취소선이 생김.

3.1.7 sub와 sup 태그

각각 아래 첨자, 위첨자에 사용.

_3.2 그룹 짓기

3.2.1 div 태그

블록 요소와 인라인 요소를 그룹으로 묶을 때 사용

3.2.2 span 태그

인라인 요소를 그룹으로 묶을 때 사용

 

_3.3 목록 만들기

목차와 메뉴를 구성할 때 주로 사용.  사용가능 태그는 ul, ol, dl 태그가 있음.

3.3.1 ul 태그

비순서형 목록에 사용.  목록 내용은 li(list item) 으료 구성

 

 

 

3.3.2 ol 태그

ol(ordered list) 순서형 목록을 생성.  ul태그와 마찬가지로 li태그로 목록 내용 구성.

3.3.3 dl 태그

dl(description list) 태그는 정으형 목록을 만들 때 사용.  용어와 용어 설명을 나열한 형태의 목록.  dl태그는 li 태그 대신 dt(description term) 태그를 용어로, dd(dexcription details) 태그로 용어 설명을 작성

 

_3.4 링크와 이미지 넣기

링크(Link)는 문서와 문서 간 연결을 의미.  기본적으로 a 태그를 사용.  사진과 같은 이미지 객체에는 img 태그로 작성.

3.4.1 a 태그

<a href="대상 경로" target="링크 연결 방식" title="링크 설명"></a>
  • href 속성: a태그 링크의 대상 경로.  URL 또는 내부 문서의 id 속성값일 수 있음.
    개발시점에 주소가 명확하지 않은 경우 "#"을 넣으면 됨 
  • target 속성: a태그로 링크 생성시 연결되는 방식을 지정.  속성값으로 _blank, _paretn, _self, _top을 사용하나 새창으로 열리는 _blank를 제외하고 거의 사용하지 않음.  href 속성과 달리, target 속성은 생략가능.
  • title 속성: 링크를 설명할 수 있는 텍스트.  target 속성처럼 생략 가능.  예를 들어 a 태그를 사용해 도서출판 길벗 홈페이지를 새 창으로 연결하는 링크는 다음과 같음.
<a href="https://www.gilbut.co.kr" target="_blank" title="도서출판 길벗">길벗 홈페이지</a>

 

3.4.2 img 태그

이미지 객체 삽입시 사용. img 태그는 src 속성과 alt 속성으로 구성.

<img src="이미지 경로" alt="이미지 설명">

 

  • src 속성: 이미지 경로.  항상 웹 브파우저에서 실행되는 HTML 파일의 위치기 기준.
    기호 설명
    ./ 현재 폴더
    ../ 상위 폴더

현재 폴더

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

 

상위 폴더

<img src="../images/beach.jpg">
  • alt 속성: 이미지 객체 설명 텍스트

 

3.4.3 이미지 링크

img 태그를 a 태그 안에서 사용하면 이미지 클릭시 특정 링크로 이동하게 할 수 있음.


_3.5 텍스트 강조하기

텍스트 의미를 강조하고 싶을 때 사용.  

3.5.1 strong 태그

3.5.2 em 태그

em(emphasis)태그는 텍스트가 기울어져 보이며 강조 효과.


_3.6 폼 구성하기

사용자와 상호작용해 정보를 입력받고 전송하기 위한 양식

3.6.1 form 태그

  • action 속성: 전송할 서버의 URL주소
  • method 속성:  전송할 송신 방식.  get 또는 post 사용 가능.

3.6.2 input 태그

입력받는 요소 생성시 사용.  type, name, value 속성 중 type 속성은 필수이고, 나머지는 선택사용 가능.

 

type 속성

속성값 설명
text 한 줄 텍스트를 입력할 수 있는 요소를 생성
password 비밀번호를 입력할 수 있는 요소
tel 전화번호 형식 요소
number 숫자만 입력할 수 있는 요소
url URL 주소 형식을 입력할 수 있는 요소
search 검색용 텍스트 입력
email 이메일 형식
checkbox 체크박스
radio 라디오버튼
file 파일 업로드
button 버튼
image 이미지로 버튼 요소를 생성.  img 태그처럼 src 속성을 사용해야 하며, alt 속성은 사용하지 않음 
hidden 사용자 눈에 보이지 않는 입력 요소
date 날짜(연, 월, 일)를 선택할 수 있는 입력 요소
datetime-local 사용자 시간대에 맞는 날짜(연, 월, 일, 시, 분)를 선택할 수 있는 입력 요소
month 날짜(연, 주차)를 선택할 수 있는 입력 요소
time 시간을 선택할 수 있는 입력 요소
range 숫자 범위를 선택할 수 있는 슬라이드 요소
color 색상을 선택할 수 있는 요소
submit 폼 전송 역할을 하는 버튼 요소
reset 폼 요소에 사용자가 입력한 값을 초기하는 버튼 요소

 

  • name 속성: form 태그에 의해 서버로 전송될 때, name 속성에 적인 값이 이름으로 지정.
  • value 속성: 입력 요소의 초기값을 작성할 때 사용.

3.6.3 label 태그

form 태그 안에서 사용하는 상호작용 요소 이름을 붙일 때 사용.

3.6.4 fieldset와 legend 태그

fieldset 태그로 그룹을 지으면 그룹별로 박스 모양의 테두리가 생기며, 그룹진 요소들은 legend 태그로 이름을 붙일 수 있음.

 


_3.7 표 만들기


_3.8 멀티미디어 설정하기


_3.9 웹 페이지 구조를 설계하는 시맨틱 태그


_3.10 태그 종류에 상관없이 사용하는 글로벌 속성

Part 2 CSS로 웹 페이지 꾸미기

4장 웹 스타일링을 위한 CSS 기초 배우기


_4.1 CSS 문법 살펴보기

 

_4.2 CSS 적용하기

관련글

티스토리툴바