CSS
max-width | margin-auto
평균적으로 같이 자주 쓰이는 속성
.container {
max-width : 1280px;
margin : auto;
}margin-*
margin-top : 100px;
margin : auto; //x
margin : auto;
margin-top : 100px //o위 식으로 작성하게 되면 cascading으로
margin-top : 100px;적용 안됨
margin : auto;는 상하좌우 마진 동일하게 부여
margin-top을 부여했는데margin:auto가 덮어쓰기 됨
...:nth-child(n)
- 태그의 각 자식들에게 속성 부여 가능
*html *css
<div>
<div></div> ..../div:nth-child(1)
<div></div> .../div:nth-child(2)
<div></div> ../div:nth-child(3)
</div>img:hover{}
hover 속성을 이미지에 주게되면 줌인되는 효과 발생
contentImg img:hover {
transform : scale(1.1); // 1.1배 줌인 효과
}Nodejs install
nodejs 버전 확인
*TERMINAL node --version
(S)CSS
- CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어
- 기존 css를 refactoring해서 효율적으로 표현가능
(S)CSS install
//windows
*TERMINAL *cmd
npm install -g scss(S)CSS 실행
*index.html
<h1>Hello, scss!<h1>;*input.scss
*TERMINAL
scss --watch input.scss style.cssVariables
scss는 $기호를 사용해 변수선언이 가능하다
*var.scss
$offBlack: #253342;
$rosePink: #ebb8dd;
$darkRed: #bf2c34;
$seaGreen: #53bda5;
$lightGray: #cbd6e2;
$magenta: #be398d;Nesting
태그안에 묶어서 속성 부여가능
*html
<body>
<div>
<h1>my</h1>
<h2>name</h2>
<h3>is</h3>
<h4>hunter</h5>
<h5>Joe</h5>
</div>
</body>*scss
div {
h1 {
color : red;
}
h2 {
color : orange;
}
.
.
.
h5{
color : blue;
}
}Modules
중첩되는 것을 막아줄 수 있고 편리하게 코드를 관리할 수 있다.
*html
<body>
<div>
<h1>my</h1>
<h2>name</h2>
<h3>is</h3>
<h4>hunter</h5>
<h5>Joe</h5>
</div>
</body>*input.scss
// @import @use @forward
@import "colors.scss",
div {
h1 {
color : $offBlack;
}
h2 {
color : $rosePink;
}
.
.
.
h5{
color : $magenta;
}*color.scss
$offBlack: #253342;
$rosePink: #ebb8dd;
$darkRed: #bf2c34;
$seaGreen: #53bda5;
$magenta: #be398d;연결된 파일이 적을때는 @import가 편리하다
연결된 파일이 많을때는 @use
Mixins
mixin은 함수와 비슷한 동작을 하는 문법이며 CSS 스타일 시트에서 반복적으로 재사용할 CSS 스타일 그룹 선언을 정의하는 기능을 함
*html
<body>
<button class="box1">box1</button>
<button class="box2">box2</button>
<button class="box3">box3</button>
</body>*input.scss
@use "buttons.scss";
.box1 {
@include buttons.btnStyle;
}
.box2 {
@include buttons.btnStyle;
background-color : darkred;
}
.box3 {
@include buttons.btnStyle;
background-color : darkgreen;
}*buttons.scss
@mixin btnStyle {
background-color : gray;
color: whitesmoke;
border: 0;
border-radius: 12px;
padding: 12px;
}Extend(상속)
sass에서 특정 선택자를 상속 할 때, @extend 지시자를 사용한다.
*html
<body>
<button class="box1">box1</button>
<button class="box2">box2</button>
<button class="box3">box3</button>
</body>*input.scss
.box1 {
padding:20px;
border:1px solid #333;
}
.box2 {
@extend .box1;
background-color:#eee;
}
.box3 {
@extend .box2;
background-color:#000;
}
//box2,3는 기존 box1이 가지고있는 `padding, border`속성을 물려받음extend, mixin의 차이?
mixin은 기존에 중복된 많은 속성들을 불러올 때 좋은 것같고
extend는 기존 시트에 만들어놓은 속성들을 불러올 때 편리한 것 같다.
hunting season