Web Development/CSS5 10. Responsive CSS & Flexbox 103. Flex-Direction 어떤 container의 attribute display를 flex로 설정하면 flex model을 사용할 수 있다. 기본적으로 main axis 방향인 좌우로 item들이 쌓이고, 축을 바꿀 수도 있다. attribute flex-direction은 main axis의 방향과 main start 지점을 바꾼다. flex-direction: row (default) / row-reverse (아래 -> 위) / column (좌 -> 우) / column-reverse (우 -> 좌) 104. Justify-Content main axis를 기준으로 item를 어떤 위치에서 어떤 방식으로 둘지를 지정한다. justify-content: flex-start (main s.. 2022. 3. 17. 9. Other Assorted Useful CSS Properties 92. Opacity & The Alpha Channel rgba의 alpha channel을 통해 opacity를 조절할 수 있다. 0에 가까울수록 투명하고 1에 가까울수록 불투명하다. 아니면 opacity property를 사용해서 조절할 수도 있다. app.css div { display: inline-block; width: 500px; height: 260px; padding: 120px 0px; background-color: black; color: white; font-size: 100px; text-align: center; } #alpha { background-color: rgba(0, 0, 0, 0.1); } #opacity { opacity: 0.3; } result 93. The.. 2022. 3. 16. 8. The CSS Box Model 83 - 86. Box Model: Width & Height & Border & Border-Radius & Padding & Margin CSS의 모든 것들은 box로 이루어져 있다. 밑의 이미지가 모든 명칭들을 설명해준다. 87. The Display Property Inline: width, height를 무시한다. 위아래는 padding, margin을 무시한다. Block: 한 줄을 차지하며 width, height, padding, margin 모두 고려한다. Inline-block: width, height, padding, margin 모두를 고려한다는 점 빼고 inline처럼 동작한다. 2022. 3. 15. 7. The World of CSS Selectors 복습을 무조건 해야겠다는 깨달음을 얻었다! 학습에는 무조건 복습이 필요하다. 69 - 71. Universal & Element & Id & Class Selectors Universal selector: * Element selector: element Id selector: #id Class selector: .class 72 - 74. The Descendant & Adjacent & Direct-Descendant & Attribute selectors Descendant selector: element element Adjacent selector: element + element Direct-descendant selector: element > element Attribute selector.. 2022. 3. 15. 이전 1 2 다음
