http://www.eulsoo.com

1. Understanding HTML/CSS
개념과 준비
을수

2. eulsoo.com

3.
eulsoo.jung@gmail.com
이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.

4. 속이다
역학
mechanisch
일을꾸미다
by design
고의로
mechos 기계
구성하다
설계하다
design
전략
계획하다
ars
술책 회전
articulum
예술
art
techne 예술
기술
tekton
목수

5. 미디어란 무엇인가.

6. Ubiquitous. 무소부재(無所不在)
동시에 어디에나 존재하는

7. 웹. 모든것이 접속된다
“웹의 진정한 힘은 그 보편성에 있다”-팀버너스리

8. Smart devices

9. html css

10. 사용자
브라우저
http
HTML
서버

11. 브라우저

12. Hyper Text Markup Language
1995년
브라우저 전쟁 시대(넷스
케이프 vs MS)
브라우저 회사들이 선두를
지키기 위해 자신들만의 독
점적인 확장자 추가
웹 개발자들은 종종 분리된
웹 페이지를 작성해야 했음
1989~1991년
단지 하이퍼텍스트만사용
표현에는 관심이 없음.
HTML1,2
HTML3
1998년
브라우저 전쟁이 끝나고
W3C가 출현하여 표준제시
구조를 위한 HTML과
표현을 위한 CSS의 분리
HTML4
2000년
대중성과 브라우저에 친숙
한 것 HTML
확장성과 견고함의 XML
한 마디로 확장 가능한
HTML
1999년
가장 최근의 HTML 버전
HTML4.01
XHTML
2009년
벡터그래픽 구현
모든디바이스 고려
시멘틱한 태그
HTML5

13. HTML/CSS type-setting

14. Hyper Text Markup Language

15. 마크업이란 컨텐츠에
뭔가를 지시하기 위한 표시입니다.

16. HTML은 의미를 가지고 있는 태그들을
이용해 마크업을 합니다.
열기태그
컨텐츠
닫기태그
h1제목입니다/h1
aabbracronymaddressappletareaarticleasideaudiobbasebasefontbdibdobigb
lockquotebodybrbuttoncanvascaptioncentercitecodecolcolgroupcommanddatalistdd
deldetailsdfndialogdirdivdldtemembedfieldsetfigcaptionfigurefontfooterfor
mframeframeseth1h2h3h4h5h6headheaderhrhtmliiframeimginputins
kbdkeygenlabellegendlilinkmapmarkmenumetameternavnoframesnoscriptobje
ctoloptgroupoptionoutputpparampreprogressqrprtrubyssampscriptsection
selectsmallsourcespanstrikestrongstylesubsummarysuptabletbodytdtextarea
tfootththeadtimetitletrtrackttuulvarvideowbr!DOCTYPE

17. 브라우저는 마크업(감싼)한 컨텐츠를
박스에 담아 보여줍니다.
열기태그
컨텐츠
닫기태그
h1제목입니다/h1
제목입니다
박스선이
실제로 눈에
보이지는
않습니다

18. 설명이나 역할을 정해주기 위해서
준비되어 있는 속성들을 사용할 수 있습니다
열기태그
컨텐츠
닫기태그
h1 class=”art”제목입니다/h1
이름
속성
값
art라는 이름을 가진 반을 만들기 위해서 준비되어 있는
class라는 속성을 사용하고 자신이 원하는 art라는 이름을
지어 주었습니다. 이렇듯 값은 준비된 값만을 쓸수 있는
속성과 원하는 데로 넣을 수 있는 속성이 있습니다.
h2 class=”art”두번째 제목입니다./h2
img src=”images/foo.jpg” alt=”샘플이미지” /
foo.jpg파일을 img에 불러오기 위해서 src(source)속
성을 이용하고 경로와 파일명을 값에 넣어 주었습니다.
alt속성을 이용해서 불러온 이미지가 어떤 이미지인지
컴퓨터에 설명해 주고 있습니다.
속성들은
class, id, title, alt
src, href, type 등이
준비되어
있습니다

19. !
html
head
meta charset=utf-8 /
titlehello world!/title
/head
body
!
phello world!/p
!
/body
/html

