"-position
1) static : 순차적
2) absolute : absolute 또는 최상의 부모를 기준으로 위치
3) fixed : 브라우저를 기준으로 위치(브라우저 크기에 영향을 받음)
4) relative : 기본은 static과 동일. 대상 지정 시 대상을 기준으로 위치
-z-index : 사람눈 기준으로 위치. 값이 클수록 가까이 있음.
-display: none - 보여질 영역이 없음
-visibility: hidden - 내용을 보여주지 않음. 영역은 그대로 남아있음
-overflow
1) hidden : 넘치는 것을 감춤. 보이는 영역 이후에는 짤림
2) scroll : 스크롤바 생김
3) auto : 자동으로 스크롤 생김
4) 그외 nowrap, pre, pre-wrap 등 있음
-text-decoration : line-throught : 들여쓰기(메뉴 표시할 때 간격 조정용으로 씀)
-CSS를 이용해서 ...을 간단하게 처리하는 방법
1) overflow:hidden으로 넘치는 것을 감추고
2) white-space: nowrap으로 글자가 넘치게 설정한 후
3) text-overflow: ellipsis으로 넘쳐서 감추어진 내용을 ...으로 변경
-background-repeat : 배경반복 제어(repeat-x, no-repeat)
-테이블을 만들 때 border-collapse를 사용. separate일 경우 CSS가 안먹힘
-div 세로 정렬
.wrap {
display: inline-block;
width: 200px;
height: 200px;
vertical-align: top;
}
.con_wrap {
display: table;
width: 198px;
height: 198px;
border: 1px solid #000000;
}
.con {
display: table-cell;
text-align: center;
vertical-align: middle;
}"
1) static : 순차적
2) absolute : absolute 또는 최상의 부모를 기준으로 위치
3) fixed : 브라우저를 기준으로 위치(브라우저 크기에 영향을 받음)
4) relative : 기본은 static과 동일. 대상 지정 시 대상을 기준으로 위치
-z-index : 사람눈 기준으로 위치. 값이 클수록 가까이 있음.
-display: none - 보여질 영역이 없음
-visibility: hidden - 내용을 보여주지 않음. 영역은 그대로 남아있음
-overflow
1) hidden : 넘치는 것을 감춤. 보이는 영역 이후에는 짤림
2) scroll : 스크롤바 생김
3) auto : 자동으로 스크롤 생김
4) 그외 nowrap, pre, pre-wrap 등 있음
-text-decoration : line-throught : 들여쓰기(메뉴 표시할 때 간격 조정용으로 씀)
-CSS를 이용해서 ...을 간단하게 처리하는 방법
1) overflow:hidden으로 넘치는 것을 감추고
2) white-space: nowrap으로 글자가 넘치게 설정한 후
3) text-overflow: ellipsis으로 넘쳐서 감추어진 내용을 ...으로 변경
-background-repeat : 배경반복 제어(repeat-x, no-repeat)
-테이블을 만들 때 border-collapse를 사용. separate일 경우 CSS가 안먹힘
-div 세로 정렬
.wrap {
display: inline-block;
width: 200px;
height: 200px;
vertical-align: top;
}
.con_wrap {
display: table;
width: 198px;
height: 198px;
border: 1px solid #000000;
}
.con {
display: table-cell;
text-align: center;
vertical-align: middle;
}"