반응형 개발/CSS33 align-self, align-items, align-content align-self : 자신에게 적용 align-items : 자식이 외동일때만 자식에게 적용, align-content : 자식이 여럿일때, 여럿에게 적용 align-self : 자신에게 적용 .containor .flex-wrapper { /* margin-top: 30px; */ align-self: center; background: #e6e8ec; border: none; color: black; display: flex; flex-direction: column; } align-items : 자식들에게 적용 .containor .flex-wrapper { /* margin-top: 30px; */ align-items: center; background: #e6e8ec; border: none.. 2022. 2. 13. gap 속성과 margin 속성의 차이 Margin 인접 요소와 상관 없이 항상 border 바깥에 여백을 둔다. 해당 엘리먼트에 적용된다. margin,padding 등등 입문단계에서 다 배우는것이기에 설명 안함. Gap 인접 요소가 없다면 적용되지 않는다. 말 그대로 요소와 요소 사이의 공백을 나타낸다. 내부 엘리먼트들에 적용된다. 컴퍼넌트에 배열 매핑해서 뿌려줄때 사용하면 좋다. 리턴되는 엘리먼트들이 간격을 갖고 배치됨. //css .containor { display: grid; grid-template-columns: repeat(2, 1fr); padding: 20px; gap: 20px; border: 1px gray solid; } //jsx ..(생략).. return ( //여기에 gap속성이 반영된다. {movies ? (.. 2022. 1. 30. Flex박스 속성 : grow, shrink, basis 사실 웹개발을 어느정도 해본사람이라면 mdn만 봐도 css flex 속성을 이해하는데 충분하다. 그런데 mdn의 단어들은 입문자들에겐 조금 어려운것 같다. 나도 몇달전엔 이해하지 못했던 mdn의 글들이 이제서야 이해가 된다. flex속성은 flex-grow, flex-shrink, flex-basis 세 속성의 축약형 flex-grow, flex-shrink, flex-basis에 대한 설명은 조금 더 내리면 볼 수 있다. flex : 1 3 100px //* flex-grow : 1, 형제 요소들과 비교했을때 얼만큼의 비율을 차지 *// //* flex-shrink : 3, 크기가 너무 커서 넘치게 될 때 얼만큼의 비율로 줄어들지 *// //* flex-basis : 100px, 초기 크기*// 가장 .. 2022. 1. 29. position : absolute 이전에 absolute는 relative안에서 움직인다는 글을 썼다. https://wnsdufdl.tistory.com/174?category=1012887 position : relative와 absolute relative안에서 absolute가 움직인다. 1. relative : 화면전체 , absolute : 위에서 20% 내려옴(top:20%;) 2. relative : 위에서 400px내려옴(top : 400px;) , absolute : 위에서 20% 내려옴(top:20%;) 3. rela.. wnsdufdl.tistory.com 오늘 position:absolute를 적용하면 다른 엘리먼트들이 position:absolute를 적용한 엘리먼트의 공간을 무시한다. 글로쓰니 뭔소린지 모르겠다.. 2021. 11. 6. 이전 1 ··· 4 5 6 7 8 9 다음 반응형
