반응형
기본적으로 어제 사용했던 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를 하던지 합시다..
참 나는꼼수다 무리들 그저께 뉴욕에 있었고 오늘은 보스톤에서 행사가 있다는 것 같은데...
미국에서도 나꼼수 재밌게 듣고 있는데 이번주는 녹음 잘 하고 일찍 업로드 할 지 어떨지 궁금하네요...
필요하신 분들은 지난 강좌에서 다운 받으 시면 됩니다.
고치실 부분은 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;
}
여기까지 하면 아래와 같이 나옵니다.
이번엔 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를 하던지 합시다..
참 나는꼼수다 무리들 그저께 뉴욕에 있었고 오늘은 보스톤에서 행사가 있다는 것 같은데...
미국에서도 나꼼수 재밌게 듣고 있는데 이번주는 녹음 잘 하고 일찍 업로드 할 지 어떨지 궁금하네요...
4th.html
main01.css반응형
'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 |
| webkit-box 좀 더 알아보기 (Flexible Box Model) (6) | 2011.12.10 |
| 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 |
