CSS text-overflow

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

clip : 끊김 없음.

ellipsis : "..."처리


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




이 블로그의 인기 게시물

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 margin & padding

이미지
 margin  - 영역의 바깥쪽 으로 여백 - auto, 마이너스 사용가능 (ex. margin:0 auto;, margin:-20px;) - 상, 하, 좌, 우 각각 속성을 줄수 있음 (margin-top, margin-left, margin-right, margin-bottom ) - 한번에 단축속성 으로 사용할수 있음.    margin: 상단, 우측, 하단, 좌측 (margin:5px 10px 15px 20px)    margin: 상하, 좌우 (margin: 10px 20px)    margin: 상, 좌우, 하 (margin: 5px 10px 15px)    margin: 상하좌우 (margin:5px) - 요소사이의 좌우 마진은 겹치지 않지만, 상하좌우의 마진은 큰 값에 맞춰 겹쳐서 출력됨 .   (ex. li { margin-top:5px; margin-bottom:10px } -> 이경우 큰수 맞춰져 두 요소의 상하여백은 10px)  padding  - 영역 안쪽 으로 여백 - auto, 마이너스 사용 불가능 . - 상, 하, 좌, 우 각각 속성을 줄수 있음 (padding-top, padding -left, padding -right, padding -bottom) - 단축속성 사용가능    padding: 상단, 우측, 하단, 좌측 ( padding :5px 10px 15px 20px)    padding : 상하, 좌우 ( padding : 10px 20px)    padding : 상, 좌우, 하 ( padding : 5px 10px 15px)     padding : 상하...
자세한 내용 보기

CSS position

이미지
position 으로 위치정하기 position은 요소의 위치를 정할 때 어디를 기준으로 할지 정하는 속성입니다. 속성값은 static, absolute, fixed, relative가 있으며, 기본값은 static입니다. 위치를 계산할 기준을 정하고 나면 top, right, bottom, left 속성으로 위치를 정할 수 있습니다. 단, position의 속성값으로 static을 사용하면 top, right, bottom, left를 설정해도 적용되지 않습니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS | position</title> <style> .container { width: 500px; height: 500px; margin: auto; border: 1px solid #da9627; background-color: #ffb848; } .po { width: 200px; border: 1px solid #17a668; background-color: #27a9e3; position: static; top: 100px; left: 100px; } </style> </head> <body> <div class="container"> <p>Lorem ipsum dolor.</p> <div class="po"> ...
자세한 내용 보기