You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🔮 BootStrap5 반응형 시스템 - 거터/간격(gap)
Gutters 거터는 열 사이의 패딩으로, Bootstrap 그리드 시스템에서 콘텐츠의 간격을 맞추고 정렬하는 데에 사용됩니다. 거터는 가로 padding에 의해 생성되는 열 콘텐츠 사이의 간격입니다. 각 열에 padding-right 및 padding-left를 설정하고 음수 margin을 사용하여 각 행의 시작과 끝에서 이를 오프셋하여 콘텐츠를 정렬합니다. 수평 거터 .gx-* 클래스를 사용하여 수평 거터 너비를 제어할 수 있습니다. .container 또는.container-fluid 부모는 일치하는 패딩 유틸리티를 사용하여 원하지 않는 오버플로를 방지하기 위해 더 큰 거터를 사용하는 경우 조정해야할 수 있습니다. 대안은 .overflow-hidden 클래스로 .row 주위에 래퍼를 추가하는 것입니..
🔮 BootStrap5 반응형 시스템 - Column 행렬 정렬
Columns 행렬 시스템 행렬 정렬 flexbox 정렬 유틸리티를 사용하여 가로나 세로로 열을 정렬합니다. 수직 정렬 One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns 수평 정렬 One of two columns One of two columns One of two columns One of two colum..
🔮 BootStrap5 반응형 시스템 - 그리드
부트스트랩 그리드 시스템 그리드는 테이블과 유사하게 화면을 분할해 원하는 레이아웃을 잡기위해 정의된 것으로 부트스트랩에서는 12개의 컬럼 구조를 사용할 수 있으며 6개의 화면크기와 관련된 옵션을 제공 합니다. 12개의 그리드 컬럼 화면을 12개의 컬럼으로 분할할 수 있으며 필요에 따라 컬럼을 묶어 더 큰 크기의 컬럼으로 사용할수도 있습니다. 그리드 작동 원리 그리드는 여섯 개의 반응형 중단점별로 컨테이너 및 열 크기 및 동작을 제어할 수 있습니다. (예: .col-sm-4는 sm, md, lg, xl, xxl에 적용됨) 컨테이너는 콘텐츠를 중앙에 놓고 가로로 채웁니다. 반응형 픽셀 너비에는 .container를, 모든 뷰포트 및 디바이스에서 width: 100%에는 .container-fluid를, 유동..
🎨 Flex에도 Grid와 같이 gap(여백)을 쓰자
CSS Flex gap 예전에는 flex box를 사용할때, 각 item들의 사이 공간을 주기 위해서는 margin을 사용해야 했다. 하지만 margin 과 gap의 차이점은 margin은 무조건 여백을 줘서 불필요한 공간을 만들지만, gap의 경우 엘리먼트 요소들의 사이에 인접한 요소가 있을때만 공간(space)을 만들기 때문에 훨씬 모던하다. 하지만 이제 flexbox도 grid와 같이 gap를 사용할 수 있게 되었다. 문법은 그리드와 완전히 판박이니 그대로 사용하면 된다. gap: [상하좌우 전체의 값]; gap: [상하 사이의값] [좌우 사이의값]; 동일한 여백 주기 1 2 3 4 5 6 7 8 9 .test-parent { display: flex; flex-wrap: wrap; gap: 10p..
🎨 스크롤을 부드럽게 - Scroll Snap 속성
CSS Scroll snap CSS Scroll snap은 웹 페이지에서 스크롤을 할 때, 요소가 스크롤되는 위치에 자동으로 스냅되도록 하는 CSS 속성이다. 예를들어 용자가 웹 페이지를 스크롤할 때 중간에 멈춰버리면 콘텐츠의 중간에서 멈춰 주요 콘텐츠의 일부만 보이게 되는데, 이를 미리 설정한 위치로 자동 스냅하여 자연스러운 스크롤 움직임과 함께 사용자 경험을 더욱 향상시키는 것이다. 스크롤 스냅이 없던 시절에는 자바스크립트로 일일히 요소 위치를 계산해서 조정해야 됬지만, CSS 속성을 통해 공식 지원함으로써 개발의 편리함과 더불어 성능도 비약적으로 상승했다고 볼 수 있다. Scroll snap 사용법 우선 스크롤 스냅을 적용할 부모 컨테이너 영역을 만들고, 그 안에 스냅될 자식 요소 영역을 만들어 준..
🔮 BootStrap5 반응형 시스템 - 컨테이너
컨테이너(Container) 컨테이너는 Bootstrap에서 가장 기본적인 레이아웃 요소이며 기본 그리드 시스템을 사용할 때 필요합니다. 컨테이너는 내용을 포함하고 채우고 (때로는) 내용을 중앙 정렬하는 데에 사용됩니다. Bootstrap에는 세 가지 다른 컨테이너가 있습니다: 각 반응형 중단점에 max-width를 설정하는 .container 모든 중단점에 width: 100%를 설정하는 .container-fluid 정의된 중단점까지 width: 100%를 설정하는 .container-{breakpoint} 아래 표는 각 중단점에서 각 컨테이너의 max-width가 원래 .container와 ‘.container-fluid’가 어떻게 비교되는지 보여줍니다. 브라우저 반응형 컨테이너 예시 아래 링크 홈..
🔮 BootStrap5 반응형 시스템 - 중단점 (미디어 쿼리)
중단점 Breakpoints Breakpoints는 Bootstrap의 반응형 레이아웃이 뷰포트 크기 또는 기기에서 어떻게 작동 할지 결정하는 사용자가 정의 가능한 넓이입니다. Bootstrap에는 반응형 제작을 위해 grid tiers 라고 하는 6개의 Breakpoints가 포함되어 있습니다. 이러한 breakpoints는 Sass 소스 파일을 사용할 경우 사용자가 지정할 수 있습니다. Breakpoint Class infix Dimensions X-Small None
🔮 BootStrap5 SCSS 커스터마이징 방법
부트스트랩 SCSS 커스터마이징 변수, 맵, 믹스인 그리고 함수를 활용한 소스의 Sass 파일을 이용하여 프로젝트 구축을 고속화하고 재정의 할 수 있습니다. 부트스트랩5는 변수, 맵, 믹스인 등을 활용한 소스의 Sass 파일을 이용합니다. 'Style Sheet/Sass' 카테고리의 글 목록 안녕하세요. 열심히 공부하는 초보 개발자로서 기술블로그를 운영하고 있습니다. inpa.tistory.com SCSS 파일 구조 가능한 한, Bootstrap의 핵심 파일은 직접 수정하지 마세요. Sass에서는 Bootstrap을 가져와 자체 스타일 시트를 생성함으로써 간접적으로 Bootstrap을 수정하고 확장할 수 있습니다. npm과 같은 패키지 매니저를 사용하는 경우 다음과 같은 파일 구조가 됩니다. your-p..
![[CSS] 📚 최신 CSS 기능 지원여부 확인 🎨 @supports](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbJht3R%2Fbtrijq1eqZU%2FCmThKK4BKkjkSaLbSB28sK%2Fimg.png)
[CSS] 📚 최신 CSS 기능 지원여부 확인 🎨 @supports
@supports 최신 스펙의 css값을 사용할 때, 해당 css를 제공하는 브라우저에 따라 맞춤형으로 적용할 수 있게 css를 선언할 수 있다. 방법은 바로 @supports 문법(기능 쿼리, feature query)을 이용하는 것이다. @supports 문법은 미디어 쿼리 문법을 사용하는 것과 유사하다. @supports (display:flex) { /* 만약 해당 브라우저가 flex를 지원 할 경우 아랫값을 적용 시킨다. */ .contents { display: flex; margin: 0 5px; align-items: center; justify-content: space-between; } .contents div { flex-grow: 1; } } @supports not (displa..
🔮 BootStrap5 듀토리얼 입문 강좌
BootStrap 듀토리얼 Bootstrap 이란? 부트스트랩은 전세계적으로 가장 많이 사용되는 오픈소스 CSS 프레임워크 입니다. 부트스트랩을 기반으로 하는 다양한 응용 라이브러리가 있으며 부트스트랩에 일부를 보완해 여러분들만의 CSS 라이브러리를 구축해 나갈수 있습니다. 부트스트랩을 제대로 사용하기 위해서는 앞에서 배운 HTML과 CSS 의 기본개념을 확실하게 이해하고 있어야 합니다. 특히 DOM, CSS의 상속관계, 선택자, 블럭/인라인, position 등에 대한 완전한 이해가 필요 합니다. 만일 부트스트랩을 잘 사용할 수 있게 된다면 다른 CSS라이브러리들도 얼마든지 도입해 사용할 수 있는 능력을 갖추게 되었다고 볼 수 있습니다. 부트스트랩의 세부 설정이나 테마를 수정해 개발하거나 react, ..
![[SCSS] 💎 조건문 / 반복문 (@if / @for / @each / @while)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdNcizH%2FbtrhdWoznEy%2Fg4PzaMpY0BKLK81eERsBO0%2Fimg.png)
[SCSS] 💎 조건문 / 반복문 (@if / @for / @each / @while)
SCSS 조건문 인라인 if Sass $width: 555px; div { width: if($width > 300px, $width, null); } CSS div { width: 555px; } @if Sass @function limitSize($size) { @if $size >= 0 and $size 0 { .item-#{$i} { width: 2px * $i; } $i: $i - 2; } CSS .item-6 { width: 12px; } .item-4 { width: 8px; } .item-2 { width: 4px; } Reference https://heropy.blog/2018/01/31/sass/
![[SCSS] 💎 내장함수 모음 (Built-in Functoins)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqCUqZ%2Fbtrher2Si9h%2FV3iTVqqH8how59BFoNV2G1%2Fimg.png)
[SCSS] 💎 내장함수 모음 (Built-in Functoins)
Built-in Functoins (내장함수) 색상(RGB / HSL / Opacity) 함수 mix($color1, $color2) : 두 개의 색을 섞습니다. lighten($color, $amount) : 더 밝은색을 만듭니다. darken($color, $amount) : 더 어두운색을 만듭니다. saturate($color, $amount) : 색상의 채도를 올립니다. desaturate($color, $amount) : 색상의 채도를 낮춥니다. grayscale($color) : 색상을 회색으로 변환합니다. invert($color) : 색상을 반전시킵니다. rgba($color, $alpha) : 색상의 투명도를 변경합니다. opacify($color, $amount) / fade-in($c..
