Html & 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 속성을 적용할 수 있습니다..
-
div height 100% 처리하기CSS 100vh로 하자Html & CSS 2023. 2. 25. 18:23
📌 CSS div width height 지정하기 width 는 100% 가 잘먹는다. height 는 100% 가 잘 안된다. ✔️ 해결방안 html, body { height: 100%; } 을 처리해주거나 height : 100vh 로 처리하면 된다. vh = viewport height vw = viewport width https://codingmania.tistory.com/348 React에서 component 안에서 div의 height를 최대(100%)로 지정하는 방법 class App extends Component { render() { return ( ); }} 이렇게 있는데, 가로 100%, 세로 100%로 크기를 지정하고 싶다면, 쉽게 생각하면 가로 width : 100% 세로 ..