์ค๋ฌด์์๋ debian, redhat ๊ณ์ด์ ๋ง์ด ์ฌ์ฉํ๋ค.
+) ์ฐ๋ฆฌ๋ ์ค์ ์๋น์ค๋ฅผ ๋ฐ์นญํ ๋ url์ ์ฌ์ ๋ถ์ฌ์ผ ํจ.
NGINX๋ ์น ์๋ฒ! apache๊ฐ ์ ๊ณ 1๋ฑ์ด์๋๋ฐ, ์ ์ ๋ฌด๊ฑฐ์์ง๋ฉด์ NGINX๋ฅผ ์ฐ๋ ์ฌ๋๋ค์ด ๋๊ณ ์๋ค๊ณ ํ๋ค. NGINX๋?
์ถ๊ฐ์ ์ผ๋ก ์ปค๋งจ๋๋ฅผ ๋ฐฐ์ฐ๊ณ , #18์ ์ด์ด์ ์ ๋ฆฌํ๋ค.
๋ฌธ์ ํ์ด
alias ls="ls -a"
unalias ls
tab
tree๋ ๊ธฐ๋ณธ ์ค์น๊ฐ ์๋์ด ์์ต๋๋ค. ์ธํฐ๋ท์ ํตํด tree์ค์น ๋ช
๋ น์ด๋ฅผ ์์๋ด์ธ์. apt-get install tree
ํด๋ ํธ๋ฆฌ tree
.
โโโ README.md
โโโ a
โ โโโ one.txt
โ โโโ two.txt
โโโ b
โโโ c
โ โโโ four.txt
โโโ three.txt
cat *.js
cat *.js > result.txt
pwd
mv one.txt change.txt
mv change.txt ../b
CSS๊ฐ ๋๋ฌด ์ปค์ง๋ฉด ๋ณต์กํด์ง๊ณ ์ ์ง๋ณด์๊ฐ ์ด๋ ค์์ง๋ฏ๋ก, ๋ณ์๋ฅผ ์ฌ์ฉํด์ ์ฝ๊ฒ ํด์ฃผ๋! CSS๋ก ์ปดํ์ผ ๋๋ ์ธ์ด. iOS์ UIColor, UIFont Extension๊ณผ ๊ฐ์ ๋๋์ธ๋ฏ!
SASS, SCSS ๋ฐฉ์์ด ์๋๋ฐ, SCSS ๋ {์ฝ๋;} . SASS๋ ํ์ด์ฌ ์ฒ๋ผ. ๊ทธ๋์ ์ฐ๋ฆฌ๋ CSS์ ์กฐ๊ธ ๋ ์ ์ฌํ SCSS๋ก ์ฌ์ฉํ๋ค. node ๋ฐฉ์๊ณผ ruby ๋ฐฉ์์ด ์๋๋ฐ ์ฐ๋ฆฌ๋ ruby ์ฌ์ฉ!
VSC live sass extension ํ์.
//SCSS
$font-stack: Helvetica, sans-serif;
$primary-color : #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
ํ์ผ ์ด๋ฆ ์์ _ ๋ถ์ด์๋๊ฑด ์ปดํ์ผํ์ง ์๊ฒ ๋ค๋ ์๋ฏธ.
// style.scss
@import "variables";
@import "mixin";
@import "header";
@import "main";
// variables.scss
$white: #fff;
$dark-black: #1f1f1f;
$light-black: #313030;
๊ฐ ํ์ผ์ ๊ฐ์ ์ฝ์ด์ด. ๋ถ๋ฅ๋ณ๋ก ๋๋ ์ ์ฌ์ฉํ๋ค. ์คํ์ ํ๋ฉด style.scss๋ฅผ ์ปดํ์ผํ๋๋ฐ @import ๋ฌธ ๋๋ฌธ์ ๋ค๋ฅธ ํ์ผ์ ๊ฐ์ ์ฝ์ด์ค๋ฉด์ style.css ํ์ผ์ด ์๊ธด๋ค.
๋๋ฌด ๋ง์ ์ค์ฒฉ์ ํผํ์. @at-root ํค์๋๋ก ์ค์ฒฉ์์ ๋น ์ง ์๋ ์๋ค.
// ๋ถ๋ชจ ์์ ๊ด๊ณ ๋๋ก ์ค์ฒฉํด์ ์ฌ์ฉํ๋ฉด ๋๋ค. .info-list { div { display: flex; font-size: 14px; color: #4f4f4f; dt { font-weight: 700; margin-right: 7px; } } }
.add-icon { // ๊ฒน์น๋ ์์ฑ๋ช : ๋ ์ค์ฒฉํด์ ์ฌ์ฉ ๊ฐ๋ฅ. background : { image: url("./assets/arrow-right-solid.svg"); position: center center; repeat: no-repeat; size: 14px 14px; // @at-root ๋ฅผ ์ฐ๋ฉด ์ค์ฒฉ์์ ๋น ์ ธ๋๊ฐ ์ ์๋ค. @at-root i { opacity: 0.5 } } }
// &์ด ๋ค์ด๊ฐ ๊ณณ์ ๋ถ๋ชจ์ ์ด๋ฆ์ด ๋ค์ด๊ฐ๋ค. .box { &:focus{} // ๊ฐ์์ ํ์ &:hover{} &:active{} &:first-child{} &:nth-child(2){} &::after{} // ๊ฐ์์์ &::before{} }
// ๊ฒน์น๋ ํด๋์ค๋ช ์ ์ฐ๊ฒ ์์ฉ ๊ฐ๋ฅ. .box { // global ํค์๋๋ก ์ ์ญ ๋ณ์๋ก ๋ณ๊ฒฝ ๊ฐ๋ฅ. $line-normal: 1.34 !global; &-yellow { background: #ff6347; } &-red { background: #ffd700; } &-green { background: #9acd32; } }
2๋ฒ ์ด์ ์ฌ์ฉ๋๊ฑฐ๋ ์์ ๊ฐ๋ฅ์ฑ์ด ์์ ๋ ๋ณ์๋ฅผ ์ง์ ํ์. ์ง์ญ๋ณ์, ์ ์ญ๋ณ์๋ก ์ง์ ๊ฐ๋ฅ.
$๋ณ์์ด๋ฆ: ๊ฐ; @debug ๋ณ์ //์ด๋ฐ์์ผ๋ก ๊ฐ ํ์ธ ๊ฐ๋ฅ.
type
๐ข number : 1, .82, 20px, 2em,, ... ๐งต string : "./images/a.png", bold, left, uppercase, ... ๐จ color : green, #FFF, rgba(255,0,0,.5) ๋ฑ ๐ boolean : true, false ๐ญ null ๐ฆ list : index 1๋ถํฐ ์์. -1 -2 -3 ์ ๊ทผ๋ ๊ฐ๋ฅ. ๐บ map
๊ฐ type์๋ ๋ด์ฅํจ์๊ฐ ์๋ค.
list// ๊ณต๋ฐฑ , ๋์ /๋ก ๊ตฌ๋ถ๋ ๊ฐ๋ฅ. $font-size : 10px 12px 16px; //ํฐํธ์ฌ์ด์ฆ ๋ฆฌ์คํธ $image-file : photo_01, photo_02, photo_03 //์ด๋ฏธ์ง ํ์ผ๋ช ๋ฆฌ์คํธ //์๋์ ๊ฐ์ ํํ๋ก ์ฌ์ฉ(์ํ๋ ๊ฐ๋ฅ) list.nth(10px 12px 16px, 2); // 12px list.nth([line1, line2, line3], -1); // line3 // ๋ด์ฅํจ์ list.append(list,value,[separator]) list.index(list,value) list.nth(list, n)
map
$font-weights: ("regular": 400, "medium": 500, "bold": 700); //๊ธ์ ๊ตต๊ธฐ ๋ฆฌ์คํธ map-get($font-weights, "medium"); // 500 map-get($font-weights, "extra-bold"); // null //๋ด์ฅํจ์ map-get(map,key) map-keys(map) map-values(map)
< <= > >= (์ซ์) == != (๋ชจ๋ ํ์
)
๋จ์๊ฐ ์ผ์นํด์ผ ํ๋ค.
+ - * / % (๋ฌธ์์ด + ๊ฐ๋ฅ)
not and or
์ฝ๋ ์ฌ์ฌ์ฉ. ์ฌ๋ฌ๋ฒ ์ฌ์ฉํ๋ block์ ํจ์์ฒ๋ผ ๋บ๋ค. ์ฐ๊ด์ฑ์ด ๋์ ๊ฒ ๋ผ๋ฆฌ ๋ฌถ์ด์ผํจ.
@mixin center-xy{ display: flex; justify-content : center; align-items : center; } .card{ @include center-xy; // ์ ์ํ center-xy mixin์ ์ฌ์ฉํ์ฌ ์ฝ๋ ํ์ค์ด๋ฉด ๋! } .aside{ @include center-xy; }
// ์ง์ง ํจ์์ฒ๋ผ ์ธ์๋ฅผ ์ด์ฉํ ์ ์๋ค. @mixin image-style($ul, $size, $repeat, $positionX, $positionY) { background-image: url($ul); background-size: $size; background-repeat: $repeat; background-position: $positionX $positionY; }
// @content๋ฅผ ์ด์ฉํด์ ์คํ์ผ์ ์ถ๊ฐํ ์๋ ์๋ค. @mixin my-font($x, $y) { font-size: $x * $y + px; @content } div { @include my-font(10, 10) { color: red; } }
// ๊ธฐ๋ณธ๊ฐ์ ์ค ์ ์๋ค. @mixin flex($horizontal: cetner, $vertical: center) { display: flex; justify-content: $horizontal; align-items: $vertical; } @include flex; //๋ก ์ฌ์ฉํ ์ ์๋ค. ๋ง์ฝ ํ๋๋ง ๋ฐ๊พธ๊ณ ์ถ์ผ๋ฉด ์ธ์ ํ๋๋ง ์ ์ด์ฃผ๋ฉด ๋๋ค.
๋ค๋ฅธ ํด๋์ค์์ ์์ฑ๊ฐ์ ๊ฐ์ ธ์ฌ ์ ์๋ค. CSS์์ , ๋ก ๋ฌถ์ฌ์ ์ฒ๋ฆฌ๋จ. ์์ ํ ์ค๋ณต๋ ๋๋ง ์ฌ์ฉํ๋ค.
.profile-user { background-image: url("../assets/user.jpg"); background-size: cover; background-position : 50% 50%; border-radius: 50%; width : 50px; height : 50px; } .comment-user { @extend .profile-user; }
// ๊ธฐ๋ณธ ์คํ์ผ์ ์ ํ์๋ก ๋ง๋ค์ด์ extend๋ก ๊ฐ์ ธ๋ค ์ธ ์ ์๋ค. modal, btn(๊ธฐ๋ณธ) ๋ฑ์ ์ธ ์ ์๋ค. %modal { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 6px; } .login-modal { @extend %modal; width: 272px; height: 405px; padding: 10px 20px; } .event-modal { @extend %modal; width: 340px; height: 160px; padding: 18px; }
์ฒ์ ์ฌ์ฉํด๋ณธ ์๊ฐ์... ์ด๋ ๊ฒ ์์์ ๋ถ๋ชจ ์์ ๊ด๊ณ๋ก ๋ง๋ค์ด์ฃผ๋ฉด BEM ๋ค์ด๋ฐ์ ์ ์ฐ๋๊ฑธ๊น? ์ถ์๋๋ฐ ๋ค์ ์์ ์ ๋ค์ด๋ณด๋๊น ํจ์์ฒ๋ผ ์ฌ์ฉํ ์ ์์ด์ ๊น๋ํ๊ฒ ์ ์ฉํ ์ ์์ ๊ฒ ๊ฐ๋ค.
if - else if - else
@mixin theme-colors($light-theme: true) { @if $light-theme { background-color: $light-background; color: $light-text; } @else { background-color: $dark-background; color: $dark-text; } } .banner { @include theme-colors($light-theme: true); body.dark & { // ๋ถ๋ชจ๋ฅผ ์ก์์ ์ฒ๋ฆฌ. @include theme-colors($light-theme: false); } }
@for
for ($๋ณ์) from (์์) through(๋){ // ๋ฐ๋ณตํ ๋ด์ฉ }
@for $i from 1 through 5 { // 5ํฌํจ. // ํด๋น ์ซ์๋ฅผ ๋ฃ๊ณ ์ถ์ ๊ณณ์ #{$๋ณ์} ๋ก ์จ์ผํ๋ค. // ์ซ์์ *10 ํ๊ณ ์ถ์ผ๋ฉด {} ์์ชฝ์ ์จ์ผํจ. // #{$๋ณ์}์ ๊ฒฐ๊ณผ๋ ๋ฌธ์์ด .photo-box:nth-child(#{$i}) { background-image: url("../assets/phoster#{$i}.png"); } }
@each
@each ($๋ณ์) in (๋ฆฌ์คํธ๋ ๋งต){ // ๋ฐ๋ณตํ ๋ด์ฉ }
$color-palette: #dad5d2 #3a3532 #375945 #5b8767 #a6c198 #dbdfc8; @each $color in $color-palette { $i: index($color-palette, $color); //index๋ list์ ๋ด์ฅํจ์ //index๋ก ๋ค์ ๊ฐ์ ธ์ฌ ์ ์๋ค. .color-circle:nth-child(#{$i}) { //#{$i} ์๊ฐ์ธ๋ฉด ๊ทธ๋ฅ $i ๋ฌธ์์ด๋ก ์ธ์๋จ. background: $color; width: 20px; height: 20px; border-radius: 50%; } }
@while
@while ์กฐ๊ฑด { // ๋ฐ๋ณตํ ๋ด์ฉ }
return์ด ๊ผญ ์์ด์ผ ํ๋ค. mixin๊ณผ ๋ค๋ฅธ ์ .
@function ํจ์์ด๋ฆ($๋งค๊ฐ๋ณ์) { // ์คํ ์ฝ๋ @return ๊ฐ }
@function scale-below($value, $base, $ratio: 1.618) { @while $value > $base { $value: ($value/$ratio); } @return $value; } $normal-font-size: 16px; .sup { // mixin๊ณผ ๋ค๋ฅธ ์ : @include ํค์๋ ์์ด ์ฌ์ฉ. font-size: scale-below(20px, 16px); }
lighten(color, amount)
: ๋ฐ๊ธฐ ๋์ (amount 0~100%)
darken(color, amount)
mix(color1, color2, weight)
: ์ ์์
max(number, ..)
,min(number, ..)
: ์ต๋ ์ต์ ๋ฐํ
parcentage(number)
: %๋ฅผ ์ซ์๋ก ๋ฐ๊ฟ์ค
comparable(num1,num2)
: ์ซ์1๊ณผ ์ซ์2๊ฐ ๋น๊ต ๊ฐ๋ฅํ์ง๋ฅผ boolean์ผ๋ก ๋ฐํ.
srt-insert(string,insert,index)
: ๋ฌธ์์ด์ ์ํ๋ ์์น(index)์ ๋ฌธ์๋ฅผ ๋ฃ์ ํ(insert), ์๋ก์ด ๋ฌธ์์ด์ ๋ฐํํฉ๋๋ค.
str-index(string,substring)
: ๋ฌธ์์ด์์ ํด๋น ๋ฌธ์์ index ๊ฐ์ ๋ฐํํฉ๋๋ค.
to-upper-case(string)
: ๋ฌธ์์ด ์ ๋ถ๋ฅผ ๋๋ฌธ์๋ก ๋ฐ๊ฟ์ค๋๋ค.
to-lower-case(string)
: ๋ฌธ์์ด ์ ๋ถ๋ฅผ ์๋ฌธ์๋ก ๋ฐ๊ฟ์ค๋๋ค.
unit(number)
: ์ซ์์ ๋จ์๋ฅผ ๋ฐํ.
unitless(number)
: ๋จ์๋ฅผ ๊ฐ์ง๊ณ ์๋์ง boolean
variable-exists(name)
: ๋ณ์๊ฐ ํ์ฌ ๋ฒ์์ ์กด์ฌํ๋์ง boolean ์ด ํจ์์ ์ธ์๋$
์์ด ์ฌ์ฉ
์ค๋์ ์ง ํ๋ก ํธ์๋๋ฅผ ๋ด๋นํ์๋ ์กฐ์๋์ ํน๊ฐ์ด ์์๋ค.
๋ด๊ฐ ์ฐจ๋ณ์ ์ ๊ฐ์ง๊ธฐ ์ํด์๋ ์ด๋ค ๊ฒ์ ์ํ๋์ง๋ฅผ ์ฐพ๋๊ฒ ์ค์ํ๋ค.
ํนํ ํ ์ด ํ๋ก์ ํธ๋ณด๋ค๋ ์ง๊ธ์ฒ๋ผ ๊ณต๋ถํ ๊ฒ์ ๋ธ๋ก๊ทธ์ ์ ๋ฆฌํ๋ ๊ฒ์ ์ค์ ์ ์ผ๋ก ๋ณธ๋ค๊ณ ํ์
จ๋ค.
๋, ๊ฐ๊ณ ์ถ์ ํ์ฌ๋ฅผ ์ ๋ง์ ๋์์ผ๋ก๋ง ๋ณด์ง ๋ง๊ณ , ์ฑ์ฉ๊ณต๊ณ , ๊ธฐ์ ๋ธ๋ก๊ทธ, ์คํ์์ค, ํ๋ก ํธ์๋ ๋ถ์์ ํด๋ณด์. ๊ทธ๋ฆฌ๊ณ ์ค์ ๋ก ์ฌ์ฉํ๋ฉด์ ์ฌ์ดํธ์ ์ด๋ค ์ด์๊ฐ ์๋์ง, ๋ด๊ฐ ๊ฐ์ง ๊ธฐ์ ๋ก ์ด๋ค ๊ธฐ์ฌ๋ฅผ ํ ์ ์์์ง๋ฅผ ๊ผผ๊ผผํ ์๊ฐํด๋ณด์.
1-3-5-10๋ ๋ก๋๋งต์ ๋ง๋ค๊ณ ์ด๋ค ๊ฒ์ ํด์ผ ์ด ํ์ฌ์ ๊ฐ ์ ์์์ง๋ฅผ ๊ณ์ ์๊ฐํ๋ ๊ฒ๋ ์ค์ํ๋ค๊ณ ํ์ จ๋ค. ๊ทธ๋ฆฌ๊ณ ์ ์ด ๊ธฐ์ ์ ์ฌ์ฉํ๋์ง ์ ๋ํ ๋ต์ ๋ด๋ฆด ์ ์์ด์ผ ํ๋ค๊ณ ํ์ จ๋ค.
์ฌ๋ฌ๊ฐ์ง ์ง๋ฌธ์ ๋ต๋ณ๋ ํด์ฃผ์ จ๋๋ฐ, ๋ง์ฐํ ๋๋ ค์์ด ์กฐ๊ธ์ ์ฌ๋ผ์ง ๊ฒ ๊ฐ๋ค.
interval & timeout
// ์ธ์ : ํจ์, ๊ฐ๊ฒฉ ms. setInterval(sayHello, 5000); // interval : ์ผ์ ๊ฐ๊ฒฉ์ผ๋ก ์ผ์ด๋๋. setTimeout(sayHello, 5000); // timeout : ๋๋ ์ด๋ฅผ ์ค.
Date
const date = new Date(); date.getFullYear(); date.getMonth(); date.getDay(); date.getHours(); date.getMinutes(); date.getSeconds(); date.getMilliseconds();
// ์๊ณ ๋ง๋ค๊ธฐ. function getClock() { const date = new Date(); // padStart(2, "0"); - ์ด๋ค ๋ฌธ์์ด์ ๊ธธ์ด๊ฐ 2 ์ด์์ด๋ฉด ์๋ฌด๊ฒ๋ ํ์ง ์๊ณ , // 2 ๋ฏธ๋ง์ผ ๋ ๊ธธ์ด๊ฐ 2๊ฐ ๋ ๋๊น์ง ์์ 0์ ๋ถ์. padEnd๋ ์๋ค. const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = String(date.getSeconds()).padStart(2, "0"); clock.innerText = `${hours}:${minutes}:${seconds}`; } // ์ฒ์ ๋ค์ด๊ฐ์๋๋ ์ถ๋ ฅ์ด ๋์ง ์์ผ๋ฏ๋ก ํ๋ฒ์ ์ง์ ์ถ๋ ฅํด์ค๋ค. getClock() setInterval(getClock, 1000);
์ค๋์ ๊ณผ์ ๋ก Date ๊ณ์ฐํ๋๊ฑธ ์ข ํ๋๋ฐ, js Date timestamp ๊ธฐ์ค์ด ms ์ธ ๊ฒ์... ์๊ณ ์ฐ์ฐํ ๋ / 1000 ์ํ๋ค๊ฐ ์กฐ๊ธ ํค๋งธ๋ค. ๊ทธ๋๋ 40๋ถ ์ ๋ ๊ฑธ๋ ค์ ๋๋๋ค.
fact - ๋ฌด์จ ์ผ์ด ์์๋์ง, ๋ญ ํ๋์ง
feeling - ๋ฌด์์ ๋๊ผ๋์ง,
finding - ์ด๋ค ์ธ์ฌ์ดํธ๊ฐ ์์๋์ง
future action - ์ก์ ํ๋์ด ์๋์ง