CSS
-
div 안에 text 요소가 넘치면 줄바꿈이 되는데 안되게 할 수는 없어?Html & CSS 2023. 3. 25. 04:00
📌 chatGpt의 답변 CSS의 white-space 속성을 사용하여 텍스트의 줄바꿈을 제어할 수 있습니다. white-space 속성을 nowrap으로 설정하면 텍스트가 넘치더라도 줄바꿈이 되지 않습니다. 다음은 예시 코드입니다: div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 위의 코드에서 div는 넘치는 텍스트를 포함하는 요소의 선택자입니다. white-space: nowrap 속성은 텍스트가 한 줄에만 표시되도록 하고, overflow: hidden 속성은 넘치는 부분이 잘리도록 합니다. 마지막으로 text-overflow: ellipsis 속성은 넘친 부분에 대해서는 생략 부호를 표시하도록 합니다. 이렇게 작성하면..
-
flex 를 사용할 때 div의 border들이 서로겹쳐 경계선이 두껍게 보인다면 해결책!Html & CSS 2023. 3. 25. 03:56
📌flex 를 사용할 때 div의 border들이 서로겹쳐 경계선이 두껍게 보인다면 해결책! 처음엔 border-collapse : collapse 로 해결하려고 했는데 이건 표속성이란다..... 그래서 ChatGpt에게 물어보았다. border-collapse 속성은 표(table) 요소에서만 사용되며, collapse 값은 경계선이 붙어서 보이지 않도록 하는 속성 값입니다. flex 속성과는 관련이 없습니다. flex 레이아웃에서 경계선이 겹치는 문제를 해결하려면, border-collapse 대신 box-shadow 속성을 사용할 수 있습니다. box-shadow 속성은 요소의 경계선 대신에 그림자를 표시하는 속성입니다. 예를 들어, 아래와 같은 코드로 box-shadow 속성을 적용할 수 있습니다..
-
React 기본 css 제거하기React/React 2023. 2. 25. 16:16
📌 React 에서 html 을 작성할때 기본적으로 적용되어 있는 css 를 모두 제거 하고 싶다. 방법은 2가지 1.reset .css 를 App.jsx 에 추가한다. reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, ..