div 태그의 가로 정렬 레이아웃
오랜만에 오늘은 이전에 공부하든 html/css에 대해 다시 둘러 보는 시간을 가져 봅니다.
태그 공부가 재미 있어 한때 푹 빠졌었는데 한동안 좀 멀리 했었네요
오랜만에 공부를 하려니 좀 힘이 들긴 하지만 그래도 태그공부를 하는건 상당히 재미 있다고 생각이 듭니다.
지난 시간에 포스팅한 페이지 중에서 좀 이해가 부족했든 부분에 대해 복습도 할겸 모자라고 부족한 부분들에 대해서는 보완하는 작업을 해보려 합니다.
div태그는 블록 요소 태그로 프레임의 레이아웃을 구성 하기 위해 최근에 가장 널리 사용하는 대표적인 태그라고 할수 있습니다.
오늘은 가로정렬 속성자들을 이용해 드롭다운이 가능한 메뉴버튼이 장착된 가상의 홈페이지 까지 만들고 어떻게 스타일을 정의 해야 하는지 과정도 알아 보겠습니다.
우선 div로 레이아웃 할때 위치를 배열 하고 지정하기 위한 요소들에 대해 정리 하기위해
먼저 위치를 결정하는 속성자의 종류 부터 알아 보도록 하겠습니다.
div 태그의 요소와 위치 결정 속성자의 종류
<div>태그는 division의 약자로 공간을 나누고 분할 한다는 의미를 가지고 있습니다.
기본적인 요소는 테이블태그 와 같은 width (넓이결정)와 height (높이결정) 속성과 속성값으로 면적을 가지게 되는 태그 입니다.
여기서 요소란 변하지 않은 기본적으로 가지고 있는 성질을 말합니다.
<div> </div>이렇게 태그 내에 아무런 스타일을 주지 않아도 p태그와 같은 문단의 단락을 결정 해주게 됩니다.
오늘은 우선 float속성자에 대해서 알아 보도록 하겠습니다.
float 속성자
div에 속성과 스타일로 면적을 갖게된 레이아웃이 결정되면 페이지내에 어디에 위치 시키고 배치하여야 할지를 결정 하는 순서로 넘어 가게 됩니다.
위나 아래에 공간이 있을 경우에만 자리를 잡게 되며 body 의 가로 면적에 영향을 받게 됩니다.
상위에 존재하는<div>의 영역이 있고 공간이 있을때 상위<div>의 영역의 옆에 left나 right 값으로 위치 시켜 줄수 있습니다.
공간이 충분하지 못할 경우엔 아래로 내려와 붙게 됩니다.
그렇기 때문에 left 나 right 만으로 값을 충족 시키게 됩니다.
clear속성자
<div>태그의 기본성질은 아무런 값을 주지 않을 경우 바디에 대해 좌측 상부를 기준으로 상하로
따닥따닥 붙어서 레이아웃 되어지는 성질을 가지고 있는 블록요소 입니다.
그리고 이때 상부 레이 아웃의 위치에서 벗어 나기 위해 사용하는 속성자가 바로 clear속성자라고 할수 있습니다.
float속성자를 사용해 위치배열을 할때 함께 사용 되는 속성자가 clear속성이라고 할수 있습니다.
clear속성자는 float속성 해제 속성자 라고 할수 있습니다.
상위의 영역에 float 속성이 주어졌을 경우 영향에서 벗어나기 위한 clear 엘리 먼트는 다음 세가지 속성값을 가지게 됩니다.
clear:left, float:left 벗어나기
clear:right, float:right 벗어나기
clear:both 상위 float 전체벗어나기
이렇게 값을 주면 대응 하는 상위태그 float의 영향을 받지 않게 되는 것입니다.
clear:both 속성과 값에의해 a박스 우측으로 가로 정렬 되든 박스들이 a박스 아래쪽에 내려와서 가로정렬이 되었네요
자 이런 성질을 이용해 보통 홈페이에서 볼수 있는 형태의 레이아웃을 만들어 보도록 하겠습니다.
이왕에 만드는 김에 목록 태그를 이용해 실제로 드롭다운이 가능한 메뉴버튼을 장착한 가상의 홈페이지를 만들어 보도록 하겠습니다.
주 메뉴 버튼을 누르면 부메뉴 버튼이 드롭다운 되고 부메뉴 목록들을 클릭 하면 각각의 앵커 버튼이 드롭다운 됩니다.
아래는 가상의 홈 모습입니다.
스타일과 코딩 하는 과정을 알아 보겠습니다.
CSS
body{
margin:0px; padding:0px;
}/*상위 스타일에 대한 원점 처리를 해 줍니다.*/
.t-wrap{
width:340px; height:550px;
}/*가상의 홈페이지 공간*/
.tu{
width:340px; height:550px; margin:auto;
border:1px solid red; position:relative;
}/*가상의 바디*/
.tba,.tbb,.tbc,.tbd,.tca{
border:1px solid red;
text-align:center;
layout:fixed;
}
.tba li a{
text-decoration:none;
}
.tba li li a{
text-decoration:none;
}
.tba{
background-color:skyblue;
width:340px; height:100px;
margin-bottom:0px; position:relative;
}
.tbb{
background-color:green;
width:100px; height:350px;
float:left;
clear:both;
}
.tbc{
background-color:blue;
width:238px; height:350px;
display:inline-block;
}
.tbd{
background-color:gray;
width:340px; height:100px;
float:left;
clear:both;
margin-top:0px;
}/*가로폭이 340픽셀 이상인 기기에서는 바디부의 우측으로 배열이 될수 있기 때문에 clear:both;속성을 줍니다.*/
.tba>ul{
background-color:none;
width:340px; height:30px; margin:0px;
border-radius:0.1em;
display:block;
position:relative; left:0;top:14px;
border:1px solid #34a435;
}
.tba>ul>.tca{
background-color:lime;
width:85px; height:30px;
margin:0px;
border-radius:0.1em;
border:1px solid red;
display:inline-block;
}
.tba>ul>li:hover ul{
background-color:gold;
width:85px; height:30px;
margin:0px;
border-radius:0.1em;
display:block;
position:absolute;
}
.tba>ul>.tca a{
background-color:lime;width:85px; height:30px; margin:0px; border-radius:0.1em; display:block;
}
.tba ul ul{
display:none;
}
.tba ul{
list-style:none;
}
.tba li li a{
display:none; background-color:none;width:85px; height:30px; margin:0px; border-radius:0.1em; display:block;
}
.tba li li a:hover{
background-color:black;width:120px; height:30px;
margin:0px; border-radius:0.1em; display:block;
}
위의 스타일 정의 에서 알수 있는 것 처럼 float속성자 대신 inline-block 을 이용 해 주메뉴버튼들을 가로로 정열 해 주었습니다.
이렇게 float 속성이나 inline-block 의 속성은 블록을 가로로 정열 해 주는 요소 라는 걸 알수 있습니다.
그런데 문제는 float과 inline-block의 경우 크기를 맞추는 기준이 다릅니다.
float 속성의 경우 라인 안쪽이 기준이 되므로 레이어개수에 n× (2npx+2npx)만큼 외부와의 간격을 주어야 합니다.
inline-block의 경우 기준이 라인 바같쪽에서 시작 하므로 n×(px+px)만큼 크기를 빼고 맞추어 주어야 합니다.
전체크기를 맞출때 이것을 감안 하지 않게 되면 상위의 공간이 모자라 아래로 내려와 버리게 됩니다.
위에서 확인한 결과 주메뉴 버튼4개를 라인의 굵기가 1px인 상위블록 안에 inline-block 으로 맞출 경우 상위블록인 div 의 라인 굵기1px의 양쪽 크기인 2px을 빼고 전체크기를 맞추어 주어야 하겠죠
전체 크기는 먼저 사이드바 넓이 100px를 먼저 빼주어야 겠죠 340-100=240이 됩니다.
인라인블록의 경우는 기준이 바깥쪽이기 때문에 2픽셀만 빼면 됩니다.
이렇게 240-2=238픽셀로 맞추면 되겠지요
그러나 FLOAT 의 경우는 사이드바의 양라인2px를 더 빼주어야 하므로 전체 크기는 236px이 되도록 맞추어 주어야 합니다.
세계표준기구가 정한 웹표준은 float을 기준으로 정해 지고 있습니다.
그러나 실제 사용 하기에는 inline-block 기준이 더 레이 아웃하기에 편리 한것 같습니다.
드롭다운메뉴 버튼을 만들기 위해 중요한 신의 한수는 바로 .tba ul ul{display:none;} 이 부분 입니다.
display:none;이 정의에 의해 tba 클래스 안의 부메뉴의 내용들이 존재 하지만 보이지는 않도록 하게 되는 것이죠 그리고 이것을 클릭 했을때 나타 나도록 하는 신의 두수가 바로 .tba>ul li:hover ul{}인데요 주목록 아래의 리스트인 주메뉴버튼을 이렇게 li:hover 가상클래스로 클릭을 하면 부메뉴 ul목록들의 내용이 나타 나게 되는 것입니다.
오늘은 여기까지 하도록 하겠습니다.