SS/S-Index

DIV9

onesixx 2013. 1. 28. 14:12
반응형

 

가.DIV로 쉽게 레이아웃 잡기 준비과정 :)


안녕하세요! 신비가족여러분! 처음 뵙겠습니다 ^^
저는 프리랜서 코더로 일자리를 찾아 헤매이는 하이에나처럼..(쿨럭) 돌아다니다가
우연히, 신비디자인을 접하게 되었습니다.


좋은 커뮤니 공간이 있군요!! 헤헤헤 (헤벌쭉 ^___ _^)
웹표준란에 글이 하나도 없는것을 보고 번뜩(+_+)였습니다.
"첫 라인을 내가 끊어보자꾸나! 우훗훗~" 하며 말입죠.

TABLE을 사용 하지 않고 DIV라는 녀석으로 쉽게 레이아웃을 잡는 방법을 알려드릴까합니다.
(많이들 아시겠지만, 모르시는 분을 위해 용기내어 글을 써봅니다. 내용에 대한 태클 환영합니다. ^^a)

이궁, 말이 많았습니다. 제가 말이 좀 많습니다..(쿨럭;;)
자, 시작에 앞서 간단하 몸풀기운동을 시작해보겠습니다.
DTD / 문자코딩 / 코딩준비를 해보려합니다.
앞으로 잘 부탁 드리겠습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
HTML 버전 4.01에 맞추어 코딩을 시작할겁니다. 왜? DTD 선언은 중요하니까..
"그게 왜 중요한데요?"(앙~? 왜중요해~ 말을 해봐 앙~? -_-++)
위의 DTD를 선언을 최상단에 삽입하므로써
"나는 HTML 4.01에 맞게 제작이 되어 있어!" 라고 브라우저에게 의사를 전달 하는겁니다."
"브라우저에게 그 말을 왜 전해야 하죠?"(피식.. 브라우저한테 뭐..뭘 전달해?? 앙~?)
(-_-;;)그것은, 여러종류의 브라우저에서 HTML의 버전에따라 문서를 알아채고 나타내주는 방식이 다를수 있기때문입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 라고 명시해줌으로써 "나는 W3C에서 제정한 HTML 4.01 Tansitional//EN 에 맞춤식으로 제작된 문서야, 그러니까 브라우저 너는 똑데이 알아 듣고 똑데이 보여주레이~ 알긋나?" 라는 것이죠. 참 쉽죠? ^^;;
여기서 사용하는 DTD선언문은, 일반형식으로 널리 이용되는 선언문입니다.
예를 들면 예전에 존재했거나 또는 없어진 태그도 지원한다고 합니다.
또한 엄격한 선언문도 있습니다만 저는 엄격한걸 두려워해요 흑 ㅠㅠ
<meta http-equiv="content-type" c"text/html; charset=euc-kr">
우리는 이것을 <head>와</head> 사이에 삽입함으로써, euc-kr(한국어) 문자코딩을 사용한다는것을
브라우저에게 알려주게 됩니다.
대부분의 브라우저에서는 자동으로 그 문서의 문자코딩을 읽어 들인다고 하는군요,
하지만, 몇몇 브라우저에서는 그렇지 못한 경우가 있다고 합니다.
이를 위해 삽입되는것이랍니다. 역시 참 쉽죠^^;;
자, 코딩시작을 위해 가장 기본적인 준비를 해보았습니다.
메모장, 에디터플러스, 아크로에디터, 무엇이든 좋습니다. 아래의 내용을 복사 붙여넣기하고-!
다음 글에서 뵙도롭해요..^^;;
"어디가세요?"(헐 내빼냐..?)
<!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>
</head>
<body>
<!-- 여기서부터 코딩 -->
내용
<!-- // 여기서부터 코딩 -->
</body>
</html>

이상한걸 발견했네요, 메타태그의 http-equiv와 contnent 사이에 c 라는 단어가 출력되는군요.

문서를 따로 올렸으니 받아서 사용해주세요.

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

문서를 만들기 위해서는, 어떤식으로 만들지 생각해 보아야 겠죠?
DIV로 쉽게 레이아웃 잡기라는 타이틀을 걸었으므로(;;) 쉽게 가보도록 하겠습니다.
먼저 아래의 그림을 살펴 보도록 하겠습니다.


 exit001

크게 분류하여 보았습니다. 상단(header), 중단(center), footer(하단)
그리고 앞으로 header, center, footer 를 ID로 사용 할 것입니다^^
예의 글에서 복사(또는 다운받으신)한 문서 있으시죠?
그 문서를 메모장 또는 에디터플러스, 아크로에디터 등등등;;(이하 앞으로 편집기라고 부르겠습니다 :D)으로 열어주세요.
자, DIV를 이용해 HTML 코딩으로 바로 들어가 볼까요?
예제 이미지와 같은 화면을 작성 해보도록 하겠습니다.
<!-- 여기서부터 코딩 -->
내용 : 이곳에 코딩을 하겠습니다.
<!-- // 여기서부터 코딩 -->
1단계 > 2단계 > 3단계
<!-- 여기서부터 코딩 -->
  <div id="header"> header </div>
