css 작성 text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:200px; overflow:hidden; text-overflow 이 속성은 글자가 지정한 너비를 넘어갈경우 어떤식으로 처리할것인지를 선택하는 속성입니다. clip : 기본값입니다. ellipsis : 말줄임표로 처리합니다. 상위요소의 너비가 auto로 되어있는경우는 적용할 수 없습니다. inherit : 상위요소의 속성과 동일하게 사용합니다. word-wrap 긴 텍스트를 강제로 끊어서 줄바꿈을 해주는 속성입니다. (overflow 와 비슷합니다) normal : 기본값입니다. 글자가 길어도 끊어지지 않고 한줄에 계속 표시 break-word : 강제로 끊어서 줄바꿈합..

퍼블리셔이야기/css 2020. 4. 20. 17:55

css 중에 박스에 그림자 효과를 주는 css 가 있습니다. box-shadow 라는 그림자를 만들때 사용하는데요, box-shadow 기능이 있기 이전에는, 그림자효과를 위해 이미지로 저장하고 백그라운드를 깔아서 사용했는데요 CSS3에서 box-shadow를 사용해서 간잔하데 해결 할 수 있게 되었답니다! box-shadow 의 속성값은 5개 입니다. box-shadow : x-offeset y-offeset blur spread color x축(좌우) y축(상하) 번짐정도 그림자 확산거리 색 x-offeset : 수평방향(x축)의 그림자 오프셋 길이를 나타냅니다. 양수값을 지정하면 오른쪽에 음수값을 지정하면 왼쪽에 그림자가 생깁니다. y-offeset : 수직방향(y축) 의 그림자 오프셋 길이를 나타..

퍼블리셔이야기/css 2019. 12. 18. 23:15

float을 clear하는 4가지 방법 CSS 속성 가운데 float 속성은 자기 자신의 위치를 주변의 콘텐츠로부터 상대적으로 배치하는 속성입니다. float은 사전적 의미로 ‘뜨다, 띄우다, 뜨는 물건, 부유물’ 이라는 의미가 담겨져 있습니다. float은 높이가 가변적인 형태의 CSS 레이아웃을 위하여 반드시 요구되는 속성으로서 처음 CSS 배치기법을 익힐 때 가장 이해하기 어려운 속성중의 하나 입니다. left와 right를 주어 레이아웃들을 정렬할 수 있지만 해제를 해주지 않으면 부모요소의 높이값이 사라져 레이아웃끼리 겹쳐지는 현상이 발생합니다. 그래서 반드시 float를 이용해 정렬을 한 후에는 float를 해제해 주어야 합니다. [ float 해제하는방법 4가지 ] 가상 요소 :after 사용..

퍼블리셔이야기/css 2019. 12. 10. 17:13