# white space

vanillovin

텍스트가 너무 길어서 해당 요소의 너비를 초과할 때 "..."으로 대체하기! 다음 조건이 충족돼야 함 너비 설정 white-space: nowrap 공백의 줄 바꿈을 방지하고 한 줄로 처리 overflow: hidden; 요소의 경계를 벗어나는 콘텐츠를 숨김 처리 text-overflow: ellipsis; 잘라지는 부분에 말 줄임표 표시 CSS 문법 사용: Tailwind CSS 문법 사용:

whiteme06

React JSX 환경에서는 개행문자나 태그가 동작하지 않는데 CSS 상의 옵션에서 와 같은 옵션을 주면 정상적으로 줄바꿈을 해준다. ES6에서 multiline-string 기능을 제공하면서 백틱으로 줄만 바꿔주면 \n나 br 태그 없이도 정상동작하는 걸 볼 수 있다. 내용이 길 경우 가독성 측면에서 유용할 수 있다.

tjsdk88802

✅ Role > alt 와 유사한 속성을 가졌습니다. alt 는 우리가 볼 수 있는 상황에 오류로 인해 이미지를 보지 못하였을 때 텍스트로 알려주는 기능이라면 role은 시작 장애인처럼 사진을 볼 수 없는 사람이 인식할 수 있도록 도와주는 역할을 합니다. ✏️ 사용법 |문법|설명| |-|-| |role = "alert"|중요한 내용 및 정보가 있는 곳 또는 정보가 변경된 곳| |role = "article"|웹페이지의 내용이 들어간 곳| |role = "banner"|배너가 있는 곳| |role = "contentinfo"|안내가 있는 부분| |role = "heading"|페이지 머리말 부분| |role = "img"|이미지가 있는 곳| |role = "navigation"|메인,서브 메뉴가 있는 곳| |role = "menuitem"|메뉴 옵션이 있는 곳| |role = "exmple"/"form"|폼 양식이 있는 곳| ✅ Overflow > 요소

maliethy

주황색 박스를 div 영역이라고 하고 해당 div에 다음과 같이 개행문자가 들어간 workerName이 있다. 여기에 white-space를 다음과 같이 주면 결과는 다음과 같다. white-space: normal; > normal 연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리합니다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다. white-space: nowra

rowooncoding

1. white space : nowrap 이걸 적용 안하면 밑의 아이들도 적용 안됨 왜냐면 밑의 공간이 있다면 줄바꿈이 되어서 밑의 스타일을 적용 안해도 된다고 생각하거든 2. over-flow: hidden 줄바꿈이 안되니까 텍스트가 넘어갈거니까 그걸 hidden으로 숨겨줌 3. text-overflow : eliplis 그냥 hidden만 하면 글자가 잘려보이고 그러면 이상하니까 뒤에를 ... 이렇게 나오도록 만들어준다

malgam

문제 textarea에 작성한 글을 firebase에 저장하고 다시 불러오는 간단한 프로젝트를 진행하고 있던 중, 분명 위 사진처럼 라고 저장했던 글이 회색 칸과 같이 라고 출력되는 모습을 확인할 수 있었다. 그래서 firebase에 저장하는 과정에서 문제가 생겼나 해서 firebase 관련하여 찾다 결국 이게 문제가 아니라는 걸 알았다. 해결 방안 css에서 white-space를 이용하여 해결할 수 있었다. (*white-space에 관한 상세 설명은 링크에서 확인할 수 있다.) css에 white-space: pre-wrap;을 추가했더니 아래와 같이 줄 바꿈이 잘 적

minsu2344

NewsItem.js NewsList.js useEffect 내부에서 async 즉시 실행함수를 작동 Loading 값에 따라 대기 중... 뜰 수 있도록 return articles 값이 없으면 빈 화면 출력 a 태그의 target과 rel target: 링크 클릭 시 창을 어떻게 띄울지 결정 _self(기본값): 현재 창에서 이동 _blank: 새 창에서 이동 rel: 현재 창과 링크의 관계 href가 필수로 있어야함 프로퍼티 종류 (http://www.tcpschool.com/html-tag-attrs/a-rel) object-fit img를 박스에 맞게 사이즈 조절 https://developer.mozilla.org/ko/docs/Web/CSS/object-fit white-space 글자 공백 조정 방법 https://developer.mozilla.org/ko/docs/Web/CSS/whit

taewo

white-space white-space 속성은 요소가 공백 문자를 처리하는 법을 지정한다. Cookie에 expire time 추가 쿠키의 expires값을 추가할때는 toUTCString를 해야한다. mdn을 통해 expires값은 GMTString-format으로 추가되어야 한다는걸 알 수 있다. vue native event native 이벤트는 마치 $emit과 같다. 하위컴포넌트에서 상위컴포넌트의 이벤트를 전달하기 위해 $emit을 쓴다면, native메소드를 통