웬만한 브라우저에서는 제대로 실행이 안 될 수 있습니다.
HTML5, CSS3 모두 새로운 기술들이고 아직 공식적으로 표준으로 인정되지 않은 것도 있고 해서 모든 브라우저가 다 지원하지는 않습니다.
제 컴에서도 크롬 (Chrome) 에서만 제대로 실행이 되더라구요.
이쪽 IT쪽이 워낙에 기술이 많이 나오고 또 빠르게 진행 되서 여러 새 기술 중에 살아남아서 더 대중화 될 만한 기술을 잘 선택해서 스펙을 만드는 것도 중요한 일입니다.
저도 웹에서 모바일로 옮겨온 게 2~3년 전인데 그 사이에 Android Native, Object C, Corona SDK를 거쳐 지금은 HTML5, CSS3, webkit-box,sencha touch 등등 많은 기술들을 익히고 있습니다.
하여간 모바일쪽이 대세일거라고 생각해서 그쪽 기술 습득에 매진하고 있습니다.
정보 수집력도 중요하고 결단력 실행력 모두 중요해요 이 바닥에서 계속 앞서 나가려면...
일단 배우기로 했으면 진도부터 쭉쭉 나가야 합니다.
그래서 오늘도 진도 나갑니다. 쭉 쭉~~~~
오늘의 HTML 소스코드는 아래와 같이 작성해 주세요.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Dougy's HTML5 </title>
<link rel="stylesheet" href="main02.css">
</head>
<body>
<section id="mommy">
<div id="kid1"> kid 1 </div>
<div id="kid1"> kid 2 </div>
<div id="kid1"> kid 3 </div>
<div id="kid1"> kid 4 </div>
</section>
</body>
</html>
그리고 공부할 부분인 css를 작성하겠습니다. main02.css입니다.
#mommy{
border:2px solid blue;
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#kid1{
border: 2px solid red;
background : green;
padding:20px;
margin:10px;
}
#kid2{
border: 2px solid red;
background : red;
padding:20px;
margin:10px;
}
#kid3{
border: 2px solid red;
background : blue;
padding:20px;
margin:10px;
}
#kid4{
border: 2px solid red;
background : yellow;
padding:20px;
margin:10px;
}
첫번째 mommy에서는 webkit을 적용했고 진행 방향은 horizontal로 했습니다.
그래서 위 박스들이 좌측에서 우측으로 표시된 겁니다.
나머지는 각 id별로 박스를 만들어서 그 안에 색을 채웠습니다.
mommy에 아래 내용을 추가해 보세요.
-webkit-box-direction:reverse;
그러면 보시는 것처럼 박스가 역순으로 표시 됩니다.
이제 mommy에 추가했던 -webkit-box-direction:reverse; 를 없애시구요.
kid1,2,3,4에 아래 코드들을 하나씩 추가하세요.
kid1 -> -webkit-box-ordinal-group: 3;
kid2 -> -webkit-box-ordinal-group: 1;
kid3 -> -webkit-box-ordinal-group: 4;
kid4 -> -webkit-box-ordinal-group: 2;
이러면 지정한 순서대로 박스가 나열 되죠?
이제 좀 다른 기능을 알아보죠. main02.css를 아래와 같이 고치세요.
#mommy{
border:2px solid blue;
display:-webkit-box;
-webkit-box-orient:horizontal;
width:700px;
}
#kid1{
border: 2px solid red;
background : green;
padding:20px;
margin:10px;
width:60px;
}
#kid2{
border: 2px solid red;
background : red;
padding:20px;
margin:10px;
width:60px;
-webkit-box-flex:1;
}
#kid3{
border: 2px solid red;
background : blue;
padding:20px;
margin:10px;
width:60px;
}
#kid4{
border: 2px solid red;
background : yellow;
padding:20px;
margin:10px;
width:60px;
}
달라진 점은 모두 width를 지정했다는 겁니다. 그리고 kid2에게는 -webkit-box-flex:1; 을 적용했구요.
kid2를 flexible하도록 설정했더니 남은 공간만큼 박스가 늘어났습니다.
여기서 kid1,2,3,4 모두 width를 없애고 -webkit-box-flex:1; 를 집어 넣으면 모두 일정한 크기로 공간을 채웁니다.
그리고 특정 박스의 크기를 유지하고 싶으면 1이 아니라 0을 대입하면 되구요.
그리고 전부 숫자를 1로 하시고 kid2 만 숫자를 2로 해 보세요.
그러면 kid2는 다른 박스보다 두배 크기로 됩니다.
숫자가 1,2,1,1 이 되면 이 숫자의 합이 5이니까 전체 공간을 5로 나눠서 두번째 박스는 2의 공간을 나머지는 1의공간을 할당하게됩니다.
#mommy{
border:2px solid blue;
display:-webkit-box;
-webkit-box-orient:horizontal;
width:700px;
height:300px;
-webkit-box-align:center;
}
#kid1{
border: 2px solid red;
background : green;
padding:20px;
margin:10px;
width:60px;
height:100px;
-webkit-box-flex:1;
}
#kid2{
border: 2px solid red;
background : red;
padding:20px;
margin:10px;
width:60px;
height:100px;
-webkit-box-flex:1;
}
#kid3{
border: 2px solid red;
background : blue;
padding:20px;
margin:10px;
width:60px;
height:100px;
-webkit-box-flex:1;
}
#kid4{
border: 2px solid red;
background : yellow;
padding:20px;
margin:10px;
width:60px;
height:100px;
-webkit-box-flex:1;
}
이건 mommy에 있는 -webkit-box-align:center; 을 테스트해 본 겁니다.
아래 위 로 가운데 정렬이 돼 있죠?
#mommy{
border:2px solid blue;
display:-webkit-box;
-webkit-box-orient:horizontal;
width:700px;
height:300px;
-webkit-box-align:stretch;
}
#kid1{
border: 2px solid red;
background : green;
padding:20px;
margin:10px;
width:60px;
-webkit-box-flex:1;
}
#kid2{
border: 2px solid red;
background : red;
padding:20px;
margin:10px;
width:60px;
-webkit-box-flex:1;
}
#kid3{
border: 2px solid red;
background : blue;
padding:20px;
margin:10px;
width:60px;
-webkit-box-flex:1;
}
#kid4{
border: 2px solid red;
background : yellow;
padding:20px;
margin:10px;
width:60px;
-webkit-box-flex:1;
}
모든 박스들이 아래위로 꽉 차게 stretch 됐습니다.
'WEB_APP > HTML5' 카테고리의 다른 글
| HTML5로 비디오 보여주기 Video Tag (0) | 2011.12.17 |
|---|---|
| JavaScript 맛보기 (0) | 2011.12.16 |
| HTML5 CSS Animation 효과 (5) | 2011.12.15 |
| HTML5 CSS Text shadow, translate 효과 등등 (0) | 2011.12.14 |
| CSS3 Rounded Corner, 그림자 효과 사용하기 (0) | 2011.12.12 |
| HTML5 화면 Layout 잡기 -2 (Flexible Box Model) (2) | 2011.12.09 |
| HTML5 화면 Layout 잡기 -1 (6) | 2011.12.09 |
| HTML5 CSS 이해하기 (0) | 2011.12.08 |
| HTML5 두번째 CSS 이해하기 (pseudo-class) (2) | 2011.12.07 |
| HTML5 시작하기 (0) | 2011.12.07 |