이전
목록
다음
명

CSS3 와 프로그래머,그리고 웹디자인

명랑폐인
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2011-03-20 (일) 18:09:02 · 2745 · 6

프로그래머가 웹사이트 제작시 짜증나는 경우가 웹디자인 부분
그중에서도 UI를 구성하는 레이아웃 이미지, 버튼 이미지등일텐데요.
간단하게 보이면서도 디자이너가 해주지 않으면, 못하는 영역중 하나입니다.
포토샵을 좀 만져보면 어렵지는 않은것이나, 포토샵 프로그램을 실행하여, 텍스트나 이미지 색성을 변경한후
다시 파일로 자르고, 그걸 ftp로 올리는 일련의 과정은, 귀찮은 작업이죠.
특히나, 저처럼 게으른 프로그래머들에겐,

웹앱을 관심을 가지고 있어, HTML5, CSS3 관련 자료들을 둘러보고 있는데,
위에 얘기했던, 부분들이 CSS3 코드만으로 처리가 가능하군요.
레이아웃이미지(둥근 모서리 테이블등)나 버튼들은, 그냥 CSS로 다 처리됩니다.
(특이한 모양 버튼들도, 이미지 + CSS3로 다 가능)

참고 URL
http://codecanyon.net/category/css
css 나 간단한 코드 라이브러리, 디자인관련 부분들을 판매하는 사이트입니다.
(css3 는 IE계열은 지원이 안됩니다. IE9에선 지원한다는 얘기는 들었지만, 되는지는 확인못해봄)
http://codecanyon.net/theme_previews/110073-flexible-css3-buttons-set?index=1
http://codecanyon.net/theme_previews/137335-100-css3-pagination-styles?index=1
http://codecanyon.net/theme_previews/134187-css3-shadow-pack?index=7

아래 사진은 개발중인 프로그램의 UI로 사용하기 만든것입니다. 물론 CSS3를 사용하였고
이미지는 하나도 들어가지 않았습니다.



HTML5 (With CSS3)가 모든 브라우져에서 지원되는 날은 멀어보입니다만,
모바일웹에서는 일찍 찾아올것 같습니다.(이미 아이폰과, 안드로이드폰은 CSS3를 지원하고 있습니다.)

결론:
일요일에 사무실 나와서 일은 안하고, css3 자료만 찾아보고 있음 -_-

#개발자톡 #개발자
|

댓글 6개

라라엘
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-03-20 (일) 18:11:15
그라디언트가 top -> bottom left -> right 로 지정이 되는게 좋더라구요.

가장자리 둥글게랑


이 두가지만 아주 가끔 사용합니다.
명명랑폐인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-03-20 (일) 18:34:01
디자인은 아이폰 문자함을 흉내낸것 같더라구요. 제가 만든게 아님^^
저거 css 수정해야 하는데, 도움좀 주세요.(css 잘모르는1인)
라라엘
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-03-20 (일) 20:34:58
네 샘플코드 주시고 원하는 내용 말씀하시면 수정해 드릴께요
명명랑폐인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-03-20 (일) 20:55:34
http://webtalk.kr/test/test2.php
http://webtalk.kr/test/test2_2.php
원하는건 li 단위로 좌우배치가 나오는 형태입니다.
한줄은 (test2.php 처럼, 그 다음줄은 test2_2.php 처럼)
색상은 회색계열 하나 더 추가.

모바일 웹앱에서 쪽지가 왔을때 사용할려고 합니다.
(아이폰의 메세지함 UI와 동일한 형태를 만들생각)
명명랑폐인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-03-21 (월) 17:52:51
헐...님아 고수...
우왕~~~굳
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
11-04-10 조회 3,547
11-04-08 조회 3,256
11-04-06 조회 3,057
11-04-05 조회 2,558
11-04-05 조회 3,062
11-04-04 조회 2,976
11-04-03 조회 2,689
11-04-02 조회 2,359
11-04-02 조회 4,084
11-04-02 조회 3,466
11-04-02 조회 2,809
11-04-01 조회 3,523
11-04-01 조회 2,317
11-04-01 조회 2,465
11-04-01 조회 3,060
11-04-01 조회 3,347
11-03-31 조회 2,807
11-03-30 조회 2,439
11-03-27 조회 2,667
11-03-27 조회 2,558
11-03-27 조회 3,449
11-03-27 조회 3,645
11-03-26 조회 3,461
11-03-25 조회 2,533
11-03-25 조회 3,092
11-03-25 조회 3,146
11-03-25 조회 3,236
11-03-24 조회 5,115
11-03-23 조회 2,548
11-03-23 조회 3,558
11-03-23 조회 2,407
11-03-22 조회 2,497
11-03-22 조회 2,314
11-03-21 조회 2,770
11-03-20 조회 3,227
11-03-20 조회 2,746
11-03-19 조회 2,591
11-03-18 조회 2,231
11-03-18 조회 3,266
11-03-18 조회 2,781
11-03-18 조회 2,465
11-03-17 조회 3,781
11-03-17 조회 2,844
11-03-17 조회 2,739
11-03-17 조회 2,277
11-03-17 조회 3,170
11-03-15 조회 4,122
11-03-15 조회 2,526
11-03-14 조회 1,973
11-03-14 조회 3,581
11-03-14 조회 3,373
11-03-14 조회 2,166
11-03-13 조회 2,747
11-03-13 조회 3,084
11-03-12 조회 2,740
11-03-12 조회 2,120
11-03-12 조회 2,099
11-03-11 조회 2,505
11-03-11 조회 2,808
11-03-11 조회 2,606
11-03-10 조회 2,316
11-03-10 조회 2,691
11-03-10 조회 2,546
11-03-10 조회 2,849
11-03-10 조회 2,316
11-03-10 조회 2,566
11-03-09 조회 2,348
11-03-09 조회 2,757
11-03-09 조회 2,108
11-03-09 조회 3,572
11-03-09 조회 2,794
11-03-09 조회 4,374
11-03-08 조회 2,819
11-03-08 조회 2,472
11-03-08 조회 2,551
11-03-08 조회 2,503
11-03-08 조회 1,991
11-03-08 조회 2,298
11-03-07 조회 2,342
11-03-07 조회 3,735
11-03-05 조회 2,424
11-03-05 조회 4,910
11-03-04 조회 2,216
11-03-04 조회 2,056
11-03-04 조회 2,172
11-03-04 조회 3,175
11-03-04 조회 2,863
11-03-04 조회 2,575
11-03-04 조회 2,609
11-03-04 조회 2,567
11-03-04 조회 2,668
11-03-04 조회 2,264
11-03-03 조회 1,865
11-03-03 조회 2,374
11-03-03 조회 3,578
11-03-03 조회 2,900
11-03-03 조회 3,261
11-03-03 조회 2,268
11-03-03 조회 2,736
11-03-03 조회 2,972
글쓰기