반응형 개발/CSS34 text-spacing : text-indent, letter-spacing, line-height, word-spacing, white-space text-indent letter-spacing line-height word-spacing white-space text-indent : 들여쓰기 아주 재미있는 월드컵이었습니다. 김영권과 손흥민의 골로 독일을 이겼습니다. 하지만 16강 진출에는 실패했습니다. 우리 태극전사들 모두 자랑스럽습니다. 정말 통쾌했습니다. .paragraph-wrapper .paragraph { text-indent: 20px; // 첫줄 들여쓰기 20px text-align-last: center; // 마지막 줄은 가운데 정렬 background: #49ca69; } letter-spacing : 글자 사이의 공백 .paragraph-wrapper .paragraph { letter-spacing: 30px; ..(생략)... 2022. 2. 15. 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. 이전 1 ··· 4 5 6 7 8 9 다음 반응형
