47367 Members __ Online

정렬
HOME스터디[s]웹표준

다.DIV로 쉽게 레이아웃 잡기 기초 II

posted by 한장의잎
date : , update :
hit : 54714, scrab : 0 , recommended : 19 , attach : 2

 

레이아웃 정하기(기초) II

안녕하세요? 또 뵙습니다 ^^
이번 레이아웃은 요놈입니다.
너무 쉬운 내용으로 여러분들의 눈을 괴롭히지는 않는가? 에 대한 고민을 해보았습니다.(그냥 고민만 해보았습니다 ㅡㅡ;;)

 layout002

보시다시피 SLIDER 라는 놈이 하나 추가 되었습니다.
이전에서 본 아주 기초적인 그 레이아웃에서
단지 SLIDER가 추가 된 것 뿐입니다.
▼ 이전글의 코멘트
크게 분류하여 보았습니다. 상단(header), 중단(center), footer(하단)
그리고 앞으로 header, center, footer 를 ID로 사용 할 것입니다^^
예의 글에서 복사(또는 다운받으신)한 문서 있으시죠?
그 문서를 메모장 또는 에디터플러스, 아크로에디터 등등등;;(이하 앞으로 편집기라고 부르겠습니다 :D)으로 열어주세요.
위 코멘트에 이어 slider라는 이름의 ID를 사용 할 것입니다.
그냥 div 한 줄을 추가 할 뿐 어려움은 없습니다.
가.코딩시작(기초) II
자, DIV를 이용해 HTML 코딩으로 바로 들어가 볼까요?
편집기를 실행하시고 이전 문서를 불러와 주세요^^
예제 이미지와 같은 화면을 작성 해보도록 하겠습니다.
<!-- 여기서부터 코딩 -->
내용 : 이곳에 코딩을 하겠습니다.
<!-- // 여기까지 코딩 -->
주석문을 <!-- 여기서부터 코딩 --> ~ <!-- // 여기까지 코딩 --> 으로 변경했습니다. 헷갈리실것 같아서요 흑(ㅠㅠ)
1단계 > 2단계(완료 -_-V)
<!-- 여기서부터 코딩 -->
  <div id="header"> header </div>
  <div id="center"> center </div>
  <div id="footer"> footer </div>
<!-- // 여기까지 코딩 -->
1단계 > 2단계(완료 -_-V)
<!-- 여기서부터 코딩 -->
  <div id="header"> header </div>
  <div id="slider"> slider </div>
  <div id="center"> center </div>
  <div id="footer"> footer </div>
<!-- // 여기까지 코딩 -->
  • 벌써 다하셨나요? 그어려운걸 벌써!? 헛! 자질이 뛰어나시군요!!(퍽퍽퍽!! ㅠㅠ)
  • 예 id를 header로 하는 다음 줄에 id를 slider로 하는 녀석 한 줄을 추가해 보았습니다.
  • 굳이 브라우저를 확인 해볼 필요는 없겠지만, 확인해보시고 싶으시다면 말리지는 않겠습니다. ^^*
  • 곧바로 CSS코딩에 들어가겠습니다 :)
나.CSS다루기(기초) II

역시나 우리는 아주아주 간단한 HTML 코딩을 해보았습니다.
상,중,하단의 구성에 좌측막대기(slider) 를 추가한 HTML문서였습니다.
이전에 작성한 <head> 와 </head> 사이에 있는 <style type="text/css"><style> 사이에
새로운 CSS서식을 추가 코딩하도록 하겠습니다.

이전 문서에서 ID에 사용에 대해서는 감을 팍팍 받으셨으리라 예상하고 이번에는 따로 설명하지 않겠습니다. *^^*

자, 편집기를 열고 이전에 코딩한 문서를 불러 오도록 하겠습니다.
HTML 여기까지 코딩 되셨나요? (그것도 코딩이냐;;)
이전에 작성한 CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" c"text/html; charset=euc-kr">
<title>DIV로 쉽게 레이아웃 잡기</title>
<style type="text/css">
/* CSS */
#header {height:80px;background:#ff6600;}
#center {height:500px;background:#fffff;}
#footer {height:80px;background:#0099ff;}
</style>
</head>
<body>
<!-- 여기서부터 코딩 -->
  <div id="header"> header </div>
  <div id="center"> center </div>
  <div id="footer"> footer </div>
<!-- // 여기까지 코딩 -->
</body>
</html>
이번에 작성한 CSS *^^*
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" c"text/html; charset=euc-kr">
<title>DIV로 쉽게 레이아웃 잡기</title>
<style type="text/css">
/* CSS */
#header {height:80px;background:#ff6600;}
#slider {float:left;height:500px;width:200px;background:#ffcc00;}
#center {height:500px;background:#fffff;}
#footer {height:80px;background:#0099ff;}
</style>
</head>
<body>
<!-- 여기서부터 코딩 -->
  <div id="header"> header </div>
  <div id="center"> center </div>
  <div id="footer"> footer </div>
<!-- // 여기까지 코딩 -->
</body>
</html>
  • 어헛, 이번에는 무시무시하게 긴 줄이 추가 되었습니다.
  • 브라우저에서 한 번 확인해보시겠습니까?
    설명은 아래에서 하도록 하겠습니다^^
나) CSS 속성
  • 이전에 사용한 속성은 height와 background 두 가지 였습니다.
    오늘은, float 이라는 녀석과 width 가 짜잔! 등장해 버렸습니다.
  • float 과 width
    • float은 흐름이라는 의미로 여겨주시기 바랍니다. 즉 float:left 는 왼쪽으로 흘러라. 가 되겠습니다.
      실제로, 새로 추가된 slider라는 ID를 가진 div 옆으로 center라는 ID를 가진 div가 왼쪽으로 붙었습니다. 그렇지 않습니까? 여러부운~?
      이제 float의 값을 알아보겠습니다.
      #slider {float:;}
      #slider {float:left;}
      #slider {float:right;}
      #slider {float:none;}
      left, right, none 세 가지의 속성이 있습니다. 어느정도 짐작이 가시나요?
      응용력이 탁월하신 분은 이미 작성한 CSS에 속성값을 바꾸며 브라우저로 확인하고 계시겠죠? 하하하
    • width
      #slider {width:값px;}
      height 가 높이를 말하듯 width는 넓이를 말합니다 ^^
관심을 보여주시는 김가박당님
좋은 공간을 마련해주신 라부님
이해 해주신 카르페디엠님 고맙습니데이 *^^*








div, 웹표준, 레이아웃, 코딩
댓글 14 | 엮인글 0

라.DIV로 쉽게 레이아웃 잡기 기초 III HTML
나.DIV로 쉽게 레이아웃 잡기 기초 i





%3Cul+class%3D%22Klocation%22%3E%3Cli+class%3D%22first%22%3E%3Ca+href%3D%22..%2Fhompy%2F%22%3EHOME%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%22%3E%EC%8A%A4%ED%84%B0%EB%94%94%5Bs%5D%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%3Fmid%3D69%22%3E%EC%9B%B9%ED%91%9C%EC%A4%80%3C%2Fa%3E%3C%2Fli%3E%3C%2Ful%3E