<!-- // 여기서부터 코딩 -->
1단계 > 2단계 > 3단계
<!-- 여기서부터 코딩 -->
  <div id="header"> header </div>
  <div id="center"> center </div>
<!-- // 여기서부터 코딩 -->
1단계 > 2단계 > 3단계(완료 -_-V)
<!-- 여기서부터 코딩 -->
  <div id="header"> header </div>
  <div id="center"> center </div>
  <div id="footer"> footer </div>
<!-- // 여기서부터 코딩 -->
  • DIV 에 ID를 넣어 작성 해보았습니다.(쉽게 알아보기 위해 예제이미지와 같은 색으로 header, center, footer부분을 표현 해보았습니다.)
  • 브라우저에서 한 번 확인해보시겠습니까? 수고하셨습니다. 이것으로 코딩은 끝입니다 ^^ 
    "에엑~? 이게 뭐야!?" 하시는분 있으실 듯 합니다. 히히히
  • 다음글에서는 CSS 작성법과 HTML을 제어하는법을 알아보겠습니다.
  • 주석
    <!-- 여기서부터 코딩 -->
    <!-- // 여기서부터 코딩 -->
    요런 멘트가 써진 줄이 있습니다. 이것은 주석으로써, 실제 브라우저 출력시엔 나타나지 않습니다.
    작성자가 쉽게 알아보기위해 작성해 넣는 내용입니다. 사용법은
    <!-- 여기에 내용을 작성합니다. -->
    그리고, <!-- // 여기서부터 코딩 --> 에서 // 는 end 즉 주석이 끝났다는 의미입니다.
  • DIV 태그(TAG) 에 사용 된 ID란?
    ID는 그 문서에서 고유하게 존재하는 하나의 이름을 말합니다.

우리는 아주아주 간단한 HTML 코딩을 해보았습니다.
상,중,하단의 구성만 있는 HTML문서였습니다. 
코딩한 HTMl문서에 아주 간단한 CSS를 입혀보도록 하겠습니다.

CSS는 HTML문서의 <head> 와 </head> 사이에 코딩하게 됩니다.
외부파일로 빼내어 하는 방법도 있습니다만, 그건 다음 레이아웃에서 살펴 보도록 하겠습니다.

@charset "euc-kr"; /* charset */
나는 euc-kr CSS입니다. 라고 브라우저에게 말해주고 시작하겠습니다.
HTML과 마찬가지로 한국어임을 알려 브라우저에서 한국어를 선택 하게 하는것입니다.
ID 와 CLASS
  • #(Sharp)은 ID를 말합니다.
  • .(Dot)은 CLASS를 말합니다.
    아래 표를 살펴 볼까요?
