[웹1]
9강 - 공간분할
1) 공간분할 태그
div division (분할하다)
*블럭엘리먼트 (밑으로 쌓이는 형식)
span **인라인엘리먼트 (옆으로 쌓이는 형식)
주로 텍스트에 이용
*블럭엘리먼트 : p, h1~h6, table, ul, ol, li, form ...
**인라인엘리먼트 : a, img, 글자꾸미는태그, label...
margin:auto : 블럭엘리먼트 중간 위치
text-align:center : 인라인엘리먼트 중간 위치 (좌우정렬만 해당, vertical-align 세로정렬이 따로 존재함)
float 속성 (부유, 띄움)
공간을 좌우로 배치하기 위해 일정한 흐름을 만들어 주는 속성
블럭엘리먼트들의 좌우 배치용도로 사용
원래 용도는 이미지와 텍스트들의 배치를 위한 속성
2) clear 속성
float 속성의 해제시 사용
left 왼쪽 배치 (float 속성값)
right 오른쪽 배치 (float 속성값)
both 양쪽 흐름 해제 (clear 속성값)
3) TIP
사이즈 측정 : 알캡쳐 - 캡쳐 드래그
컬러값 : 알캡쳐 - 알고싶은 색상에 커서 놓기
* 예제1 (div레이아웃1 - index-final.html)
<head>
<title>Untitled Document</title>
<style type="text/css">
body{
background-color:#9A9A9A;
font-family:arial, sans-serif;
font-size:14px;
margin:0px;
}
#container{
width:1000px;
height:600px;
background-color:#000000;
margin:0px auto; ---> 블럭엘리먼트(밑으로 쌓이는 형식 ex. h1) 정렬 / 상하 외부여백0px, 좌우auto(중간 정렬)
}
#top{
width:100%; ---> container의 width 1000px / top의 width 100% 설정 / 그러므로 top width도 1000px
height:80px;
background-color:#FD070B;
text-align:center; ---> 인라인엘리먼트(옆으로 쌓이는 형식 ex. img) 정렬 / 좌우 중간정렬
Q. #top은 div에 아이디값으로 들어간다. div가 인라인엘리먼트 인가..? 그리고 div안의 텍스트도 블럭엘리먼트의 h1이다.
h1은 그대로 있고 h1 안에 있는 텍스트를 중앙으로 옮겨주는 것이다. 그래서 div, h1 모두 블럭엘리먼트임에도 불구하고,
텍스트가 가운데 정렬이 된 것이다.
line-height:80px; ---> 줄간격 80px, height와 px를 같게 하여 세로 중간 정렬 효과 냄.
}
#top h1{
margin-top:0px; ---> #top에 해당되는 h1의 외부여백 중 위의 여백 0px 설정
}
#left{
width:250px;
height:420px;
background-color:#FA898B;
float:left; ---> div 왼쪽 정렬
}
#left ul{
list-style:none; ---> 비순차목록 ul의 기본 노출값 : `(가운데 점) / 밑으로 쌓이는 형식. none으로 스타일을 없앰. (마치 텍스트처럼 나타남)
ul에 소속된 li에 하는 것이 아니라 ul에 지정해야 한다.
padding-left:20px; ---> 내부 왼쪽 여백 20px
}
#left li{
float:left; ---> 인라인엘리먼트 형식으로 있던 텍스트가 블럭엘리먼트처럼 왼쪽 정렬됨.
padding:5px; ---> 내부 상하좌우 여백 5px
background-color:#B0A1E3;
margin-left:5px; ---> li 개별 왼쪽 공백 5px만큼 늘리기
}
#left li:hover{ ---> 마우스를 올린 상태
background-color:#F30F13;
}
#main{
width:750px;
height:420px;
background-color:#E81AA1;
float:left;
Q. float:right를 하면 어떻게 되나? 상관없다. left, main 둘 다 left 가능 / left는 left, main은 right 가능/ left, main 둘 다 right는 불가능
}
#footer{
width:100%;
heigh:100px;
background-color:#EDBFC0;
clear:both; ---> 양쪽 흐름을 해제하여 새로 추가한 div가 하단에 배치된다.
text-align:center; ---> 인라인엘리먼트 (footer에 소속된 span) 좌우 중간 정렬
line-height:100px; ---> 줄간격 80px, height와 px를 같게 하여 세로 중간 정렬 효과 냄.
}
.text1{ ---> 클래스(1:다수)
margin-left:20px;
}
.text2{
font-weight:bold; ---> 텍스트 굵게
}
#left a:link, a:visited{ ---> 링크 걸린 곳(a href) 클릭 전(a:link) / 후(a:visited) 설정
color:#000000;
text-decoration:none;
}
#left a:hover, a:active{ ---> 링크 걸린 곳(a href) 마우스 올린 상태(a:hover) / 마우스로 눌른 상태(a:active) 설정
color:#A9D7BA;
text-decoration:none;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header Title</h1>
</div>
<div id="left">
<p class="text1">Left Side Bar</p>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
</ul>
</div>
<div id="main">
<h2 class="text1">Main Contents</h2>
<p class="text1">Simple is Best~!!!</p>
</div>
<div id="footer">
Bottom text <span class="text2">Area</span>
</div>
</div>
</body>
</html>
* 예제2 (div레이아웃2 - coffee_start.html)
#wrap{
width:696px;
margin-left:auto;
margin-right:auto; ---> margin-left와 right를 auto로 설정하여 좌우 중간 정렬시킴.
(margin:0px auto; 이것은 상하외부여백이 0px이라 위의 설정값과 동일하지 않음. margin은 상하좌우 값 모두 입력해야 하기에..)
}
<div id="wrap">
</div>
댓글