분류 전체보기195 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. [Youtube] BL과 백합, 왜 여성향인걸까? 이 쪽에 아는 것이 없는 내겐 꽤나 신선한 시선으로 현상에 대해 해석하였다. 비록 이 영상을 보고 난 후부터 유튜브 추천 동영상에 남성 두 분이서 함께 썸네일에 등장하는 영상이 가끔 끼어들곤 하는데 그래도 모르는 분야에 대한 새로운 지식을 얻게 되었다! 2022. 3. 16. 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. 이전 1 ··· 31 32 33 34 35 36 37 ··· 49 다음
