47166 Members __ Online

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

DIV? 레이어주무르기 2편

posted by 라부
date : , update :
hit : 42498, scrab : 1 , recommended : 22

출처 - http://www.zeroboard.com/16441277

 

요즘 날씨가 많이 추워졌네요..
다들 감기 조심하세요..
전국에 수험생 여러분 화이팅입니다..! ㅠ

1편만 덩그러니 있는것같아 2편마저 연재하겠습니다.
레이어 주무르기1편 >> http://www.zeroboard.com/16392078

이전에 열혈후니님께서 XHTML와 CSS에 관한 메뉴얼을 작성해주셨습니다. 
http://zbxe.springnote.com/pages/684681

참고하시면 좋을것같습니다.

 'XE하면 DIV로 짜여진 레이아웃' 이라는 강박관념(?)을 가진분들이 많으실거라 생각합니다.
 물론, XE가 웹2.0을 지향하는 사이트빌더라지만 개인홈을 위한 공간이라면, 궂이 웹표준에 맞추실 필요는 없습니다.
 전세계 사람들이 접속하는 글로벌 사이트가 아니라면 말이죠. 자신의 관심분야에 대한 자료가 모인 한국어로된 사이트에
 한국어를 알지않는이상, 외국인이 접속할리는 없을테니까요. 게다가 한국사람 대부분이 ie를.. 7보다는 6을 더 많이 사용하는데..
 개인사용자가 파이어폭스에서는 어떻게 비춰지는지, 오페라에서는 어떻게 비춰지는지 신경쓸 이유가 없다는 것이지요.
 모든 웹서퍼들에게 보다 편안한 서핑환경을 제공하기 위해 지향하는것이 웹2.0이 아닙니까?
 지금 대한민국은 광랜세상입니다. 인터넷속도 따라올 나라가 없지요. 영화한편 다운받는건 꿈도 못꾸던 시절이 아닙니다.
 아무리 무거운 홈페이지 이더라도 30초를 넘기는 사이트를 보지못했습니다. 번쩍번쩍 눈깜짝할새 바뀌는 웹세상에 사는데..
 개인이 애써 힘들게 웹2.0에 발맞추지 않아도 된다는 말이지요.
 웹2.0이 테이블보다 div를 지향하는건 맞습니다. 그렇다고 div를 알지 않아도 된다는 말은 아닙니다.
 이왕에 XE가 웹2.0을 지향한다면, 아예 이번기회에 알아두는것도 나쁘지 않다는게 제 생각입니다. 
 오해하지마세요. XE는 DIV로 이루어진 레이아웃에서만 작동하는게 아닙니다.

1편에서는 DIV로 레이아웃을 잡기위해 간단한 구성법?에 대해 알아보았습니다.
이번 2편에서는 좀더 자세한 속성에 대해 알아보도록 하겠습니다.


지금보시는 홈페이지역시 많은 DIV와 CSS가 적용되어있습니다.
한번 보고 무엇이 적용되어있는지, 어떻게 구성되어있는지 아시겠나요?

아직 부족하시다면 이번에 한걸음? 아니.. 두걸음 나아가 봅시다.


1. border
곳곳에 선이 그어있고, 박스형식으로 둘러 쌓여있는것들.. 보이실겁니다.
바로 border가 적용되어 있는건데요.
이 border에 대해 알아봅시다.

border의 적용은
border:두께 형식 색; 이렇게 적용합니다.
한번 적용해보죠. 파란 1px, 실선을 적용해보겠습니다.


<div style="width:30px;height:30px;border:1px solid #0000ff;"></div>

간단하네요.. 근데 border는 실선밖에 적용할 수 없는건가요?
아닙니다. 조금.. 다양해요.

각각 3픽셀씩 적용하겠습니다.
solid
dotted
dashed
double



 
  1. <div style="width:50px;height:30px;border:3px solid #000000;float:left">solid</div>  
  2. <div style="width:50px;height:30px;border:3px dotted #000000;float:left">dotted</div>  
  3. <div style="width:50px;height:30px;border:3px dashed #000000;float:left">dashed</div>  
  4. <div style="width:50px;height:30px;border:3px double #000000;float:left">double</div>  

예제들을 정렬하기위해 사용된 코드들은 이제 충분히 구별하시겠죠?
정말 필요한 핵심소스들을 캐치하시리라 믿습니다..

