breeze on everywhere

블로그 이미지

도바토

Standby

'스킨만들기'에 해당되는 글 5건

제목 날짜
  • IE9에서 제대로 나오는 스킨을 만들자!!(4) 2012.04.10
  • [베타] 블루큐브 v1.4 - 티스토리 스킨(11) 2010.07.22
  • 블루큐브 스킨 뜯어보기 Part.1 - 「CSS3」(11) 2010.06.01
  • 두번째 스킨의 계획도입니다.(7) 2010.05.15
  • 블로그 스킨 제작 계획도(4) 2010.05.03

IE9에서 제대로 나오는 스킨을 만들자!!

스킨 2012. 4. 10. 14:39

제곧내임.


어느새 우리집에 있는 데스크탑과 노트북에 있는 인터넷 익스플로러가 강제로 IE9로 업데이트되었습니다.


9는 7과 굉장히 닮은듯하고 8은 9보다 훨씬 티스토리 스킨을 만들기 쉬우므로


9만 잡으면 나머지 인터넷 익스플로러인 8과 7도 한꺼번에 잡을 수 있을 거라 봅니다.


요즘 대항온에서 배를 구하면서 동시에 검을 팔고 있는데 사가는사람도 팔아주는사람도 십만년을 기다려도 제 멘탈만 풍화될 뿐 도데체 결착이 날 기미가 보이질 않습니다. ㅡㅡ;... 게임이 하기 싫어지니 자연스럽게 낮잠으로...


한줄요약: IE9에서 가장 이쁜 스킨을 하나 만들어 보이겠다.


제 노트북쨔응 IE9가 강제로 업데이트된것처럼 (...) 누가 저 스킨을 이번주말까지 끝내버릴 압박을 주세요.(플로넨: 요기잉네)




티스토리 글쓰기 왜이렇게 바뀐거임

저작자표시 비영리 변경금지
Posted by 도바토
IE, Internet Explorer, 스킨, 스킨만들기, 스킨제작, 오오오오오ㅗㅇ, 운지 어드벤쳐, 윈도 업데이트, 인터넷 익스플로러, 자연속에 내가있다, 티스토리, 티스토리 스킨

[베타] 블루큐브 v1.4 - 티스토리 스킨

스킨 2010. 7. 22. 15:15
베타 릴리즈입니다. 플레인 버전만 있습니다.
  1. 크롬과 같은 CSS3을 지원하는 브라우저를 사용해야 합니다. IE에서는 제대로 된 모습이 출력되지 않습니다. 
    ( 구글 크롬 다운로드 - http://google.com/chrome )
  2. 네이버에서 배포하는 나눔글꼴이 설치되어 있어야 합니다. 없다고 맑은 고딕으로 표시되지 않습니다.
    ( 나눔글꼴 다운로드 - http://hangul.naver.com/nanum.nhn )
  3. 이 스킨을 사용하면서 발생하는 문제점 & 지적사항은 이 글의 덧글로 바로 달아주셨으면 합니다.
BLUECUBE_by_Polaris_Australis_V1-4_PLAIN.7z

저작자표시 비영리 변경금지
Posted by 도바토
BETA, chrome, CSS, css3, Google Chrome, HTML, HTML+CSS, HTML/CSS, 구글 크롬, 나눔고딕, 나눔글꼴, 배포, 베타, 베타버전, 베타테스트, 블로그 스킨, 블루큐브, 스킨, 스킨 배포, 스킨만들기, 스킨제작, 크롬, 크롬 최적화, 티스토리 스킨

블루큐브 스킨 뜯어보기 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, 굿, 글상자, 대발견, 뒷북, 뒷북소식, 모질라, 스킨, 스킨 뜯어보기, 스킨만들기, 오오오오오ㅗㅇ, 우와아아앙, 웹디자인, 웹킷, 웹프로그래밍

두번째 스킨의 계획도입니다.

잡담 2010. 5. 15. 13:17


보시다시피 1단입니다. 세부적인 디자인은 전부 제 머릿속에 들어있어요.
역시 무채색이 무난하군요. 지금같이 온통 퍼런색이면 얼마 안쓰다가 퍼렇게 질려버릴 것만 같아서.
색깔은 변할 수 있습니다. 또는 아무색도 안들어간 스킨이 되어버릴수도 있음. 아, 생각해보니 그게 더 좋을듯한!?


저작자표시 비영리 변경금지
Posted by 도바토
Paint.NET, 계획, 계획도, 도트, 무채색, 블로그, 블로그 스킨, 블로깅, 스킨, 스킨만들기, 스킨제작, 티스토리, 티스토리 스킨, 페인트닷넷, 허접

블로그 스킨 제작 계획도

스킨 2010. 5. 3. 15:10
구글 크롬으로 제작



Paint.NET으로 대충 그렸습니다.

혼자만 쓰지 않고 배포도 해볼 생각입니다.

목표는 연휴가 끝나는 일요일이 끝나기 전에 제작 완료하기!!!!

과연 아무것도 안하는 잉여블로그에서 탈출할수 있을까요?
Posted by 도바토
chrome, Chromeplus, CSS, Google Chrome, HTML, HTML+CSS, HTML/CSS, Paint.NET, XHTML+CSS, XHTML/CSS, XML, 계획, 구글 크롬, 대장정, 대장정준비중, 미션 임파서블, 부디..., 불가능은 없다, 불가능한 꿈, 블로그, 블로그 스킨, 블로깅, 블로깅~, 블로깅라이프~, 스킨, 스킨 제작, 스킨만들기, 스킨만들기~, 스펙타클, 연휴, 크롬, 크롬 최적화, 크롬 플러스, 크롬과 티스토리, 티스토리, 티스토리 스킨, 페인트닷넷

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

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
  • 던전앤파이터
  • chrome
  • 크롬 플러스
  • 블로그
  • 블로깅
  • 대항해시대 온라인
  • HTML+CSS
  • 티스토리 스킨
  • 블로깅라이프~
  • 게임
  • 블루큐브
  • 만세!!
  • 오오오오오ㅗㅇ
  • 스킨제작
  • 크롬
  • 뻘글
  • 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,634
Today
1
Yesterday
3
방명록 : 관리자 : 글쓰기
도바토'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

티스토리툴바