funfunweb

word-wrap, overflow-wrap, white-space, word-break 이 네 가지 속성은 텍스트 줄바꿈과 넘치는 콘텐츠 처리에 핵심적으로 사용돼요. 각각의 역할이 살짝 다르지만, 조합해서 쓰면 강력한 텍스트 제어가 가능해요. 🧩 각 속성의 역할 요약속성설명white-space줄바꿈 허용 여부 + 공백 처리 방식 결정overflow-wrap (또는 word-wrap)단어가 너무 길어서 넘칠 때 줄바꿈 허용 여부 결정word-break단어 중간에서 줄바꿈할 수 있는지 여부 결정💡 1. overflow-wrap vs word-wrapword-wrap은 예전 명칭이고, 현재는 overflow-wrap이 정식 이름이에요.하지만 둘 다 거의 같은 기능을 해요.overflow-wrap: bre..

word-break는 긴 단어나 텍스트가 줄 바꿈이 필요한 상황에서 어떻게 줄을 바꿀지 결정하는 CSS 속성이에요.📌 word-break 속성값 정리속성값설명 normal기본값. 일반적인 영어 단어는 단어 사이에서 줄이 바뀜. 한글은 글자 단위로 줄바꿈 가능break-all단어 중간이라도 필요하면 줄바꿈함. (단어 단위 무시)keep-all한글, 중국어, 일본어는 줄바꿈 가능하지만, 영어는 단어 단위로만 줄바꿈break-word (비표준)필요 시 단어 중간에서 줄바꿈. 일부 브라우저에서는 지원하지만, 정식 명세에는 없음 → 대신 overflow-wrap: break-word 사용 권장SupercalifragilisticexpialidociousSupercalifragilisticexpialidocio..

📌 주요 white-space 속성값 정리속성값설명normal기본값. 연속된 공백은 하나로 줄이고, 줄바꿈(\n)은 무시됨nowrap공백 처리 방식은 기본과 같지만, 줄바꿈은 하지 않음 (모든 텍스트를 한 줄로 표시)pre 태그처럼 동작. 공백과 줄바꿈을 그대로 유지pre-wrap공백과 줄바꿈을 유지하면서, 필요하면 줄바꿈도 함 (자동 줄바꿈 허용)pre-line줄바꿈은 유지하지만, 연속된 공백은 하나로 줄임break-spacespre-wrap처럼 작동하면서, 공백에서도 줄바꿈 허용 (CSS3부터 도입)✅ 예제 비교공백 테스트입니다.공백 테스트입니다.공백 테스트입니다.줄바꿈도 있습니다..normal { white-space: normal;}.nowrap { white-space..

ext-overflow는 CSS에서 텍스트가 요소의 영역을 넘칠 때 그 텍스트를 어떻게 처리할지를 정하는 속성이에요. 주로 overflow: hidden 및 white-space: nowrap과 함께 사용됩니다.📌 text-overflow 주요 속성값속성값설명clip넘치는 텍스트를 그냥 자릅니다. (기본값)ellipsis넘치는 텍스트 끝에 …(말줄임표)를 표시합니다.string말줄임 대신 사용자가 지정한 문자열로 대체할 수 있습니다. (일부 브라우저에서 지원) 이 텍스트는 너무 길어서 한 줄에 다 못 들어갑니다..ellipsis-text { white-space: nowrap; /* 텍스트 줄바꿈 안 함 */ overflow: hidden; /* 넘친 텍스트 숨김 */ ..

CSS에서 가상 클래스(Pseudo-classes)와 가상 요소(Pseudo-elements)는 비슷해 보일 수 있지만, 그 목적과 동작 방식에서 중요한 차이가 있습니다. 두 개념은 모두 HTML 문서에서 존재하지 않는 부분에 스타일을 적용할 수 있게 해 주지만, 각각 다르게 작동합니다.1. 가상 클래스 (Pseudo-classes)가상 클래스는 특정 상태나 조건을 만족하는 HTML 요소를 선택할 때 사용됩니다. 즉, 요소의 상태(예: 마우스 오버 상태, 포커스 상태 등)에 따라 스타일을 다르게 적용할 수 있습니다.주요 가상 클래스 예시:hover: 마우스가 요소 위에 올라갔을 때 스타일을 적용:focus: 요소가 포커스를 가질 때 스타일을 적용 (예: 입력 필드):active: 사용자가 클릭할 때 스타..

CSS에서 가상 요소 선택자(Pseudo-element selector)는 특정 HTML 요소에 직접적으로 존재하지 않는 스타일을 적용할 수 있게 해주는 선택자입니다. 이러한 선택자는 실제 DOM 요소가 아닌, 요소의 일부를 선택하거나 그 요소의 가상적인 부분을 스타일링할 수 있도록 해줍니다.대표적인 가상 요소 선택자는 ::before, ::after, ::first-letter, ::first-line 등이 있습니다. 이들을 사용하면 HTML에 추가적인 마크업을 삽입하지 않고도 스타일을 개선할 수 있습니다.주요 가상 요소 선택자1. ::before::before는 선택한 요소의 내용이 렌더링되기 전에 가상 콘텐츠를 삽입하는 데 사용됩니다.주로 아이콘, 장식, 텍스트 등을 삽입할 때 사용됩니다.이 가상 ..

display: none과 visibility: hidden은 둘 다 요소를 화면에서 보이지 않게 만드는 속성이지만, 그 동작 방식에서 중요한 차이점이 있습니다. 아래에서 두 속성의 차이점을 비교해 보겠습니다.1. display: nonedisplay: none을 적용하면, 해당 요소는 화면에서 보이지 않게 될 뿐만 아니라, DOM에서 완전히 사라진 것처럼 동작합니다.요소는 레이아웃에서 공간을 차지하지 않게 되며, 다른 요소들이 그 공간을 차지하게 됩니다.애니메이션, 이벤트 리스너 등도 영향을 받을 수 있습니다. 예를 들어, display: none으로 설정된 요소는 클릭 이벤트를 받을 수 없습니다.예시:div { display: none;}This will not be visible and will ..

CSS의 display 속성은 HTML 요소가 페이지에서 어떻게 표시될지를 정의하는 중요한 속성입니다. 이 속성은 요소의 레이아웃 및 다른 요소와의 관계를 결정합니다. display 속성은 다양한 값들을 가질 수 있으며, 각 값에 따라 요소의 표시 방식이 달라집니다. 주요 값들을 살펴보겠습니다:1. blockblock 값이 적용된 요소는 블록 요소로 표시됩니다.기본적으로 새로운 라인에서 시작하며, 가로 너비는 부모 요소의 전체 너비를 차지합니다.예시: , , 등이 기본적으로 block 요소입니다.div { display: block;}2. inlineinline 값이 적용된 요소는 인라인 요소로 표시됩니다.요소는 새로운 라인을 시작하지 않고, 다른 인라인 요소들과 같은 라인에 나란히 표시됩니다.가로 ..