eunyo의 it이야기

안녕하세요. 이번 포스팅은 css을 사용해 텍스트가 넘칠때 ...로 말줄임 처리하는 방법에 대해 알아보도록 하겠습니다. 한 줄 말줄임 처리하기 div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; } 여러줄 말줄임 처리하기 { overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

웹사이트를 제작하다보면 그라데이션 배경이나 버튼을 사용할 때가 있습니다. 이때 사용하면 좋은 사이트입니다. css를 자동으로 생성해주기 때문에 간편하게 사용할 수 있습니다. https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. cssgradient.io 그라데이션 방향, 투명도, 색상 모두 지정 가능합니다.

[CSS] div 가운데 정렬하기 div와 같은 block형태의 태그는 보통 margin:auto를 사용하여 가운데 정렬을 합니다. 텍스트나 inline-block 같은 경우에는 text-align:center를 사용하여 가운데 정렬을 합니다. 그러면 세로 가운데 정렬은 어떻게 해야할까요? 여러가지 방법을 알려드리겠습니다. 1. line-height와 text-align line-height를 사용한 가로, 세로 가운데 정렬은 div안에 있는 텍스트를 가운데 배치할때 주로 사용됩니다. line-height의 값 : 감싸고 있는 부모태그의 높이값과 동일하게 해주시면 됩니다. text-align의 값 : 가운데 배치를 뜻하는 center로 적용해줍니다. [결과화면] [html] 가운데 정렬 [CSS] div..

CSS flexbox css에서의 flexbox는 보다 쉽게 레이아웃 구조를 잡을 수 있는 css 속성입니다. flex 박스는 요소의 크기가 정확하지 않거나, 반응형일 때 유용하게 사용할 수 있습니다. 정렬, 방향, 크기, 순서 모두 css만으로 유연하게 조절할 수 있기때문에 다양한 레이아웃을 보다 쉽게 구현할 수 있습니다. flexbox의 구성 flexbox는 상위 부모요소인 flex container와, 자식 요소인 flex item으로 구성되어 있습니다. flexbox 기본 구조 [html] Item1 Item2 Item3 Item4 [css] .container { display: flex; } flexbox css 적용방법은 부모요소인 container에 display:flex를 선언하면 됩니다..

display 여부에 따라 show, hide jquery를 통해 display block, none에 따라 보여질지 숨길지 여부를 결정하는 방법입니다. 방법 1 if ($("div").css("display") == "none") { $("div").show(); //display :none 일떄 } else { $("div").hide(); //display :block 일떄 } 방법 2 if ($('div').is(':visible') == false) { alert('안보이는 상태 '); } else { alert('보이는 상태 '); } 방법 3 (자바스크립트) var div = document.getElementById('div'); if (div.style.display === 'none')..

스크롤바 CSS로 스타일 변경하는 방법 브라우저의 높이보다 콘텐츠가 길어질때, 브라우저 내에서 스크롤바가 생성됩니다. 이때 생기는 스크롤바의 스타일을 변경하는 방법에 대해 알려드리겠습니다. 하지만, 크롬이 아닌 타 브라우저에서는 최소한의 수준에서 스타일 변경이 가능한 점 참고부탁드립니다. 사이트 전체 스크롤 css 수정하기 ::-webkit-scrollbar { width: 5px; /*스크롤바의 너비*/ } ::-webkit-scrollbar-thumb { background-color: black; /*스크롤바의 색상*/ } ::-webkit-scrollbar-track { background-color: yellow; /*스크롤바 트랙 색상*/ } 실행화면 원하는 영역에 스크롤 css 수정하기 di..

반응형 폰트 단위 em/rem css에서 사용되는 단위는 여러 가지가 있습니다. 그중에 오늘은 폰트, 즉 글자의 크기를 결정하는 단위인 em, rem에 대해 알아보겠습니다. 일반적으로 폰트의 크기를 결정하는 단위로 픽셀(px)을 주로 사용합니다. 하지만 픽셀은 절대적인 단위이기때문에 '반응형' 작업하기에는 부적합합니다. 왜냐하면 반응형 분기점 별로 사이즈를 달리해줘야 하기 때문에 수정해야 할 사항이 많기 때문입니다. 그래서 오늘은 반응형에서 유용하게 사용할 수 있는 em과 rem에 차이점과 사용방법에 대해 알아보겠습니다. em과 rem은 '상대 단위'입니다. '절대 단위'인 픽셀과 달리, em과 rem은 기준에 따라 유동적으로 변하는 특징을 가지고 있습니다. 1. rem rem은 웹에서 가장 최상위 요소..

한 줄 글자 자르기 p{ display: inline-block; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } display : block 요소나 inline-block 요소 둘 다 사용 가능합니다. white-space : nowrap은 줄바꿈 처리가 되지 않도록 합니다. overflow:hidden은 넘치는 텍스트를 숨깁니다. text-overflow : ellipsis 는 넘치는 텍스트를 숨긴 후 '...' 처리를 해줍니다. 한 줄 글자 자르기는 크롬, 익스 모두 잘린 후... 처리되어 보입니다. 두줄 / 여러줄 글자 자르기 p{ overflow: hidden; text-overflow: ellipsi..

리셋 css / reset css란? 모든 웹 브라우저에서 동일하게 보이기 위해서 사용하는 것으로, 브라우저 자체의 css style을 리셋시켜주는 css이다. 크로스 브라우징을 위해서는 *필수적인* css라고 생각하면 된다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, s..

웹퍼블리싱 작업을 하다 보면, 특히 반응형이나 모바일 환경에서 table, 표의 양의 방대하다보면 모바일 환경에서 많이 깨져서 보입니다 ,, 반응형 웹에서 테이블이 구조가 바뀌는 소스도 있겠지만, 가장 기본적인 디바이스 크기가 넘어가면 스크롤로 데이터를 볼 수 있게 해주는 css를 소개해드리겠습니다. See the Pen rNBZzxz by aldo814 (@aldo814) on CodePen. table을 div로 감싸 준 뒤 , div에 해당 width값을 주어 해당 영역을 넘어가면 스크롤이 생기도록 처리해줍니다. 그다음에 overflow 속성을 사용하여 스크롤 여부 속성을 주면 해당 영역이 넘어가게 되면 스크롤 처리가 됩니다. overflow 속성에는 , overflow:auto : 해당 범위를 벗..