CSS

웹 개발에서 긴 텍스트를 다룰 때, 특히 첫 번째 줄이 너무 길어 두 번째 줄로 넘어가는 경우가 종종 있습니다. 이럴 때 두 번째 줄부터 말줄임 표시를 적용하고 싶다면 CSS만으로는 해결하기 어렵습니다. 대신, JavaScript를 활용하여 조건에 따라 스타일을 조정하는 방법이 있습니다. 이 글에서는 간단한 예시를 통해 이를 구현하는 방법을 설명하겠습니다.HTML 구조먼저, 텍스트를 담을 HTML 구조를 만듭니다. 아래와 같이 text-container와 text 클래스를 가진 두 개의 div 요소를 사용합니다. 여기에 너무 긴 텍스트가 들어갑니다. 이 텍스트가 너무 길어서 두 번째 줄로 넘어가면, 두 번째 줄부터 말줄임 처리가 되어야 합니다.CSS 스타일다음으로, CSS를 사용하여 텍스트 컨테이너..

인라인블록블로그에 글을 작성할 때 인라인 블록을 사용하는 이유는 다음과 같습니다.텍스트와 함께 사용 가능: 인라인 블록은 텍스트와 함께 사용할 수 있습니다. 이는 글의 일부분에서 특정 부분을 강조하거나, 링크를 삽입하는 등의 작업에 유용합니다.이미지와 함께 사용 가능: 이미지를 인라인 블록으로 삽입하면 텍스트와 함께 자연스럽게 흐르며, 레이아웃을 깔끔하게 유지할 수 있습니다.간단한 스타일링: 인라인 블록을 사용하여 텍스트나 이미지에 간단한 스타일을 적용할 수 있습니다. 예를 들어, 글에서 특정 부분을 굵게 표시하거나, 링크를 다르게 스타일링하는 등의 작업이 가능합니다.레이아웃 유연성: 인라인 블록을 사용하여 여러 요소들을 수평으로 나란히 배치하거나, 텍스트와 이미지를 함께 배치하는 등의 다양한 레이아웃을..

제목을 한 줄로 표현 제목이나 글의 내용을 보여줄 때 내용이 영역보다 길어서 자동으로 줄 바꿈이 되거나 UI가 깨지지 않도록 하기 위해 말 줄임 효과를 사용할 수 있습니다. 말 줄임 css코드 말 줄임 기능을 구현하기 위한 CSS 코드는 다음과 같습니다. ul > li > a > .title { width: 100%; /* 영역사이즈 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 이 코드는 텍스트가 요소를 넘어가는 경우 텍스트를 자르고 생략 부호(...)로 표시합니다. 참고사항 width경우 지정하지 않아도 된다면 코드에서 제외해도 괜찮습니다.