CSS text-overflow

text-overflow
긴 글 줄이기 ("..."처리)

clip : 끊김 없음.

ellipsis : "..."처리


- width가 정해져야 함.
- overflow:hidden;과 white-space:nowrap;이 함께 사용.
- ...은 브라우저마다 다름.




이 블로그의 인기 게시물

CSS border-radius

border-radius   css3부터 가능해진 border-radius. 모서리를 둥글게 만들때 사용. border-top-left-radius: 속성값 (%,px) border-top-right-radius: 속성값 (%,px) border-bottom-right-radius : 속성값 border-bottem-left-radus : 속성값 한번에 쓸때는 border-radius : 속성값 으로 해줌. <style type="text/css"> .radius01 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-top-left-radius:20px 50px; } .radius02 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-top-right-radius:30px; } .radius03 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-bottom-right-radius:50px 20px; } .radius04 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-top-left-radius:20px 30px; } .radius05 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-radius:30px; } .radius06 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-radius:50px 30px 20px 10px; } </style> <div class="radius01...
자세한 내용 보기

CSS z-index 요소의 순서

이미지
z-index    - 요소의 순서를 결정함. - z-index 속성은 position 속성과 함께 사용 됨. - z-index:auto, 숫자로 표시 - 숫자가 높을수록 앞에 배치된다. - 기본이 0. - 마이너스 값도 지정 가능하다. <style type="text/css"> .layer1 {  position:absolute;  top:10px;  left:10px;  width:100px;  height:100px;  padding:20px;  background:#F9F;  z-index:1; } .layer2 {  position:absolute;  top:50px;  left:50px;  width:100px;  height:100px;  padding:20px;  background:#69F;  z-index:2; } .layer3 {  position:absolute;  top:100px;  left:100px;  width:100px;  height:100px;  padding:20px;  background:#36F;  z-index:3; } </style> <div class="layer1">레이어1</div> <div class="layer2">레이어2</div> <div class="layer3">레이어3</div> 결과 
자세한 내용 보기

CSS display

display 요소을 인라인, 블록박스로 보일지 결정해줌.   div { display:값; } · none : 요소가 보이지 않음. · block : 요소를 블록박스로 만듬 · inline : 요소를 인라인요소로 만듬. · inline-block : 배치는 블록박스로 되지만, 요소는 인라인임. · list-item : li요소와 같이 블록 박스와 목록 항목의 인라인 박스로 만듬. · run-in : 런인박스로 만듬. · 다음 요소들은 테이블 관련 요소와 비슷한 형태로 만듬.     inline-table     table     table-row-group     table-column     table-column-group     table-header-group     table-footer-group     table-row     table-cell     table-caption · compact, marker는 삭제됨.
자세한 내용 보기