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

최근에 받은 트랙백

글 보관함


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


반응형

Comment

  1. 내용 정리 잘 하셨네요^^ㅋ
    webkit box 공부 중인데 군더더기 없이 알짜정보만 쏙쏙 들어있어요
    잘 보고갑니다^^

    • 솔웅 2012.01.10 05:26 신고

      감사합니다.
      저도 공부하면서 올린거라 부족한 점도 많을 텐데...
      자주 들려주세요.. :)
      Thanks

  2. 익명 2012.02.11 01:53

    비밀댓글입니다

    • 솔웅 2012.02.12 05:46 신고

      <!DOCTYPE html>
      <style>
      .div {text-align: center; display:webkit-box; width:100% }
      .div button {50px }
      .div input {200px -webkit- box-flex:1 }
      </style>
      <div class=div> input button </div>

      이렇게 하면 가운데 정렬이 될 겁니다.
      <!DOCTYPE html>
      <style>
      .div { display:webkit-box; width:100% }
      .div button {50px }
      .div input {text-align: center; 200px -webkit- box-flex:1 }
      </style>
      <div class=div> input button </div>

      이렇게 하면 가운데 정렬이 안 될 겁니다.

      무슨 얘기냐 하면 첫번째 .div에서는 적용이 되는데 세번째 .div에서는 적용이 안 된다는 거거든요.

      그 이유는 input 은 태그 일 경우에 적용되는 겁니다. 글자가 input 이라고 해서 적용 되는게 아닙니다.
      <input ..... 이런식으로 input tag일 경우에 적용이 됩니다.

      정확히 구현하고 싶으신게 뭔지 잘 몰라서 그냥 코드만 보고 답변을 했는데요.

      제가 이해를 잘 못했다면 다시 질문을 해 주시면 또 답변 드릴께요.

      감사합니다.

  3. 스니키 2014.01.02 00:41

    너무유용한정보네요
    width가 지정되지않은 하나의 개체에만 webkit 으로 넘치지않게 100% 채워지는 방법을 찾다가 본문의 알짜배기 내용으로 성공했습니다. 감사드려요!!

  4. ㅁㄴㅇ 2017.05.16 21:48

    kid 아이디값이 모두 같아요 ㄷ

    <div id="kid1"> kid 1 </div>
    <div id="kid1"> kid 2 </div>
    <div id="kid1"> kid 3 </div>
    <div id="kid1"> kid 4 </div>