목록css (3)

개발자로 전향중

높이를 모르는데 BG를 다 채우고 싶을때

.parent { display: flex; flex-direction: column; height: 100%; /* 부모 컴포넌트의 높이를 100%로 설정 */ } .header { /* 헤더 스타일 */ } .footer { /* 푸터 스타일 */ } .content { flex: 1; /* 헤더와 푸터를 제외한 모든 공간을 사용 */ overflow-y: auto; /* 내용이 넘치는 경우 수직 스크롤바 생성 */ } 가 기본 원칙 Body에 flex flex-col h-full 넣으면 3단분리 page.ts에 다시 flex flex-col h0full 넣으면 거기서 또 안에서 분리 원하는 content에 flex-1 추가하면 분리되고 분리된 나머지를 채울 수 있다 ㅅㅂ 존나 이거하는데 2시간 걸린..
css 2023. 10. 27. 11:57
CSS 한번에 정리

"": 없는 것 styled-component "": 있는 것 그냥 스타일 대신 -있으면 없애고 앞부분 대문자! background-color: #FFFAFA; ------> 배경색 float: left; ------> 왼쪽 정렬 color: slateblue; ------> 글자색 display: "block" ------> https://www.daleseo.com/css-display-inline-block/ 참고! display: "grid" https://studiomeal.com/archives/533 display: "flex" 그리고 flexBox https://learncoderepeat.tistory.com/38?category=882138 https://blogpack.tistory...
css 2022. 1. 29. 10:45
CSS 수직정렬하기

CSS 수직 중앙 정렬 하기 속성으로 텍스트를 세로 중앙에 정렬하는 방법으로 간단하게 적용이 가능한 3가지 방법입니다. line-height: 130px 태그에 line-height 속성을 이용하여 행의 높이를 부여하는 방식으로 글의 높이가 지정되면 자동적으로 가운데 정렬이 되며 이 방식의 단점으로는 각 행마다 지정한 높이를 가진다는 점입니다. padding: 60px 0 padding 속성을 이용하는 방법으로 상하 여백을 동일한 값을 적용하여 가운데 오게 하는데 각 행에 높이를 적용하지 않고 전체 내용 적용되어 가운데 정렬됩니다. 세로 여백을 적용을 하기 위해서는 display: block 속성을 가져야지만 가능해집니다. height: 130px ; display: table-cell; vertical..
css 2022. 1. 22. 15:52
이전 Prev 1 Next 다음