블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

calendar

    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    


어제 만들었던 소스코드도 그렇고...
웬만한 브라우저에서는 제대로 실행이 안 될 수 있습니다.
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; 을 적용했구요.

지난 글에서도 언급했듯이 1은 flexible하도록 하는 것이고 0은 고정돼 있는 겁니다.

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;
}

이번것은 -webkit-box-align:stretch; 를 알아보기 위한 예제입니다.

모든 박스들이 아래위로 꽉 차게 stretch 됐습니다.


저작자 표시 비영리 동일 조건 변경 허락
신고

티스토리 툴바