WEB

Artboard?  Document?

Artboard?  Document?

최초의 웹

1993년 (26년 전...)

웹 = 정보를 전달하는 "문서"

WEB의 동작 방식

주문

요청

고객

웨이터

주방장

고객

웨이터

주방장

요리

고객

웨이터

주방장

요리

서버

사용자

(클라이언트)

브라우저

https://naver.com

서버

사용자

(클라이언트)

브라우저

서버

사용자

(클라이언트)

브라우저

Canvas?  Document?

HTML은 "문서" 이다

HTML

Hyper

Text

Markup

Language

Not 프로그래밍, But 문서작성 언어

Canvas?  Document?

실습 1-1

 마카롱 레시피 페이지를 만들어볼께요!

URL

HTML의

구성 & 규칙

태그 (TAG)

<div>

</div>

가나다라

Opening Tag

Closing Tag

컨텐츠

Tag 이름

태그 (TAG)

<input >

Tag 이름

태그 (TAG)

<div                  >

</div>

지식백과

id="        "

속성(Attribute)

값(value)

title

Tag의 종류

HTML 버전에 따라 다르지만, 대략 130개 정도

모든 태그 정보

but 실제로 20~30개 정도 사용!

꼬리표, 이름표

<!DOCTYPE html>

<html>

    <head>

    <body>

문서의 뼈대를 세우는 과정

<!DOCTYPE           >

문서의 "종류"를 설정 

html

html

<head>

문서에 대한 설명 / 설정 / 필요한 파일 정의

meta

title

link

script

<body>

실제 문서의 컨텐츠가 들어가는 공간

대표 태그

  • h1 ~ h6
  • p
  • br
  • a
  • img
  • strong / em
  • ul > li
  • button
  • div
  • span

<h1> ~ <h6>

6단계의 문서의 제목을 구현합니다.

h1

h2

 : 문서 전체 제목 = "승리"

h3

 : 문서 전체 제목 = "승리"

h1

<p>

단락(paragraph)를 의미합니다.

<p> : paragraph

<p> : paragraph

<a                                      >네이버</a>

속성 & 값

a(anchor) 태그

href="https://naver.com"

페이지 이동 / 버튼 용도

<img                              >

속성 & 값

img 태그

src="이미지 경로"

alt="이미지 이름"

<ul>

unordered List

<ol>

ordered List

웹 서비스 제작 단계

  1. 페이지 기획 및 설계
  2. UI 디자인
  3. HTML 작성
  4. CSS 추가
  5. JS 추가
  6. 서버 업로드

대표적인 태그 목록

  • h1 ~ h6
  • em
  • p
  • br
  • a
  • img

List 태그

그룹핑(grouping) 태그

Block Level

<div>block</div>

Inline Level

<span>inline</span>

block

inline

block

block

inline

inline

inline

실습 1-2

마카롱 페이지에 태그를 적용해볼께요!

코드 에디터

코드 작성을 도와주는 에디터

메모장으로도 만들 수 있다.

태그 적용

URL

복습 영상 자료

3. 콘텐츠모델, 시멘틱마크업, 블록 & 인라인 까지

과제

apple 홈 html구조 만들기

URL

Made with Slides.com