HTML 썸네일형 리스트형 CSS3로 구현한 여러 애니메이션 효과를 간단하게 구현할 수 있는 Magic Animations CSS3 CSS3로 구현한 여러 애니메이션 효과를 간단하게 구현할 수 있는 Magic Animations CSS3 간결하면서도 다이나믹한 효과들이 여러가지 있네요. 이번에 사용해봐야겠습니다.ㅋ 2015.3.11. CSS3 와 jQuery를 활용한 3D Curtain Template, 커튼효과 사이트 템플릿 3D Curtain Template, 커튼효과 사이트 템플릿 데모를 보시면 좀 다이나믹한 사이트를 제작할 수 있다는 기대감이 들게 되는 템플릿입니다. 소스를 수정해서 응용한다면 꽤 멋진 사이트가 될 것 같네요. 2015.2.2. CSS3를 활용한 롤오버(호버) 효과 라이브러리, HOVER.CSS CSS3를 활용한 롤오버(호버) 효과 라이브러리 - hover.css 일단 위 링크를 보시면 얼마나 유용한 소스인지 아실 겁니다. ^^ 2015.1.29. CSS3 버튼 만들어주는 사이트 (한국어버전), CSSGENERATORS CSS3 버튼 만들어주는 사이트(한국어버전) 사이트에서 CSS3 로 여러가지 효과를 자동으로 스크립트 해주는 사이트는 많습니다. 다만, 한국어 지원은 보기가 힘들었지요. 그런데, 이렇게 한국어로 설명해주는 사이트가 있네요. 스크랩해봅니다. ㅎ 아래 링크를 클릭해서 이동하세욥~! 2014.12.29. 부트스트랩 Bootstrap 혼자 공부하기 좋은 사이트, 그냥 한번 정독해보세요. 읽고 또 읽고, 보고 또 보고 해야 할 것 같아요 ㅎ 언제부터인가 사이트를 개발하는 과정에서 어깨넘어로 부트스트랩를 활용해라. 부트스트랩을 공부하라. 부트스트랩을 사용하면 작업속도가 빠르다. 라는 말들을 듣곤 했습니다. 그래서 그 당시 잠깐 검색을 해보니 하나의 사이트 템플릿이라는 사람들도 있고, 제이쿼리 묶음이라는 사람들도 있고, 그렇더라구요. 모두다 틀린 말은 아닙니다. 그리고, 필요성을 잘 느끼지 못하다가 약간 여유가 생겨 이번 기회에 부트스트랩이 뭔가 한번 공부해보기로 했습니다. 책을 살까? 학원을 다닐까? 생각해보았지만 먼저 인터넷에서 정보를 모아보자 해서 찾은 사이트~! 영어로 된 원문사이트도 있고, 한글로 번역된 사이트도 있었습니다. http://bootstrapk.com/BS3/ 약간은 아.. Html5 input type에 대해서 정리 Html5 input type에 대해서 정리 Type 상태 데이터 타입 콘트로 타입 hidden 감춰짐 임의의 문자열 n/a text 텍스트 줄바꿈 없는 텍스트 텍스트 필드 search 검색 줄바꿈 없는 텍스트 검색 필드 tel 전화번호 줄바꿈 없는 텍스트 텍스트 필드 url URL 절대IRI 텍스트 필드 email 이메일 이메일 주소나 이메일 주소 리스트 텍스트 필드 password 비밀번호 줄바꿈 없는 텍스트 데이터 입력이 나타나지 않는 텍스트 필드 datetime 날짜와 시각 UTC 날짜와 시각 날짜와 시각 콘트롤 date 날짜 시간대 없는 날짜 날짜 콘트롤 month 달 시간대 없는 년과 달 달 콘트롤 week 주 시간대 없는 주 번호 주 콘트롤 time 시각 시간대 없는 시각 시각 콘트롤 dat.. HTML5, CSS3, Javascript 에 대한 강의자료 출퇴근 시간에 한번 읽어봐야겠습니다 CholYeon Won 교수님께서 공개하신 HTML5, CSS3 and Java Script 책 입니다. HTML5 등장 배경 및 표준화 현황 1. HTM5의 구조 및 기본 지식 익히기 1.2 웹 브라우저(Browser)의 기능과 한계 1.3 HTM5의 구조(Structure) 1.3.1 HTML5의 요소(Element) 작성 방법 1.3.2 HTML5에서 요소(Element)의 속성(Attribute) 작성 방법 1.4 환경설정 및 기본 편집기 2. metadata Elements 2.2 meta 요소(Elements) 3. Section Elements, 3.1 nav, header 요소(Element)를 이용한 구성 3.2 section, header, nav 요.. HTML 특수문자 코드 정리 HTML 특수문자 코드 코딩이나 스크립트 작업 할 시에 간혹 특수문자가 필요할 때가 있다. 매번 검색해서 찾아서 사용했었는데... 이번 기회에 메모해 둔다. 코드코드 기호 코드 기호 코드 기호 코드 기호 e e É É ĭ ĭ f f Ê Ê Į Į g g Ë Ë į į h h Ì Ì İ İ i i Í Í ı ı j j Î Î IJ IJ k k Ï Ï ij ij l l Ð Ð Ĵ Ĵ m m Ñ Ñ ĵ ĵ n n Ò Ò Ķ Ķ o o Ó Ó ķ ķ p p Ô Ô ĸ ĸ q q Õ Õ Ĺ Ĺ r r Ö Ö ĺ ĺ s s × × Ļ Ļ t t Ø Ø ļ ļ u u Ù Ù Ľ Ľ .. 브라우저모드? 문서모드? 다행히 IE11은 통합 된듯~! 익스11로 업그레이드 ㄱㄱ~! 익스플로러 브라우즈는 항상 골칫덩이... Html 코딩을 할 때마다 골칫덩이인 크로스브라우징... 진절머리가 난다...ㅡㅡ^ 여하튼, 크로스브라우징을 할때 익스를 버전별로 화면을 확인할 수 있는 IE Tester 를 사용하다가 언제부터인가 그냥 익스 개발자 도구를 더 많이 사용하게 되었다. IE Tester는 프로그램이 오류도 많이 나고, 무겁게 느껴져서...점점 사용횟수가 자연스레 잦아들었다. 그런데, 개발자 도구를 사용할때 마다 대충은 알고 있지만, 너무나 헷갈려 다시한번 정리해보기 위해 포스팅해본다. 도대체 브라우저모드, 문서모드 저 둘의 차이점은 무엇일까? 브라우저 모드 : 현재 브라우저의 기본 셋팅을 정의 하는 것 문서 모드 : 페이지를 해석하는 방식을 정의하는 것 이라고 정리 할 수 있다. 예.. jQuery HTML Methods References jQuery HTML Methods References html() 메소드를 제외한 아래의 모든 메소드는 HTML / XML 문서에서 작동합니다. Method Description addClass() 선택된 엘리먼트에 한 개 이상의 class를 추가합니다. (CSS) after() 선택된 엘리먼트 뒤에 또 다른 내용을 추가합니다. (내용이 분리됨) append() 선택된 엘리먼트의 끝에 내용을 추가합니다. (내용이 이어짐) appendTo() 선택된 엘리먼트의 끝에 내용을 추가합니다. (내용이 이어짐) attr() 선택된 엘리먼트에 속성과 값을 설정하거나 리턴합니다. before() 선택된 엘리먼트 앞에 내용을 추가합니다. clone() 선택된 엘리먼트를 복사합니다. detach() 선택된 엘리먼트를 제.. HTML, CSS 코딩시 기본적인 유의사항 1. 공백테크 - 2. 모든 script 및 style 요소에는 type속성이 포함 3. 모든 img 및 area 요소에는 alt속성이 포함 4. 모든 script내의 태크는 escape시켜야한다. 5. 모든 문서내 url에서 &를 쓰면안된다 - ... - html문서내에서만 &를 &로 바꾸어야하며 브라우저 주소창이나 이메일 본문에서는 &를 써야한다. 웹서버에서는 &가 아니라 &만을 인식 6. 검색 form 제목 내용 작성자 7. 는 block : 뒤에 개행이 이루어짐(줄바뀜) 은 inline : 뒤에 개행이 이루어지지 않음(줄바뀌지않음) 8. block : , , , , , , , 등 lnline : , , , 9. Heading태그 : ~ = 제목을 표기 10. : 하나의 문단을 , 로 작성 는 하위.. [HTML5+CSS#]를 공부한다면, 한번쯤 독파해야 할 사이트 주옥같네요 ㅎㅎ CSS에 대한 전반적인 개념을 잡기 위해 꼭 읽어보셔야 합니다...ㅎㅎ 바로가기 [HTML5+CSS3]에 대한 전체적인 개념 정리파일 [HTML5+CSS3]에 대해 전체적인 정리파일 다운로드 하셔서, 압축 푸시고 보시면 됩니다. [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.. [마크업의 오해]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 가이드 에서 발췌하였습니다 이전 1 2 3 다음
