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

최근에 받은 트랙백

글 보관함


기본적으로 어제 사용했던 third.html 내용을 그대로 씁니다.
필요하신 분들은 지난 강좌에서 다운 받으 시면 됩니다.
고치실 부분은 css를 다른 것을 이용해 보죠.
    <link rel="stylesheet" href="main01.css">
이렇게 main01.css 파일을 이용합니다.

그리고 section과 aside 태그를 포함하는 div를 하나 더 만듭니다.
    <div id ="new_div">
    <section id="main_section">
        <article> ......
......
        DDanzi guys have visited Zucotty Park Yesterday.
    </aside>
    </div>
이렇게 new_div라는 아이디를 갖는 div가 새로 만들어 졌습니다.


다시 이런 심심한 화면에서 새로 시작합니다.
이제 main01.css를 작성해 볼까요?
*{
    margin:0px;
    padding:0px;
}
h1{
    font:bold 20px Tahoma;
}
h2{
    font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hggroup{
    display:block;
}
여기까지는 이전 css와 같습니다.
이어서 body를 작성하겠습니다.

오늘 배울 내용은 Flexible box 입니다.
박스 안에 있는 텍스트들이 브라우저 크기를 조절하는 거에 따라서 잘리지 않고 자동으로 조절되는 기능입니다.
컴퓨터 브라우저 하고 모바일 브라우저의 크기가 다르죠?
이렇게 하면 컴퓨터 브라우저하고 모바일 브라우저에서 모두 자연스럽게 볼 수 있는 레이아웃을 디자인 할 수 있습니다.

이 기능을 구현하기 위해 WebKit 을 사용 할 겁니다.
body{
    width:100%;
    display:-webkit-box;
    -webkit-box-pack:center;
}
너비는 100%로 잡고 display는 웹킷 박스를 사용할 거라고 알려 줍니다.
그리고 box pack은 center로 잡구요.

자 여기까지 하면 위와 같은 화면이 나옵니다.
브라우저 크기를 최소 최대로 늘렸다 줄였다 해 보세요. 그러면 어떤 효과가 있는 지 알 수 있을 겁니다.
이 웹킷 webkit 을 지원하는 브라우저가 있어야 하는데요. 제 컴의 브라우저에서는 아주 훌륭하게 지원하네요. 아마 최신 브라우저에서는 웬만하면 다 지원이 될 겁니다.

다음은 가장 큰 div 태그에 효과를 넣겠습니다.
#big_wrapper{
    max-width:1000px;
    margin: 20px 0px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex: 1;
}
최대 너비와 마진을 정하고 여기에도 webkit-box를 사용한다고 알려 줍니다.
그리고 orient는 수평이 아니라 수직을 기본으로 잡고 flex는 1로 합니다. 1은 flex를 주라는 의미고 0은 주지 말라는 의미입니다.
우리는 flexible한 효과를 주기로 했으니까 1로 정합니다.

다음은 헤더 부분입니다.
#top_header{
    background: yellow;
    border:3px solid black;
    padding: 20px;
}
탑메뉴 부분은 아래처럼 해 주세요.
#top_menu{
    border:red;
    background:blue;
    color:white;
}
#top_menu li{
    display:inline-block;
    list-style:none;
    padding:5px;
    font:bold 14px Tahoma;
}
여기까지 하면 아래와 같이 나옵니다.

보시다시피 브라우저 크기를 늘리고 줄여도 box나 글자들이 짤림이 없이 display됩니다.

이번엔 selection과 aside를 포함하고 있는 new_div div 태그에 효과를 주겠습니다.
#new_div{
    display:-webkit-box;
    -webkit-box-orient:horizontal;
}
자 이렇게 하면 new_div 안에 있는 내용들은 위에서 아래로가 아니라 왼쪽에서 오른쪽으로 그 내용이 display 됩니다.
그리니까 section 태그 안에 있는 내용이 모두 표시되고 다음에 aside 태그 안에 있는 내용이 그 오른쪽에 표시 될 겁니다.
지난 시간에 잘 안됐던 기능이 이 테크닉을 이용하면 쉽게 구현 되네요.
나머지 부분도 아래와 같이 해 보세요.

#main_section{
    border:1px solid blue;
    -webkit-box-flex: 1;
    margin: 20px;
    padding: 20px;
}
#side_news{
    border: 1px solid red;
    width:220px;
    margin:20px 0px;
    padding: 30px;
    background:#66CCCC;
}
#the_footer{
    text-align:center;
    padding: 20px;
    border-top: 2px solid green;
}


아주 그럴듯한 웹 페이지죠?
브라우저를 한번 줄여 보세요.


오른쪽 green 부분은 박스가 줄어들지 않고 왼쪽 기사 부분만 박스가 줄어들죠?

이 테크닉을 웹 앱에 적용하면 아주 유용할 겁니다.
PC나 태블릿, 모바일 폰 모두 크기가 제각각인데 이 기능을 이용하면 어느 환경에서나 보기 좋게 화면을 보여 줄 수 있으니까요.

그럼 오늘은 여기까지 하겠습니다.

자신이 열심히 만든 소스를 공유하고 있는 보스톤의 Bucky 에게 고맙구요..
thenewboston.org
가서 댓글을 달던지 광고를 클릭하던지 여유 있으면 Donate를 하던지 합시다..

참 나는꼼수다 무리들 그저께 뉴욕에 있었고 오늘은 보스톤에서 행사가 있다는 것 같은데...
미국에서도 나꼼수 재밌게 듣고 있는데 이번주는 녹음 잘 하고 일찍 업로드 할 지 어떨지 궁금하네요...


반응형

Comment

  1. 질문요 2012.04.24 23:58

    좋은강좌 잘봤습니다
    근데 파폭에서랑 익스플로어에서 실행했을때 aside 쪽 이 전혀 css가 자리이동이 먹질
    않는데 저만그런건가요??

    • 솔웅 2012.04.25 04:51 신고

      aside를 가지고 자세히 테스트해 보지는 않았지만 안되는게 맞을 겁니다.
      HTML5는 아직 표준으로 선정되지는 않았지만 곧 선정될 새로운 기술인데요. 지금은 구글하고 애플이 적극적으로 밀고 있습니다. 구글의 크롬 브라우저하고 애플의 사파리 브라우저에서는 많은 기능이 지원되는데 다른 곳에서는 안 되는 기능이 많이 있어요. 익스플로러는 더 많이 안 되구요. 그리고 크롬하고 사파리도 최신버전에서 더 많은 기능을 지원합니다.
      이 HTML5 기술은 스마트폰이 나오면서 더 각광 받고 있습니다.
      스마트폰의 브라우저는 모두 이 HTML5를 지원하는 최신 브라우저 거든요.
      PC에서 테스트 하시려면 크롬이나 사파리를 중심으로 테스트 하시고 다른 브라우저에서는 작동을 하는지 안하는지 점검 하시는 방법으로 개발 하셔야 할 겁니다.
      익스플로러가 대세인 한국에서는 아직 HTML5로 전체 웹사이트를 개발하는건 무리겠죠. 모바일 웹은 가능할 테구요....