이렇게 적용한다면, 네면이 모두 적용되어 박스가 되어버리는데,
옆에 서브메뉴처럼 아래하단만 주거나, 한면, 두면 혹은 따로따로 줄수도 있나요?
물론 가능합니다.

네면의 적용은 border:두께 형식 색상; 이었습니다. 한면씩 따로주는것도 간단합니다.
border-left: , border-right: , border-top: , border-bottom 이렇게 따로따로 가능합니다. 적용법은 위와같습니다.
한번 해보지요.

위-레드 solid, 아래-블루 dotted, 왼쪽-블랙 double, 오른쪽-그레이 dashed

 
  1. <div style="width:200px;height:50px;border-top:3px solid #ff0000;border-bottom:3px dotted #0000ff;border-left:3px double #000000;border-right:3px dashed #999999;"></div>  

이해가 되셨나요? 동일한 색,두께,형식등이 적용될땐 간략하게 border 만 주면되겠고,
한면만 주거나, 서로 다른속성이 필요하다면 위에서 다루었듯 따로따로 나누어 border-left, border-right 처럼 해주면 되겠네요.

설명을 재대로 하고있는지 모르겠네요..

계속하겠습니다.


2. padding과  margin
레이어에 여백을 줄 때 padding과 margin을 줄 수있습니다.
하지만 이 둘은, 단순 적용만 해주었을때 확실히 구분이 되지않습니다.
왼쪽에 margin 3px
왼쪽에 padding 3px
어떠세요, 뭐가 margin이고 padding인지 구분이 되시나요?

배경색을 한번 줘보겠습니다.
왼쪽에 margin 3px
왼쪽에 padding 3px
이번엔 어떠신가요, 구분이 되시나요?
회색의 박스위에 두개의 레이어가 놓여있는 상태입니다.
원칙대로라면, 회색박스는 보이지 않아야하고, 레이어에 쓰여진 글씨들은 레이어에 바로붙어서 나와야 정상입니다.
위의 녹색박스를 보시면, 왼쪽편에 살짝 회색의 여백이 보이실겁니다.
근데 밑의 레이어의 왼편엔 회색이란 찾아볼수가 없는데.. 이상하게 두레이어의 글씨가 모두 같은위치에 적혀있네요?
이게바로 margin과 padding의 차이입니다.

margin은 레이어의 바깥쪽여백을 의미하고, padding은 레이어 안쪽의 여백을 의미합니다.
따라서 margin과 padding을 각각 3px씩 주게되면, 배경값을 주지않았을땐 동일한 레이어로 보이나, 배경을 주고 난 후엔
그 차이가 명확해 지네요.
margin과 padding을 활용하자면, margin은 레이어를 서로 떨어뜨릴때 사용을 할 수 있겠고, padding은 레이어안의 글씨등을
레이어와 분간을 시켜주는.. 이럴때 활용이 가능하겠네요.

적용법은,
margin-left, margin-right, margin-top,margin-bottom
padding-left, padding-right, padding-top, padding-bottom
이렇게 따로 나누어 적용이 가능하고, border와 마찬가지로 모든면에 적용해주실땐
margin: 수치; padding: 수치; 이렇게 해주시면 됩니다.

어떠신가요, margin과 padding의 차이를 아시겠나요?
어디에 margin이 쓰이고 padding이 쓰이고, 이 둘의 구별이 가능하시다면, 충분히 이해를 하신겁니다.

그럼 안심하고 계속하도록 합시다.


3. 레이어의 배치.. relative와 absolute
width,height,background,float을 배웠고..
거기에 border와 margin.. 그리고 padding까지..
여태 7가지씩이나.. 정말 많이도 알아봤군요?..(글쎄..)
이정도만 아셔도 div는 충분히 활용이 가능하실겁니다.
하지만! 레이어를 요리조리 배치할때 중요한 relative와 absolute를 빼놓을수는 없지요.
오늘, relative와 absolute에 대해 조금 알아보도록 합시다.

적용은 position:relative 혹은 position:absolute; top or bottom좌표; left or right좌표;

