Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a WebStandards-Basic 1.Introduce
Semelhante a WebStandards-Basic 1.Introduce (20)
WebStandards-Basic 1.Introduce
- 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. 웹. 모든것이 접속된다 “웹의 진정한 힘은 그 보편성에 있다”-팀버너스리
- 9. html css
- 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
- 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. 그럼 마크업해서 무엇을 지시할까요?
- 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. 좋은 웹디자인이란 표현을 고려한 아름다운 구조를 만드는 것입니다. ! ! 이것이 우리가 기술을 배워야 할 이유입니다.