css 썸네일형 리스트형 [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]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 - 속성 선택자 태그 속성을 조회하여.. [CSS3] 새로운 기능(스타일) CSS3의 새로운 기능 CSS 는 Cascading Style Sheets 의 약자로 글자체, 줄간격, 배경색, 위치 지정과 같은 웹 페이지의 전반적인 스타일을 지정하는데 이용되는 문법 규칙이다 엄밀히 말하자면 HTML과 CSS는 그 역할이 서로 다르다고 할 수 있다 그러나 HTML 의 차세대 버전인 HTML5 제안과 함께 CSS3라는 이름으로 새로운 스타일도 개발되고 있다. 즉 HTML5 와 CSS3 둘 다 차세대 웹 개발을 위한 새로운 표준인 것이다 그래서 HTML5를 다루는 많은 자료들에서 이 둘을 같이 설명하는 경우가 많다 어쨋든 CSS3 는 웹 개발자 보다는 웹 퍼블리셔 혹은 코더라고 불리우는 직군에 더 친숙한 언어이다 (뭐.. 이 역할이 명확히 구분되지 않는 경우도 있지만...) 나 역시 개발.. 오로지 CSS로만 만들 네비게이션(GNB) 소스 오로지 CSS로만 만들 네비게이션(GNB) 소스 다운로드해서 분석하시고, 응용해서 사용하세요 ㅎㅎ 그외 소스로는 http://www.apycom.com/ 여기를 참조해보세요 제이쿼리(JQuery), CSS3, HTML5 효과 튜토리얼 모음 HTML / CSS [HTML/CSS] 001. CSS3를 이용한 탭 메뉴(tab menu) 만들기 How to Create a CSS3 Tabbed Navigation [미리보기] [HTML/CSS] 002. CSS3를 이용한 버티컬 네비게이션 메뉴 만들기 Orman Clark’s Vertical Navigation Menu [미리보기] [HTML/CSS] 003. CSS3를 이용한 오목한 버튼 이미지 코딩하기 Tagtastic Tag Cloud with CSS Transformations [미리보기] [HTML/CSS] 004. 웹폰트와 배경이미지를 이용한 별 코딩Create a Rating System With CSS, Web fonts and Sprites [미리보기] [HTML/CSS] 005... [CSS] white-space:nowrap; word-break:break-all; text-overflow:ellipsis; [ CSS style ] white-space:nowrap; word-break:break-all; text-overflow:ellipsis;white-space:nowrap; 넓이를 지정하였더라도 자동으로 줄바꿈되지 않게 강제로 개행을 막자줌. word-break:break-all; 문장을 띄어쓰기 할 때 쓰인 공백기준이 아닌 문자단위로 끊어주는 속성. text-overflow:ellipsis; 텍스트가 넘칠때, 말줌일표(...)가 나오게 하는 속성, 적용조건 white-space:nowrap; [CSS] text-overflow, overflow 속성 text-overflow, overflow 속성 Text-overflow - text가 overflow되었을 때 어떻게 처리할 것인가를 나타내는 속성 - overflow 속성이 hidden 등 overflow 속성이 값을 갖고 있을 때 적용이 가능 - 엘리먼트 크기 이상의 글이 들어있음을 말 줄임표 ...을 이용하여 나타내줌 text-overflow : clip | ellipsis | string clip - Clips the text ellipsis - Render an ellipsis ("...") to represent clipped text string - Render the given string to represent clipped text text-overflow-mode - clip | e.. CSS - line-height으로 제어 하는 폰트 행간 CSS - line-height으로 제어 하는 폰트 행간 폰트 속성에 따라 행간이 간격이 달라지는걸 알면서도 그때마다 화면캡쳐로 진행해왔던 일입니다. 이제라도 정리해 보고자^^;; 위 그림에서 보듯 폰트가 굴림인지 돋움인지는 상관없이 동일했으며 line-height 에 따라 달라집니다. 다행이도 ie와 FF도 동일하고 왼쪽은 항상 1px씩 기본적으로 갖고 있네요. ie(7이하버전) / FF : line-height: 14px일경우 0 0 3px 1px; : line-height: 16px일경우 1px 0 4px 1px; : line-height: 18px일경우 2px 0 5px 1px; Opera : line-height: 14px일경우 1px 0 1px 1px; : line-height: 16px일경우.. CSS 핵정리 - 핵과 필터 사용에 대한 주의사항 핵과 필터 사용에 대한 주의사항 CSS는 언어적인 측면에서 상위 버전 호환성을 잘 고려해서 설계되었다. 브라우저가 특정 선택자를 이해하지 못할 경우 해당 규칙을 전혀 적용하지 않게 된다. 마찬가지로 특정 속성이나 값을 이해하지 못할 경우 해당 선언을 모두 무시해버린다. 이런 기능으로 인해 새로운 선택자, 속성, 값이 추가되더라도 구버전의 브라우저에는 별다른 영향을 주지 않게 된다. 이런 특성을 이용하면 구식 브라우저에서도 안전하게 동작하면서도 최신 브라우저를 위한 규칙과 선언을 사용할 수 있다. 새로운 버전의 브라우저가 나올 경우 기존에 필터를 써야했던 CSS가 제대로 동작하게 될 것이다. 구버전의 브라우저에서 문제가 있어서 고급 CSS 기능을 사용했다면 새로운 버전에서는 이런 문제가 해결될 것이다. 이.. [CSS] 텍스트 줄바꿈 처리 word-break, white-space 작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다. word-break word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다. .selector {word-break:break-all;} 위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈이 가능하게 됩니다. 위의 그림이 잘 이해가 가지 않는다면 이.. CSS 폰트(font) 굵기(weight)와 자간(letter-spacing) 웹 표준 팁) 폰트를 굵게 하려면 태그가 아니라 css에서 font-weight 로 설정을 해 주는 게 좋습니다. 강조는 , 사용~ 폰트를 굵게 하려면 CSS에서 font-weight 속성을 사용합니다. 값은 숫자도 가능하지만, 세세하게 조정되는 폰트가 없기 때문에 보통 bold(800), normal(400) 을 사용하죠. 폰트 중에는 보통과 굵은 폰트를 따로 제공하는 경우가 있는데, 이 경우에는 자간을 맞춰 놓았기 때문에 굵게 만들어도 어색하지 않습니다. 예를 들어, '맑은 고딕'의 경우에는 '맑은 고딕 Bold', '나눔고딕'의 경우에는 '나눔고딕 Bold'를 제공하기 때문에 font-weight:bold 로 하더라도 폭 변화가 없습니다. '맑은 고딕'이 설치되어 있다면 아래 예제에서 굵게 하여도 .. 아이폰 관련 가로,세로 모드시에 선택적 CSS파일 가져올수 있도록 하는 자바스크립트 아이팟터치/아이폰 ( 4세대 미만 ) 에서는 보통 가로 320 px, 세로 480 px 입니다. 그러므로 CSS파일 2개를 제작해주셔야합니다. 하나는 가로 320 px 로 지정하셔서 헤더,미들,푸터 제작후 가로 480 px 로 지정하신후 제작하셔서 2개의 CSS로 다음,네이버,파란,트위터,구글 처럼 애플모바일기기 호환성을 높힐수 있습니다. 소스 상에서는 다음과 같은 자바스크립트로 인식하게 할수있습니다. 위처럼 작성하시면 문제가 될것은 없습니다. 나머지는 여러분들의 몫 입니다. CSS 높이(Height) 100% 맞추기(브라우저 창크기에 맞춰서) 높이 100% 첫번째 Hack을 사용한 100% 마추기 기본 소스 일단 DTD설정후 높이 100%라는것은 브라우저의 높이를 기준으로 하기때문에 container에 100%를 주면 전체 html의 높이는 gnb+ container + footer이 되어서 화면의 100%를 넘어선다 그럼 어떻게 잡아주는것이 좋을까? 먼저 DTD설정을 확인한다. (거의 필수) 본인은 DTD XHTML 1.0 Transitional 제작했다. (일단 많이 쓰이니깐..) 처음해줄것은 html과 body를 높이 100%를 주는것이다. Element같은경우 최상위의 높이를 기준으로 삼기떄문에 최상위인 html과 body에 높이 100%를 설정해준다 html, body {height: 100%; margin: 0; padding:0;.. CSS로 이미지파일 필요없이 라운드 테이블,DIV 만들기 예제만 봐도 충분히 알수 있다.... 맨처음 도대체 어떤 원리인가 했는데... 내가 이해한 바로는...픽셀하나하나로 장난치는 것뿐이라는 거... 어렵지 않다...ㅋㅋ 이미지 없이 라운딩 박스 표현하기! 이미지 없이 라운딩 박스 + 보더 표현하기! CSS IE6 IE7 핵...아 짜증난다... CSS... 원하는 효과 .test {color:#fff; margin:10px;} 언더바(_)를 쓰면 ie6에만 적용 .test {color:#fff; margin:10px; _margin:10px;} ie6 에서만 스타일을 제외하는 것은 /**/ 를 추가 .test {color /**/:#fff; margin:10px;} ie7에서만 적용하는 것은 빨간부분 css를 추가 *:first-child+html .test {color:#fff; margin:10px;} ie버전을 제외한 Mac IE Ver5, OperaVer7, Mozilla, Firefox에만 적용하고자 한다면 :root div.matey {color:#000; margin:10px;} CSS만으로도 플래시 효과처럼 만든 사이트다.(Mobile Cast, The Css Awards) http://www.mobilecast.co.kr/ http://www.thecssawards.com/ 크로스브라우징 CSS 핵 정리 Netscape 4 제외시키기 Netscape 4은 media속성값에 "screen"이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다. 이나 라고 지정할 경우 Netscape 4은 읽어 들이지 못한다. 부분적으로 읽어들이지 못하게 하는 경우에는 Caio's hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다. p { /*/*/ color:white; /* */ } Win IE 3~4, Mac IE 4~4.5, Netscape 4 제외시키기 @import로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로.. 실전 UI(HTML/CSS)개발 가이드 유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드. 본문 건너 뛰기 올해 하반기에 해야 할 일들이 많이 쌓여 있었습니다. 강의, 책, XE(오픈UI프로젝트)에서 사용해야 할 ‘교재, 콘텐츠, 가이드’를 만들어야 했는데 따로 따로 준비 하자니 너무 소모적인 일들이라 벌어진 일들을 한 번에 일망타진할 수 있는 묘안이 필요했고 제 결단은 ‘세 가지 일을 한 번에 해치우기’ 였습니다. ‘토, 일’ 모두 사무실로 출근하면서 후배들이 궁금해 할만한 질문들을 추린 다음 스스로 답변을 달기 시작 했는데 오늘 문서를 완성(?) 했습니다. 여러 문서들을 참조 했지만 주관적인 의견이 포함된 내용도 있어서 ‘정답’이라고 할 수는 없습니다. 하지만 UI 개발자들이 한 번 쯤은 고민했던(또는 해야 할) 주제들의 FA.. CSS Sprite 생성도구 웹서비스 http://ko.spritegen.website-performance.org/ CSS 에서 사용할 아이콘 이미지들을 일일히 포토샾작업을 하지 않고 합쳐주는 웹 서비스이다. 완전 이해하기 쉬운 CSS에 대한 기초 설명이다. Blue Plate 레이아웃의 뼈대. 상단에 메뉴가 있고 왼쪽엔 내용, 오른쪽엔 서브메뉴와 위젯이 나타나는 구조이다. 레이아웃의 CSS 파일을 열어보면 각각에 대하여 이름과, 속성이 지정되어 있다. #header { position:relative; width:920px; height:120px; background:url(../images/default/bgHeader.png) no-repeat left top; z-index:99;} #columnRight { position:relative; width:199px; margin-top: 10px; margin-bottom: 10px; padding:10px 5px 10px 5px; float:right; background-color:#ffffff;.. CSS 유용한 기초정리 CSS(Cascading Style Sheet) - HTML이 가진 디자인의 한계를 보완하기 위해서 만들어진 언어로, 웹페이지에 자주 적용하는 디자인을 하나의 규칙으로 정의한 뒤 호출하여 사용할 수 있다. 스타일 시트의 구성 - 스타일시트는 사이에 위치하며, 로 끝난다. - 로 사용하는 보편적인 방식이다. [사용형식] Inline style sheet(각각의 태그에 적용하는 방법) 이 방식은 스타일 시트의 정의 없이 태그내에 직접 삽입하는 방식이다. [사용형식] External style sheet(외부문서를 불러와 적용하는 방식) 사이에 태그로 스타일시트 파일을 연결하여 사용하는 방식으로, 하나의 스타일시트를 여러 문서에 적용하는 방식이다. [사용형식] rel : 연결할 파일과 적용할 html 파일의 .. CSS를 최적화하고 파일크기를 줄이는 15가지 방법[펌] CSS코드를 효율적이고 최적화하면서 파일사이즈를 줄일 수 있는 CSS최적화 방법에 대해서 얘기를 하려고 한다. - 소개 더욱 더 복잡한 CSS코드를 쓰게 되면서 이러한 기술은 CSS파일 사이즈를 단지 몇kilobytes라도 줄여야할것이다. 1. CSS Sprite의 사용 "CSS Sprite는 image request의 요청을 감소시키는 방법이다. 여러이미지들을 하나의 이미지로 합치고 CSS background-image 혹은 background-position속성을 이용하여 이미지의 부분들을 훌륭하게 보여준다. - Yahoo Deloper Rule(http://developer.yahoo.com/performance/rules.html) 이러한 방법은 HTTP Request와 웹사이트의 트래픽을 효율적.. html 문서에 외부 CSS파일 삽입하기 3가지 방법~! html 문서에 css를 적용하는 방법에는 크게 3가지가 있다... method 1 문서에 직접 삽입 - style 엘리먼트 사용 css 문서를 내부에 삽입 method 2 외부에 css파일을 두고 불러오기 - 외부스타일 시트 사용 ..... /* link태크는 단독태그라서 뒤에.. /를 붙여준다. */ ..... method 3 외부에 css파을 두고 불러오기 - @import 사용 ..... ..... 방법3으로 하게 되면 지원하지 않는 css를 숨김으로 해서 레이아웃이 깨지거나 잘못된 해석을 막을수 있다. css를 숨기지 않는다면 예전 브라우저에서는 알아볼 수 없는 변형된 페이지를 보여주게 된다. method 4 인라인 스타일 ..... 내용을 적어주세요 ..... 케스케이드의 가장 낮은 단계로써 .. 외부 CSS 파일 HTML 문서에 불러오기 CSS파일.css 파일불러오기 이전 1 2 다음