레이어를 배치할때 relative와 absolute를 사용한다고 하였습니다.
사전에서 용어를 찾아보면.. relative는 상대적인 이라 나와있고, absolute는 절대적인 이라 나와있습니다.
그렇다면 relative는 상대적인.. 뭐시기가 되겠고. absolute는 절대적인.. 뭐시기가 되겠네요?
맞습니다. 바로 그겁니다.
relative는 상대적인 위치를, absolute는 절대적인 위치를 지정해 줄 수가 있습니다.

무슨말이냐..
레이어에 relative의 옵션을 주고, 나열을 하면, 레이어는 평소와 마찬가지로 얌전히 차곡차곡 쌓여있습니다.
하지만 absolute를 주었을때는 달라집니다. 그냥 position:absolute만 준다면, 레이어가 한개가 *건, 열개가 *건
하나로 뭉쳐있는걸 보실 수 있을겁니다.
즉, relative는 자신의 앞에위치한 소스가 끝난시점부터 0, 0의 좌표를 갖게 되고, absolute는 자신의 좌표없이는 무조건 0, 0이 되어버립니다.
아까처럼 position:absolute만 주게된다면, absolute는 자신의 위치인 0, 0을 찾아가게 됩니다.
absolute에겐 좌표가 필요합니다.
물론 relative에게도 좌표를 줄 수 있습니다..

설명만으로는 이해가 안되신다구요? 직접 확인을 해봅시다.


absolute1
absolute2
relative1
relative2



 
  1. <div style="width:300px;height:180px;background:#e4e4e4;">  
  2.  <div style="width:90px;height:30px;border:1px solid #999999;position:absolute">absolute1</div>  
  3.  <div style="width:90px;height:30px;border:1px solid #999999;position:absolute">absolute1</div>  
  4.  <div style="width:90px;height:30px;border:1px solid #ff0000;position:relative">relative1</div>  
  5.  <div style="width:90px;height:30px;border:1px solid #ff0000;position:relative">relative2</div>  
  6. </div>  

위에는 absolute1, absolute2가 적혀있는 absolute 레이어 2개와, relative1, relative2가 적혀있는 빨간테두리의 relative 레이어 2개가 있습니다.
총 4개의 레이어가 있어야 하는데, 2개밖에 보이지 않네요
제일 첫번째 레이어를 보시면, 뭐라고 적혀있는지 알아볼 수도 없군요.

이유는, 위에서 설명했듯이. relative는 자신의 바로앞 소스가 끝난지점부터 0, 0의 좌표를 갖게됩니다.
따라서 relative는 회색레이어가 시작되는 지점부터 0, 0의 좌표를 가지고 relative1을 구성하고, 레이어가 끝난시점부터 다시 0, 0의 좌표를 갖게 된 relative2 레이어가 위치하게 됩니다.

하지만 absolute 레이어는 절대적으로 0, 0의 좌표를 가지게 됩니다.
relative는 앞소스가 끝난시점부터 0, 0을 갖는점과는 다른부분이네요.
그때문에 absolute 레이어 두개는 0, 0의 좌표에 정확히 뭉쳐있군요.

이러한 속성들 때문에 레이어 3개가 겹쳐지게 되는것입니다. 이해가 되시나요?

이해가 안되시는 분들을 위해..
이에대한 설명 들어갑니다.

relative1
relative2
(top10px, left5px)
absolute1
(top:5px, right:5px)
absolute2
(top:50px, right:5px)

 
  1. <div width:300px;height:100px;background:#e4e4e4;position:relative>  
  2.  <div style="width:120px;border:1px solid #ff0000;position:relative">relative1</div>  
  3.  <div style="width:120px;border:1px solid #ff0000;position:relative;top:10px;left:5px">relative2</div>  
  4.  <div style="width:120px;border:1px solid #0000ff;position:absolute;top:5px;right:5px">absolute1</div>  
  5.  <div style="width:120px;border:1px solid #0000ff;position:absolute;top:50px;right:5px">absolute2</div>  
  6. </div>  

relative1 레이어는 일반 relative 속성만 주었고, relative2 레이어에는 top:10px; left:5px 을 주었습니다.
relative2 레이어는 relative1 레이어가 끝난시점부터 0, 0의 좌표를갖고 위로10px, 좌로 5px에 위치해있네요.
반면 absolute1 레이어에는 top:5px, right:5px을 적용해 두었습니다. absolute는 무조건 0,0의 좌표를 갖는다고 했는데,
예상대로 위치해 있군요. 하지만 relative2 레이어와 absolute2 레이어는 확실히 다릅니다.
absolute2 가 relative와 같은속성을 가지고 있었다면 absolute1로부터 위로 50px에 해당하는곳에 위치해있어야 했습니다.
하지만 absolute2 레이어는 회색레이어의 상단 0, 0에서부터 위로 50px, 우로 5px에 해당하는곳에 위치해 있군요.
적용을 하실때, 이점 유의하면서 적용하시기 바랍니다.

