9/11
테이블 셀(th, td) 간의 여백
table tag에서는 cellspacing 속성으로 처리한다 ( <table cellspacing="값" > )
정렬
글자 정렬과 객체 정렬 두 가지를 제공.
글자 정렬
수평정렬) text-align:값; // left center, right
수직정렬) vertical-align: 값; top,middle, bottom
td나th는 데이터가 표현되는 실제 영역보다 크게 설정이 된다,.
table의 td th는 실제 데이터가 표현되는것보다 더 크게 칸이 구서오딤
div는 데이터에 딱 맞게 높이가 설정됨
객체정렬
(text-align으로 정렬되지 않는 대상들을 객체라고 한다
수평정렬만 가능하다
float: 왼쪽 , 오른쪽으로 정렬...
사용법)
folat: 값; // left or right
주의할것: float을 사용하여 정렬을 수행하면, 하위 객체로 정렬이 전달되는 경우가 있다....
이 경우에 float속성의 하위 전달을 막으려면 clear:both 속성을 사용한다
selector{float:right} //오른쪽으로 정렬됨 객체가
selector{정렬속성ㄹ을 가지지않는 디자인 코드} 정렬이 필용벗는 객체인데 상위 속성이 하위로 전달되어 오른쪽 정렬이 수행된다... 이럴경우를 차단하기위해 clear:both속성을 사용한다.
객체의 가운데 정렬
table이나 div를 가운데 정렬 할려면 magin 속성을 사용한다.
사용법)
margin: x 좌표값 y좌표값;
가운데정렬) margin: 0px auto;
이미지 설정
background: 값1 url(값)2 값3;
//값1은 이미지가 로딩되지 않았을 때 보여질 바닥색
//값2는 이미지의 URL
//값3은 이미지의 반복여부: 생략가능-바둑판식
-x좌표 반복: repeat-x
-y좌표 반복: repeat-y
반복하지 안흠 : no-repeat
여백
-기준선 안 여백과 기준선 바깥 여백을 설정할 수 있다.
-
margin으로 설정할 수 있다
기준선 밖 여백이다
대상의 크기에 영향을 주지 않는다
사용법)
margin: 값;
4방향 모두 적용할 수 있다
padding
기준선 안쪽 여백 설정
대상의 크기가 변경된다 padding 의 크기 만큼을 제외한 크기로 전체 크기를 설정해야한다.
사용법
padding:값
4방향 모두 적용할 수 있다.
숨김설정
모든 태그는 숨기거나 보여지도록 설정할 수 있다.
부모태그가 숨겨지면 자식 태그도 함께 숨겨진다.
사용법)
display:값
숨기기: none
보이기: block,line
목록기호(list style)
-ol,ul,li의 번호,도형 목록 숨기기
-list style 속성을 사용함.
사용법)
list-style" 값// none, inherit
마우스 포인터를 변경하기
사용법)
cursor:값 //값에는 pointer ,crosshair, progress ,move
스크롤 바 설정
-개발자가 설정한 넓이와 높이보다 데이터가 더 많다면 , 설정한 영역을 벗어나서
데이터가 보여진다. =>scrollbar를 사용하여 설정한 영역 안에서 데이터를 보여준다
사용법)
overflow:auto
디자인 설정
position 속성을 사용.
특정 대상( <div>) 을 원하는 위치에서 보여줄 수 있다.
사용법)
position :값; //값에는 fixed(고정값), relative(상대좌표) , absolute(절대좌표)
좌표설정과 같이 쓰임: top또는 left속성으로 좌표를 설정한다.
top:값;
left:값;
fixed: 스크롤 바가 움직이면, 설정된 좌표를 스크롤 바에 맞게 수정하는 좌표형식
스크롤바가 움직이면 대상의 좌표가 변경되어 따라온다.
좌표를 갱신한다.
finxed의 시작 좌표는 relative의 영향을 받지 않는다.
absolute: 스크롤 바가 움직여도 설정된 좌표값이 변하지 않는 좌표형식.
스크롤 바가 움직여도 좌표가 영향을 받지 않으므로 따라오지 않는다.
absolute의 시작 좌표는 relative의 영향을 받는다.
relative: absolute의 시작점을 변경할 때 사용하는 좌표이다.
