스카이코의 세상

글이 길어질 경우 자연스럽게 잘리고, 내용이 더 있다는 것을 표시하기 위해 말줄임표를 사용한다.특정 길이만큼 자르고 직접 ...를 붙여서 보여줄 수도 있지만 고정 길이라는 한계가 있어서 UI에 유동적으로 보여줄 수 없다.하지만 CSS를 사용한다면 고정된 길이로 자를 필요 없이 말줄임표를 쉽게 보여줄 수 있다.상황을 만들어보자.안녕하세요. 길이가 너무 긴 텍스트 입니다.예시를 들기 위하여 너비를 200px만큼 주고 내부의 긴 텍스트를 작성하였더니 위 그림과 같이 두줄로 나오게 된다.우리는 텍스트가 여러 줄이 될 경우 말줄임표를 보여주고 싶다.그러기 위해서는 여러 개의 속성을 주어야 한다. 1. white-space: nowrap; - 텍스트를 한 줄로 보이게 한다.2. overflow: hidden; - ..

모달을 구현하는 중 배경색은 투명하게 하고 안의 내용은 투명하지 않게 하고 싶었다. 내가 구현한 모달의 구조는 다음과 같이 container 태그를 background 태그로 감싸고 있는 구조였다. 모달 이때 투명도를 지정하는 속성인 opacity를 사용하였을 때 배경색이 투명해졌지만 감싸고 있는 container도 같이 투명해지는 문제가 발생하였다. 모달 opacity의 경우 하위 엘리먼트를 모두 포함하여 투명도가 적용되므로 위와 같은 현상이 일어난다. 이런 경우 배경색 자체에 투명색을 주면 되는데 background에 rgba를 사용하면 된다. rgba의 경우 네개의 인자를 받는데 앞의 세개는 rgb값을 받고 마지막 인자의 경우 alpha값을 입력하는데 0이상 1이하의 값을 입력하여 투명도를 지정할 ..

css를 다룰 때 사용할 수 있는 다양한 단위들이 있다. 대표적으로 px, em, rem, %, vh, vw, vmin, vmax 등이 있으며 여기서 px는 절대 단위이고 그 외 나머지 em, rem, %, vh, vw, vmin, vmax는 특정 값에 상대적인 상대 단위이다. 상대 단위를 사용할 때에는 기준이 되는 요소가 무엇인지 잘 확인하는 것이 중요하다. 1. px 사실 픽셀은 DPI 및 해상도에 따라 상대적이지만 기기 내에서 다른 요소에 따라 변경되지 않으므로 절대 단위로 여겨진다. px를 사용하면 반응형 사이트에 문제가 발생할 수 있지만 크기를 조정하면 안되는 경우 사용하는 것이 좋다. 2. % %는 부모 엘리먼트를 기준으로 어느 정도 크기를 나타낼지 백분율을 의미한다. 예를 들어 코드가 위와 ..