수업
Sass
조건문
if문
@mixin avatar($size, $circle: false) {
width: $size;
height: $size;
@if $circle {
border-radius: $size / 2;
}
}
.square-av {
@include avatar(100px, $circle: false);
}
.circle-av {
@include avatar(100px, $circle: true);
}
circle이 false면 사각형을, true이면 원형(border-radius: 50%)으로 스타일한다는 뜻이다.
이걸 실행하면 css로는 ↓ 아래처럼 나온다.
.square-av {
width: 100px;
height: 100px;
}
.circle-av {
width: 100px;
height: 100px;
border-radius: 50px;
}else
$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;
@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);
}
}ture이면 밝은 색을, false면 어두운 색을 스타일함
이걸 실행하면 css로는 ↓ 아래처럼 나온다.
.banner {
background-color: #f2ece4;
color: #036;
}
body.dark .banner {
background-color: #6b717f;
color: #d2e1dd;
}반복문
for
@for $i from 1 through 5 {
.photo-box:nth-child(#{$i}) {
background-image: url("../assets/phoster#{$i}.png");
}
}$i 자리에 1부터 5까지 들어간다.
#{$변수명}
each
$color-palette: #dad5d2 #3a3532 #375945 #5b8767 #a6c198 #dbdfc8;
@each $color in $color-palette {
$i: index($color-palette, $color); //index는 list의 내장함수
.color-circle:nth-child(#{$i}) {
background: $color;
width: 20px;
height: 20px;
border-radius: 50%;
}
}$color-palette 리스트에 들어있는 색상을 each문을 사용하여 background에 색상값을 넣어준다.
in 안에 있는걸 하나씩 가져온다.
$i: index($color-palette, $color)
$color가 $color-palette 안에 몇번째로 있는지.
내장함수
말줄임
/* 말줄임 속성 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
반응형 컨텐츠
background-image
이미지가 잘려도 될 때는 cover를 사용한다.
안 되거나, 알파값이 있을 때는 contain 사용을 추천한다.
video참고링크:
https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
<video controls src="./videoplayback.mp4"></video>
controls를 넣어줘야 재생이 된다.
preload=none 해주면 눌러봐야 무엇인지 안다.
poster는 미리보기 화면 같은 것!
autoplay는 muted가 없으면 안된다.(접근성 때문에)
youtube - iframe
참고링크:
https://developers.google.com/youtube/player_parameters?hl=ko
생각
내일부터 자바스크립트라는데 정말 큰일 났다. Sass가 자바스크립트랑 비슷하다고 하는데, 자신감이 쭉쭉 떨어진다. 물론! Sass 이틀밖에 안 배웠고, 처음에 HTML, CSS 배웠을 때도 비슷한 느낌이긴 했지만, 다들 자바스크립트를 배우면 우주에 온 것 같다고 하고, 나도 챌린지를 하면서 슬쩍 접해보니.. 맞는 것 같다. 또 지난 한 달처럼 열심히 발버둥치면 그래도 걸어가는 정도까지는 아니어도 기어가는 정도는 될 수 있지 않을까?
느낀점
잘한점
- 매일 운동하고 있다, 헬스장도 가고 못 가면 산책이라도 꼭 한다! 덕분에 이번주는 좀 맑은(?) 정신으로 버틴 것 같다. 물론 잠 자는 시간은 아직 충분하지는 않은 것 같다.
고칠점
- 진짜 게으른 스터디를 하기로 하면서 일정도 굉장히 넉넉하게 있었는데, 왜 벌써 목요일이죠? 아직 다 못했는데... 그 만큼도 못할 정도로 바빴나라는 반성을 해본다. 어떻게든 오늘 다 하고 자야지!.. 여전히 우선 순위를 정하는걸 잘 못하는 것 같다.
계획
- 찐게터디 밀리지 말고 하기
- 계속 운동 조금씩이라도 하기
