CSS28

728x90
[javascript]유튜브 탭메뉴 별로 다르게 호출 (반응형포함) 하나의 영역에서 탭을 누르면 유튜브 영상이 탭별로 다르게 노출되게 하는 방법입니다. 먼저 script 를 사이에 삽입합니다. // youtube function getVidID(param) { var r = /(?:watch\?v=(.*)|youtu\.be\/(.*))/g; var match = r.exec(param); return match[1] ? match[1] : match[2]; } var frameBase = ''; var vidObj = [ "https://youtu.be/ktmvMZyVzWk", // data-idx 0 주소 "https://youtu.be/Decc1Apa-bU", // data-idx 1 주소 "https://youtu.be/DRJBGE-Zqj8", // data-idx..
[CSS]세로 두줄이상일때 말줄임 처리하기 예전에는 제목이나 글자수를 ... 줄일때는 개발에서 처리를 했었습니다. CSS에서 기능이 지원되면서 한줄 말줄임은 대부분 CSS에서 처리를 하게 되었습니다. 가끔 두줄일때도 말줄임을 할때가 있는데요. 그럴땐 아래처럼 하시면 됩니다. text{ height:50px; text-overflow:ellipsis; word-wrap:break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } -webkit-line-clamp:2; 두줄일땐 2, 세줄일땐 3으로 하시면 됩니다. (세로 높이값은 꼭 넣어야합니다.) 위처럼 두줄일때 말줄임... 처리가 됩니다. 만약 한줄일경우는 아래처럼 하시면 ..
[모바일]모바일 코딩하는 분들에게 웹퍼블리셔로 일한지 꽤나 오래 된거같다.웹디자인을 시작으로 웹퍼블리셔까지..지금도 회사마다 다르겠지만, 본인이 웹디자인을 시작했을때만해도 코딩과 디자인을 병행하면서 했던 기억이 난다.웹표준과 웹접근성, jquery 및 CSS까지 이제는 모바일 시대가 도래하면서 웹퍼블리셔의 역할이 분명해졌다고 생각한다. pc버전으로 사이트를 제작시 모든 브라우저 특히나 익스6부터 맞춰야하는것 때문에 굉장한 스트레스로 다가왔었는데(지금은 익스8부터 맞추는 기업들도 많다), 이번에 스마트폰 디바이스마다 맞춰야하는 현실이 되어버렸다. 익스6같은 존재가 안드로이드 하위버전이라고 보셔도 무방할듯 하다. 물론 ios하위버전에도 문제가 되는부분이 있긴하다.필자가 모바일 코딩을 하면서 힘든부분과 해결방법들을 몇자 적어 볼려고 한다. 1..
[텍스트큐브]텍스트큐브에 로고를 이미지로 바꿔보자! 텍스트큐브 제공형(?)의 블로그 로고를 이미지로 바꾸는 방법입니다. 텍스트 큐브닷컴은 아직 beta 버전이라 스킨편집 기능을 지원하지 않습니다. 그래서 이만 저만 불편한게 아니지요.. 다행이도 html 코드위젯은 지원함으로, 그걸이용하는 방법입니다. 예전에 텍스트큐브닷컴 블로그 수정하기 라는 글을 포스팅한적이 있습니다. 꼭참고 하시길 바랍니다. 텍스트 로고를 이미지로 바꾸는 방법은 다음과 같습니다. 먼저 원하는 로고이미지를 만든후 아무곳(?)이나 업로드합니다. 계정이 있으면 자신의 계정에 올리셔도 됩니다만, 저같은 경우는 아래와 같은 방법을 이용했습니다. 공지사항에 이미지를 업로드후 해당 이미지 주소를 복사하는 방법입니다. 이렇게 업로드된 이미지의 주소를 알기위해 이미지 속성을 확인합니다. 주소는 이런식..
[텍스트큐브]텍스트큐브닷컴 블로그 수정하기 텍스트큐브닷컴이 (http://blog.textcube.com/) 아직 베타 버전이라 스킨편집기능을 제공하고 있지 않습니다. 어쩌면 텍큐닷컴 베타 사용자들(저를포함)이 가장 우선적으로 필요로 하는 기능이 아닐까? 라는 생각을 해봅니다. 스킨편집 기능이 되어야 구글광고도 포스팅부분에 달수있고, 스킨도 자기 스타일데로 꾸밀수 있을텐데 말이죠. 그래서 생각해낸게 html 위젯 기능을 이용한 방법입니다. 마크업을 마음데로 할수는 없어도, css로 스킨스타일은 바꿀수가 있습니다. 제블로그를 보시면 텍큐에서 기본제공되는 스킨에서 스타일만 바꿔준것입니다. 아마도 이게 css 구조의 사이트에 장점이 아닐까 하는 생각을 합니다. 그럼 사용방법을 잠깐 알아보도록 하겠습니다. 먼저 '내 블로그 관리하기'를 클릭후 관리자 페..
[사이트]css로 만든 메뉴모음 사이트 http://www.dynamicdrive.com/style/ css로 만든 라이브러리가 많으니, 참고하시면 많은 도움이 될듯하네요.^^
[잡담]!important와 언더바 핵 한 규칙 안에서 윈도우용 IE 6 이하 버전을 위한 선언과 이외의 다른 브라우저를 위한 선언을 각각 사용하고 싶을 경우가 있습니다. 이를 위해서 속성에 이스케이프 문자를 사용하는 핵을 이용하거나 아니면 !important 또는 언더바 핵을 이용할 수 있습니다. 윈도우용 IE 6 이하 버전에서는 한 규칙안에서 여러 개의 속성을 사용할 수 없기 때문에 !important 핵을 사용하면 제대로 동작합니다. #nav { position: fixed !important; position: static; } 윈도우용 IE 4~6 버전은 첫 번째 선언을 무시하고 두 번째 선언을 적용합니다. 나머지 브라우저는 !important 키워드가 사용된 첫 번째 규칙을 적용합니다. !important 키워드를 쓰면 캐스케이드 ..
[도서]css 마스터 전략 최신 CSS 기법을 다루는 CSS 마스터가 되기 위한 필독서! 2006 아마존닷컴 컴퓨터인터넷 부문 베스트셀러 2위! 가장 유용한 CSS 기법을 한번에 정리하면서 실제 환경에서 발생할 수 있는 브라우저 관련 이슈를 다뤄 CSS 관련 지식 수준을 한 단계 올릴 수 있다. 이 책을 통해 CSS 전문가다운 코드를 작성할 수 있는 기법을 배워보자. 최신 CSS 기법 및 활용팁 총정리 놓치고 있었던 CSS 기본 개념 다시 다지기 브라우저 호환을 위한 버그 해결법 및 핵과 필터 사용법 유명 CSS 전문가가 직접 만든 실전사례 및 예제 이 책에서는 CSS 기본 개념을 다시 정리하여, 의미 있는 마크업 작성의 중요성, 코드를 잘 구조화해서 유지보수가 용이하게 하는 방법, CSS 레이아웃 모델의 동작원리 등을 다룹니다...
반응형