코드의 css부분을 보면 html에 box-sizing: border-box;와 input 부분에 box-sizing: border-box;이 적혀있다.
나는 처음에 코드를 작성할 때 전체를 감싸고 있는 html 태그가 css의 첫번째 코드에 와 있길래 (html부분 내가 작성한것 아님) "전체를 뜻하는 태그이구나..!"라는 생각에 box-sizing: border-box를 주었는데 자꾸 input부분이 지정해준 너비 밖으로 삐져나왔다.
input 부분이 눈에 거슬리게 튀어나와있는 모습
너비 값을 100%도 줘보고, 정해진 px로도 줘봤지만 input의 너비는 줄어들지 않았고 overflow : hidden까지 들먹여가며 머리를 싸맸던 나는 input 값에 box-sizing: border-box;를 재부여하고 나서야 해결을 할수 있었다.
왜 html 태그에 작성한 box-sizing: border-box;은 적용되지 않았던걸까? box-sizing의 작동 방식은 이렇다.
기본 적용: box-sizing: border-box;를 html 태그에 적용하면, 모든 요소가 기본적으로 border-box 모델로 계산되도록 설정해야하지만 이 설정이 모든 요소에 자동으로 적용되지 않거나, 특정 요소에 대해 다른 스타일이 정의되어 있을 경우, 이러한 스타일이 우선시될 수 있다.
상속: CSS 속성은 기본적으로 상속되지 않는다. box-sizing은 상속되는 속성이 아니기 때문에, 각 요소에 대해 명시적으로 설정해주지 않으면 기본값인 content-box가 적용될 수 있다.
스타일 우선순위: 만약 어떤 요소에 대해 box-sizing을 따로 설정한 경우, 그 설정이 우선적으로 적용된다. 그래서 각 요소에 대해 box-sizing: border-box;를 명시적으로 설정해주면, 그 요소에 대해서는 border-box 모델이 적용되는 것.
1. *선택자 :
*는 모든 요소를 선택하는 와일드카드 선택자이다. 즉, 문서 내의 모든 HTML 요소에 적용할 스타일을 정의할 수 있다.
예를 들어, * { margin: 0; }는 모든 요소의 마진을 0으로 설정한다.
2. html 선택자 :
html 선택자는 <html> 태그에만 적용된다. 따라서 html에 설정한 스타일은 오직 <html> 요소에만 영향을 미친다.
예를 들어, html { font-size: 16px; }는 문서의 루트 요소인 <html>에만 적용되고, 다른 요소에는 직접적인 영향을 주지 않는다.
html 태그에 box-sizing: border-box;를 설정했어도, 그 설정이 모든 요소에 영향을 주지 않거나, 다른 스타일이 우선시될 경우 원하는 효과를 얻지 못할 수 있다. 그래서 모든 요소에 대해 * 선택자를 사용하여 적용하는 것이 일반적인 방법이다.
마진상쇄 : 마진 상쇄는 인접한 블록 요소의 마진이 서로 겹칠 때, 두 마진 중 큰 값이 적용되고 작은 값은 무시되는 현상. 예를 들어, 두 개의 요소가 서로 인접해 있을 때, 아래의 규칙이 적용된다.
인접한 블록 요소의 수직 마진이 겹칠 때: 두 요소의 마진이 서로 겹치면, 더 큰 마진값만 적용되고 작은 마진은 사라진다. 이 경우, 두 요소의 마진은 서로 합쳐지지 않고, 그 중 큰 값만 사용된다.
부모 요소와 자식 요소의 마진 상쇄: 만약 자식 요소가 마진을 가지고 있고, 그 자식 요소의 마진과 부모 요소의 마진이 겹친다면, 자식 요소의 마진이 부모의 마진과 합쳐지지 않고, 부모 요소의 마진만 적용될 수 있다. 이는 자식 요소가 화면의 상단이나 하단과 접촉할 때 발생한다. (중요! 세로로만 마진 상쇄가 일어난다.)
.parent {
margin: 20px; /* 부모의 마진 */
}
.child1 {
margin: 30px; /* 첫 번째 자식의 마진 */
}
.child2 {
margin: 40px; /* 두 번째 자식의 마진 */
}
예를 들어 이런 HTML과 CSS 코드를 작성했다고 생각해보자.
하나씩 풀어서 생각해보면,
부모요소 : .parent의 마진은 20px이다.
자식요소 : 자식1의 마진은 30px, 자식2의 마진은 40px이다.
마진 상쇄 과정
자식1과 자식2의 마진 : 자식 1의 하단 마진 30px과 자식2의 상단 마진 40px이 겹쳐져서 더 큰 마진인 자식2의 마진인 40px만 적용되고 자식1의 하단 마진은 무시된다.
부모 자식의 마진 : 자식2의 하단 마진 40px과 부모요소의 하단 마진 20px이 겹쳐질 때 자식 2의 마진이 더 크기 때문에 최종적으로 자식 2의 마진 40px이 적용된다. 이와 마찬가지로 자식1의 상단 마진 30px과 부모요소의 상단 마진 20px이 겹쳐질 때 자식 1의 마진이 더 크기 때문에 최종적으로 자식 1의 마진 30px이 적용된다.
그리고, 마진 상쇄에는 여러 규칙이 있다.
다음의 경우엔 자식 요소의 마진이 부모요소의 바깥으로 전파가 된다.
border가 없을 경우
padding이 없을 경우
overflow가 없을 경우
여기 두 가지의 문제가 있다. 질문은 같으나 답은 다르다.
Q1. 아래 코드에서 #a와 #b 사이의 세로 마진은 몇 px일까요?
<div id="a">
a
<div id="c">
c
</div>
</div>
<div id="b">
b
</div>
두 문제의 차이는 #a에 padding : 10px이라는 코드의 유무밖에 차이가 없는데 왜 정답에서 차이가 있는걸까?
그림으로 풀어보자면 이렇다.
문제 1의 경우와 문제 2의 경우를 그림으로 만들었을 때
문제1은 a의 자식 요소인 c가 a의 마진 30px 보다 큰 40px이라 상쇄가 일어났다. 하지만 문제2의 경우는 부모요소인 a가 패딩값을 10px 주었다. 때문에 자식 요소인 c가 패딩 값을 뚫고 마진을 행사 할 수 없기 때문에 문제 2에서 a와 b 사이의 마진 값은 b의 마진 값보다 큰 a의 마진값 30px이 된다. padding 뿐만 아니라 border나 overflow로 자식요소의 마진이 부모요소의 마진에 영향을 끼치지 못하게 할 수 있다.
위의 문제 외에도 마진 상쇄에는 다양한 경우들이 있는데 다음의 경우엔 마진 상쇄가 일어나지 않는다.
웹 사이트에 접속할 때 다양한 디바이스를 통해 접속을 할 수 있다. (휴대폰, 태블릿, 데스크탑, 노트북, 스마트 워치 등)
각 디바이스마다 화면의 크기가 다른데 이렇게 다양한 크기를 가진 모든 디바이스를 모두 같은 UI로 웹사이트를 표현한다면 굉장히 비효율적일 것이다.
그래서 반응형 웹 디자인은 사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일을 적용해 주어야 하는데 CSS의 미디어 쿼리를 이용해 각 디바이스의 크기에 맞는 최적의 UI들을 따로 설정 해 줄 수 있다. (다양한 화면 사이즈에서도 똑같은 유저 경험을 제공해야하기 때문에 중요)
@media [only | not] 미디어 유형 [and 조건] * [and 조건]
기본 설정 해둔 미디어쿼리 예시 html과 scss
브라우저에서 보이는 화면
@media (max-width : 600px) {
// 화면 너비가 600px 이하인 경우에만 적용되는 스타일
.cellphone{
color : red;
}
}
@media (min-width : 600px) and (max-width : 992px) {
// 화면 너비가 600px 이상, 992px 이하인 경우에만 적용되는 스타일
.cellphone{
color : red;
}
}
미디어 쿼리 css 적용브라우저창에서의 결과미디어 쿼리 다른 설정 방법
뷰포트가 가로사이즈가 길 때와 세로사이즈가 더 길 때의 브라우저 결과 창프린트 하는 경우의 미디어 쿼리
조건의 경과(truthy, falsy)에 따라 다른 코드를 실행하는 구문. if, else
let isShow = true;
let checked = false;
if (isShow) {
console.log("Show!"); //Show!
};
if (checked) {
console.log("Checked!");
};
/* 조건을 작성하는 소괄호() 사이에 거짓과 참을 구분하는 불린데이터 중 참(true)에 해당하는 값이 들어있으면
조건의 중괄호{}사이의 내용을 실행하고 그렇지 않으면(false) 실행하지 않는다.*/
let isShow = true;
if (isShow) {
console.log('Show!;');
} else {
console.log('Hide?');
};
//Show!
let isShow = false;
if (isShow) {
console.log('Show!;');
} else {
console.log('Hide?');
};
//Hide?
//함수 선언
function helloFunc() {
//실행 코드
console.lig(1234);
};
//함수 호출
helloFunc(); //1234
Return : 반환하기
function returnFunc(){
return 123;
//함수밖으로 123을 내보내겠다.
};
let a = returnFunc(); // 내보낸 값을 a 가 받겠다.
console.log(a); //123
//return이라는 키워드를 사용해서 어떠한 자바스크립트 데이터를 함수 밖으로 내보내기를 할 수 있다.
Sum : 더하기(+)
//함수선언
function sum(a, b) { //a와 b는 매개변수(parameters)
return a + b;
};
//재사용
let a = sum(1, 2); //1과 2는 인수(arguments)
let b = sum(7, 12); //매개변수로 받으려고 하는 각각의 데이터를 인수라고 한다.
let c = sum(2, 4);
console.log(a, b, c); // 3, 19, 6
기명함수와 익명 함수
//기명(이름이 있는) 함수
//함수 선언
function hello() {
console.log('Hello~');
};
//
//익명(이름이 없는) 함수
//함수 표현, 이름의 명시 없이 변수에 할당해서 사용하는것은 표현이라고 한다.
let world = function() {
console.log("World~");
};
//function 사이에 이름이 없는 채로 시작을 하면 익명함수. 함수 부분에 이름을 지정하지 않으면 호출을 할 수 없는데 익명함수들은 데이터로써 활용되거나 변수에 할당이 되어 사용되기도 한다.
//함수 호출
hello(); //Hello~
world(); //World~
객체데이터와 메소드(Method)
//객체 데이터
const bts = {
name: "jin",
age: 31,
//메소드(Method) : 객체 데이터 내부에 하나의 속성 부분에 함수라는 어떤 데이터를 할당하는 것. 속성부분에 함수가 할당되어 있으면 메소드라고 한다.
getName: function () { //함수의 표현
return this.name;
}
};
const hisName = bts.getName();
console.log(hisName); // jin
// 혹은
console.log(bts.getName()); // jin
//함수라는 것을 어떤 데이터처럼 활용할 수 있고, 대표적으로 객체 데이터의 특정한 속성에도 함수를 데이터처럼 삽입할 수 있는데 삽입된 속성은 메소드라고 부른다.
자바스크립트를 통해서 화면을 제어할 순 있지만 제어되는것들은 데이터로 동작되기 때문에 어떤 도형이라던가, 색상이라던가 크기로 사고하는 것이 아니고 어떤 문자라던가 숫자 등의 자바스크립트의 데이터로 사고하면서 학습을 해야한다.
01. 문자 데이터 (String)
let myNAme = "ARONY";
let email = 'arony@gmail.com';
let hello = `Hello ${myName}?!`
console.log(myName); //ARONY
console.log(email); //arony@gmail.com
console.log(hello); //Hello ARONY?!
따옴표를 이용해 정의할 수 있는데 ", ', ` 으로 구분해서 데이터를 표현 할 수 있다. 백틱(`)기호는 문자 중간 어딘가에 데이터를 보관해서 끼워넣을 수 있다.
02. 숫자 데이터(Number)
let number = 123;
let opacity = 1.57;
console.log(number); //123
console.log(opacity); //1.57
숫자에도 따옴표가 붙으면 문자 데이터로 인식된다.
let num = "123";
console.log(num); //123
정수 및 부동소수점 숫자를 나타낸다.
03. 불린 데이터(boolean)
let checked = true;
let isShow = false;
console.log(checked); //true
console.log(isShow); //false
true, false 두 가지 값 밖에 없는 논리 데이터이다. 참 혹은 거짓
04. 값이 할당되지 않은 상태 (Undefined) - 의도적이지 않은
let undef;
let obj = { abc: 123 };
console.log(undef); //undefined
console.log(obj.abc); //123
console.log(obj.xyz); //undefined
05. 값이 의도적으로 비어있는 상태 (Null)
let empty = null;
console.log(empty); //null
06. 객체 데이터 (Object)
여러 데이터를 Key:Value 형태로 저장한다. { }
let user = {
//Key: Value
name: "jun",
age: 25,
isValid: true
};
console.log(user.name); //jun
console.log(user.age); //25
console.log(user.isValid); //true
07. 배열데이터 (Array)
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Cherry
예제처럼 변수를 사용하는 개발자가 직접 작성 했다면 typeof 연산자를 거의 사용할 일이 없다.
다른 개발자가 작성한 변수의 타입을 알아야 하거나 API 통신모듈을 통해 받아온 데이터를 타입에 따라 다른 방식으로 처리해야할 때 많이 사용된다.
null 은 객체가 아니지만 자바스크립트의 초기버젼의 오류라고 한다. 하위호환성을 위해 수정하지는 않는다고 한다.
❗주의사항❗
문자형 선언시에 ``백틱이 아닌 ""('')에 문자 내용에 변수 선언시 결과 출력에 값이 적용 안될 수 있으니 주의!
const fruit = 'apple';
const message = `My favorite fruit is ${fruit}`;
const message2 = "My favorite fruit is ${fruit}";
console.log(message);
console.log(message2);
console.log 값
문자형과 숫자형도 합칠 수 있다.
const name = 'jenny';
const a = '나는 ';
const b = ' 입니다.';
console.log(a + name + b); //나는 jenny 입니다.
const age = 30; //number
console.log(a + age + '살' + b); //나는 30살 입니다.
대화상자
alert(); : 웹 브라우저의 경고 창에 데이터를 출력, 사용자와 상호작용을 하기 보단 일방적으로 알리는 용도로 사용
let a = '어서오세요 사용자님';
alert(a);
결과 창
porompt(); : 사용자가 키보드로 입력하는 데이터를 변수에 저장
let a = '당신의 이름을 적어주세요.';
prompt(a);
결과 창
여기서 값을 입력하지 않고 취소를 한다면 null(아무 내용이 없는)이 된다.
const name = prompt('이름을 입력하세요.');
alert('환영합니다, ' + name + '님');
==
const name = prompt('이름을 입력하세요.');
alert(`환영합니다, ${name} 님 `);
prompt에 이름을 적고 난 후의 alert 창
prompt는 디폴트(default)값도 입력 할 수 있다.
const date = prompt('예약일을 입력해주세요', '2020-10-'); // 두번쨰 인수는 디폴트 값을 입력할 수 있다.
디폴트 값이 미리 들어가 있으면 무언가 안내하거나 힌트를 줄 때 유용하다.
confirm(); : 확인을 받는다. alert와 다른 점은 확인과 취소가 있다. 확인을 누르면 true, 취소를 누르면 false 값이 남는다.
결제하시겠습니까? 나 정말 삭제 하시겠습니까? 등의 사용자의 행동을 한번 더 확인 해 줄 때 많이 사용된다.
⛔단점⛔1. 창이 떠 있는 동안 스크립트 일시 정지, 창을 닫기 전까지 이후 동작에 제약이 있다.2. 스타일링을 할 수 없다. 브라우저마다 위치와 모양이 조금씩 다르다. 디자이너가 싫어한다.→ HTML과 CSS로 만드는 모듈창도 많이 사용되지만 기본 메서드는 빠르고 적용이 간단하단 장점으로 많이 사용된다.
형 변환(Type Conversion)
string() → 문자형으로 변환Number() → 숫자형으로 변환Boolean() → 불린형으로 변환형 변환이 필요한 이유? 문자열과 문자열을 더 하면 문자열로 합쳐서 반환해준다. 숫자와 숫자를 더하면? 합친 값을 반환해준다. 하지만 자료형이 다르면 의도치 않은 값이 도출될 수도 있다.
const mathScore = prompt('수학 몇 점?');
const engScore = prompt('영어 몇 점?');
const result = mathScore + engScore / 2;
console.log(result);
수학점수 90, 영어점수 70을 입력한 값
prompt로 입력 받은 값은 문자형이다. 숫자 90이 아니라 문자 "90"이다. 문자와 문자를 입력 받으면 그대로 더해준다. "90" + "70" = "9070" / 2 = 4535
"9070"은 문자형인데 나누기 2가 작동한 이유는 무엇일까?
숫자형이 아니더라도 나누기 같은 표현식은 숫자형으로 자동 변환되어 계산된다.
"6" / "2" = 3 이 나오는데 이러한 과정을 자동 형변환이라고 한다. 자동으로 되서 편리하다고 생각 할 수 있지만 원인을 찾기 힘든 에러를 발생 시킬 수 있어 항상 의도를 가지고 원하는 타입으로 변환해 주는 것이 좋다. = 명시적 형변환
예시) 어떤 값이 들어와도 5를 넘기면 안될 경우 : X % 5 = 0~4 사이의 값만 반환
거듭제곱을 사용할 때 ?
const num = 2 **3;
console.log(num); //8
우선순위
* / (곱셈과 나눗셈) > + -(덧셈과 뺄셈), 원하는 값을 얻기 위해서는 괄호를 적절히 사용해야 한다.
연산자 줄여서 사용하기
let num = 10;
num += 5;
//num = num + 5;
console.log(num); //15
//더하기 외에 다른 연산자도 줄여 사용할 수 있다. +, -, *, /, %
num *= 5;
console.log(num); //50
num -= 5;
console.log(num); //5
num %= 5;
console.log(num); //0
증가 연산자, 감소 연산자
let num = 20;
num++;
console.log(num); //21
let num = 20;
num--;
console.log(num); //19
증감 연산자를 앞에 붙여주는지, 뒤에 붙여주는지에 따라서도 값이 달라진다.
let num = 10;
let result = num++;
console.log(num); // 10, 증가 되지 않는다. 증가 시키기 위해선
let num = 10;
let result = ++num; /* 증가연산자를 앞에다가 붙여주면 된다.
뒤에 붙일 경우 증가시키기 전의 값을 result에 부여한다. */
console.log(num); // 11
비교연산자, 조건문
비교 연산자
의미
설명
==
같다
데이터형이 달라도 값이 같으면 true
===
값과 데이터형이 같다
데이터형도 같아야 true, 데이터형이 다르면 false
!=
다르다
데이터형이 달라도 값이 같으면 true
!==
값과 데이터형이 다르다
값이 같아도 데이터 형이 다르면 false
>
크다
<
작다
>=
크거나 같다
<=
작거나 같다
값은 늘 boolean 형으로 반환한다. true or false
조건문
어떤 조건에 따라 이후의 행동이 달라지게 해준다.
if~ 구문 : 조건식의 참 거짓 여부에 따라 특정 코드들이 수행되게 할 수도 있고 수행되지 않게 할 수도 있다.
if~else~ 구문 : 짝수/홀수, 합격/불합격, 수신/비수신, 회원/비회원 등의 두다지 요소의 조건이 존재할 때 사용한다. (흑과 백)
if~ else if~ else 구문 : 2개 이상의 조건이 필요할 때
if문 (괄호) 안에 들어가는 조건을 평가해서 true일 경우 실행해 준다.
const age = 30;
if (age > 19) {
/* if 함수 안의 조건이 맞을 경우 {}를 실행 */
console.log('환영합니다.');
} else {
/* if 함수에서의 조건이 맞지 않았을 때 else 구문을 실행해준다.*/
console.log('안녕히가세요.');
}
console.log();
결과 창
const age = 15;
if (age > 19) {
console.log('환영합니다.');
} else {
console.log('안녕히가세요.');
}
console.log();
결과 창
const age = 19;
if (age > 19) {
console.log('환영합니다.');
} else if (age === 19) {
console.log('수능시험 화이팅!!!');
} else {
console.log('안녕히가세요.');
}
console.log();
결과 창
논리 연산자
논리연산자
설명
&& AND
여러 조건이 모두 true일 경우 최종 결과가 true. 하나라도 false일 경우 false를 반환
|| OR
여러 조건 중 하나라도 true면 true. 모든 값이 false 일 때 false를 반환
for (let i = 3; i < 10; i++) {
console.log(i)
}
/* i 라는 변수의 값은 3으로 설정
i가 10보다 작을 때까지 반복문을 실행하고 코드가 한번 실행 되고 난 후 i++를 작업.
i값이 코드 실행 후 1씩 늘어나는 것이다.
1. let i = 3; 이 초기 값으로 최초 실행
2. i = 3이고, 10보다 작으므로 true
3. console 창에 3이라는 값을 입력해 보여준다.
4. i++ 코드를 만나 1만큼 증가되어 4가 된다.
5. i = 4이고, 10보다 작으므로 true
6. console 창에 4이라는 값을 입력해 보여준다.
7. i++ 코드를 만나 1만큼 증가되어 5가 된다.
....
종료지점, i가 10이 되면 10보다 작은 숫자가 아니므로 false. 코드가 종료된다.
*/
console.log 결과창
while문
let i = 0;
while(i < 10){
//코드
}
let i = 0;
while(i < 10){
console.log(i)
i++;
}
/* 최초의 i = 0 이다.
i는 10보다 작다는 조건문을 충족하므로 {}안에 있는 코드를 실행시킨다.
무한루프에 빠지지 않으려면 i++로 증가시켜주어야 한다. */
do while문
let i = 0;
do{
//코드
i++;
}
while(i < 10)
do while과 while의 차이점
do while은 적어도 한번은 실행 한 후 조건을 체크한다. while은 조건문을 충족하지 않으면 처음부터 실행하지 않는다.
반복문을 빠져나오는 코딩
break : 즉지 멈춘 후 빠져나온다.
while(true){
let answer = confirm("계속할까요?")
if(!answer){
break;
}
}
취소를 누르기 전까진 계속 창이 뜬다.
continue : 코드 실행을 멈추고 다음 반복으로 진행한다.
for(let i =0; i < 10; i++){
if(i%2){
continue;
}
console.log(i)
}
/* 최초의 i = 0이다, i가 10보다 작을 때까지 반복되고, i는 코드가 한번 실행된 후 1씩 증가한다.
0을 2로 나누면 나머지가 0이기 때문에 continue를 만나지 못하고 console을 실행해준다.
1이 증가 된 후 1을 2로 나누면 나머지가 1이기 때문에 continue문을 만나
console을 실행하지 않고 넘어간다. 짝수만 남게 되는 코드
*/
결과
✔️평가 ✔️
코드를 작성하는 작성자마다 차이는 있지만 명확한 횟수가 나와 있다면 for문을 아니라면 while을 사용하는데 do while은 잘 사용하지 않는다고 한다. 개발자는 쉽게 일하고 코드를 줄이려고 노력해야 한다. 반복문은 필수로 익힐것!
switch문
사실 if~else 문을 알고 있다면 모르고 있어도 괜찮은 코드이다. 모든 switch문은 if~else문으로 작성이 가능하다.케이스가 다양할 경우 보다 간결하게 작성 할 수 있다는 장점이 있다.
switch(평가){
case A : //A일때 코드
case B : //B일때 코드
... }
if(평가 == A){
//A일때 코드
} else if (평가 == B){
//B일때 코드
}
siwtch 괄호 안의 값과 동일한 케이스 값을 찾아 코드를 실행한다. break 문을 만나면 코드를 빠져나간다.
//사고 싶은 과일을 물어보고 가격 알려주기
let fruit = prompt("무슨 과일을 사고 싶나요?");
switch(fruit){
case "사과" : console.log("100원입니다.");
case "바나나" : console.log("200원입니다.");
case "키위" : console.log("300원입니다.");
case "멜론" : console.log("400원입니다.");
case "수박" : console.log("500원입니다.");
case "복숭아" : console.log("600원입니다.");
case "키위" : console.log("700원입니다.");
case "망고" : console.log("800원입니다.");
case "포도" : console.log("900원입니다.");
값 입력결과
복숭아 값만 결과로 보이지 않고 다른값도 보인이유?
복숭아를 입력받아 switch의 조건문이 복숭아에서 true가 되어 그 이후의 값들이 모두 호출된것이다. 이를해결하기 위해서 break를 작성해주어야 한다.
//사고 싶은 과일을 물어보고 가격 알려주기
let fruit = prompt("무슨 과일을 사고 싶나요?");
switch(fruit){
case "사과" : console.log("100원입니다.");
break;
case "바나나" : console.log("200원입니다.");
break;
case "키위" : console.log("300원입니다.");
break;
case "멜론" : console.log("400원입니다.");
break;
case "수박" : console.log("500원입니다.");
break;
case "복숭아" : console.log("600원입니다.");
break;
case "키위" : console.log("700원입니다.");
break;
case "망고" : console.log("800원입니다.");
break;
case "포도" : console.log("900원입니다.");
break;
}
키위를 입력해 보았다.결과
하지만 사용자가 미리 코딩해 두지 않은 과일을 적는다면 아무런 결과 값도 도출하지 않는다. (에러 메세지도 없다.)
이를 위해 if 문에서 사용 했던 else와 같은 역할을 해줄 코드가 있다. 바로 default 이다.
//사고 싶은 과일을 물어보고 가격 알려주기
let fruit = prompt("무슨 과일을 사고 싶나요?");
switch(fruit){
case "사과" : console.log("100원입니다.");
break;
case "바나나" : console.log("200원입니다.");
break;
case "키위" : console.log("300원입니다.");
break;
case "멜론" : console.log("400원입니다.");
break;
case "수박" : console.log("500원입니다.");
break;
case "복숭아" : console.log("600원입니다.");
break;
case "키위" : console.log("700원입니다.");
break;
case "망고" : console.log("800원입니다.");
break;
case "포도" : console.log("900원입니다.");
break;
default : console.log("판매하지 않는 과일입니다.");
}
없는 과일을 작성해보았다.default 값 출력
추가 팁! 동일한 값일 경우 이어서 작성도 가능하다.
//사고 싶은 과일을 물어보고 가격 알려주기
let fruit = prompt("무슨 과일을 사고 싶나요?");
switch(fruit){
case "바나나" : console.log("200원입니다.");
break;
case "키위" : console.log("300원입니다.");
break;
case "멜론" : console.log("400원입니다.");
break;
case "수박" :
case "자몽" :
console.log("500원입니다.");
break;
default : console.log("판매하지 않는 과일입니다.");
}
함수(Function)
서비스를 만들다보면 같거나 비슷한 동작들이 생기기 마련이다. 이러한 동작들을 자주 사용하거나 여러곳에서 사용하게 되면 하나로 만든 다음 재활용 하는 것이 좋다. 중복되는 코드도 줄어들고 유지보수도 편해지기 때문이다. 함수는 이것을 가능하게 해준다.
function sayHello(name){
console.log(`Hello, ${name}`)
}
/* function = 함수
sayHello = 함수명, 사용자의 편의대로 변경이 가능
(name) = 매개변수, 인수. 존재 할 수도 있고 존재하지 않을 수도 있다. 하나 이상일 수도 있다.
여러개일 경우 쉼표로 구분 가능
{ } = 중괄호 내부에 있는 함수의 실행코드를 작성해준다.
*/
sayHello("Mike");
결과 값
//매개 변수가 없는 함수, 에러 메세지를 보여주도록 만들어보자.
function showError(){
alert("에러가 발생했습니다. 다시 시도해주세요.");
}
showError();
에러 메세지 창
함수의 장점 : 유지보수가 쉽다. 만약 기획자가 "다시 시도해주세요." 라는 문구 변경을 원한다면 여러군데에서 사용하고 있어도 함수로 선언해주 코드만 변경 해주면 빠르게 수정이 가능하다.
//매개 변수가 있는 함수
function sayHello(name){
const msg = `Hello, ${name}`;
console.log(msg);
}
sayHello("Jenny");
sayHello("Tomy");
sayHello("Anna");
//결과 값 : Hello, Jenny
//Hello, Tomy
//Hello, Anna
함수를 만드는 목적은 중복을 줄여주는것이다. 함수를 한번 만들어두면 매개변수를 바꿔가며 다양하게 대응이 가능하다.
//매개 변수가 있는 함수
function sayHello(name){
let msg = `Hello`;
if(name){
msg = `Hello, ${name}`;
}
console.log(msg);
}
sayHello(); // Hello
매개변수에 값을 넣어주지 않았을 때 Hello만 출력이 되는데 매개변수가 없을때 name은 어떤 값을 가지고 있을까?
//매개 변수가 있는 함수
function sayHello(name){
console.log(name); // undefined
let msg = `Hello`;
if(name){
msg = `Hello, ${name}`;
}
console.log(msg);
}
sayHello();
console.log(name); 을 통해 name의 값이 undefined인것을 확인했다.
function sayHello(name){
let msg = "Hello";
if(name){
msg += ", " + name;
//동일한 결과가 나오는 코딩 : msg += `, ${name}`
}
console.log(msg);
}
sayHello("Yoony");
//Hello, Yoony
함수 안에서만 사용하는 변수를 지역변수라고 하는데 위의 코드에서 msg가 지역변수이다. 지역변수를 전역변수로 사용하고 싶다면 함수 안에서 선언한 변수를 함수 바깥으로 빼주어야 한다.
