본문 바로가기

Front-end/Web57

부트스트랩 1. Bootstrap 01. Bootstrap이란? Bootstrap.css를 불러오고, 해당 파일에 정의된 버튼, 레이아웃 등을 가져와서 사용 클래스로 간단하게 불러와서 사용 트위터에서 개발 02. Bootstrap 시작하기 www.bootstrapcdn.com/( 크롬 팁 - Ctrl + f 후 찾고자 하는 키워드 입력해 찾을 수 있음) 1. 파일의 url을 바로 지정 2. 파일을 다운받아 경로 지정 03. 버전 3와 4의 차이 CSS와 화면 그리드에서 px -> em(버전 4) IE8 이하 버전 지원 종료 (버전 4) 04. 3을 쓰는 이유 아직까지 기반 플러그인들이 3에 있는 경우가 많음 ex) summernote.org/에서 3버전을 사용 2. 레이아웃 다 더하면 12, 한줄은 12개로 이뤄져.. 2021. 2. 22.
SCSS 문법 - 확장, 함수, 조건문, 반복문, 내장함수 1. 확장 -1) Extend 특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우가 종종 있다. 이럴 경우 선택자의 확장 기능을 사용할 수 있다. SCSS: .btn { padding: 10px; margin: 10px; background: blue; } .btn-danger { @extend .btn; background: red; } CSS: .btn, .btn-danger { padding: 10px; margin: 10px; background: blue; } .btn-danger { background: red; } 결과를 보면 ,로 구분하는 다중 선택자(Multiple Selector)가 만들어졌다. 사실 @extend는 다음과 같은 문제를 고려해야 한다. 내 현재 선택자(위 예제의 .. 2021. 2. 13.
SCSS 문법 - 주석, 데이터종류, 중첩, 변수, 가져오기, 연산, 재활용 1. 주석 CSS 주석은 /* ... */ 이다. Sass(SCSS)는 JavaScript처럼 두 가지 스타일의 주석을 사용한다. // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ - Sass : /* 컴파일되는 * 여러 줄 * 주석 */ // Error /* 컴파일되는 * 여러 줄 * 주석 */ SCSS는 각 줄에 *이 없어도 문제되지 않습니다. 따라서 기존 CSS와 호환이 쉽다. - SCSS : /* 컴파일되는 여러 줄 주석 */ 2. 데이터 종류 데이터 설명 예시 Numbers 숫자 1, .82, 20px, 2em… Strings 문자 bold, relative, "/images/a.png", "dotum" Colors 색상 표현 red, blue, #FFFF00, rgba(255,0,0,.5).. 2021. 2. 13.
Sass(SCSS) 개요 1. SCSS 개요 CSS는 분명 쉽고 재밌지만, 작업이 고도화될수록 불편함도 같이 커지고, 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트의 규모가 커질수록 아쉬움도 생긴다. - CSS Preprocessor란? CSS 전(예비)처리기라고도 하고 보톤 CSS Proprocessor라고 부른다. CSS가 동작하기 전에 사용하는 기능으로,웹에서는 분명 CSS가 동작하지만 우리는 CSS의 불편함을 이런 확장 기능으로 상쇄할 수 있다. 우선 전처리기로 작성(코딩)한다. 전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 .. 2021. 2. 13.
CSS속성 - Grid 1. Grid 개요 Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공 Flexible Box는 비교적 단순한 1차원 레이아웃을 위해 사용 CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이다. Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분, Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있다. -1) Grid Container 속성 속성 의미 display 그리드 컨테이너(Container)를 정의 grid-template-rows 명시적 행(Track)의 크기를 정의 grid-template-columns 명시적 열(Track)의 크기를 정의 .. 2021. 2. 12.
CSS 속성 - 플렉스 1. Flex 개요 - 수직, 수평 구조를 만드는 방법은 flex를 사용하는 법이 가장 쉽다. -1) float속성을 이용한 수평 구조( box를 제외한 clear-element라는 이름의 다음 요소도 있어야함으로 실 사용에 불편) .box { float: left; } .clear-element { clear: both; /* or left */ -2) 수평이 될 요소들에 직접 float를 적용하고 그 요소들의 부모요소에 미리 clearfix설정 /* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */ .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } -3) flex하나 만으로 수평정렬!!.. 2021. 2. 12.

티스토리툴바