레이어 라는 단어는 겹쳐서 포갠다는 느낌이 강하게 드네요. 이미지 편집툴을 사용할때도 정말 많이 접하게 되는게 레이어 입니다. HTML에서도 layer 태그가 있었습니다만, HTML5 에서부터 사용이 권장 되지 않습니다. 이런걸 Deprecated 됐다고 하지요.
div 태그를 이용해서 원하는 위치에 레이어처럼 나타내 보도록 하겠습니다. div 태그의 style 속성 값에서 position, left, top, width, height 이 다섯가지만 있으면 원하는 곳 어디든 레이어를 띄워 줄 수 있습니다.
position 값으로 다섯가지를 줄 수 있지만, absolute와 relative 만 사용해도 무방 합니다.
left 값은 왼쪽을 기준으로 얼마만큼 떨어져 있는가를 나타내는 값 입니다.
top은 left 처럼 위에서 얼마나 떨어뜨리는가를 나타냅니다.
width 값은 div 의 가로 크기, height는 div의 세로 크기를 의미 합니다.
예제로 확인해 보도록 하겠습니다. 코드 하이라이트를 써서, 소스를 긁어 갈 수 있도록 하려고 했으나... 오늘따라 소스 처리 하는데 뭔가 애로사항이 많네요. 해당 소스 파일을 첨부 하려고 했는데 블로그스팟은 파일 첨부를 할 수 없는건가요; 허허.
여기서는 position 값 absolute와 relative 두 가지만 눈 여겨 보시면 될듯 합니다. 부모 div와 자식 div가 있고, 자식 div 들의 position 값을 다르게 줘 봤습니다. 아래 결과 사진 캡처를 확인해 보시면 바로 아실 수 있으실꺼라 생각 합니다.
absolute와 relative 속성 차이가 자식 div의 위치는 변경 시키진 않았지만, 부모 div의 내용물의 위치가 차이가 있네요. 오른쪽의 부모 div 3의 공란의 높이가 자식 div의 높이와 일치해 보입니다. 이제 대충 감이 오네요. position 속성의 값을 relative 로 두게 되면, 자식 div가 부모 div내에서 공간을 차지하게 됩니다. 그려내고자 하는 그림에 맞게 적절하게 써주면 되겠습니다.
아참, 중요한 설명 하나를 빼먹었습니다. div style 속성 값중 z-index 라는 항목이 있는데요. 이 값은 div들 끼리 겹쳤을때 어떤 div를 위에 보여주기 위해 올리고, 어떤 div를 아래에 보여주기 위해 내리는지를 나타내는 값입니다. 이 값이 큰 div가 가장 위로 올라와서 브라우저에 보이는 div가 됩니다. 예제에서 div1과 3은 z-index 값이1, div2와 4는 z-index 값이 2로 설정 되어 있습니다. div2와 4의 z-index값이 부모 값 보다 크니 부모의 위에 나오게 되는 거겠죠. 작으면 부모 div에 가려져셔 보이지 않게 됩니다.
* 참조 사이트 링크
div tag
http://www.w3schools.com/tags/tag_div.asp
z-index
http://www.w3schools.com/cssref/pr_pos_z-index.asp
