'HTML5'에 해당되는 글 4건

  1. 2013.02.21 오산시 열린시장실
  2. 2013.02.21 진주시 모바일 서비스
  3. 2013.02.21 청주시 모바일 서비스
  4. 2011.10.26 [css3] css3로 aqua버튼 만들기
2013.02.21 16:26

[오산시 열린시장실]

서비스내용 : 시민과의 동행, 공약실천사항 등

DTD : HTML5+css3

언어기반 : 워드프레스(PHP)

배포형태 : 3단계 반응형웹 (PC 형태 +테블릿 + 스마트폰형태)


 

'YHProject > 반응형웹' 카테고리의 다른 글

오산시 열린시장실  (0) 2013.02.21
창원시 모바일 서비스  (0) 2013.02.21
진주시 모바일 서비스  (0) 2013.02.21
청주시 모바일 서비스  (0) 2013.02.21
Posted by YH데이타베이스

댓글을 달아 주세요

2013.02.21 13:43

'진주시 모바일 서비스'가 드디어 오픈이 되었습니다.

Responsive을 적용하여 스마트폰 및 태블릿 스크린을 지원하도록 구현되었습니다.



[진주시 모바일 서비스]

도메인 m.jinju.go.kr

서비스내용 : 진주 홈페이지DB 연동, 국토해양부 부동산통합, 열람 연동한국석유공사 연동

DTD : HTML5+css3

배포형태 : 모바일웹(반응형)+안드로이드아이폰 앱

앱서비스 방식 : 하이브리드(ThinClient Type) APP

언어기반 : 모바일 전자정부표준프레임워크(JAVA)

PC에서 접근할 시에는 크롬 또는 사파리 브라우저로 접속하세요~


'YHProject > 반응형웹' 카테고리의 다른 글

오산시 열린시장실  (0) 2013.02.21
창원시 모바일 서비스  (0) 2013.02.21
진주시 모바일 서비스  (0) 2013.02.21
청주시 모바일 서비스  (0) 2013.02.21
Posted by YH데이타베이스

댓글을 달아 주세요

2013.02.21 13:28

'청주시 모바일 서비스'가 드디어 오픈이 되었습니다.

Responsive을 적용하여 스마트폰 및 태블릿 스크린을 지원하도록 구현되었습니다.


[청주시 모바일 서비스]

도메인 m.cjcity.net

서비스내용 : 청주 홈페이지DB 연동새올행정시스템 연동국토해양부 부동산통합 열람 연동한국석유공사 연동과태료 결재등

DTD : HTML5+css3

배포형태 : 모바일웹(반응형)+안드로이드아이폰 앱

앱서비스 방식 : 하이브리드(ThinClient Type) APP

언어기반 : 모바일 전자정부표준프레임워크(JAVA)

PC에서 접근할 시에는 크롬 또는 사파리 브라우저로 접속하세요~



'YHProject > 반응형웹' 카테고리의 다른 글

오산시 열린시장실  (0) 2013.02.21
창원시 모바일 서비스  (0) 2013.02.21
진주시 모바일 서비스  (0) 2013.02.21
청주시 모바일 서비스  (0) 2013.02.21
Posted by YH데이타베이스

댓글을 달아 주세요

2011.10.26 18:00

아쿠아 버튼을 요즘 많이 쓰는데요

이 버튼을 이미지가 아닌 css3만을 활용하여 만들 수 있습니다.

이버튼을 만들어볼까요?

우선 익스8버전 밑에선 보이지않는다는 ㅡㅡ;;

익스9이상이셔야 하구요.. 크롬과 사파리는 조금 차이는 날 수 있습니다. (익스9에선 Graients는 먹히지 않군요..ㅡㅡ;;)

브라우저별로 css3가 지원되는 상황을 한눈에 볼수있습니다.

http://www.findmebyip.com/litmus/#target-selector

우선 html을 작성합니다.

html5로 작성하겠습니다.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>아쿠아버튼만들기</title>
<style type="text/css">

.button{
width:120px;
height:24px;
padding:5px 16px 3px;
-webkit-border-radius:16px;
-moz-border-radius:16px;

-ms-border-radius:16px;
border:2px solid #ccc;
position:relative;
font-family:Arial, Helvetica, sans-serif;
font-weight:800;
color:#fff;
text-shadow:rgba(10,10,10,0.5) 1px 2px 2px;
text-align:center;
vertical-align:middle;
overflow:hidden;
}
.aqua{
background-color:rgba(60,132,198,0.8);
background-image:-webkit-gradient(linear, 0% 0%, 0% 90%,

from(rgba(28,91,155,0.8)), to(rgba(108,191,255,0.9)));
border-top-color:#8ba2c1;
border-right-color:#5890bf;
border-bottom-color:#4f93ca;
border-left-color:#768fa5;
-webkit-box-shadow:rgba(66,140,240, 0.5) 0px 3px 2px;
-moz-box-shadow:rgba(66,140,240,0.5) 0px 3px 2px;

-ms-box-shadow:rgba(66,140,240,0.5) 0px 3px 2px;

}
.button .blaze{
position:absolute;
top:3px;
left:5px;
-webkit-border-radius:8px;
-moz-border-radius:8px;

-ms-border-radius:8px;
height:10px;
width:143px;
padding:3px 0;
background-color:rgba(255, 255, 255, 0.25);
background-image:-webkot-grident(liner, 0% 0%, 0% 95%,

from(rgba(255,255,255,0.7)), to(rgba(255,255,255,0.7)));
}
.button:hover{
color:#000;
text-shadow:rgba(255, 255, 255) 0px 0px 5px;
}

</style>

<body>
<div class="button aqua">
<div class="blaze">html5</div>
</div>
</body>





여기서 보시면 css3에서만 볼수 있게되는 접두사가 나와요

-webkit-

-moz-

이것은 브라우저 별로 똑같은 결과를 만들어내려면 아직으로선 꼭 필요한 방법입니다. css 최종 규약이 완성된다면 더이상 사용하진않겠져?

가장 많이 사용하는 접두사입니다.

-webkit-

웹킷방식 브라우저(사파리나 크롬 등)

-moz-

게코 방식 브라우저(모질라 파이어폭스)

-o-

오페라 브라우저

-ms-

마이크로소프트 인터넷 익스플로러

css3에서 새로 추가된( border-radius, background-image: gradient , text-shadow, box-shadow, background-color:rgba)

요소와 속성의 내용을 숙지 후 보시면 더욱 이해가 빠를듯합니다.


Posted by YH데이타베이스

댓글을 달아 주세요