메모장/마크업 썸네일형 리스트형 [CSS3 천기누설]이해하기 쉬운 CSS3에 관한 짧은 프레젠테이션 CSS3 천기누설텍 출처 - http://slidesha.re/eDDt2F 제이쿼리(JQuery)를 이용한 썸네일 이미지 갤러리 제이쿼리(JQuery)를 이용한 썸네일 이미지 갤러리 CSS를 사용해 마크업을 하고, 모션은 제이쿼리(JQuery)를 사용해 간단하게 만들어보았습니다. 결과물 화면이구요. 소스 화면입니다. 다운로드 하셔서 분석해 보셔요 [HTML5] 익스플로러 IE(Internet explorer)에서 구글 크롬 프레임으로 HTML5 이용하기 익스플로러 IE(internet explorer)에서 구글 크롬 프레임으로 HTML5 이용하기 * HTML5를 개발하는데 있어서 가장 큰 걸림돌이라하면 바로 인터넷 익스플로러(IE)일 것이다. MS에서는 웹표준과는 동떨어진 독자노선을 걷다가 이제 웹표준이 정립되어가고 있는 HTML5의 적용을 브라우져에 이제서야 뒤늦게 시작하고 있다. IE10에서는 그래서 그나마 호환성을 갖추기는 했지만 여전히 부족한 느낌이 많을 것이다. 이러한 문제를 해결하기 위한 한가지 방법은 바로 구글의 크롬 프레임(Chrome Frame)이다. * 구글 크롬 프레임(Google Chrome Frame: GCF) : 구글 크롬 프레임은 IE에서 구글 크롬의 환경을 구현할 수 있도록 도와주는 오픈소스 플러그인이다. 구글의 V8 자바스.. [HTML5+CSS3]제이쿼리(jquery)를 사용한 이미지 슬라이드 코드 제이쿼리(jquery)를 사용한 이미지 슬라이드 코드 IR기법, IS기법을 사용하여 레이아웃을 잡은 후 제이쿼리(jquery)의 animate를 사용해 모션을 먹인다. 여기서 요점은 html5에서는 태크 속성을 개발자가 정의하고, 값을 넣을 수 있다는 것(ex. data-left="-640px); 부모오브젝 position은 raltive로, 모션을 먹일 자식오브젝은 position을 absolute로 정의 이다. ㅎㅎㅎ [Html5+CSS3]CSS 세로정렬방법, Image Replacement(IR), Image sprite(IS) 세로정렬 방법 정렬한 오브젝의 스타일을 position:absolute; top:50%; left:50%; margin-left:정렬할 오브젝의 가로길이의 반; margin-top:정렬할 오브젝의 세로길이의 반; 부모의 position값을 relative로 하고, 정렬시킬 오브젝의 position값을 absolute로 먹인 후에, 1번 방법을 겸용한다. vertical-align:middle; -> display 값이 table-cell 일 경우에만 먹는다 [CSS]display 속성 이해하기 http://iyakiggun.blog.me/100162787755 [CSS]float 속성 이해하기 http://iyakiggun.blog.me/100165916259 [CSS]position 속성 이해하기 ht.. [Html5+CSS3]CSS에서 em 단위에 대해서 CSS에서 em 단위에 대해서 CSS에서는 글자 폰트 크기나 width, height 등의 크기를 지정할 때 다양한 단위를 사용할 수 있습니다. (pt, px, em, ex, %) 대부분의 브라우저는 단위를 사용하지 않으면 자동으로 px단위(모니터의 픽셀)로 인식하여 렌더링을 하게 되지만, 현재 표준은 단위를 항상 명시해주는 것입니다. (0 제외) ex. DIV.test { padding:5px 0 5px 10px; font:normal 9pt 돋움; } 대부분 HTML 개발 시에는 px 단위를 사용하고 폰트 크기에는 pt, px 단위를 혼용하여 사용하고는 하는데, em 이라는 단위를 사용하자는 움직임도 있는 것 같습니다. pt, px 가 절대적인 크기를 나타내는데 반해서, em, ex, % 는 상위 엘.. [Html5+CSS3]block과 inline의 차이점, 구별방법 block과 inline의 차이점 block element width , height , margin , padding (O) 자동 줄 바꿈 Block Element 와 Inline Element 를 감쌀 수 있다. 가로(width)폭은 부모 요소의 폭까지 늘어난다. 형제 요소만큼 늘어난다. 화면 높이까지만 높이가 주어진다. ,~,,,,,,,,,,,... inline element width , height , margin , padding (X) - 그래서 display 를 block 또는 inline-block 화 시켜서 임의로 속성값들을 조절할 수 있다. border (O) Block Element 를 감쌀 수 없다. 자기자신(컨텐츠)까지만 폭을 가진다. ,,,,,,,,,,,,... Block 은 .. [Html5+CSS3]CSS에서 기본형식과 각종 선택자(selector) 설명 기본형식 default [selector] { [property] : [value]; [property] : [value]; } 요소선택자, 클래스선택자, 아이디선택자, 속성선택자, 가상선택자, 구조적선택자 Type Selector - 요소 선택자 HTML 태그 이름으로 요소 선택. 요소를 선택하는 예 p { [property] : [value]; } Class Selector - 클래스 선택자 태그 속성의 class 를 조회하여 선택 .className { [property] : [value]; } Id Selector - 아이디 선택자 태그 속성의 id 를 조회하여 선택 #idName { [property] : [value]; } Attribute Selector - 속성 선택자 태그 속성을 조회하여.. [마크업의 오해]XHTML, HTML4, HTML5 각종 마크업의 관계정리 "마크업의 오해"(Misunderstanding Markup: XHTML2/HTML 5 Comic Strip) 아래 코믹은 DOM Scripting의 저자인 Jeremy Keith가 작성하고 BradColbow가 그린 "마크업의 오해"(Misunderstanding Markup: XHTML2/HTML 5 Comic Strip)라는 만화로서 XHTML5에 대해 소개하고 있습니다. 필자에 의해 번역 되었으며 Creative Commons License하에서 사용하도록 허가 받았다. 출처 :http://www.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comicstrip/ 실전 HTML5 가이드 에서 발췌하였습니다 [Html5+CSS3]HTML의 역사, 젠코딩(ZenCoding), 브라우저성능테스트, 사이트유효성검사, 실전 HTML5 가이드 HTML 5 != HTML5 HTML 5와 HTML5는 다르다 HTML -> HTML4 까지 발전된 시간은 대략 7년? W3C에서 XHTML를 배포한뒤 XHTML2 까지 개발을 하려 했으나, 많은 사용자들이 HTML4를 더 선호하게 됨 따라서, HTML4 -> HTML5 개발이 필요했지만, 저작권 문제로 HTML 5가 먼저 나오고, 인수를 통해 최종적으로 HTML5가 나오게 됨 용어정리 TEXT attribute(속성) : href tag(태그) : , contents(컨텐츠) : TEXT element(엘리먼트) : TEXT *property(속성)는 CSS에서 attribute(속성)는 HTML에서 사용하는 것이다 Zen Coding Zen Coding(http://code.google.com/p/z.. 실전 HTML5 가이드 다운받기 실전 HTML5 가이드 시중에 판매되고 있는 HTML5 관련 서적들 보다 인터넷에 무료로 배포되고 있는 이 PDF를 먼저 한번 보시길 추천합니다 실전 HTML5 가이드 다운로드 젠코딩0.6 치트 시트(Zen Coding0.6 Cheat Sheet) 다운받기 젠코딩0.6 치트 시트(ZenCoding0.6 Cheat Sheet) 다운받기 Zen Coding 0.6 Cheat Sheet 다운받기 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo. 출처 - http://cafe.naver.com/hacosa/47043, http://www.aether.ru/files/zencoding.pdf HTML 버전별 Doctype 선언 정리 HTML 버전별 Doctype 선언 정리 DOCTYPE은 Document Type의 줄임말입니다. 태그 위에 선언 해줘야 하며, 어떤 종류의 html을 사용할지 웹 브라우저에게 알려줍니다. HTML 버전별 DOCTYPE을 간단히 표로 정리해 보았습니다. 더 자세한 내용을 알고 싶으신 분은 DOCTYPE 알아보러 가기! 를 클릭해주세요. 표를 보면 일정하게 DTD 라는 것이 들어가 있다는 것을 알 수 있습니다. DTD는 Document Type Definition의 줄임말로 현재 사용하는 버전에서 어떤 태그들을 사용할 수 있는지 알려줍니다. 크게 strict, transitional, frameset 세 가지로 나뉩니다. strict - 웹 표준을 엄격하게 지킨다는 의미입니다. center, font를 포.. [HTML5] 의미있는 문서, 시맨틱(Semantic)요소 의미있는 문서 HTML5 이전의 웹 문서 즉 HTML 문서는 구조보다는 표현을 위한 수단에 가까웠다 Table 태그, ul, li 태그, div 태그 등으로 문서 구조를 정의할 수 있지만 이것은 의미있는 구조라기 보다는 표현을 위한 구조 잡기에 가까웠다. 다시 말해 각 태그들은 일관된 목적을 위해 사용되는 것이 아니라 문서를 Display하기 위해 제각각의 형태로 사용되어진게 사실이다. 다시 말해 HTML5 이전의 문서 표현 태그들은 문법적 규칙은 있었으나 구조의 규칙은 존재하지 않았다 이러한 문서는 사람이 읽기에는 적합하지만 자동으로 문서 구조를 파악하고 분류 및 탐색하기에는 힘든 구조이다. 즉 시맨틱스럽지 못하다는 것이다 참고로 의미있는 구조의 대표적인 형태가 XML 문서이다 XML 의 탄생 자체가 .. [CSS3] 새로운 기능(스타일) CSS3의 새로운 기능 CSS 는 Cascading Style Sheets 의 약자로 글자체, 줄간격, 배경색, 위치 지정과 같은 웹 페이지의 전반적인 스타일을 지정하는데 이용되는 문법 규칙이다 엄밀히 말하자면 HTML과 CSS는 그 역할이 서로 다르다고 할 수 있다 그러나 HTML 의 차세대 버전인 HTML5 제안과 함께 CSS3라는 이름으로 새로운 스타일도 개발되고 있다. 즉 HTML5 와 CSS3 둘 다 차세대 웹 개발을 위한 새로운 표준인 것이다 그래서 HTML5를 다루는 많은 자료들에서 이 둘을 같이 설명하는 경우가 많다 어쨋든 CSS3 는 웹 개발자 보다는 웹 퍼블리셔 혹은 코더라고 불리우는 직군에 더 친숙한 언어이다 (뭐.. 이 역할이 명확히 구분되지 않는 경우도 있지만...) 나 역시 개발.. 오로지 CSS로만 만들 네비게이션(GNB) 소스 오로지 CSS로만 만들 네비게이션(GNB) 소스 다운로드해서 분석하시고, 응용해서 사용하세요 ㅎㅎ 그외 소스로는 http://www.apycom.com/ 여기를 참조해보세요 이전 1 2 3 4 5 6 7 8 다음
