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 값이 적용된 요소는 인라인 요소로 표시됩니다.요소는 새로운 라인을 시작하지 않고, 다른 인라인 요소들과 같은 라인에 나란히 표시됩니다.가로 ..

매개 변수는 함수 정의시 함수가 필요한 값을 받기 위한 변수입니다. 매개변수에는 필수 매개변수, 선택 매개벼수, 튜플 매개변수, 딕셔너리 매개변수가 있습니다. 필수 매개변수**필수 매개변수 (Required Parameter)**는 함수 정의에서 기본적으로 값을 반드시 전달해야 하는 매개변수를 의미합니다. 함수 호출 시 필수 매개변수에 값이 제공되지 않으면 TypeError 오류가 발생합니다.즉, 함수 정의에서 기본값이 설정되지 않은 매개변수는 호출 시 반드시 값을 제공해야 하는 매개변수입니다.예시:def add(a, b): return a + b# 올바른 호출print(add(3, 5)) # 출력: 8# 잘못된 호출 (필수 매개변수에 값이 제공되지 않음)# print(add(3)) # Type..

상수 - 일정한 값 유지