반응형
오늘은 처음 다뤘던 HTML 소스로 작업하겠습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Dougy's HTML5 </title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1> Welcome to Dougy's HTML5. </h1>
</header>
<nav>
<li> Home </li>
<li> Tutorials </li>
<li> Podcast</li>
</nav>
<section>
<article>
<header>
<hgroup>
<h1> DDanzi in NY</h1>
<h2> come to Zuccotti Park with Pizza</h2>
</hgroup>
</header>
<p> DDanzi guys have visited in Zuccotti park yesterday to encourage the occupier of Occupy Wall St. Protesters.</p>
<footer>
<p> -- written by Dougy </p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1> Title of Article 2</h1>
<h2> Subtitle for Article!</h2>
</hgroup>
</header>
<p> This is the 2nd article. </p>
<footer>
<p> -- written by Dougy </p>
</footer>
</article>
</section>
<aside>
<h4> News </h4>
DDanzi guys have visited Zucotty Park Yesterday.
</aside>
<footer>
Copyright Bucky thenewboston.
</footer>
</body>
</html>
이 화면은 헤더와 메뉴(nav) 그리고 메인 공간으로 section에 두개의 기사가 있고 한쪽에 aside 그리고 아래에 footer로 구성 돼 있습니다.
이것을 CSS를 이용해서 레이아웃을 잡을 겁니다.
지나번 글을 맨하튼 Zuccotti Park 갔다가 미국 방문한 나는 꼼수다 팀을 보고 난 다음에 작성해서 article에 나꼼수 팀이 피자 나눠준 얘기가 있네요.
저도 피자 한조각 얻어 먹고 왔어요. ^^
CSS를 적용하지 않은 화면은 이와 같습니다.
우선 CSS를 이용하기 위해서는 우선 div 태그로 body 태그 안을 모두 감싸고 각 레리아웃 구성 별로 id를 부여합니다. (div도 id를 부여 합니다.)
<div id="big_wrapper">
<header id="top_header"> ...
<nav id="top_menu">...
<section id="main_section">...
<aside id="side_news">...
<footer id="the_footer">...
</div>
이렇게 HTML 파일을 수정합니다.
그 다음 main.css 파일로 가서 코딩을 시작합니다.
일단 모두 지우고 아래 내용을 코딩해 넣으세요.
*{
margin: 0px;
padding: 0px;
}
h1{
font: bold 20px Tahoma;
}
h2{
font: bold 14px Tahoma;
}
전체 마진과 패딩을 0으로 하고 h1 태그에는 볼드 20픽셀 사이즈 타호마 폰트를 적용하고 h2 태그에는 볼드 14픽셀 사이즈 타호마 폰트를 적용한다는 내용입니다.
이 내용을 적용하면 화면이 이렇게 변합니다.
지금은 h1,h2 태그에 대한 css 효과만 있습니다.
이제 레이아웃을 잡기 위해서 그룹화(블럭화)를 시킵니다.
header,section,footer,aside,nav,article,hgroup{
display:block;
}
그리고 body내의 모든 내용을 기본적으로 center align으로 정합니다.
body{
text-align:center;
}
이제 각 id 별로 css 효과를 주겠습니다.
우선 div는 id가 big_wrapper 였죠? 이 div 부터 주겠습니다.
#big_wrapper{
border:1px solid black;
width:1000px;
margin: 20px auto;
text-align:left;
}
이렇게 하면 1픽셀 테두리가 쳐진1000픽셀 너비의 사각형이 나올 겁니다.
윗쪽 마진은 20픽셀이고 왼쪽,오른쪽,아래쪽 마진은 자동적으로 정해 집니다.
그리고 글자들은 왼쪽 정렬이 됩니다.
그 다음은 top_header 에 효과를 주겠습니다.
#top_header{
background:yellow;
border: 1px solid blue;
padding: 20px;
}
그리고 top_menu에는 아래와 같이 효과를 주구요.
#top_menu{
background:blue;
color:white;
}
그런데 이 Home, Tutorial, Podcast 가 좌에서 우로 한줄로 표시하고 싶습니다.
이게 메뉴거든요. 그래서 아래와 같이 li 태그에 효과를 줍니다.
#top_menu li{
display:inline-block;
list-style:none;
padding: 5px;
font: bold 14px Tahoma;
}
자 여기까지 완성이 됐습니다.
헤더가 있고 메뉴도 그럴듯하게 자리를 잡았네요.
이제 article에 대해 효과를 줘 볼까요?
main_section의 article이 왼쪽에 자리잡고 오른쪽에 조그맣게 aside가 자리 잡도록 하겠습니다.
#main_section{
float:left;
width:660px;
margin:30px; /* 전체 너비가 1000 픽셀이므로 계산을 하면서 해야 함*/
}
#side_news{
float:left;
width:220px;
margin:20px 0px;
padding:34px;
background:#66CCCC;
}
float 명령어를 잘 보세요.
줄단위로 표시하지 않고 좌우로 표시하려면 이 float를 사용해야 합니다.
그리고 the_footer를 아래와 같이 코딩하세요.
#the_footer{
clear:both;
text-align:center;
padding:20px;
border-top: 2px solid green;
}
여기서 clear:both의 의미는 좌우로 배치하는 것을 그만 두겠다는 의미입니다.
그러면 상하로 배치 되겠죠? footer는 가운데 정렬에 윗쪽에 녹색 줄이 그어 지게 됩니니다.
이렇게 나올 텐데요.. 좀 이상하네요. News 녹색 사각형이 Article 오른쪽에 있어야 되는데 밑에 있습니다.
파이어폭스, 사파리, 크롬 모두 저렇게 나오네요. 맥도 그렇고 윈도우즈도 그렇고...
뭐가 잘못 됐을까요? 브라우저 버전 문제인가?
네이버에서 다른 float 예제를 찾아서 해도 다 안 되더라구요.
일단 지금 제가 테스트 해 볼 시간이 없어서요. 다음으로 넘어가겠습니다.
다음은 각 article 을 보기 좋게 꾸미겠습니다.
article {
background:#FFFBCC;
border: 1px solid red;
padding:20px;
margin-bottom: 15px;
}
article footer {
text-align:right;
}
조금 그럴듯하게 됐죠?
첫 강좌때 말씀 드린것처럼 원본 소스는 bucky 가 공개한 소스입니다. thenewboston.com으로 가면 원본 동영상 강좌를 보실 수 있습니다.
일단 오늘 강좌에선 float가 원하는 대로 작동 되지 않았네요.
여러분들도 한번 테스트해 보시고 제가 잘못한 부분이 있으면 댓글로 알려 주세요.
소스코드는 아래에 있습니다.
다음시간엔 새로운 CSS 태그로 오늘 한 웹 페이지를 좀 더 flexible 하게 표현하는 방법을 공부하도록 하겠습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Dougy's HTML5 </title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1> Welcome to Dougy's HTML5. </h1>
</header>
<nav>
<li> Home </li>
<li> Tutorials </li>
<li> Podcast</li>
</nav>
<section>
<article>
<header>
<hgroup>
<h1> DDanzi in NY</h1>
<h2> come to Zuccotti Park with Pizza</h2>
</hgroup>
</header>
<p> DDanzi guys have visited in Zuccotti park yesterday to encourage the occupier of Occupy Wall St. Protesters.</p>
<footer>
<p> -- written by Dougy </p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1> Title of Article 2</h1>
<h2> Subtitle for Article!</h2>
</hgroup>
</header>
<p> This is the 2nd article. </p>
<footer>
<p> -- written by Dougy </p>
</footer>
</article>
</section>
<aside>
<h4> News </h4>
DDanzi guys have visited Zucotty Park Yesterday.
</aside>
<footer>
Copyright Bucky thenewboston.
</footer>
</body>
</html>
이 화면은 헤더와 메뉴(nav) 그리고 메인 공간으로 section에 두개의 기사가 있고 한쪽에 aside 그리고 아래에 footer로 구성 돼 있습니다.
이것을 CSS를 이용해서 레이아웃을 잡을 겁니다.
지나번 글을 맨하튼 Zuccotti Park 갔다가 미국 방문한 나는 꼼수다 팀을 보고 난 다음에 작성해서 article에 나꼼수 팀이 피자 나눠준 얘기가 있네요.
저도 피자 한조각 얻어 먹고 왔어요. ^^
CSS를 적용하지 않은 화면은 이와 같습니다.
우선 CSS를 이용하기 위해서는 우선 div 태그로 body 태그 안을 모두 감싸고 각 레리아웃 구성 별로 id를 부여합니다. (div도 id를 부여 합니다.)
<div id="big_wrapper">
<header id="top_header"> ...
<nav id="top_menu">...
<section id="main_section">...
<aside id="side_news">...
<footer id="the_footer">...
</div>
이렇게 HTML 파일을 수정합니다.
그 다음 main.css 파일로 가서 코딩을 시작합니다.
일단 모두 지우고 아래 내용을 코딩해 넣으세요.
*{
margin: 0px;
padding: 0px;
}
h1{
font: bold 20px Tahoma;
}
h2{
font: bold 14px Tahoma;
}
전체 마진과 패딩을 0으로 하고 h1 태그에는 볼드 20픽셀 사이즈 타호마 폰트를 적용하고 h2 태그에는 볼드 14픽셀 사이즈 타호마 폰트를 적용한다는 내용입니다.
이 내용을 적용하면 화면이 이렇게 변합니다.
지금은 h1,h2 태그에 대한 css 효과만 있습니다.
이제 레이아웃을 잡기 위해서 그룹화(블럭화)를 시킵니다.
header,section,footer,aside,nav,article,hgroup{
display:block;
}
그리고 body내의 모든 내용을 기본적으로 center align으로 정합니다.
body{
text-align:center;
}
이제 각 id 별로 css 효과를 주겠습니다.
우선 div는 id가 big_wrapper 였죠? 이 div 부터 주겠습니다.
#big_wrapper{
border:1px solid black;
width:1000px;
margin: 20px auto;
text-align:left;
}
이렇게 하면 1픽셀 테두리가 쳐진1000픽셀 너비의 사각형이 나올 겁니다.
윗쪽 마진은 20픽셀이고 왼쪽,오른쪽,아래쪽 마진은 자동적으로 정해 집니다.
그리고 글자들은 왼쪽 정렬이 됩니다.
그 다음은 top_header 에 효과를 주겠습니다.
#top_header{
background:yellow;
border: 1px solid blue;
padding: 20px;
}
그리고 top_menu에는 아래와 같이 효과를 주구요.
#top_menu{
background:blue;
color:white;
}
그런데 이 Home, Tutorial, Podcast 가 좌에서 우로 한줄로 표시하고 싶습니다.
이게 메뉴거든요. 그래서 아래와 같이 li 태그에 효과를 줍니다.
#top_menu li{
display:inline-block;
list-style:none;
padding: 5px;
font: bold 14px Tahoma;
}
자 여기까지 완성이 됐습니다.
헤더가 있고 메뉴도 그럴듯하게 자리를 잡았네요.
이제 article에 대해 효과를 줘 볼까요?
main_section의 article이 왼쪽에 자리잡고 오른쪽에 조그맣게 aside가 자리 잡도록 하겠습니다.
#main_section{
float:left;
width:660px;
margin:30px; /* 전체 너비가 1000 픽셀이므로 계산을 하면서 해야 함*/
}
#side_news{
float:left;
width:220px;
margin:20px 0px;
padding:34px;
background:#66CCCC;
}
float 명령어를 잘 보세요.
줄단위로 표시하지 않고 좌우로 표시하려면 이 float를 사용해야 합니다.
그리고 the_footer를 아래와 같이 코딩하세요.
#the_footer{
clear:both;
text-align:center;
padding:20px;
border-top: 2px solid green;
}
여기서 clear:both의 의미는 좌우로 배치하는 것을 그만 두겠다는 의미입니다.
그러면 상하로 배치 되겠죠? footer는 가운데 정렬에 윗쪽에 녹색 줄이 그어 지게 됩니니다.
이렇게 나올 텐데요.. 좀 이상하네요. News 녹색 사각형이 Article 오른쪽에 있어야 되는데 밑에 있습니다.
파이어폭스, 사파리, 크롬 모두 저렇게 나오네요. 맥도 그렇고 윈도우즈도 그렇고...
뭐가 잘못 됐을까요? 브라우저 버전 문제인가?
네이버에서 다른 float 예제를 찾아서 해도 다 안 되더라구요.
일단 지금 제가 테스트 해 볼 시간이 없어서요. 다음으로 넘어가겠습니다.
다음은 각 article 을 보기 좋게 꾸미겠습니다.
article {
background:#FFFBCC;
border: 1px solid red;
padding:20px;
margin-bottom: 15px;
}
article footer {
text-align:right;
}
조금 그럴듯하게 됐죠?
첫 강좌때 말씀 드린것처럼 원본 소스는 bucky 가 공개한 소스입니다. thenewboston.com으로 가면 원본 동영상 강좌를 보실 수 있습니다.
일단 오늘 강좌에선 float가 원하는 대로 작동 되지 않았네요.
여러분들도 한번 테스트해 보시고 제가 잘못한 부분이 있으면 댓글로 알려 주세요.
소스코드는 아래에 있습니다.
다음시간엔 새로운 CSS 태그로 오늘 한 웹 페이지를 좀 더 flexible 하게 표현하는 방법을 공부하도록 하겠습니다.
third.html
main.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 잡기 -2 (Flexible Box Model) (2) | 2011.12.09 |
| HTML5 CSS 이해하기 (0) | 2011.12.08 |
| HTML5 두번째 CSS 이해하기 (pseudo-class) (2) | 2011.12.07 |
| HTML5 시작하기 (0) | 2011.12.07 |