당근천국
오늘
어제
전체
본문에 별다른 표시가 없을시 이 조건을 사용합니다.
2012. 1. 13. 10:07
IBM에서 제공하는 강좌를 보고 정리한 내용입니다.
IBM - HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기
글순서
1.자주쓰는 태그 정리
[HTML5] 1-1. 문서에서 자주쓰이는 태그 정리
[HTML5] 1-2. 문서에서 자주쓰이는 스타일 정리(CSS)
[HTML5] 2. 동영상 재생
[HTML5] 3. 기존 컨트롤들의 새기능과 새 스타일 적용
[HTML5] 4. 캔버스를 이용하여 이미지그리기
IBM - HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기
글순서
1.자주쓰는 태그 정리
[HTML5] 1-1. 문서에서 자주쓰이는 태그 정리
[HTML5] 1-2. 문서에서 자주쓰이는 스타일 정리(CSS)
[HTML5] 2. 동영상 재생
[HTML5] 3. 기존 컨트롤들의 새기능과 새 스타일 적용
[HTML5] 4. 캔버스를 이용하여 이미지그리기
기존에 사용하던 컨트롤들(레이블(label), 인풋(input), 서브밋(submit) 등등)의 기능도 살짝쿵 업글되고 CSS3도 이쁘게 바꼈습니다.
1.기존 컨트롤들
<!doctype html>
<html lang="en">
<head>
<meta charset="euc-kr" />
<title>HTML5 연습 - 텍스트 스타일</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
<![endif]-->
<style type="text/css">
/* 여기서 스타일을 연습해 봅시다 */
</style>
</head>
<body>
<p><form>
<label for="contact_name">Name:</label>
<input id="contact_name" placeholder="너의 이름을 입력해라"
autofocus><br />
<label for="contact_email">E-mail:</label>
<input type="email" id="contact_email" placeholder="너의 이메일을 입력해라"><br />
<label for="contact_phone">Phone:</label>
<input type="tel" id="contact_phone" placeholder="번호 따자!"><br />
<label for="contact_callback">Callback on:</label>
<input type="datetime" id="contact_callback"><br />
<label for="contact_priority">Priority:</label>
<input type="range" min="1" max="5" value="1"
id="contact_priority"><br /><br />
<input type="submit" value="Request Call">
</form></p>
</body>
</html>
여기서 잘 보아야 할것은 'placeholder'속성입니다.
이속성은 텍스트박스에 설명을 넣어주고 사용자가 입력을 시도하면 사라지는 텍스트입니다.
예전엔 자바스크립으로 만들어주던 기능인데 속성으로 들어가 있습니다.
그외 타입이 늘어났습니다.
디폴트는 텍스트 박스입니다.
(참고 W3C - 4.10.7 The input element)
datetime : 날짜/시간 형식
range : 범위 입력
ibm 강좌에 보면 오패라의 경우 더 이쁘고 직관적으로 날짜/시간 형식이 나오는데요 다른 브라우저들도 저렇게 갔으면 좋겠는데 말이죠-_-;;
타입은 엄청 많습니다만.....아직 브라우저에서 인터페이스를 재대로 지원해주고 있지 않다는 느낌이 강하게 듭니다 ㅡ.-;;
업데이트 되면 나아질런지는 모르겠네요.
레이블 같은경우 for라는 속성이 있는데 이건 그냥 레이블 그룹 구분하기위한 용도입니다.
(참고 W3C - 4.10.6 The label element)
3.폼에 스타일 적용하기
그냥 먹이면 되요!
form {
border: 1px solid #888;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
background-color: #eee;
padding: 10px; margin-bottom: 30px;
}
특별한것은 없지만 '-webkit-box-shadow'것은 봐야 합니다.
그림자 만들어 주는 녀석이예요 ㅎㅎㅎ
그림자 속성이 3개가 있는데 '-webkit-box-shadow'이것만으로도 충분이 그림자 효과가 납니다.
3. 기타 등등
label {
font-weight: bold; font-size: 13px;
}
input {
margin-bottom: 3px; font-size: 13px;
}
요것만 하고 끝네면 섭하죠 ㅋㅋㅋㅋ
폼에 적용되어있는 라운드와 쉐도우를 인풋박스에 적용해 봅시다.
input {
margin-bottom: 3px; font-size: 13px;
border-radius: 5px;
-webkit-box-shadow: 5px 5px 2px #888;
}
값을 약간 수정하여 그럴싸하게 만들었습니다 ㅎㅎㅎ
핫 포스팅
