728x90
728x90

css 4

CSS - 여러 줄 말줄임(...) 표시 - webkit-box

말줄임(...)을 HTML 요소(element)의 크기에 맞게 지정된 줄 수로 나오게 하고 마지막 줄의 문자열 끝에 말줄임(...) 표시를 추가합니다. 다음처럼 5줄로 나오는 것을 지정된 줄 수로 말줄임(...)을 처리해 보겠습니다. 봄맞이 나들이 겸 댕댕이 퍼피와 함께 아침고요수목원 근처에 있는 애견펜션에 놀러 갔습니다. 아침고요수목원 근처라 찾아가기 쉽고 사장님도 친절하십니다. 여러 줄 말줄임(...) 표시하기 1. 이전 한 줄 말줄임(...) 처럼 .box에 overflow 속성 값을 hidden으로 하여 HTML 요소(element)의 크기를 넘어갈 경우 보이지 않게 하고 text-overflow 속성 값을 ellipsis으로 하여 문자열을 생략 처리합니다. 여러 줄을 처리하기 위해서는 white..

css 2022.05.08

CSS - 한 줄 말줄임(...) 표시 - text-overflow ellipsis

말줄임(...)은 여러 줄로 나오는 문자열을 HTML 요소(element)의 크기에 맞게 한 줄로 처리하고 문자열 끝에 말줄임(...) 표시를 추가합니다. 다음처럼 2줄로 나오는 것을 한 줄 말줄임(...)으로 처리해 보겠습니다. 봄맞이 나들이 겸 댕댕이 퍼피와 함께 아침고요수목원 근처에 있는 애견펜션에 놀러 갔습니다. 한 줄 말줄임(...) 표시하기 1. .box에 white-space 속성 값을 nowrap으로 하여 자동으로 줄 바꿈이 되지 않게 합니다. .box { white-space: nowrap; border: 1px solid black; width: 400px; padding: 10px 10px; } 2. .box에 overflow 속성 값을 hidden으로 하여 HTML 요소(elemen..

css 2022.05.08

CSS - pt(point - 포인트) -> px(pixel - 픽셀) 변환

em를 쉽게 사용하기 위해서는 px(pixel - 픽셀)을 알아야 합니다. 그런데 폰트 크기(font-size) 속성 값을 px(pixel - 픽셀)이 아닌 pt(point - 포인트)로 사용할 경우가 많이 있습니다. 그래서 pt(point - 포인트)를 px(pixel - 픽셀)로 변환해 보겠습니다. W3C(World Wide Web Consortium - 월드 와이드 웹 컨소시엄)에서는 단위에 대한 크기를 지정해 두었습니다. 자세한 내용은 W3C 웹 사이트(https://www.w3.org/TR/css3-values)를 참조하세요. 위의 단위 테이블을 보면 pt(point - 포인트)와 px(pixel - 픽셀)이 in(inche - 인치)를 기준으로 크기가 지정되어 있는 것을 알 수 있습니다. in..

css 2022.05.08

CSS - em, rem - 상대 단위

em em이란 HTML 요소(element)의 폰트 크기(font-size) 속성 값에 비례해서 결정되는 상대 단위입니다. HTML 요소(element)는 쉽게 HTML를 구성하는 태그(tag)라고 생각하시면 됩니다. HTML 요소(element)의 폰트 크기(font-size) 속성은 부모로부터 상속받을 수 있습니다. 1em은 HTML 요소(element)의 폰트 크기(font-size) 속성 값과 같습니다. 그래서 HTML 요소(element)의 폰트 크기(font-size) 속성 값이 16px이면 1em은 16px이 됩니다. (1em = 16px) 1em이 HTML 요소(element)의 폰트 크기(font-size) 속성 값과 같다고 했는데 그럼 container의 폰트 크기(font-size) ..

css 2022.05.08
728x90
728x90