breeze on everywhere

블로그 이미지

도바토

Standby

'모질라'에 해당되는 글 3건

제목 날짜
  • Firefox Nightly(2) 2011.10.11
  • 블루큐브 스킨 뜯어보기 Part.1 - 「CSS3」(11) 2010.06.01
  • IE6 NO MORE 캠페인 동참!(8) 2010.04.19

Firefox Nightly

잡담 2011. 10. 11. 00:29



파이어폭스의 최전방이라고 할 수 있는 (?) 나이틀리 빌드를 받아서 사용중입니다.




http://videos-cdn.mozilla.net/serv/qa/QMO/qa_contribute_video.webm

*.webm 형식의 비디오 파일인데 HTML5를 지원하는 브라우저를 사용하고 계신다면 이 동영상이 보일 겁니다.
저 여우탈 갖고싶을 정도로 귀엽군요 크킄
저도 피드백을 보내 보고 싶으나 저질 영어실력이므로 도저히 불가능 ㅠㅠ




그런데 애드온은 이정도를 포기해야 합니다. 위의 5개 이외에는 전부 호환 불가로 사용 해제된 상태.
파이어폭스 테스트 버전에서도 LastPass가 건재하다는 것에 감사하게 생각합니다!!
그리고 각종 포털 사이트들은 자동로그인의 마수에서 절대로 벗어날 수가 없었지


※ 주의사항 (?)
  1. 웬만한 덕후가 아니라면 나이틀리 빌드를 설치하는 것을 그렇게 추천해 드리고 싶지는 않습니다. 많은 것을 포기해야 하기 때문.
  2. 만약 설치했는데 여러가지 버그가 발견되서 짜증난다면 그것을 제작자한테 뭐라뭐라 나무라면 솔직히 안됩니다. 테스트 버전이라고 배포하는 것이기 때문.
  3. 그리고 한국 웹사이트들에서의 속도는 절대로 보장할 수 없습니다.


저작자표시 비영리 변경금지
Posted by 도바토
Mozilla Firefox, Nightly, 나이틀리, 모질라, 브라우저, 오오오오오ㅗㅇ, 웹브라우저, 죽이는데, 카드캡터 사쿠라, 키노모토 사쿠라, 태그달기 귀찮아, 테스트, 파이어, 파이어폭스, 파이어폭스를 씁시다

블루큐브 스킨 뜯어보기 Part.1 - 「CSS3」

스킨 2010. 6. 1. 20:15
CSS3[씨에스에스삼]으로 div(글상자)의 모서리를 둥글게 만들어 보세요.
저도 방금 알아냈어요. (...)

드디어 시작된 스킨 뜯어보기 코너. 그런데 처음부터 난데없이 CSS3인 이유는...

블루큐브 스킨을 보시면 전체적으로 둥글둥글하다고 느끼실 겁니다. 그 둥근 테두리를 전부 이미지로만 처리해야 하는 애로사항이 있었는데, CSS3의 사용법 중 div(글상자)의 모서리를 둥글게 만드는 것이 있다는 것을 뒤늦게 깨닫고 말았습니다.

...-ㅅ-;; 많이 늦긴 하지만 CSS3을 사용하는 스킨이 되었다는 말입니다.


예를 들어 이런 부분이 있다고 하면


이렇게 세 부분으로 나누어져서, 각각 부분을 글상자로 만든 다음
윗부분과 아랫부분은 테두리를 둥글게 그려놓은 배경이미지로 채워넣고,
가운데 부분은 흰색 배경으로 채워 넣는 것이었습니다.

.commentReplyTop {
  width:603px; height:6px;
  margin-top:12px;
  background:url(images/commentReplyTop.png) center center no-repeat;
}

.commentReplyBottom {
  width:603px; height:6px;
  margin-bottom:12px;
  background:url(images/commentReplyBottom.png) center center no-repeat;
}

.commentList p {
  background-color:#FFF;
  padding:5px 12px 5px 12px;
  margin:0;
}

<div class="commentReplyTop">
</div>
<p>[샵샵_rp_rep_desc_샵샵]</p>
<div class="commentReplyBottom">
</div>

이렇게 난잡하기 짝이 없던 코드가


.commentList p {
  background-color:#FFF;
  padding:12px;
  margin:12px 8px 12px 0;
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
}

<p>[샵샵_rp_rep_desc_샵샵]</p>

무려 이렇게 간단하게 바뀌어버렸습니다. 오오 이런...
결과는 위의 사진과 거의 동일하게 나오겠죠?(귀찮아서 사진 안올리려는 수작)

색깔이 좀 달라진건 신경쓰지 말아주시고, 결과물이 아주 약간 더 깔끔하다는 것을 확인할 수 있습니다.



 코드를 보시면 감이 확 오실 겁니다. 넵. 크롬, 사파리, 파이어폭스에서만 보입니다.

사용법은 이렇습니다.

-webkit-border-radius:(수치)px;
-moz-border-radius:(수치)px;

위의 두 줄을 CSS파일의 원하는 부분에 부담없이 넣어주시면 됩니다. 픽셀 말고 다른 단위는 되나 확인을 안해봤네요.
div 뿐만 아니라 img(이미지)에도 먹히더군요. 예뻐 죽겠네요. -ㅂ-


신기술과 친하게 지내는것은 언제나 좋은것 같습니다. 어허허
위의 글상자 모서리 둥글게 다듬어주는것뿐만 아니라 텍스트 그림자에 글상자 그림자, 그라이언트까지 아주 지옥같은 집이 천국의 러브하우스로 변하는중.
이것들을 굉장히 다양한 방법으로 혼합해서 사용하면 무한한 응용이 가능하더군요.
근데 이제부터 IE나 오페라에서는 제 스킨이 매우 각지게 나오겠군요? 완전 다른 스킨마냥...