ID CLASS
HTML CSS HTML CSS
id="name" #name class="name" .name
id="header" #header class="header" .header
id="center" #center class="center" .center
id="footer" #footer class="footer" .footer
표를 살펴 보니 감이 팍팍 오게 됩니다.(그렇죠?)
HTML 에서는 id="ID명" CSS 에서는 #ID명
HTML 에서는 id="CLASS명" CSS 에서는 #CLASS명
자, 편집기를 열고 이전에 코딩한 문서를 불러 오도록 하겠습니다.
HTML 여기까지 코딩 되셨나요? (그것도 코딩이냐;;)
<!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>
</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;}
#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는 위와 같이 <head> 와 </head> 사이에 넣습니다.(쉽게 알아보기 위해 밝은 색상으로 넣었습니다.)
  • 자아, 브라우저에서 한 번 확인해보시겠습니까? 역시 수고하셨습니다. 이것으로 CSS코딩도 끝입니다 ^^
  • CSS의 속성에는 종류가 많습니다.
  • 우리가 여기에서 사용한 속성은 height와 background 두가지 밖에 없습니다.
    이 두가지 속성에 대해서만 간단하게 알아보도록 하겠습니다.
    • height는 단어 뜻처럼 높이를 말합니다. 해당하는 아이디의 높이를 정하게 되는것입니다.
      사용 방법을 예로 들면,
      #header {height:수치px}
      여기서 px는 pixel을 말합니다. header의 경우 80pixel의 높이를 가지게 된것이죠.
    • background는 배경을 말합니다. 이 속성은 해당 ID나 CLASS의 배경을 정하게 됩니다.
      #header {background:#색상값;}
      #header {background:url('http://배경이미지의 주소/background.gif');}
      background 속성은 색상뿐 아니라 이미지를 불러 올 수 도 있습니다.

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


     

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

     layout002

    보시다시피 SLIDER 라는 놈이 하나 추가 되었습니다.
    이전에서 본 아주 기초적인 그 레이아웃에서
    단지 SLIDER가 추가 된 것 뿐입니다.
    ▼ 이전글의 코멘트
    크게 분류하여 보았습니다. 상단(header), 중단(center), footer(하단)
    그리고 앞으로 header, center, footer 를 ID로 사용 할 것입니다^^
    예의 글에서 복사(또는 다운받으신)한 문서 있으시죠?
    그 문서를 메모장 또는 에디터플러스, 아크로에디터 등등등;;(이하 앞으로 편집기라고 부르겠습니다 :D)으로 열어주세요.
    위 코멘트에 이어 slider라는 이름의 ID를 사용 할 것입니다.
    그냥 div 한 줄을 추가 할 뿐 어려움은 없습니다.
    자, 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코딩에 들어가겠습니다 :)

    역시나 우리는 아주아주 간단한 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>
    • 어헛, 이번에는 무시무시하게 긴 줄이 추가 되었습니다.
    • 브라우저에서 한 번 확인해보시겠습니까? 
      설명은 아래에서 하도록 하겠습니다^^
    • 이전에 사용한 속성은 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로 쉽게 레이아웃 잡기 기초 III HTML

     

    짜잔 -_-V
    오랜만에 뵙습니다. 모두 별고 없으신지요?
    먹고 살기 위해 일거리를 찾아다니다 보니 이제야 나타났습니다.
    자, 시작해보겠습니다. 달려달려~!
    1. 상단(HEADER)
    2. 중단(CENTER)
    3. 하단(FOOTER)
    4. 막대기(SLIDER)
    이 네가지를 이용해 아아주 기초적인 레이아웃을 짜보았습니다.
    하지만 우리는 용맹무쌍(勇猛無雙)하게 다음단계로 나아가야 합니다.
    왜냐구요? 그러고 싶으니까요~*-_-*
    오늘은, 상단 중단 하단에 해당되는 DIV
    즉 HEADER, CENTER, FOOTER 그리고 SLIDER 라는 녀석들을 그룹(GROUP)이라 부르겠습니다.
    그리고, HEADER, CENTER, FOOTER를 대그룹이라는 직위에 올려놓고
    SLIDER는 CENTER라는 대그룹 휘하에 근무하는 중그룹이라는 직위를 주겠습니다.
    우선 아래 참조그림을 살펴볼까요?
    layout003 
    변화가 크게 생겼습니다.
    언뜻 보면 어지럽습니다 @@
    하지만, 조금 자세히 보면 너무 간단합니다.
    네, 이번엔 요놈을 만들어 보도록 하겠습니다. 여러분
    layout003_01 
    이름 ID 설명
    GLOBAL NAVIGATION BLOCK gnb 광역 차림판
    LOGO H1 표어(LOGO) ID를 사용하지 않고 HTML 기본 태그(TAG)인 H1을 사용 하겠습니다.
    SEARCH BLOCK search 검색을 위한 입력창
    CHANNEL NAVIGATION BLOCK cnb 채널의 차림판
    CHANNEL SUB NAVIGATION BLOCK csnb 채널의 보조차림판
    layout003_02 
    이름 ID 설명
    LOCATION BLOCK locate 현재위치
    SLIDER BLOCK slider 왼쪽막대기(딱히 이름붙힐게;;)
    INFOMATION BLOCK info 정보
    CONTENTS BLOCK contents 본문
    layout003_02 
    이름 ID 설명
    OUTLOGIN outlogin 회원인증
    LOCAL NAVIGATION BLOCK lnb 보조 차림판
    INFOMATION BLOCK info 정보
    CONTENTS BLOCK contents 본문
    layout003_03 
    이름 ID 설명
    COPYRIGHT copyright 저작권
    FOOTER GLOBAL NAVIGATION BLOCK fgnb 하단 광역 차림판

     

    <!-- 여기부터 상단 -->
    <div id="header">
          <div id="gnb">광역차림판</div>
          <h1>로고</h1>
          <div id="cnb">채널차림판</div>
          <div id="csnb">채널보조차림판</div>
          <div id="search">검색창</div>
    </div>
    <!-- // 여기까지 상단 -->
    <!-- 여기부터 중단 -->
    <div id="center">
          <div id="locate">현재위치</div>
          <div id="info">정보</div>
          <div id="slider">왼쪽막대기</div>
          <div id="contents">본문</div>
    </div>
    <!-- // 여기까지 중단 -->
    <!-- 여기부터 하단 -->
    <div id="footer">
          <div id="fgnb"> 하단 광역 차림판 </div>
          <div id="copyright"> by EIPS </div>
    </div>
    <!-- // 여기까지 하단 -->

     

       어려움이 없을거라 생각하고 있습니다만, 만약 어려움을 느끼신다면 의견을 남겨주세요.

       이미 올라왔던 내용도, 다시 정리하고 차근차근 설명하도록 하겠습니다. :)
       다음편에서는 CSS를 작성 및 적용을 한 후, 위 HTML안에 내용을 넣어보도록 하겠습니다.

     

       부족한 내용에 관심 가져주시는분들께 감사의 말씀 올립니다.(--)(__)꾸벅

     

반응형

'SS > S-Index' 카테고리의 다른 글

방탄  (0) 2013.02.06
DIV  (0) 2013.01.31
DIV5  (0) 2013.01.28
DIV4  (0) 2013.01.28
DIV 3-1  (0) 2013.01.28
DIV6  (0) 2013.01.28

'SS/S-Index'의 다른글

  • 현재글DIV9

관련글

티스토리툴바