SASS
보간법(interpolation)
#{$변수명}
- 삽입된 문자나 변수를 문자 그대로 적용시켜 연산이 되지 않게 한다.
- 연산을 통해서 들어가는 변수는
$변수명으로 써줘도 된다. 그러나 그 값 그대로 들어갈 때는 #{$}써줘야 함*
조건문
@if ..
@if에 괄호 없이 true나 false를 반환할 수 있는 조건문을 작성하면 된다. (조건을 작성할 때 괄호를 사용할 수 있지만 일반적으로 괄호는 생략한다.) 조건에는 논리연산자 and, or, not을 사용하고, if문의 조건이 true일 때만 { } 괄호 안에 있는 코드가 실행됩니다.
@if (조건) {
// 조건이 참일 때 실행될 구문
}@else ..
if 문처럼 조건문이 필요하지는 않으며 if문에서 걸었던 조건이 false가 나오면 else문의 코드가 실행된다.
@if (조건) {
// 조건이 참일 때 실행될 구문
} @else {
// if문의 조건이 거짓일 때 실행될 구문
}@else if ..
if문으로 부족할 때, 즉 여러 개의 조건문을 사용해야 할 때 사용한다. @else if문에도 true나 false를 반환하는 조건문을 작성한다. if문의 조건에서 false가 나왔을 때, else if문으로 넘어가서 조건에 대해 true인지 false인지 판단한다. true인 경우 else if문 내의 코드를 실행하고, false 라면 그 다음 조건문( else or else if )로 넘어가게 된다.
if (조건){
// 조건이 참일 때 실행될 구문
} @else if(조건){
// else if 조건이 참일 때 실행될 구문
} @else{
// 위에 모든 조건이 거짓일 때 실행될 구문
}반복문
@for ...
for ($변수) from (시작) through(끝){
// 반복할 내용
}@for은 정의한 횟수만큼 코드 실행을 반복한다. @for문에 from(시작 : 이상) - through(끝 : 이하)를 사용하여 어디서 시작해서 어디서 끝날 지를 알려준다. nth- 선택자를 사용하는 경우 유용하게 사용할 수 있다.
// Scss - for문
// for문을 이용해 nth-선택자에게 각각의 image를 배경에 넣어준다.
@for $i from 1 through 7 {
.photo-box:nth-child(#{$i}) {
background-image: url("../assets/phoster#{$i}.png");
}
}
// 범위 1이상 5이하
// for문에서 1부터 5까지 반복하라는 의미입니다. 총 5번 반복되면서 코드가 실행된다.
// 만약 from 3 throught 8 이라면 3에서 8까지 6번 실행된다.
@each ...
// Sass - each문
// color-palette 리스트에 들어있는 색상을 each문을 사용하여 background에 색상값을 넣어준다.
$color-palette: #dad5d2 #3a3532 #375945 #5b8767 #a6c198 #dbdfc8;
@each $color in $color-palette {
$i: index($color-palette, $color);
.color-circle:nth-child(#{$i}) {
background: $color;
font-size: #{$i*100} px;
width: 20px;
height: 20px;
border-radius: 50%;
}
}- index는 list의 내장함수로, list에서 color가 몇 번째에 있는지를 가지고 옴
@while
조건이 true인 동안 계속 반복하며, false가 될 때, break
(실습) select-box customizing
1. ellipsis
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;- white-space : nowrap; 공백 요소가 있을 때 줄바꿈하지 않음
- text-overflow: ellipsis; 텍스트가 부모요소의 너비보다 커질경우 말줄임표를 표시
- overflow: hidden; 부모요소를 넘어서는 건 표시하지 않음
혹시나 추후에 문구가 추가 혹은 변경되었을 때 UI가 깨지는 일을 방지하기 위해서 ellipsis 속성을 주었다.
2. background 속성
background: url(./image/icon-Triangle-down.png) no-repeat center right 14px;
화살표 이미지를 버튼의 백그라운드 이미지로 넣어 나타내주었다.
position 이나 가상요소를 사용하지 않아도, background-position 속성을 이용해서 구현 가능했다.
반응형 콘텐츠 만들기
1. 반응형 이미지
1) 이미지 포맷
-
GIF : 256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 든다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능하다. 애니메이션 처리가 가능하다.
-
JPG/JPEG : 매우 화소가 높고, 용량도 적지만 투명처리가 불가능하다.
-
png : 왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 크다.
-
SVG : SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하다.
2) 반응형 이미지 만들기
- width: 100%;
-> 화면이 줄어들면서, 부모의 크기가 줄어들면 자연스럽게 크기가 줄어들 것이다. - max-width: 100%
-> 원본 크기 기준으로, 원본 크기까지만 커지고, 그 이상으로 확대되지 않는다.
2. 반응형 백그라운드 이미지
1) 백그라운드 사이즈 속성
-
Background-size: px. —> 이미지의 크기를 고정한다.
-
Background-size: auto —> 이미지의 종 횡비를 통해 자동으로 다른 축의 크기를 결정한다.
-
Background-size: % —> %를 사용하면 컨테이너의 넓이에 비례하도록 사이즈를 조절할 수 있다.
-
Background-size: contain —> 컨테이너 전체를 덮지만 이미지를 자르지 않게 유지한다. 가질 수 있는 가장 큰 크기를 가지면서 이미지의 삭제가 없다.
-
Background-size: cover —> 컨테이너 전체를 완전히 덮는다. 이미지가 가질 수 있는 가장 큰 크기를 가지며 컨테이너를 꽉 채우고, 이미지의 삭제가 생긴다. → background-position을 조정해서 삭제되는 위치를 정할 수 있다. center center로 지정하면, 상하좌우부터 잘린다.
2) 반응형 백그라운드 이미지 만들기
background: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2l0eXxlbnwwfHwwfHw%3D&w=1000&q=80") center /cover no-repeat;=> contain / cover
- 이미지가 잘려도 되는가, 안되는가부터 파악한다. 잘려도 된다면 cover, 잘리면 안된다면 contain
- 알파값이 있는 이미지는 contain을 썼을 때, 배경과 자연스럽게 어울리는 경우가 많다.
- 알파값이 없는 이미지는 cover를 사용하고 position을 통해 위치를 잡아주는 것이 좋다.
3. 반응형 동영상
1) 브라우저가 지원하는 비디오 포맷
https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers
2) video 속성
- preload =“none”, “auto”; : 페이지를 로드할때 영상을 미리 로드할지 말지 결정한다.
- poster : 비디오를 내려받을 동안 혹은 영상을 재생할때까지 표시할 이미지를 지정한다. 일명, 썸네일.
- controls : 브라우저가 재생에 필요한 컨트롤러를 제공할지 지정한다.
- autoplay: 파일이 다운로드가 완료되면 자동으로 재생될지 지정하는 속성이다. 일부 브라우저에서는 muted 속성을 함께 써주지 않으면 적용되지 않는다.
-> 키보드 접근성 및 과도한 트래픽 방지 목적 - muted: 소리를 끈다.
- loop : 비디오가 끝나고 반복적으로 재생할지 지정한다.
3) 동영상 만들기
a. <video>
<video controls src="./video/next_level.mp4/next_level.mp4"></video>b. <iframe>
<iframe class="video-next-level"
src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
title="YouTube video player" frameborder="0" allowfullscreen></iframe>4) 반응형 동영상 만들기
a. <video>
width를 % 단위로 잡아주면 된다.
b. <iframe>
<style>
body {
height: 100vh;
}
article, iframe {
width: 100%;
height: 100%;
}
</style>
<iframe width="950" height="534"
src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&controls=1&mute=1&loop=1&playlist=4TWR90KJl84"
title="YouTube video player" frameborder="0" allowfullscreen></iframe>단순히 width를 % 단위로 잡을 경우, 영상 화면은 줄어들지만, 플레이어 크기는 줄어들지 않음.
<style>
article {
width: 100%;
padding-top: calc(720/1280*100%); /*56.25%*/
position: relative;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
vertical-align: top;
}
</style>
<body>
<article>
<iframe
src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=0&controls=1&mute=1&loop=1&playlist=4TWR90KJl84"
title="YouTube video player" frameborder="0" allowfullscreen></iframe>
</article>
</body>- 부모 container인 article의 padding-top 요소를 이용한다.
- padding 값을 %로 주었을 경우, 그 값은 부모의 width 기준으로 정해진다. padding-top,bottom은 부모의 height값으로 생각하기 쉽지만, width값 기준으로 정해진다.
- padding-top:calc(720/1280*100%);
article padding-top을 iframe 크기와 비율만큼 주기 위함이다.
- iframe을 position 속성으로 padding-top 영역에 위치시킨다.
- 대체요소(replaced element, img, video, iframe 등)는 외부요소이므로 left, right 값 등으로 콘텐츠 크기를 조정할 수 없고, 대체요소 자체를 width, height 값으로 조정해야 한다. (위의 코드에서
top:0; left: 0; right:0; bottom:0;을 해도 전체 화면을 차지하지 않기때문에,width:100%, height:100%로 크기를 줘야한다.) - iframe은 display: inline; 이기때문에, img태그와 마찬가지로, vertical-align: baseline;때문에 높이에 빈영역이 생긴다. -> vertical-align: top;을 해준다.
- 영상의 비율이,
16:9 -> padding-top: 56.25%;
4:3 -> padding-top: 75%;
1:1 -> padding-top: 100%;
📢 오늘의 회고
오늘로서 드디어 html, css 과정이 끝났다! JS가 너무 기대된다!!
iframe 반응형 잘 보고갑니다!