css 썸네일형 리스트형 jQuery CSS Methods References jQuery CSS Methods References MethodDescriptionaddClass()선택된 엘리먼트에 한 개 이상의 class를 추가합니다.css()선택된 엘리먼트에 한 개 이상의 style 속성(property)를 설정합니다.hasClass()선택된 엘리먼트가 특정 class를 가지고 있는지 여부를 체크합니다.height()선택된 엘리먼트의 높이(height)를 설정하거나 리턴합니다.offset()선택된 엘리먼트의 위치를 설정하거나 리턴합니다. (문서상의 위치)offsetParent()특정위치에 있는 바로 위의 부로 엘리먼트를 리턴합니다.position()가장 처음으로 선택된 엘리먼트의 위치를 리턴합니다. (부모엘리먼트의 위치)removeClass()선택된 엘리먼트에서 한 개 이상의 .. 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+CSS3]제리쿼리(jQuery)를 사용해 투명도 사진 갤러리 간단 소스 [HTML5+CSS3]제리쿼리(jQuery)를 사용해 투명도 사진 갤러리 간단 소스 CSS를 사용해 마크업을 하고, 모션은 제이쿼리(JQuery)를 사용해 간단하게 만들어보았습니다. 결과물 화면입니다. 소스 화면입니다. 다운로드 하셔서 분석해 보셔요 [HTML5+CSS#]를 공부한다면, 한번쯤 독파해야 할 사이트 주옥같네요 ㅎㅎ CSS에 대한 전반적인 개념을 잡기 위해 꼭 읽어보셔야 합니다...ㅎㅎ 바로가기 [스타일로 말해요] CSS를 아는 웹디자이너 되기 CSS 할 줄 아세요? CSS는 웹이 시각적으로 보여주는 부분을 담당한다. CSS는 아이디어를 온라인상에 펼칠 수 있게 하기 위해서 꼭 알아둘 필요가 있는 언어이다. CSS 코드를 설명하고 있는 책들은 무수히 많지만, 그런 추상적인 코드에서는 생각을 자유롭게 펼치기 힘들다. 눈에 보이는 색상, 형태, 배치를 가지고 생각해야 한다. 코드로 말하는 것이 아니라 스타일로 말해야 한다. 스타일로 말해요!』는 여러분의 디자인이 웹을 위한 결과물로 어떻게 적용될 수 있는지를 간단한 예제를 이용하여 설명함으로써, 코드와 스타일 사이의 벽을 허물어 줄 것이다. 스타일로 말해요 저자 제이슨 그랜포드 티그 지음 출판사 위키북스 | 2010-07-28 출간 카테고리 컴퓨터/IT 책소개 『스타일로 말해요!』는 디자인이 웹을 .. JavaScript/CSS 용량 줄여주는 웹 사이트 Online JavaScript/CSS Compression Using YUI Compressor JavaScript/CSS 용량 줄여주는 웹 도구 Online YUI Compressor는 온라인에서 JavaScript와 CSS를 압축하는 도구다. 야후의 YUI Compressor를 사용하는 이 도구는 입력 파일에서 변수의 이름을 단축시키고 공백을 삭제하는 등 웹 브라우저만 이해할 정도로 내용을 압축하고, JavaScript와 CSS에 문법적 오류가 있으면 그것까지 지적해준다. 이거까진 공개 안하려했는데, 내 홈페이지의 JS를 이 도구에 사용해보니 용량이 60% 줄어들더라.. 한국의 개발자가 더 좋은 툴을 개발하여 정리할 겸 글 판올림을 한다. http://iblogbox.com/devtools/js/에.. [jsbeautifier.org]JS, CSS 파일 압축한 파일 풀어서 보기 jsbeautifier.org jsbeautifier(http://jsbeautifier.org/)는 난독화/패킹된 자바스크립트 디코딩할때 아주 유용한 툴입니다. 가끔 안되는 경우도 있는데 보통은 디코딩이 깔끔하게 잘 되고 들여쓰기와 줄바꿈을 해주기 때문에 수동으로 디코딩한 결과를 보기쉽게 정리시킬때도 좋습니다. 바로가기 [HTML5+CSS3]에 대한 전체적인 개념 정리파일 [HTML5+CSS3]에 대해 전체적인 정리파일 다운로드 하셔서, 압축 푸시고 보시면 됩니다. [CSS3 천기누설]이해하기 쉬운 CSS3에 관한 짧은 프레젠테이션 CSS3 천기누설텍 출처 - http://slidesha.re/eDDt2F 제이쿼리(JQuery)를 이용한 썸네일 이미지 갤러리 제이쿼리(JQuery)를 이용한 썸네일 이미지 갤러리 CSS를 사용해 마크업을 하고, 모션은 제이쿼리(JQuery)를 사용해 간단하게 만들어보았습니다. 결과물 화면이구요. 소스 화면입니다. 다운로드 하셔서 분석해 보셔요 PSD파일(포토샵파일)을 CSS3 코드로 변환하는 포토샵 플러그인 사이트 CSS3PS.COM CSS3Ps는 포토샵에서 생성한 레이어를 CSS3로 변환해 주는 클라우드 서비스 기반 포토샵 플러그인입니다. 여러 레이어 또는 레이어 그룹을 선택하고 한 번의 클릭으로 변환할 수 있습니다. Gradient, Inner Shadow, Inner Glow, Outer Shadow, Outer Glow등의 CSS3 속성으로 변환해 준다고 합니다. 변환 즉시 브라우저에서 결과를 확인하고 다른 사람들과 공유할 수도 있습니다. 그리고 무료입니다. 바로가기 CSS3 코드 생성 사이트 CSS3MAKER 다양한 효과를 손쉽게 코드로 생성해주는 사이트 입니다. 바로가기 [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 - 속성 선택자 태그 속성을 조회하여.. 이전 1 2 3 4 다음
