CSS
# CSS초기화
가장 기본이 되는 초기화 CSS이다.
필요한 부분을 추가하여 사용한다.
@charset "UTF-8";
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,input,textarea,select,button,th,td,blockquote {margin:0;padding:0}
body {-webkit-text-size-adjust:none}
ul,ol,li {list-style:none}
a {text-decoration:none}
img {max-width:100%;border:none;vertical-align:top}
button, input[type=button], input[type=submit] {-webkit-appearance:none;-webkit-border-radius:none}
.blind {visibility:hidden; overflow:hidden; position:absolute; top:0; left:0; width:1px; height:1px; font-size:0; line-height:0}
# CSS방법론
SMACSS(Scalable and Modular Architecture for CSS)
유지보수가 쉽고, 구조화가 쉬운 CSS.
CSS명만으로 기능을 유추 가능.
몇가지 정해진 룰을 가지고 있다.
https://smacss.com
골격을 잡는 레이아웃에 대해 #로 선언하며, 레이아웃을 변화시키는 요소에 대해서는 'l-'의 접두사를 가지는 클래스를 사용한다.
#header, #article, #footer {
width: 960px;
margin: auto;
}
#article {
width: 80%;
float: left;
}
#sidebar {
width: 20%;
float: right;
}
.l-fixed #article {
width: 600px;
}
.l-fixed #sidebar {
width: 200px;
}
Module Rules
기본적으로 태그선택자를 지양한다.
다만 요소의 자식으로 특정 태그만 존재한다면 가능하다.
CSS중복과 선택자가 밀리는 현상도 방지한다.
<div class="fld">
<span class="fld-name">Folder Name</span>
<span class="fld-items">(32 items)</span>
</div>
/* X */
.pod {
width: 100%;
}
.pod input[type=text] {
width: 50%;
}
#sidebar .pod input[type=text] {
width: 100%;
}
.pod-callout {
width: 200px;
}
#sidebar .pod-callout input[type=text],
.pod-callout input[type=text] {
width: 180px;
}
/* O */
.pod {
width: 100%;
}
.pod input[type=text] {
width: 50%;
}
.pod-constrained input[type=text] {
width: 100%;
}
.pod-callout {
width: 200px;
}
.pod-callout input[type=text] {
width: 180px;
}
State Rules
상태를 나타낸다.
<div id="header" class="is-collapsed">
<form>
<div class="msg is-error">
There is an error!
</div>
<label for="searchbox" class="is-hidden">Search</label>
<input type="search" id="searchbox">
</form>
</div>
<style>
.tab {
background-color: purple;
color: white;
}
.is-tab-active {
background-color: white;
color: black;
}
</style>
OOCSS(Object Oriented CSS)
모듈을 객체화 하여 사용.
공통된 CSS를 가진 클래스를 하나 정의하고, 모듈처럼 사용하는 방식
HTML쪽이 복잡해진다.
https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
/* X */
.header-inside {
width: 980px;
height: 260px;
padding: 20px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.btn-twitter {
display:inline-block;
background:red;
font-size:20px;
}
/* O */
.globalwidth {
width: 980px;
margin: 0 auto;
position: relative;
padding-left: 20px;
padding-right: 20px;
overflow: hidden;
}
.header-inside {
padding-top: 20px;
padding-bottom: 20px;
height: 260px;
}
.btn {
display:inline-block;
font-size:20px;
}
.btn-twitter {
background:red;
}
BEM(Block Element Modifier)
클래스명을 Block__Element--Modifier 형태로 선언
모듈화, 재사용성이 장점
html이 복잡해진다.
https://en.bem.info/
/* Block */
.car {}
.patrol-car {}
.person {}
/* Block__Element */
.car__door {}
.car__handle {}
.car__wheel {}
.patrol-car__siren {}
.person__hand {}
.person__hair {}
.person__leg {}
/* Block__Element--Modifier */
.car__door--two {}
.car__handle--auto {}
.car__wheel--20 {}
.patrol-car__siren--red {}
.person__hand--girl {}
.person__hair--long {}
.person__leg--short {}
/* USE */
.menu {}
.menu__item {}
.menu__link {}
.menu__link--current {}
.menu__link--on {}
.menu__link--ov {}
# SASS
CSS 전처리기
CSS내에서 변수,반복문 등을 사용
Ruby,NodeJs,grunt,gulp 등 각종 도구가 필요
gulp-sass 사용
npm i gulp-cli -g;
npm i --save-dev gulp;
npm i --save-dev gulp-sass;
gulpfile.js 생성
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('sass/**/*.scss') //sass 파일 폴더 지정
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('css')); //컴파일러 파일 저장 폴더 지정
});
gulp.task('sass:watch', function () {
gulp.watch('sass/**/*.scss', ['sass']);
});
실행
gulp sass
SASS 변수 활용
/* SASS */
$font-size : 12px;
$common-color : #333;
body {font-size:$font-size;color:$common-color}
/* CSS */
body { font-size: 12px; color: #333; }
SASS 상속 활용
/* SASS */
nav {
ul {margin:0;padding:0;list-style:none;}
li {display:inline-block;}
a {display:block;padding:6px 12px;text-decoration:none;}
}
/* CSS */
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
SASS Mixin
/* SASS */
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
/* CSS */
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
SASS 연산자
/* SASS */
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
/* CSS */
article[role="main"] {
float: left;
width: 62.5%;
}
# CUSTOMS SCROLLBAR
모바일에서 테이블같이 가로 스크롤이 필요한 경우에 사용한다.
overflow되는 요소에 선언해주면 된다.
.table-wrap::-webkit-scrollbar{width:8px;height:8px}
.table-wrap::-webkit-scrollbar-thumb{border:3px solid rgba(0,0,0,0);border-radius:1em;background-color:rgba(0,0,0,.3);background-clip:padding-box}
.table-wrap::-webkit-scrollbar-button{display:none;width:0;height:0}
.table-wrap::-webkit-scrollbar-corner{background-color:transparent}
.table-wrap::-webkit-scrollbar{width:10px;height:10px}
.table-wrap::-webkit-scrollbar-thumb{border:3px solid rgba(0,0,0,0);background-color:rgba(0,0,0,.3);background-clip:padding-box}
.table-wrap::-webkit-scrollbar-button{display:none;width:0;height:0}
.table-wrap::-webkit-scrollbar-corner{background-color:transparent}
# 멀티라인말줄임
한줄 형태로만 가능하던 말줄임 표시가 여러줄에서도 가능하게 해준다.(모바일 위주로 사용)
.multiline {
overflow:hidden;
width:200px;
height:60px;
padding:0 10px;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
border:1px solid gray;
line-height:20px;
text-overflow:ellipsis;
}