본문 바로가기

전체 글330

Bootstrap - 레이아웃 부트스트랩 그리드 시스템 ; 반응형 웹을 구현해야 할 경우 사용 .container 또는 .container-fulid 클래스가 필요.(적절한 정렬과 패딩) 1행을 표현할 때는 row 클래스 사용. 디바이스 크기를 지정할 때 lg, md, sm, xs로 지정이 가능하다. (ex. col-lg-*. col-md-*. col-sm-*. col-xs-*) 그리드를 표현하고자 할때 col-크기-값 형태로 표현. 화면 크기 12등분을 기준으로 함. 1행에 열의 총 합산값이 12가 되어야 함. 화면사이즈 표현 768px 보다 클때 col-sm-(n) 992px 보다 클때 col-md-(n) 1200px 보다 클때 col-lg-(n) 768px 보다 작을 때 col-xs-(n) 2021. 8. 6.
Bootstrap 시작. [v5.0] 다운로드. https://getbootstrap.com/docs/5.0/getting-started/download/ [v3.4] 다운로드. https://getbootstrap.com/docs/3.4/ *소프트웨어 관련 플러그인이나 템플릿이 v3 기준으로 만들어진 경우가 많음. 부트스트랩을 사용하기 위한 코드는 브라우저가 스크립트 파일을 읽는 시간이 걸리기 때문에 제일 마지막에 로드하도록 작성하기. v3에선 secondary, light, dark와 outline 이 안먹힘. 2021. 8. 6.
Bootstrap 이란? 부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크. 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함함. 타이포그래피 및 각종 메뉴를 포함한 웹 페이지에서 사용되는 거의 모든 요소를 내장하고 있음. https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template.. 2021. 8. 5.
SCSS - 내장 함수 내장 함수(Built-in Functions) Sass에서 기본적으로 제공하는 내장 함수. [참고] https://sass-lang.com/documentation/modules * [] 는 선택 가능한 인수. Zero-based-numbering 을 사용하지 않음. - 색상(RGB / HSL / Opacity) 함수 mix($color1, $color2) : 두 개의 색을 섞기. lighten($color, $amount) : 더 밝은색을 만들기. darken($color, $amount) : 더 어두운색을 만들기. saturate($color, $amount) : 색상의 채도를 올리기. desaturate($color, $amount) : 색상의 채도를 낮추기. grayscale($color) : 색.. 2021. 8. 3.
SCSS - 함수 함수(Functions) 자신의 함수를 정의하여 사용할 수 있음. 함수와 Mixin은 거의 유사하지만 반환되는 내용이 다름. Mixin은 지정한 스타일을 반환하는 반면 함수는 보통 연상된 특정 값을 @return 지시어를 통해 반환됨. 함수는 @include 같은 별도의 지시어 없이 사용하기 때문에 내가 지정한 함수와 내장 함수의 이름이 충동할 수 있음. 내가 지정한 함수에는 별도의 접두어를 붙여주는 것이 좋음.(ex. red() -> extract-red()) - 조건과 반복(control Directives / Expressions) if(함수) 조건의 값(true, false)에 따라 두 개의 표현식 중 하나만 반환. @if(지시어) @if 지시어는 조건에 따른 분기 처리가 가능하며 if 문과 유사.. 2021. 8. 2.
SCSS - 확장 확장(Extend) 특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우. 선택자의 확장 기능을 사용할 수 있음. *확장을 추천하지 않는 이유 - [참고]https://sass-guidelin.es/ko/#extend @extend 는 다음과 같은 문제를 고려해야 함. 1. 내 현재 선택자(위 예제의 .btn-danger)가 어디에 첨부될 것인가? 2. 원치 않는 부작용이 초래될 수도 있는가? 3. 이 한 번의 확장으로 얼마나 큰 CSS가 생성되는가? 결과적으로 확장기능은 무해하거나 혹은 유익할 수도 있지만 그만큼 부작용을 가지고 있을 수 있음. 따라서 확장은 사용을 권장하지 않으며 Mixin 을 대체 기능으로 사용하길 권함. 2021. 8. 2.

티스토리툴바