20220520

let grade = window.prompt('점수를 입력하세요')
        if(grade>=90 && grade<=100){
            console.log('A')
        } else if(grade>=80 && grade<90){
            console.log('B')
        } else if(grade>=70 && grade<80){
            console.log('C')
        } else if(grade>=60 && grade<70){
            console.log('D')
        } else if(grade>=0 && grade<60) {
            console.log('F')
        } else{
            console.log('잘못된 입력입니다.')
        }

👉 else의 범위를 0이하, 100이상으로 만들어주기 위해 각 조건의 최대값과 최소값을 정해줘야함.

📌 아이디와 비밀번호

조건

let userId = window.prompt('아이디를 입력하세요')
let userPassword = window.prompt('비밀번호를 입력하세요')
if(userId==='sesac' && userPassword==='001'){
   console.log('로그인 되었습니다.')
} else{
   console.log('로그인 정보가 일치하지 않았습니다.')
}

📌 if문 중첩

조건

let userId = window.prompt('아이디를 입력하세요')
if(userId==='sesac'){
	let userPassword = window.prompt('비밀번호를 입력하세요')
	if(userPassword==='001'){
		console.log('로그인 되었습니다.')
		} else{
			console.log('비밀번호가 일치하지 않았습니다.')
			}
} else{
	console.log('아이디 정보가 일치하지 않았습니다.')
}

👉 아이디를 확인하는 조건문과 패스워드를 확인하는 조건문을 중첩.

2. Switch문

예시

let luckyNum = '10';
switch(luckyNum){
  case '10':console.log("당첨!냉장고");
  break;
  case '20':console.log("당첨!Ipad");
  break;
  case '30':console.log("당첨!TV");
  break;
  default:console.log('꽝 다음기회에');
}

👉 일치하는 조건이 한정적일 때. 분기점이 여러개일 때 사용하는 조건문

👉 default문이 없어도 에러는 아님.

3. 삼항 조건 연산자

예시

let num=100;
if(num % 2 === 0){
  console.log('짝수')
} else{
  console.log('홀수')
}

num % 2 === 0 ? console.log('짝수') : console.log('홀수')

형식
👉 조건식 ? (참일때 실행할 식) : (거짓일때 실행할 식)

👉 주로 if문의 단축형태로 사용

4. 반복문

1) while

예시 : 1씩 증가하는 i가 10이 될때까지 출력

let i = 1;
while(i <= 10){
  console.log('문장출력');
  i++
}

👉 조건문이 참일 때 실행되는 반복문. 조건은 문장안이 실행되기 전에 참, 거짓을 판단한다.

예시 : 50 이하의 수 중 2의 배수인 동시에 7의 배수

while(i <= 50){
  if(i%2===0 && i%7===0) console.log(i)//i를 걸러줌
  i++;
}

2) do/while

👉 do 로 시작하기 때문에 조건에 상관없이 한번은 무조건 실행됨.
👉 조건에 맞지 않는 값이 들어와도 초기값은 표시하고 싶을 때 사용.

예시

let i = 50;
do{
  console.log('문장출력');
  i++
}while(i <= 10)

3) for

예시

for(let i = 1; i<5; i++) {
  console.log(i)
}

for (초기값 ; 최종조건식 ; 증감식) {실행문}
주로 증감식에 사용

for문 중첩

📌구구단 계산기 만들기

조건 : 2단부터 4단까지 콘솔에 출력하기

for (let dan=2; dan<5 ; dan++){
    console.log(`${dan}단 출력`)
    for (let num=1 ; num<10 ; num++){
        console.log(`${num}x${dan}=${num*dan}`)
    }//inner for
}//outer for

outer for에 num과 곱해줄값(n단)의 조건 입력.
inner for에 num(1~10) 조건 입력.

🐸 범위를 정해서 계속 돌리는 것으로 이해함!

5. 점프문

1) break

for (let i = 1 ; i<10 ; i++){
    if(i===5){
        break;
    }
    console.log(`${i}x2=${i*2}`)
}
//조건문에서 i의 범위를 10까지 설정하였지만 5까지 계산하고 종료.

