실버라인의 잡다한 정보

★ Flex Containerdisplay: flex; /* block */display: inline-flex; /* inline-flex */ ☆ flex-direction (주 축 방향 설정)flex-direction: row; /* 기본값: 가로 방향 왼쪽 → 오른쪽 (가로 정렬)*/flex-direction: row-reverse; /*오른쪽 → 왼쪽 (가로 반전)*/flex-direction: column ; /*위 → 아래 (세로 정렬)*/flex-direction: column-reverse /*아래 → 위 (세로 반전)*/☆ flex-wrap (줄 바꿈 설정)flex-wrap: nowrap; /* (기본값) 한 줄 유지 */flex-wrap: wrap; /* 복수행 배치 */flex-wr..

📌 Flexbox(Flexible Box)란?Flexbox는 CSS의 레이아웃 모델 중 하나로, 아이템들을 효율적으로 정렬하고 배치할 수 있도록 도와주는 기술입니다. 기존의 float, inline-block을 사용할 때보다 더 쉽게 가로/세로 정렬을 조정할 수 있습니다.🎯 Flexbox의 주요 특징✅ 수직 정렬과 가로 정렬을 쉽게 조정 가능✅ 컨테이너 크기에 따라 아이템 크기 자동 조정✅ 반응형 레이아웃을 간편하게 구현 가능🏗️ 1. Flexbox의 기본 개념Flexbox는 크게 두 가지 요소로 구성됩니다.용어설명Flex Container (부모 요소)display: flex;를 적용한 요소Flex Items (자식 요소)Flex 컨테이너 내부에 있는 요소들✅ 기본 예제.container { d..

Flexbox에서 align-items, align-content, align-self는 컨테이너 내부의 아이템을 정렬하는 데 사용되지만, 각각 적용되는 대상과 동작 방식이 다릅니다.1. align-items▶ 컨테이너 내부의 모든 아이템을 정렬대상: flex 컨테이너 내의 모든 아이템작동 방식: 교차 축(cross-axis, 기본값: 수직 방향)에서 모든 아이템을 동일하게 정렬📌 예제 .container { display: flex; align-items: center; /* 모든 아이템을 수직 중앙 정렬 */}✔ align-items 속성값값설명stretch(기본값) 아이템 높이를 컨테이너에 맞게 늘림flex-start아이템을 교차 축의 시작 부분에 정렬flex-end아이템을 교차 축의 끝 부분..

HTML One Two Three has extra text CSS.box { display: flex;} flex-direction 지정rowrow-reversecolumncolumn-reverserowrow-reversecolumncolumn-reverse flex-wrap을 이용한 복수 행 flex 컨테이너 지정항목이 여러 행에 나열flex-wrap: wrap;flex 항목들은 컨테이너의 폭에 맞게flex-wrap: nowrap ; flex-flowflex-direction 속성과 flex-wrap 속성을 합침첫 번째 값은 flex-direction이고 두 번째 값은 flex-wrapflex-flow: row wrap;flex-flow: row-reverse wrap;fle..

미디어 쿼리 사용하기https://developer.mozilla.org/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries 미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN미디어 쿼리를 사용하면 장치의 단말기의 유형(출력물 vs. 화면) 또는 화면 해상도나 방향, 종횡비, 브라우저 뷰포트 너비나 높이, 모션 감소, 데이터 사용량 혹은 투명도와 같은 사용자 선호도developer.mozilla.org/*브라우저의 뷰포트 너비가 1300px 이상인 경우*/@media screen and (max-width:1299px) { /*브라우저의 뷰포트 너비가 1299px 이하인 경우*/}@media screen and (max-wid..

https://jonsuh.com/hamburgers/ Hamburgers Tasty CSS-animated Hamburgers jonsuh.com https://github.com/jonsuh/hamburgers GitHub - jonsuh/hamburgers: Tasty CSS-animated Hamburgers Tasty CSS-animated Hamburgers. Contribute to jonsuh/hamburgers development by creating an account on GitHub. github.com

https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. animate.style https://github.com/animate-css/animate.css GitHub - animate-css/animate.css: 🍿 A cross-browser library of CSS animations. As easy to u..

https://www.colorzilla.com/gradient-editor/ Ultimate CSS Gradient Generator from ColorZilla A powerful Photoshop-like CSS gradient editor www.colorzilla.com

https://fontawesome.com/v4.7/icons/ Font Awesome Icons Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des fontawesome.com

.resizeNone { resize: none; /* 사용자 임의 변경 불가 */ } .resizeBoth { resize: both; /* 사용자 변경이 모두 가능 */ } .resizeHor { resize: horizontal; /* 좌우만 가능 */ } .resizeVer { resize: vertical; /* 상하만 가능 */ } https://developer.mozilla.org/en-US/docs/Web/CSS/resize resize - CSS: Cascading Style Sheets | MDN The resize CSS property sets whether an element is resizable, and if so, in which directions. developer.mo..