기억하지 못해 남겨두기

 부트스트랩 Bootstarp - Bootstrap.css를 불러오고, 해당 파일에 정의된 버튼, 레이아웃등을 가져와서 사용, 클래스로 간단하게 불러와서 사용, 트위터에서 개발 3버전과 4버전의 차이 - CSS와 화면 그리드에서 px -> em, IE8 이하 버전 지원 종료 아직 많은 라이브러리들(summernote, sbAdmin)이 아직 부트스트랩 3버전임 레이아웃 - 다 더하면 12 한줄은 12개로 이뤄져있다(.col-xs-1 * 12) 버튼 -  label의 for - 글씨 눌러도 체크박스 작동 <input type= 'checkbox' id= 'agree' /> <label for= "agree" > 약관에 동의하시겠습니까? </label> 버튼 - jQuery + bootstrap.min.js 두가지가 필요함 fonr awesome - fontawesome4 summernote - 이지윅에디터 fileplugin - 부트스트랩 기반 파일 업로드 sbadmin - 관리자기반 부트스트랩 템플릿 사이트

 Sass(SCSS) Sass - 웹은 css만 동작하기에 전처리기(Less, Sass(SCSS), Stylus)라고 부름(컴파일하면 css로 나옴) Sass와 SCSS는 차이점 - Sass(Syntactically Awesome Stylus Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합, SCSS는 CSS와 거의 같은 문접으로 Sass 기능을 지원한다는 뜻, 가장 간단한 차이는 {}와 ;의 유무(Sass는 안씀, SCSS는 사용), Sass는 mixins 기능을 =,+로 사용하고 SCSS는 @mixin, @include로 사용 주석 - 컴파일되지 않는 주석(//)은 css로 변환되지 않음, 기본 주석(/* */)은 css로 변환이 됨 // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ //Sass *줄이 잘 맞아야함 - SCSS상관 없음 /* 컴파일되는 * 여러 줄 * 주석 */ 데이터 종류 - null이 사용되면 컴파일하지 않음, Maps는 ()를 꼭 붙여야 함 중첩(Nesting) - 중첩 기능을 통하여 상위 선택자의 반복을 피하고 복잡한 구조를 편리하게 작성 가능 & Ampersand(상위 선택자 참조) - 중첩 안에서 & 키워드는 상위 선택자를 참조하여 치환 .btn { position : absolute ; & .active { color : red ; } } //&.active의 의미는 .btn.active { color : red ; } @at-root(중첩 벗어나기) - 중첩안에서 생성하되 중첩 밖에서 사용해야 할 경우 .list { $w : 100 px ; $h : 50 px ; li { width : $w ; height : $h ; } @at-root .box { width : $w ; height : $

      Grid CSS Grid - Flexible Box는 단순한 1차원 레이아웃을 위한 기능이지만 Grid는 2차원의 레이아웃 시스템을 제공, Flex처럼 Container와 Item이라는 두가지 개념이 있음 Grid Container Properties Grid Item Properties Grid Containers               display - Grid Container 정의, 정의된 컨테이너의 자식 요소들은 자동으로 Grid Items로 정의 됨                                   grid                    Block 특성의 Grid Container를 정의                                   inline-grid       Inline 특성의  Grid Container를 정의               grid-template-rows - 명시적 행의 크기, 라인의 이름을 정의, fr(fraction, 공간 비율) 단위를 사용할 수 있음, repeat() 함수를 사용할 수 있음               grid-template-columns - 명시적 열의 크기, 라인의 이름을 정의,  fr(fraction, 공간 비율) 단위를 사용할 수 있음, repeat() 함수를 사용할 수 있음           .container {           grid-template-rows: 100px 200px ;           grid-template-columns: 100px 200px ;           }           /*repeat*/           .container {           width : 400px ;           display : grid;           grid-template-rows: repeat ( 3 , 100px );           grid-template-columns: repeat

CSS / 속성 - 배경  background - 요소의 배경을 설정          background-color               배경 색상                                         transparent           background-image              하나 이상의 배경 이미지                none           background-repeat              배경 이미지의 반복                          repeat           background-position          배경 이미지의 위치                            0     0           background-attachment     배경 이미지의 스크롤 여부(특성)     scroll background: 색상 이미지경로 반복 위치 스크롤특성; .box1 { background : red url("../img/image.jpg") no-repeat left top scroll ; } background-color - 요소의 배경 색상을 지정          transparent          투명          transparent background-image - 요소의 배경에 하나 이상의 이미지를 삽입          none               이미지 없음          none          url("경로")      이미지 경로(URL) background-image: url("경로"); .box { background-image : url("../img/image.jpg") ; } .box1 { /* 개별속성 */ background-image : url("../img/image1.jpg") , url("../im