👉 조건문을 실행하다 break를 만나는 시점에서 구문을 종료한다.

2) continue

for (let i = 1 ; i<10 ; i++){
    if(i%2===0){
        continue;
    }
    console.log(`${i}x2=${i*2}`)
}
//짝수만 걸러짐

👉 특정 조건만 거르고 싶을 때.
👉 조건에 걸리면 그 조건만 건너뛰기를 함.

5. scss

이름에 언더바 붙이면 css파일 자동생성 되지 않음.

1) extend(확장)

.basic{ padding: 20px 30px; margin: 0 10px; color: #fff; font-size: 28px; border-radius: 8px;}
.wrap{display: flex; margin: auto; width: 1000px; padding: 20px}
.box1{@extend .basic;  background-color: blue;}
.box2{@extend .basic; background-color: gray;}
.box3{@extend .basic; background-color: green;}
.box4{@extend .basic; background-color: red;}
.box5{@extend .basic; background-color: yellow; color: #000}
.box6{@extend .basic; background-color: skyblue; color: #000}

👉 공통된 css 속성을 적용하는 요소들에 extend로 한번에 적용할 수 있다.
👉 .basic이라는 클래스를 만들어 다른 클래스에도 값을 적용한다.

.basic, .box1, .box2, .box3, .box4, .box5, .box6 {
  padding: 20px 30px;
  margin: 0 10px;
  color: #fff;
  font-size: 28px;
  border-radius: 8px;
}

컴파일 된 css 파일을 확인해보면 다음과 같다.
@extend가 들어간 클래스들을 선택자로 따로 선택하여 적용한다.

2) mixin

@mixin btn-basic($size, $bgcolor) {
    font-size: $size;
    padding: 20px 40px;
    color: #fff;
    background-color: $bgcolor;
    display: inline-flex;
    justify-content: center;
    align-items: center;    
}
.btn1{
    @include btn-basic(50px, rgb(68, 143, 255))
}
.btn2{
    @include btn-basic(10px, rgb(255, 201, 85))
}
.btn3{
    @include btn-basic(35px, rgb(192, 255, 65))
}

👉 공통으로 적용되는 css속성들과 값을 한번에 지정할 수 있다.
👉 css속성은 같지만 값이 다를 경우, 그 값을 변수로 지정하여 각각 요소에서 바꿔줄 수 있다.
👉 @mixmin 이름(변수){} 의 형태로 나타내며 요소에 적용할 때는 @include name(변수)로 표시한다.


컴파일 된 css 파일을 확인해보면 다음과 같다.

.btn1 {
  font-size: 50px;
  padding: 20px 40px;
  color: #fff;
  background-color: rgb(68, 143, 255);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.btn2 {
  font-size: 10px;
  padding: 20px 40px;
  color: #fff;
  background-color: rgb(255, 201, 85);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.btn3 {
  font-size: 35px;
  padding: 20px 40px;
  color: #fff;
  background-color: rgb(192, 255, 65);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

👉 해당 클래스에 mixmin 값이 들어가있다.

3) mixin 중첩

$font-base:14px;
$font-family-base:'Raleway';
$font-family-headline:'Roboto';
body{
    font-size: $font-base;
    line-height: 1.6;
}
@mixin font-default {
    font: {
        family:$font-family-headline;
        weight:400;
    }
    color: #222;
}
@mixin lg-text {
    @include font-default;
    font-size: $font-base*4;
    color: skyblue;
}
@mixin mg-text {
    @include font-default;
    font-size: $font-base*3;
}
@mixin sm-text {
    @include font-default;
    font-size: $font-base*2;
}
@mixin body-text {
    @include font-default;
    font-size: $font-base;
}
h1{@include lg-text;}
h2{@include mg-text;}
h3{@include sm-text;}
h4{@include body-text;}

👉 mixmin을 중첩하여 사용하면 상위 변수를 바꿔주는것 만으로 하위 속성의 값들을 한번에 바꿀 수 있어서 편하다!