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
마카롱 레시피 페이지를 만들어볼께요!
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="이미지 이름"
<img
src="https://s.pstatic.net/static/www/mobile/edit/2019/0212/mobile_111718851889.jpg"
alt="건강판 소개"
>
<ul>
unordered List
<ol>
ordered List
웹 서비스 제작 단계
- 페이지 기획 및 설계
- UI 디자인
- HTML 작성
- CSS 추가
- JS 추가
- 서버 업로드
대표적인 태그 목록
- 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
마카롱 페이지에 태그를 적용해볼께요!
코드 에디터
코드 작성을 도와주는 에디터
메모장으로도 만들 수 있다.
태그 적용
복습 영상 자료
3. 콘텐츠모델, 시멘틱마크업, 블록 & 인라인 까지
과제
apple 홈 html구조 만들기