DIV? 레이어 주무르기 1편
출처 - <a "window.open(this.href);="" return="" false;"="" href="http://www.zeroboard.com/16392078" style="margin: 0px; padding: 0px; color: rgb(121, 193, 1); ">http://www.zeroboard.com/16392078
이 글은 고수분들보단.. 아직 이해가 안되시는 분들을 위해 쓰는것이니
내용이 다소 모자라고 유치하더라도 이해해주세요.
혹시 틀린부분이나 모자란부분이 있다면 질책부탁드립니다.
XE의 레이아웃은 DIV와 CSS를 기초로 합니다.
물론 테이블을 이용하여도 작동에는 문제가 없지만,
DIV를 사용하는것이 XE가 지향하는 웹2.0에도 발맞추어 가는것이니
이번에 그냥 테이블에서 DIV로 갈아타는것도 나쁘지 않을것 같아요.
테이블은 tr과 td, 그리고 rowspan, cellspan 의 개념만 안다면
아무리 복잡하더라도 얼마든지 만들 수 있습니다.
하지만 div를 처음 접하시는분들은 이녀석을 주무르는게 여간 쉽지 않을것입니다.
그렇다면 이제 div의 배를 조금 갈라볼까요?
이해를 쉽게하기위해 테이블과 비교해가며 설명해 볼게요.
(이때 사용되는 div의 style 태그는 구분을 쉽게하기 위해 사용하는 것입니다.)
먼저 작은 박스를 만들어 보겠습니다.
<테이블>
| 한칸의 박스 |
- <table border=1>
- <tr>
- <td>한칸의 박스</td>
- </tr>
- </table>
<DIV>
- <div style="background:#ff0000">한칸의 박스</div>
소스로 볼때, DIV가 훨씬 가벼운것을 보실 수 있습니다.
또한 테이블은 가로를 따로 100%로 지정해 주어야 하지만, div의경우 알아서 꽉꽉 들어맞아줍니다.
작성시 한가지 주의하실점은, 테이블의 경우 <tr>과 <td> 는 따로 닫는 테그를 사용하지 않아도
완전하지는 않지만 형태는 갖추어집니다. 물론 닫지않고 바로 또 적용시켜 주어도 마찬가지 이구요.
하지만 DIV는 꼭! 닫아주셔야 정상적으로 나옵니다.
자 이제 슬슬 구조를 복잡하게 해보겠습니다.
<테이블>
| 첫째줄 |
| 둘째줄 |
- <table border=1>
- <tr>
- <td>첫째줄</td>
- </tr>
- <tr>
- <td>둘째줄</td>
- </tr>
- </table>
<DIV>
- <div style="background:#ff0000">첫째줄</div>
- <div style="background:#0000ff">둘째줄</div>
점점 복잡해 질수록 div는 점점 가벼워집니다.
아니.. div를 닫아주고, 바로 div를 적용했는데, 칸이 늘어나는게 아니라, 줄이 늘어났네요?
그렇다면 칸은 언제 어떻게 추가해주나요?
간단합니다.
<테이블>
| 첫째칸 | 둘째칸 |
- <table>
- <tr>
- <td>첫째칸</td><td>둘째칸</td>
- </tr>
- </table>
<DIV>
- <div style="float:left;background:#ff0000">첫째칸</div>
- <div style="float:left;background">둘째칸</div>
다시 말씀드리지만 div에 적용된 스타일에서 background 부분은 구분을 쉽게하기위하여 넣은것입니다.
float:left 가 칸을 추가하는 방법이었군요. 아! float:left?? left가 왼쪽을 의미하는것이니 right도 있나요?
네. 있습니다. 여기서 하나는 left, 다른 하나는 right를 적용하게되면,
이런 현상이 벌어지지요..
float에 대해 궁금하시다면, 에디트프로그램에 소스를 작성하신 후 페이지를 테스트해보세요.
창크기를 늘이거나 줄여도 div는 float가 지정해준편에 계속 붙어있답니다.
칸과 줄을 추가하는 방법을 알았으니,
가장 흔히들 사용하시는 레이아웃 구성형태로 꾸며보겠습니다.
우선 이번에 꾸며볼 페이지는, 가로폭은 200px, 메뉴부분은 80px, 본문부분은 120px 입니다.
<테이블>
| 헤더 | |
| 메뉴 | 본문 XE 만세! |
- <table width=200 border=1>
- <tr>
- <td colspan=2>헤더</td>
- </tr>
- <tr>
- <td width=80, valign=top>메뉴</td><td width=120>본문<br>XE 만세!</td>
- </tr>
- </table>
<DIV>
XE 만세!
- <div style="width:200px; background:#e4e4e4">헤더</div>
- <div style="width:80px; background:#ff0000;float:left">메뉴</div>
- <div style="width:120px; background:#0000ff;float:left">본문<br>XE 만세!</div>
자, 어떠신가요? 이해가 되셨나요?
div를 처음 접하시는 분들은 눈으로만 보시는것보다 직접 따라해보시는것이 이해에도 훨씬 도움이 됩니다.
글솜씨가 없어서 설명이 우왕좌왕한지라, 도움이 되셨으려나 모르겠네요..
이번장에서는 div를 이용해 간단한 구조를 잡는방법에 대해 알아봤습니다.
다음엔 좀더 자세한 div의 속성을 알아보고, 나중엔 실전 레이아웃을 잡아가는 방법을 알아보도록 하겠습니
요즘 웹표준에 관련하여 공부중인 디자이너에요^^
매일매일 사이트 찾아보고 필요한 부분 참고하면서 공부중이죠~!!
신비사이트 웹표준 강좌 참고하면서 저도 글올려봅니다!!
다들 아시겠지만~!! 참고하시면 좋을듯합니다!!
===========================
http://html.nhndesign.com/
===========================
항상 노력하고 발전하는 디자이너가 되어보아요!
CSS 적용시 중요 부분 정리
예전에 웹표준코딩 공부하면서 정리해놨던 건데요.. 기초라서ㅋㅋ 처음 공부하시는 분들에게 도움되시길 ~ ㅎㅎ
*** 기본적으로 잡아놓아야할 스타일 ***
body{
margin:0;
padding:0;
text-align:center;
font-size: 11px;
font-family: 굴림, gulim, 돋움, dotum, Vertical, Arial; color:#888888;
line-height:18px;
background:url('/image/common/index_bg.gif') repeat-x left top;
}
풀이 : body는 여백값없고 가운데정렬에 폰트속성은 저렇고 글높이값은 18px이고 배경이미지가 깔려있다는..
*요즘 폰트 사이즈는 em으로 많이 설정하기도 합니다.
p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button { margin:0; padding:0; }
풀이 : 위는 쓸데없는 여백을 없애라
img,fieldset { border:0; }
풀이 : 이미지,필드셋에 보더값을 없애라.이미지링크에 걸리는 파란테두리같은거 없애주는 속성..
ol,ul,li { list-style:none; margin:0; padding:0;}
풀이 : 적용된 리스트스타일을 없앤다.(점,숫자,알파벳등등의..) ol,ul,li등은 기본적으로 들임스타일이 적용되므로 위같이 적용하여 쓸때없는 공간을 잡아낼수 있다.
a:link { color:#888888; text-decoration:none; }
a:visited { color:#888888; text-decoration:none; }
a:active { color:#888888; text-decoration:none; }
a:hover { color:#EB7731; text-decoration:underline; }
풀이 : 링크가 걸린 텍스트의 기본컬러는 #888이며 마우스오버시 컬러가 #EB7731로 변하며 밑줄이 생긴다.
.input { height:14px; font-size:11px;color:#666666; background:#F6F6F6;
border:1px solid #D7D7D7; padding:3px 0 0 5px; margin-top:0; }
.select { font-size:11px;color:#666666; background:#F6F6F6; border:1px solid #D7D7D7; padding: 0; margin:0; }
풀이 : 인풋,셀렉트 스타일은 취향데로.. 설정해서 필요에따라 적용
*** 레이아웃 ***
사이트 가운데 정렬하기 : 보통 boby값에 text-align: center; 값을
boby 아래 가장 큰 레이아웃 값이 index라면 #index { margin : 0 auto; float : left; }
margin : 0 auto; 풀이 : 이렇게 설정한경우 이 속성을 가진 레이어는 정가운데 값을 가지게 됩니다.
이렇게 주면 가운데 정렬이면서 좌측에서 흐르는 레이아웃이 설정된다.
박스옆에 다른 박스를 흐르게 할때는 float : left; 값이 아주 유용하고 자주 쓰게 된다.
float : left; 풀이 : 부모레이어에서 정한 공간내에서 하위 박스들은 옆으로 나열되거라.
*** 여백 또는 위치 정할때 ***
position : relative; 흐르는위치(상위값에 따라 이어서 표현된다)
position : absolute; 절대위치(top right등의 속성으로 위치정한다)
margin : - 모든 방향의 여백을 지정
margin-top :
margin-bottom :
margin-left :
margin-right :
padding : - 박스내의 간격을 지정
padding-top :
padding-bottom :
padding-left :
padding-right :
margin과 padding둘다 여백을 지정하지만 마진값의 경우 브러우저별로
그 값이 일정치않은 오류가 많이 생겨 보통 여백을 설정할때는 padding값으로 정하는게 옳다.
각방향마다 간격 넓이가 다를 경우 아래같은형식으로 작성한다.
예) padding: 10px 20px 30px 40px;
풀이 : 위로10px 우측20px 아래30px 좌측40px의 간격이 생긴다.
여백값을 정할때는 브라우저별로 호환이 안되는경우가 자주 발생하니 꼭 크로싱브라우징한다.
*** 게시판등 테이블을 사용할때 ***
게시판등. 테이블을 사용할시 기본을 제외한 스타일 즉 보더값 또는 라인값,컬러등은 꼭 스타일로 정한다.
이유는 ie에서는 그 값이 1px로 일정하게 보이나 이외 브라우저에서는 그 이상으로 두껍게
보이거나 공간이 너무 떨어지는 경우가 많이 발생한다. 이전 테이블 작업한 본문들을
다른 브라우저에서 확인해보면 쉽게 알수있다.
앞으로 계속 수정되어야 할 이유는 스마트폰의 웹브라우저가 ie가 아니기 때문^^
예) border-bottom: 1px solid #dcdcdc;
풀이 : 이줄의 밑에 1px짜리 #dcdcdc컬러의 직선밑줄을 적용한다.
*** 배경이미지 ***
이미지배경적용 background: url('../1.gif');
컬러배경적용 background-color: #CCCCCC;
이때 뒤에 반복여부를 정하는 속성을 사용할수있다.
repeat
background image 는 수직, 수평적으로 반복되어 질것이다. 이것은 default이다.
repeat-x
background image 오직 수평적으로 반복되어 질것이다.
repeat-y
background image 오직 수직적으로 반복되어 질것이다.
no-repeat
background-image 반복되지 않을 것이다.
예) background:url('../1.gif') repeat-x left top;
풀이 : 배경이미지가 좌측 최상위에서부터 수평적으로 반복된다
예) background:url('../1.gif') no-repeat 10px 5px;
풀이 : 배경이미지가 좌측 10px지점 탑에서5px 아래지점에서 시작되며 반복되지 않는다.
또 큰레이어안에 배경이미지를 깔아놓고 그 하위부분에 같은 배경이미지를 위치만 달리하여 적용할수 있다.
이미지 한장으로 여러박스 배경이미지를 다르게 표현할수 있는 방법이다.
예)
.a .i{background:#f6f4f5 url(../1.gif)}
.a .a1 .i{background-position:0 0}
.a .a2 .i{background-position:142px 0 }
.a. a3 .i{background-position: 0 -49px}
.a .a4 .i{background-position: 142px -49px}
.a .a5 .i{background-position:0 -97px }
.a .a6 .i{background-position:142px -97px}
*** 이외 css 속성 간략설명 : 초록색은 사용방법을위해 임의대로 넣은값 ***
display : 화면에 어떻게 보여지게 될것인가를 결정
예) 보통 div는 block값을 가지고 span은 inliner값을 가진다.
.a {display:block;} 줄바꿈된다
.a {display:inline;} 줄바꿈안된다.상하 마진,패팅값 width, height 이 무시된다.
.a {display:none;} 화면에 표출되지않는다.
width: 100px; 엘리먼트의 넓이값 100px
height: 100px; 엘리먼트의 높이값 100px
clear:both; flat설정을 초기화한다. 의도하지 않게 옆으로 계속 흐를때 써주면 떨어져서 좋다ㅋ
font-family: 돋움; 사용될폰트종류 돋움체
font-size: 11px; 폰트사이즈 11px
font-style: italic; 폰트모양이 이탤릭체(기울임)
font-variant: small-caps; 글꼴전환효과로 작은대문자 글꼴이나온다
font-weight: bold; 폰트두께를 볼드체(두껍게)로. 100,200,300..등의 숫자로 표현가능
color : #ddd; 폰트컬러는 #ddd컬러당
line-height: 20px; 한줄한줄의 높이간격은 20px의 간격을 갖는다.
letter-spacing: 2px; 글자간의 간격은 2px
text-decoration:overline; 글자위에밑줄
text-decoration:line-through; 글자중간에 밑줄
text-decoration:underline; 글자아래에 밑줄
text-decoration:none; 밑줄효과없음
홈페이지 레이아웃 용어 정리
1.LNB
Left Navigation Bar 좌측메뉴 ( 시니아랑님께서 알려주심! )
2.GNB
Global Navigation Bar : 사이트의 우측 상단에 있는 (login | sitemap | contact us)의 메뉴를 칭함, 때에 따라서 대메뉴로 칭할수있음
3.SNB
Sub Navigation Bar : 서브메뉴
4.Path (location)
서브페이지(컨텐츠페이지)의 현재페이지 위치
예) 홈 > 커뮤니티 > 자유게시판
5.Contents
실제 웹사이트의 내용
6.Container
서브메뉴와 컨텐츠페이지를 합친부분
7.AD
광고영역
8.Skip Navigation
LNB, SNB를 스킵할수있는 컨텐츠로 바로가는 링크
9.Footer (Copyright)
사이트의 오프라인 주소 및 카피영역, 사이트 최하단부에 위치
출처는 기억이 안나요~ 혹시 아시는분 출처 댓글남겨주시면 출처 넣을께요^^