Suche senden
Hochladen
Code_The_Web_150524_HTML_CSS
•
7 gefällt mir
•
1,102 views
C
Changwhan Yea
Folgen
웹개발 워크샵 #1 워크샵 슬라이드 (HTML&CSS)
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 47
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
[Gastudy.net] html문서에 코드심기_업로드용
[Gastudy.net] html문서에 코드심기_업로드용
Chang Woo Lee
3.web의역사와browser
3.web의역사와browser
cheonsu park
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
Nts Nuli
Hacosa js study 6th
Hacosa js study 6th
Seong Bong Ji
DGMIT 제3회 R&D 컨퍼런스 2TEAM : CSS position Property 제대로 알고 쓰자
DGMIT 제3회 R&D 컨퍼런스 2TEAM : CSS position Property 제대로 알고 쓰자
dgmit2009
Basic html
Basic html
협수 남
BORA3기_20111008_노라보라발표
BORA3기_20111008_노라보라발표
bora campaign BY seed:s corporation
보라3기 OT_1,2기 활동 정리 발표
보라3기 OT_1,2기 활동 정리 발표
bora campaign BY seed:s corporation
Empfohlen
[Gastudy.net] html문서에 코드심기_업로드용
[Gastudy.net] html문서에 코드심기_업로드용
Chang Woo Lee
3.web의역사와browser
3.web의역사와browser
cheonsu park
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
Nts Nuli
Hacosa js study 6th
Hacosa js study 6th
Seong Bong Ji
DGMIT 제3회 R&D 컨퍼런스 2TEAM : CSS position Property 제대로 알고 쓰자
DGMIT 제3회 R&D 컨퍼런스 2TEAM : CSS position Property 제대로 알고 쓰자
dgmit2009
Basic html
Basic html
협수 남
BORA3기_20111008_노라보라발표
BORA3기_20111008_노라보라발표
bora campaign BY seed:s corporation
보라3기 OT_1,2기 활동 정리 발표
보라3기 OT_1,2기 활동 정리 발표
bora campaign BY seed:s corporation
JS특징(scope,this,closure)
JS특징(scope,this,closure)
지수 윤
구글글래스 애플리케이션의 종류와 특징
구글글래스 애플리케이션의 종류와 특징
Ingi Kim
Geek in the IT - KBS IT Concert 발표자료
Geek in the IT - KBS IT Concert 발표자료
Ingi Kim
2주 HTML 수업추가
2주 HTML 수업추가
지수 윤
Eyes web site progect
Eyes web site progect
KIM HEE JAE
11_웹서비스활용
11_웹서비스활용
noerror
IoT Web App - 수집된 정보의 가공, 처리, 융합
IoT Web App - 수집된 정보의 가공, 처리, 융합
Hyunghun Cho
Devrookie Study / TA20110730
Devrookie Study / TA20110730
Yong-nam Kim
Doctors 사업계획서 20160724 ppt
Doctors 사업계획서 20160724 ppt
jinho lee
H3 2011 반응형 웹디자인, 진짜 할 만 한가?
H3 2011 반응형 웹디자인, 진짜 할 만 한가?
KTH
History and Status of HTML5
History and Status of HTML5
Channy Yun
2012 수확소프트 ot
2012 수확소프트 ot
진환 김
[사례집] Onoff it-digital-marketing-casestudy-by-kosan-ver.1.0
[사례집] Onoff it-digital-marketing-casestudy-by-kosan-ver.1.0
승지 김
HTML5 와 미래웹기술 part 3
HTML5 와 미래웹기술 part 3
미래웹기술연구소 (MIRAE WEB)
MGS 툴세미나
MGS 툴세미나
Bonex Gu
What you can Learn from a 4 Year Old about Ponies and Mobile UX
What you can Learn from a 4 Year Old about Ponies and Mobile UX
Andrew Smyk
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
Mayuko Sekiya
Patterns for effectviely documenting frameworks
Patterns for effectviely documenting frameworks
Sunuk Park
SocialNetCreator Company Profile_회사소개서 2013
SocialNetCreator Company Profile_회사소개서 2013
SocialNet Creator
9조 사업계획서
9조 사업계획서
John Fitzpatrick
Html5 시맨틱태그
Html5 시맨틱태그
은심 강
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
yongwoo Jeon
Weitere ähnliche Inhalte
Andere mochten auch
JS특징(scope,this,closure)
JS특징(scope,this,closure)
지수 윤
구글글래스 애플리케이션의 종류와 특징
구글글래스 애플리케이션의 종류와 특징
Ingi Kim
Geek in the IT - KBS IT Concert 발표자료
Geek in the IT - KBS IT Concert 발표자료
Ingi Kim
2주 HTML 수업추가
2주 HTML 수업추가
지수 윤
Eyes web site progect
Eyes web site progect
KIM HEE JAE
11_웹서비스활용
11_웹서비스활용
noerror
IoT Web App - 수집된 정보의 가공, 처리, 융합
IoT Web App - 수집된 정보의 가공, 처리, 융합
Hyunghun Cho
Devrookie Study / TA20110730
Devrookie Study / TA20110730
Yong-nam Kim
Doctors 사업계획서 20160724 ppt
Doctors 사업계획서 20160724 ppt
jinho lee
H3 2011 반응형 웹디자인, 진짜 할 만 한가?
H3 2011 반응형 웹디자인, 진짜 할 만 한가?
KTH
History and Status of HTML5
History and Status of HTML5
Channy Yun
2012 수확소프트 ot
2012 수확소프트 ot
진환 김
[사례집] Onoff it-digital-marketing-casestudy-by-kosan-ver.1.0
[사례집] Onoff it-digital-marketing-casestudy-by-kosan-ver.1.0
승지 김
HTML5 와 미래웹기술 part 3
HTML5 와 미래웹기술 part 3
미래웹기술연구소 (MIRAE WEB)
MGS 툴세미나
MGS 툴세미나
Bonex Gu
What you can Learn from a 4 Year Old about Ponies and Mobile UX
What you can Learn from a 4 Year Old about Ponies and Mobile UX
Andrew Smyk
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
Mayuko Sekiya
Patterns for effectviely documenting frameworks
Patterns for effectviely documenting frameworks
Sunuk Park
SocialNetCreator Company Profile_회사소개서 2013
SocialNetCreator Company Profile_회사소개서 2013
SocialNet Creator
9조 사업계획서
9조 사업계획서
John Fitzpatrick
Andere mochten auch
(20)
JS특징(scope,this,closure)
JS특징(scope,this,closure)
구글글래스 애플리케이션의 종류와 특징
구글글래스 애플리케이션의 종류와 특징
Geek in the IT - KBS IT Concert 발표자료
Geek in the IT - KBS IT Concert 발표자료
2주 HTML 수업추가
2주 HTML 수업추가
Eyes web site progect
Eyes web site progect
11_웹서비스활용
11_웹서비스활용
IoT Web App - 수집된 정보의 가공, 처리, 융합
IoT Web App - 수집된 정보의 가공, 처리, 융합
Devrookie Study / TA20110730
Devrookie Study / TA20110730
Doctors 사업계획서 20160724 ppt
Doctors 사업계획서 20160724 ppt
H3 2011 반응형 웹디자인, 진짜 할 만 한가?
H3 2011 반응형 웹디자인, 진짜 할 만 한가?
History and Status of HTML5
History and Status of HTML5
2012 수확소프트 ot
2012 수확소프트 ot
[사례집] Onoff it-digital-marketing-casestudy-by-kosan-ver.1.0
[사례집] Onoff it-digital-marketing-casestudy-by-kosan-ver.1.0
HTML5 와 미래웹기술 part 3
HTML5 와 미래웹기술 part 3
MGS 툴세미나
MGS 툴세미나
What you can Learn from a 4 Year Old about Ponies and Mobile UX
What you can Learn from a 4 Year Old about Ponies and Mobile UX
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
Patterns for effectviely documenting frameworks
Patterns for effectviely documenting frameworks
SocialNetCreator Company Profile_회사소개서 2013
SocialNetCreator Company Profile_회사소개서 2013
9조 사업계획서
9조 사업계획서
Ähnlich wie Code_The_Web_150524_HTML_CSS
Html5 시맨틱태그
Html5 시맨틱태그
은심 강
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
yongwoo Jeon
Hacosa jquery 1th
Hacosa jquery 1th
Seong Bong Ji
3-2. selector api
3-2. selector api
JinKyoungHeo
웹표준 교육
웹표준 교육
Aria (In Suk) Kim
프로그래밍 첫 걸음 맛 보기
프로그래밍 첫 걸음 맛 보기
Seon jae Kim
2. html5 시맨틱태그
2. html5 시맨틱태그
은심 강
2. html5 시맨틱태그
2. html5 시맨틱태그
은심 강
Introduction to Web Components
Introduction to Web Components
EunYoung Kim
01. basic html5
01. basic html5
동우 주
Web Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30th
Chang W. Doh
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
Michael Yang
워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015
워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015
덕현 남
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
Lee Sang-Ho
Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션
Jeado Ko
2-2. html5
2-2. html5
JinKyoungHeo
업무자동화를 위한 파이썬
업무자동화를 위한 파이썬
성주 이
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차
Michael Yang
Polymer따라잡기
Polymer따라잡기
Han Jung Hyun
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
Chang W. Doh
Ähnlich wie Code_The_Web_150524_HTML_CSS
(20)
Html5 시맨틱태그
Html5 시맨틱태그
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Hacosa jquery 1th
Hacosa jquery 1th
3-2. selector api
3-2. selector api
웹표준 교육
웹표준 교육
프로그래밍 첫 걸음 맛 보기
프로그래밍 첫 걸음 맛 보기
2. html5 시맨틱태그
2. html5 시맨틱태그
2. html5 시맨틱태그
2. html5 시맨틱태그
Introduction to Web Components
Introduction to Web Components
01. basic html5
01. basic html5
Web Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30th
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015
워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션
2-2. html5
2-2. html5
업무자동화를 위한 파이썬
업무자동화를 위한 파이썬
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차
Polymer따라잡기
Polymer따라잡기
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
Code_The_Web_150524_HTML_CSS
1.
HTML & CSS Code
The Web 2015.05.24
2.
이미지 출처: http://matthewjamestaylor.com/blog/adding-css-to-html-with-link-embed-inline-and-import http://en.kioskea.net/faq/2371-stopping-animated-images-on-web-pages
3.
HTML + CSSHTML 이미지
출처: www.clipartbest.com/picture-of-a-person-standing
4.
www.naver.com (HTML)
5.
www.naver.com (HTML + CSS)
6.
Hyper Text Markup Language
7.
Hyper Text Markup
Language 다른 문서로 이동하는 링크를 가진 문서 이미지 출처: http://www.open-hypervideo.org/thesis.html#chapter2-2-2
8.
Hyper Text Markup
Language 태그를 이용하여 문서나 데이터의 구조를 명기하는 언어 마크업 언어는 결국 태그들의 집합체이다
9.
Hyper Text Markup
Language 태그를 이용해서 문서의 구조를 정의하는 언어 링크를 통해 다른 문서로 이동이 가능하고
10.
<!DOCTYPE html> <html> <head> </head> <body> </body> </html> HTML 문서
구성 “이건 HTML 문서에요” 문서의 시작과 끝 문서의 meta 데이터 문서의 실질적인 내용
11.
<head> 안에 제목을
적어보세요 HTML 요소 - <title>
12.
HTML 요소 -
<title> <head> <title> 홍길동의 자기 소개 </title> </head>
13.
HTML 요소 -
<meta> <head> <title> 홍길동의 자기 소개 </title> <meta charset=“UTF-8”> </head>
14.
HTML 요소 -
<h1> ~ <h6> <body> 안에 <h1> 태그를 이용해서 본인 이름을 적어주세요
15.
HTML 요소 -
<h1> - <h6> <body> <h1> 홍길동 </h1> </body>
16.
HTML 요소 -
<p> 자신이 어떤 사람인지 2 문장 정도 적어주세요
17.
HTML 요소 -
<p> <h1> 홍길동 </h1> <p> 홍길동은 조선 연산군 때의 도적이다. 조허균의 소설 홍길동전의 실제 인물로 알려져 있다. </p>
18.
HTML 요소 -
<div> <p>보다는 일반적인 개념으로 콘텐츠를 넣을 수 있는 요소
19.
HTML 요소 -
<div> <h1> 홍길동 </h1> <div> 홍길동은 조선 연산군 때의 도적이다. 조허균의 소설 홍길동전의 실제 인물로 알려져 있다. </div>
20.
HTML 요소 -
<table> <table> 을 이용해서 나이, 대학교, 혈액형을 나열하세요
21.
HTML 요소 -
<table> <table> <tr> <td>나이</td> <td>575살</td> </tr> <tr> <td>대학교</td> <td>조선도적사관학교</td> </tr> <tr> <td>혈액형</td> <td>AB</td> </tr> </table>
22.
HTML 요소 -
<ul> <ul> 을 이용해서 좋아하는 음식 3가지를 적어주세요
23.
HTML 요소 -
<ul> <ul> <li>해물파전</li> <li>막걸리</li> <li>불고기</li> </ul>
24.
HTML 요소 -
<img> <img> 을 이용해서 자신의 프로필 사진을 추가해주세요
25.
HTML 요소 -
<img> <img src=“gildong.jpg”> </img>
26.
HTML 요소 -
<img> <img src=“https:// organicforumandpeople.files.wordpre ss.com/2013/07/hgd.jpg”> </img> 웹상에 있는 파일 경로를 소스로 넣어줘도 보여진다
27.
HTML 요소 -
<img> <img src=“gildong.jpg” alt=“홍길동 이미지”> </img>
28.
HTML 속성 <img src=“gildong.jpg”
alt=“홍길동 이미지” /> 요소 속성 요소의 특징을 정의한다 이름 = 값 의 형태를 가진다
29.
HTML 속성 <div id=“title”
class=“text”> 제목 </div> <div id=“content1” class=“text”> 내용 1 </div> <div id=“content2” class=“text”> 내용 2 </div> ID 와 Class
30.
HTML 요소 -
<a> <a> 을 이용해서 구글로 가는 링크를 넣어주세요
31.
HTML 요소 -
<a> <a href=“http://www.google.com”> 저를 구글에서 검색해보세요 </a> href 는 HyperText Reference 를 뜻한다
32.
33.
Cascading Style Sheets
34.
선택자와 선언 이미지 출처:
http://www.nextree.co.kr/p8468/
35.
선택자의 종류 이미지 출처:
http://www.nextree.co.kr/p8468/ 전체 선택자 태그 선택자 Class 선택자 ID 선택자 * { color: red; } p { color: red; } .intro { color: red; } #intro { color: red; } <div class=“intro”></div> <p class=“intro”></p> <div id=“intro”></div> <p id=“intro”></p>
36.
HTML에 스타일 입히기 #1
style 속성 <p style=“color: red”> 홍길동은 조선 연산군 때의 도적이다. 조허균의 소설 홍길동전의 실제 인물로 알려져 있다. </p>
37.
HTML에 스타일 입히기 #2
<head>에 정의하기 <head> <title> 홍길동의 자기 소개 </title> <meta charset=“UTF-8”> <style> p { color: purple; } </style> </head>
38.
HTML에 스타일 입히기 #3
CSS 파일을 만들기 <head> … <link rel="stylesheet" type="text/css" href=“theme.css"> … </head>
39.
배경색깔 적용하기 body { background-color:
yellow; } h1 { background-color: #00ff00; } p { background-color: rgb(255,0,255); }
40.
배경색깔 적용하기 간단한 소개
<div>의 배경색깔을 파랗게 적용해주세요
41.
경계선 그리기 p { border:
5px solid red; } 넓이(border-width) 선종류(border-style) 색깔(border-color)
42.
경계선 그리기 이력사항 테이블에 빨간색
경계선을 적용시켜주세요
43.
두 가지 여백 Margin
& Padding 이미지 출처: http://www.geekchamp.com/css-tutorials/11-css3-margin-and-padding
44.
두 가지 여백 Margin
& Padding p { margin: 5px 2px 3px 10px; } top right bottom left 시계방향!
45.
Margin & Padding 좋아하는
음식 <ul>에 margin 적용해주세요
46.
CSS 를 이용한
예술 작품 https://devart.withgoogle.com/#/project/16573885?q=css
47.
참고자료 HTML/CSS 튜토리얼 W3Schools -
http://www.w3schools.com/html/ Codeacademy - http://www.codecademy.com/en/tracks/web CSS-Tricks - https://css-tricks.com/
Jetzt herunterladen