이제 absolute와 relative의 차이를 조금은 아시겠나요?

position의 설명이 너무 길었네요..
이해를 하셨다면 다행이지만. 저것만으로 부족하다면 큰일이군요..ㅠ
아실때까지 반복해보시고.. 직접 해보시는것도 중요하구요.. position 속성은 앞으로 많이쓰게될 녀석이니
꼭한번 해보세요. 재밌는 녀석이에요~..


4. 레이어의 중요도 z-index
레이어의 중요도.. z-index 입니다.
중요도? 그런것도 있나요? 중요도 라는건 그냥 제가......
아무튼 z-index의 수치가 클수록 가장 앞으로 올라옵니다.
포토샵을 해보신 분이라면, 레이어에 대해서 잘 아시겠지요.
그 순서에 따라 어떻게 되는지도 아실테구요.
div의 중요도를 지정해주는게 z-index 입니다.

z-index를 따로 지정해주지 않아도 div를 생성한 순으로 위로 올라가게 됩니다.
다시말해 저절로 z-index 값이 주어진다는 것이지요.
저절로 주어지는 z-index 값에 의해서 알아서 순서가 정해진다면, 궂이 z-index 값을 주어야 하나요?
z-index가 항상 필요한것은 아닙니다. 하지만 간혹 레이아웃을 짜다보면, 레이어의 순서가 엉켜있어 원하는 틀이 나오지 않을때가 있습니다. 이때를 방지해서 z-index값을 주는데요. 먼저 예를 보시죠.

1
(top:10px; left:3px)
2
(top:15px;left:80px)

3(top:80px;left:50px)


1번,2번,3번순으로 생성했으며, 포지션은 absolute 입니다.
z-index 값은 저절로 주어진다고 했는데, 아마 맨밑의 회색레이어가 z-index값 1을 가졌겠고,
1번레이어가 2, 2번이 3, 3번이 4 값을 가지고 있겠네요.

이번에는 z-index 값을 임의대로 줘보겠습니다.

1
(top:10px; left:3px)
2
(top:15px;left:80px)

3(top:80px;left:50px)


1번에는 10, 2번에는 20. 3번에는 15 값이 주어져 있습니다.
왜 저렇게 되는지 아시겠나요?

 
  1. <div width:300px;height:200px;background:#e4e4e4;>  
  2.  <div width:100px;height:100px;background:#ffffff;border:1px solid #999999;position:absolute;top:10px;left:3px;z-index:10>1</div>  
  3.  <div width:100px;height:100px;background:#ffffff;border:1px solid #999999;position:absolute;top:15px;left:80px;z-index:20>2</div>  
  4.  <div width:100px;height:100px;background:#ffffff;border:1px solid #999999;position:absolute;top:80px;left:50px;z-index:15>3</div>  
  5. </div>  

이제 z-index에 대해 아시겠나요?

레이아웃을 짤때 필요한 핵심요소들은 모두 알아보았습니다.
눈으로 보기만 해서는 다 아는것처럼 느껴집니다. 하지만 막상 활용을 하려할땐 다시 찾아보게되고는 하지요.
직접 해보시면서 어떻게 적용이 되는지 보시면 어느새 div가 만만해 질껄요?

제가 누구에게 무언가를 가르칠 선생님도, 그렇다고 관련서적을 읽은것도 아닙니다.
그렇기 때문에 용어를 해설하는데 있어 조금은 억지가 많습니다.
그저 모르고 해매는 분이 계시다면, 제가 아는거 아는만큼이라도 알려드리려고 이렇게 적은겁니다.
도움이 되셨으려나 모르겠네요.

아무튼 긴 글 읽으시느라 수고하셨습니다.







div, 강좌
댓글 9 | 엮인글 0

웹표준화 가이드 사이트 - 네이버
DIV? 레이어 주무르기 1편





%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