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

Layout Rules

골격을 잡는 레이아웃에 대해 #로 선언하며, 레이아웃을 변화시키는 요소에 대해서는 '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 사용

gulp 설치 (터미널,cmd 활용)
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;
}

RESULT

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos iure, dolore deleniti, possimus deserunt dolores eius. Ratione, nam asperiores mollitia.