저작자표시 비영리 변경금지
Posted by 도바토
border-radius, CSS, CSS+DIV, CSS+HTML, css3, div, 굿, 글상자, 대발견, 뒷북, 뒷북소식, 모질라, 스킨, 스킨 뜯어보기, 스킨만들기, 오오오오오ㅗㅇ, 우와아아앙, 웹디자인, 웹킷, 웹프로그래밍

IE6 NO MORE 캠페인 동참!

잡담 2010. 4. 19. 23:16


저도 배너 달았습니다.

이제 IE6을 사용하시는 분들은 제 블로그에 들어오실 때 위와 같은 상냥한 문구를 볼 수 있습니다.

그런데 보통 다른 사람들이 쓰는 배너와는 조금 다르다는게 보이시죠?
크롬플러스와 오페라를 추가하고 닫는 버튼을 없애버렸습니다. 아하하... -ㅂ-
아마 닫는 버튼을 눌러도 페이지가 새로 고쳐질 때마다 계속 생기는 것 같던데, 저는 그 귀찮음을 좀 덜어드리려고 싶어서.

제가 수정한 배너를 사용하고 싶으신 분은 아래의 코드를 복사하셔서, 스킨편집에서 원하는 곳에 붙여넣으면 됩니다. (브라우저 아이콘 이미지들 불러오는게 좀 느릴 수도 있습니다.)

[code] [/code]




Posted by 도바토
CSS, HTML, HTML+CSS, ie6, Syntax, 구글, 구닥다리, 더이상쓰지않는, 똥덩어리, 모질라, 불여우, 사파리, 쓰레기, 애플, 오페라, 오페라 소프트웨어, 웹브라우저, 웹표준, 인터넷 익스플로러, 인터넷 익스플로러 8, 캠페인, 코드, 크롬, 크롬 플러스, 퇴비, 파이어폭스, 프로젝트

이전페이지 다음페이지
블로그 이미지

Standby

by 도바토

공지사항

  • Profile - 플로넨
  • Profile - 도바토

    최근...

  • 포스트
  • 댓글
  • 트랙백
  • 케이스 전면 팬 140mm로 교체하기
  • Mikrotik RB2011UIAS-2HnD-IN 2
  • Windows 10 Pro FPP 구입! 1
  • 레오폴드 FC900R 스탠다드 PBT 적축 개봉기
  • 데스크탑의 대격변 2
  • 더 보기
  • 저도 이번에 이 제품을 구입했는데 USB가 풀포트이고 전원포트가⋯
    홍현민 ㆍ 2017
  • 2016년 윈도우 PC 프로그래밍 핫 이슈 ★ 최적화 ★★★★★⋯
    sayheart ㆍ 2017
  • 희귀한 개봉기당
    도바토 ㆍ 2017
  • 마이크로소프트에서 맨든 USB... 이건 굉장히 귀하네요
    도바토 ㆍ 2017
  • 글게요 이게 대체 뭘까여...
    도바토 ㆍ 2016

태그

  • 크롬 플러스
  • 티스토리
  • 게임
  • 오오오오오ㅗㅇ
  • 블로깅라이프~
  • 구글 크롬
  • 크롬
  • 대항해시대 온라인
  • 애니메이션
  • HTML
  • 스킨
  • 블로그
  • 태그가 적다
  • 뻘짓
  • 뻘글
  • 코원
  • HTML+CSS
  • 블루큐브
  • 티스토리 스킨
  • 만세!!
  • 스크린샷
  • chrome
  • 태그달기 귀찮아
  • 마인크래프트
  • 블로그 스킨
  • 블로깅
  • 파이어폭스
  • 던전앤파이터
  • CSS
  • 스킨제작

글 보관함


  • 2017/01
    (2)

  • 2016/12
    (5)

  • 2016/08
    (1)

  • 2015/09
    (2)

  • 2015/06
    (5)

  • 2015/05
    (4)

  • 2015/04
    (6)

  • 2015/03
    (5)

  • 2015/02
    (11)

  • 2015/01
    (5)

  • 2014/12
    (2)

  • 2014/11
    (9)

  • 2014/10
    (4)

  • 2014/09
    (4)

  • 2014/08
    (2)

  • 2014/07
    (4)

  • 2014/06
    (1)

  • 2014/05
    (6)

  • 2014/04
    (13)

  • 2014/03
    (4)
«   2023/01   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

링크

카테고리

전체 (242)
공지사항 (3)
잡담 (91)
컴퓨터 (25)
모바일 (11)
음향기기 (6)
전자기기 (1)
대항해시대 온라인 (17)
마인크래프트 (16)
던전 앤 파이터 (31)
게임 (5)
스킨 (27)

카운터

Total
301,624
Today
1
Yesterday
2
방명록 : 관리자 : 글쓰기
도바토's Blog is powered by daumkakao
Skin info material T Mark3 by 뭐하라
favicon

breeze on everywhere

Standby

  • 태그
  • 링크 추가
  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • 전체 (242)
    • 공지사항 (3)
    • 잡담 (91)
    • 컴퓨터 (25)
    • 모바일 (11)
    • 음향기기 (6)
    • 전자기기 (1)
    • 대항해시대 온라인 (17)
    • 마인크래프트 (16)
    • 던전 앤 파이터 (31)
    • 게임 (5)
    • 스킨 (27)

카테고리

PC화면 보기 티스토리 Daum

티스토리툴바