본문 바로가기

메모장

[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
윈도우 단축키(Windows ShortKey) 정리 윈도우 단축키(바로가기키) 정리 윈도우 키 : [시작] 메뉴 부르기 윈도우키 + D : 열려있는 창, 대화상자 최소화 / 이전 크기로 윈도우키 + R : 실행 윈도우 키 + M : 열려있는 모든 창 최소화 윈도우 키 + Shift + M : 열려 있는 모든 창 이전 크기로 윈도우키 + E : 탐색기 실행 윈도우키 + [Pause] : 시스템 등록정보 윈도우키 + F : 검색 윈도우키 + Ctrl + F : 컴퓨터 검색 F1 : 도움말 F2 : 윈도우 탐색기의 폴더/파일 이름바꾸기 (해당폴더나 파일을 클릭한 후 F2를 누르세요) F3 : 검색, 찾기 F5 : 최신 정보로 고침(새로고침) F11 : 현재 창의 최대화/최소화 설정 Alt + → : 현재 실행중인 화면의 다음 화면으로 이동 Alt + ← : 현..
2013년 행주산성 고양 600년 해맞이 가보자~! 우리 가족의 첫 새해맞이 일출을 보러가네요ㅎㅎ 이제까지 살면서 새해맞이 일출을 가족과 같이 보러 가는 계획은 또 처음이네요. 매년 정동진을 가네 마네 했었는데, 사실상 체력적으로나 일정적으로나 무리가 많아서 매번 포기를 했었는데요. 이번에는 포기보다는 차선책을 실행하기로 했습니다. 저희 집이 일산인데, 가까운 곳에서도 해맞이 행사가 있더군요. 바로 행주산성~! 그리고, 또 몰랐던 사실 2013년은 고양시가 역사에 등장한지 600년이 되는 해 라고 하네요. 이 포스팅을 하루 전에 하는 이유는? 오늘 정한 계획이라서 ㅎㅎ 따라서 인터넷에서 정보를 찾아보았습니다. 뭐니뭐니 해도 정보는 공식사이트 정보가 믿음직 하죠. 허나, 정보는 그리 많지 않네요 ㅎㅎ 행사의 순서는 총 세 부분으로 나뉩니다. 오전 5시30분..
UX / UI 디자인이란? UI(User Interface)의 정의 사용자가 제품을 어떤 방식으로 이용하도록 만드느냐를 디자인하는 것 UI디자인은 어원 그대로 해석하면 사용자의 최적화를 시켜주는 디자인이라는 뜻이다. 스마트폰에서 쓰이는 UI디자인은 스마트폰 어플을 포함하는 경우도 있을 수 있겠지만, 대부분 스마트폰 자체의 기능과 디자인을 표현한다. UI는 디자인 뿐만 아니라 데이터 입력이나 동작을 제어하기 위한 화면의 외관, 음악, 콘텐츠등을 표현하는 모든 방식을 말한다. 좁은의미의 UI디자인은 컨셉을 잡고 시나리오를 짜는 과정이며, 사용자의 입장에서 가장 적은 클릭과 드래그로 원하는 메뉴에 가장 빨리 도달할 수 있는지를 구상하는 것이다. 세분화하면 실제 그림을 그리고 색을 입히는 GUI(Graphic User Interface)..
웹킷(Webkit)이란 무엇인가? 웹킷(Webkit)이란 무엇인가? 정의분석 웹킷(WebKit)이란 무엇인가? "정의(Justice)란 무엇인가"에서 "정의"가 철학적 관점따라 다르게 해석되고, 시대에 따라 달리 이해되는 것처럼, 웹킷도 기술적 관점에 따라, 웹의 발전이 급속히 진행됨에 따라 다양한 의미와 용도를 함의하고 있다고 볼 수 있다. 어떤 이는 웹킷을 하나의 웹브라우저로 바라보고, 다른 이는 웹킷을 즉시 상용화가 가능한 소프트웨어 솔루션으로 보고 있다. 그러나 웹킷의 정의는 상당히 명료하다. 본 포스트에서는 웹킷의 정의를 사전적으로 한 단어 한 단어 뜯어봄으로써 웹킷을 본질적으로 이해하는데 도움이 될 수 있도록 시도해 보았다. 아울러 WebKit.org에서 밝힌 웹킷 오픈소스 프로젝트의 목표를 살펴보고 웹킷이 무엇인지 파악하는데..
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 는 웹 개발자 보다는 웹 퍼블리셔 혹은 코더라고 불리우는 직군에 더 친숙한 언어이다 (뭐.. 이 역할이 명확히 구분되지 않는 경우도 있지만...) 나 역시 개발..
위로
아래로

티스토리툴바