20. 모든 코드는 소문자로 작성합니다
h1 class=”art”제목입니다/h1
이름
속성
값
XHTML은 대소문자를 구분합니다. 대소문자를 구분하지 않는
HTML4나 HTML5를 사용한다고 해도 좋은 코드를 위해서 소문
자만을 스스로의 원칙으로 하는 것이 좋습니다.

21. HTML의 태그들은 부모-자식의
관계를 갖습니다
!
html
head
meta
meta charset=utf-8 /
head
titlehello world!/title
title
/head
body
html
!
phello world!/p 이런 관계모델을
body p
!
DOM (document
/body
object model)
/html
이라고 합니다

22. head안에는 페이지를 처리하기 위해
필요한 정보가 있습니다.
!doctype
html
head
meta charset=utf-8 /
titlehello world!/title
/head
body
!
charset=utf-8
phello world!/p
은 여러나라 언어를
!
사용할 수 있게 해줍니다.
/body
metatitle
/html
이외의 태그와 속성은
다음에 좀 더 자세히
다룰것입니다.

23. 브라우저의 화면영역(viewport)에 보이는
부분은 body입니다.
!doctype
html
head
meta charset=utf-8 /
titlehello world!/title
/head
body
!
phello world!/p
!
/body
/html

24. 또한 태그는 중첩해서 사용할 수 있으며
이에따라 구조가 만들어집니다.
div class=”naver”
h2네이버서비스/h2
div class=”navercast”
h3네이버 캐스트/h3
p우리가 일상생활에서 환경을 위해
할 수 있는 가장 손쉽고 간편한 방법은
무엇이 있을까? 아마도 전력을 아껴 쓰는
일일 것이다. /p
/div
div class=”opencast”
h3오픈 캐스트/h3
p스티커의 디자인이 참 독특하다. 전
이 생산되는 과정을 보여주는 스티커,
작성자의 효율과
전력 소비로 인한 환경 오염을 노골적으로
협업을 위해서
보여주는 스티커 등 다양하다. /p
/div
들여쓰기(tab키)를
/div
통해서 구조를 시각적
으로 구분해 줍니다
네이버서비스
네이버서비스
우리가 일상생활에서 환경을 위해 할 수 있는 가장 손쉽고 간편한 방
전력을 아껴 쓰는 일일 것이다.
오픈 캐스트
스티커의 디자인이 참 독특하다. 전력이 생산되는 과정을 보여주는
오염을 노골적으로 보여주는 스티커 등 다양하다.

25. 그럼 마크업해서 무엇을 지시할까요?

26. 표현(Style)을 지시합니다.

27. 마크업한 컨텐츠에
표현(style)을 붙여 웹페이지를 만듭니다.
HTML
+
CSS
=
웹페이지

28. 표현을 지시하기 위해
Cascading Style Sheet 를 사용합니다.
CSS1
CSS2
CSS2.1
CSS3

29. CSS의 기본 구조는
대상을 선택하고 표현을 선언하는 것입니다.
선택하기
선언하기
h1 {color:red;}
선택자
제목을
속성
값
빨강색으로!
color, font-size, font-family, font-weight, font-style, background, padding, margin, width, height, @media, @import, overflow
display, visibillity, letter-spacing, text-align, text-decoration, line-height, list-style, float, clear, position, top, left, right
bottom, z-index, border, white-space, word-break, cursor, animation, transition, transform, perspective, target, box-sizing
box-shadow, border-radius,

30. 하나의 선언이
“;”으로
끝나면 개행이나
공백은 문제되지
않습니다
h2 {
color:red;
border:1px solid black; /* 수정됨 13.10.07 */
font-size:12px;
font-size:18px;
}
!
h2 {color:red; border:1px solid black; font-size:12px;
font-size:18px;}
만약 같은 속성
선언이 두번 선언
되었을 경우
뒷선언만
적용됩니다

31. 이렇게 수많은 HTML의 표현을
CSS로 만들어 변화를 주고 관리하게 됩니다.
CSS

32. (HTML)과(CSS)가
분리될 때 강력하고 아름다운 웹이됩니다.

34. eulsoo.com

35.
eulsoo.jung@gmail.com
이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.

36. 좋은 웹디자인이란
표현을 고려한
아름다운 구조를 만드는 것입니다.
!
!
이것이 우리가 기술을 배워야 할 이유입니다.