CSS8 [CSS] 줄바꾸지 않고 말줄임표(...)으로 보이게 하는법 .title{ flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } flex-grow:1로 element 요소를 모두 채우게 하고 white-space: nowrap 길이가 오버되는 요소의 경우 줄바꿈을 하지 않게하고 overflow:hidden으로 오버되는 요소를 숨기고 text-overlofw:ellipsis로 오버되는 text를 말줄임표로 바꿔준다 2023. 12. 2. Flex container 자식요소(item)와 자식요소를 감싸는 부모요소(container)에 지정하는 속성이 따로 있다. 부모 display(flex, inline-flex) flex는 수직, 가로는 최대한 늘어나도록 설정 inline-flex는 수평 가로는 최대한 줄어들도록 아이템이 차지하는 너비까지 줄어듦 flex-direction(row, column) row: 행 default column: 열 각각 reverse를 붙일 수 있음 flex-wrap 넓이를 넘어가는 속성을 지정했을 때 어떻게 할 것인가? wrap 줄바꿈 default nowrap 줄바꾸지 않고 item 넓이를 줄임 justify-content(flex-start, flext-end, center, 주축을 기준으로 정렬 flex-start: 왼쪽 defau.. 2023. 11. 6. TailwindCSS group 과 peer group: 버튼에 hover와 같은 동작이 발생 하였을 때 하위 태그에 있는 속성을 변경하고 싶을 때 쓸 수 있다. 사용법을 코드를 통하여 알아보자 New project Create a new project from a variety of starting templates. 부모 요소에 group 키워드를 선언하고 하위(자식) 태그에 group-{pseudo}:원하는 속성 을 정의하는 식으로 사용한다. group을 이해했다면 peer를 이해하는 것은 어렵지 않다. 형제(peer) 속성의 의사 클래스의 동작에 따라 반응하는 효과를 넣고 싶을 때 사용이 된다. 2023. 9. 21. [CSS] position relative, absolute See the Pen Untitled by Ysk (@yunsukhyun) on CodePen. 처음 postion은 부모요소인 figure에서 벗어나 자유로운 상태 absolute인데 상위 요소에 relative가 없기 때문에 최상위 요소인 body를 기준으로 bottom:0 인 페이지 가장 하단에 위치 See the Pen postion by Ysk (@yunsukhyun) on CodePen. figure의 postion을 relative로 바꾸자 figure의 위치는 상위 태그인 figure의 bottom: 0인 부분에 위치하게 됨 CSS의 의미가 Cascading Style Sheets 라는 것을 생각해보면 매우 합리적이다. 2022. 12. 25. 이전 1 2 다음
