Learn & Record
HTML CSS JavaScript (flex, direction, warp, justify-content, align, item, content, 연습문제, Boolean, 비교 연산자, 자료형 검사, var, let, const, 형변환) 본문
HTML CSS JavaScript (flex, direction, warp, justify-content, align, item, content, 연습문제, Boolean, 비교 연산자, 자료형 검사, var, let, const, 형변환)
Walker_ 2024. 3. 26. 16:551. flex 자식 요소의 배치방법 지정하기
- 특징은 float, inline-block 처럼 배치할 요소에 속성을 지정하는 것이 아니라 부모 요소(컨테이너)에 속성을 지정
- display : flex - 자신은 블록 속성을 유지하면서 자식 요소에 flex 환경 설정
- display : inline-flex - 자신은 인라인 속성으로 변경하면서 자식 요소에 flex 환경 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
main {
width: 100%;
height: 100vh; /* vh : Vertical Height. 화면 기준 높이 */
background: lightcyan;
}
section {
border : 10px solid blue;
}
section article {
width: 100px;
height: 100px;
background: aqua;
border: 1px solid #000;
}
section {
/*display: flex;*/
display: inline-flex;
}
</style>
</head>
<body>
<main>
<section>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
</main>
</body>
</html>
- flex-direction
- 자식 요소의 정렬 방향 변경하기
- flex-direction : row - flex의 기본축을 가로로 지정. 주축을 가로로, 교차축을 세로로 지정. 기본값
- flex-direction : column - flex의 기본축을 세로로 지정. 주축을 세로로 교차축을 가로로 지정.
- flex-direction : row-reverse - 자식 요소 콘텐츠를 가로 역순으로 정렬
- flex-direction : column-reverse - 자식 요소 콘텐츠를 세로 역순으로 정렬
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
main {
width: 100%;
height: 100vh; /* vh : Vertical Height. 화면 기준 높이 */
background: lightcyan;
}
section {
border : 10px solid blue;
}
section article {
width: 100px;
height: 100px;
background: aqua;
border: 1px solid #000;
}
/*
*/
section {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<main>
<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
</section>
</main>
</body>
</html>
- float-warp :자식 요소에 줄바꿈 지정하기
- float 속성을 사용하여 레이아웃을 만들 때 모든 자식 요소의 중 너비 값이
- 부모 요소의 너비 값보다 크면 자동으로 줄 바꿈이 되지만
- flex 속성에서는 flex-wrap을 설정해야 줄 바꿈을 쓸 수 있음
- flex-wrap : nowrap - 자식 요소의 줄 바꿈을 하지 않음. 기본 값
- flex-wrap : wrap - 자식 요소의 줄 바꿈을 함
- flex-wrap : wrap-reverse : 자식 요소를 줄바꿈. 여러 줄이 되면 아래에서 위로 배치
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
main {
width: 100%;
height: 100vh; /* vh : Vertical Height. 화면 기준 높이 */
background: lightcyan;
}
section {
border : 10px solid blue;
}
section article {
width: 100px;
height: 100px;
background: aqua;
border: 1px solid #000;
}
/*
*/
section {
display: flex;
/*
*/flex-flow : row wrap;
}
</style>
</head>
<body>
<main>
<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
<article>6</article>
<article>7</article>
</section>
</main>
</body>
</html>
- flex-direction
- 자식 요소의 정렬 변경하기
- justify-content : 기본 축으로 정렬하기
justify-content - 기본 축으로 정렬하기
기본 축은 flex-direction 으로 변경
justify-content : flex-start - 자식 요소를 시작쪽부터 정렬
justify-content : flex-end - 자식 요소를 끝쪽부터 정렬
justify-content : center - 자식 요소를 가운데로 정렬- space-between : 자식 요소를 양끝부터 나눠서 정렬
- space-around : 자식 요소의 여백을 균일하게 배분해서 정렬
- space-evenly : 자식 요소의 여백을 양끝까지 균일하게 배분해서 정렬
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
main {
width: 100%;
height: 100vh; /* vh : Vertical Height. 화면 기준 높이 */
background: lightcyan;
}
section {
border : 10px solid blue;
}
section article {
width: 100px;
height: 100px;
background: aqua;
border: 1px solid #000;
}
/*
justify-content - 기본 축으로 정렬하기
기본 축은 flex-direction 으로 변경
justify-content : flex-start - 자식 요소를 시작쪽부터 정렬
justify-content : flex-end - 자식 요소를 끝쪽부터 정렬
*/
section {
height: 100%;
box-sizing: border-box;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
</style>
</head>
<body>
<main>
<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
</section>
</main>
</body>
</html>
- align-content, align-items : 반대 축으로 정렬하기
- align-content : 자식 요소가 여러 개라서 줄 바꿈이 필요할 때
- align-content : flex-start : 자식 요소를 시작 방향으로 정렬
- align-content : flex-end : 자식 요소를 종료 방향으로 정렬
- align-content : space-around : 자식 요소들의 여백을 균일하게 배분해서 정렬
- align-content : space-evenly : 자식 요소들의 여백을 양끝까지 균일하게 정렬
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
main {
width: 100%;
height: 100vh; /* vh : Vertical Height. 화면 기준 높이 */
background: lightcyan;
}
section {
border : 10px solid blue;
}
section article {
width: 100px;
height: 100px;
background: aqua;
border: 1px solid #000;
}
/*
*/
section {
height: 100%;
box-sizing: border-box;
display: flex;
flex-flow: row wrap;
flex-direction: column;
justify-content: space-evenly;
align-content: space-evenly;
}
</style>
</head>
<body>
<main>
<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
</section>
</main>
</body>
</html>
- align-content, align-items : 반대 축으로 정렬하기
- align-items : 자식 요소가 1개이거나 줄바꿈이 필요없을 때
- align-items : flex-start : 자식 요소를 시작 방향으로 정렬
- align-items : flex-end : 자식 요소를 종료 방향으로 정렬
- align-items : center : 자식 요소를 가운데로 정렬
- align-items : stretch : 플렉스 항목을 확장해 교차축을 꽉 채움. 기본 값
- align-items : baseline - 시작점과 글자 기준선이 가장 먼 플렉스 항목을 시작점으로 배치
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 600px;
height: 600px;
border: 1px solid #333333;
align-items: center;
margin: 50px;
}
span {
width : 100px;
height: 100px;
background: red;
}
div {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body > div {
border: 2px solid red;
margin-bottom: 20px;
}
body > div > div {
width: 100px;
height: 100px;
border: 2px solid;
border-radius: 10px;
}
</style>
</head>
<body>
<!-- float, inline-block, flex 사용해서 요소를 수평으로 정렬하기 -->
<h2>요소를 수평으로 정렬하기</h2>
<h4>float 사용</h4>
<style>
.div_one {
height: 104px;
}
.one {
float: left;
}
</style>
<div class="div_one">
<div class="one">1</div>
<div class="one">2</div>
<div class="one">3</div>
</div>
<h4>inline-block 사용</h4>
<style>
.two {
display: inline-block;
}
</style>
<div>
<div class="two">1</div>
<div class="two">2</div>
<div class="two">3</div>
</div>
<h4>flex 사용</h4>
<style>
.div_three {
display: flex;
}
</style>
<div class="div_three">
<div class="three">1</div>
<div class="three">2</div>
<div class="three">3</div>
</div>
</body>
</html>
- display : flex 추가
- 컨테이너의 자식 요소에 넓이를 지정하지 않음
- flex-direction이 row인 경우 (기본값)
- 넓이를 지정하지 않은 경우 내부의 컨텐트에 따라 넓이가 정해짐. inline-block 속성과 유사
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
border: 2px solid red;
}
.item{
padding: 10px;
margin: 10px;
background: #0bd;
color: #fff;
}
#container{
display: flex;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>
- flex-direction : 자식 요소의 정렬 방향
- row : 자식 요소를 왼쪽에서 오른쪽으로 배치. 기본 값
- row-reverse : 자식 요소를 오른쪽에서 왼쪽으로 배치
- cloumn : 자식 요소를 위에서 아래로 배치
- column-reverse : 자식 요소를 아래에서 위로 배치
- flex-direction이 column인 경우
- 넓이를 지정하지 않은 경우 넓이가 100%로 정해짐. block 속성과 유사
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
border: 2px solid red;
}
.item{
padding: 10px;
margin: 10px;
background: #0bd;
color: #fff;
}
/*
flex-wrap : 자식 요소를 줄 바꿈
*/
#container{
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
</div>
</body>
</html>
- flex-wrap : 자식 요소를 줄바꿈
- 여러 줄로 지정할 경우에는 자식요소가 부모 요소의 너비를 넘는 경우 줄바꿈해서 여러 줄로 배치
- flex-direction : cloumn 일 경우에는 적용이 안됨
- flex-wrap: nowrap : 자식 요소를 줄바꿈 하지 않고, 한줄로 바꿈
- justify-content : flex-start : 줄의 시작 지정에 배치. 왼쪽 맞춤.
- justify-content : flex-end : 줄의 끝부분에 배치. 오른쪽 맞춤
- justify-content : center : 가운데 맞춤
- justify-content : space-between : 왼쪽과 오른쪽 끝에 있는 요소를 끝에 붙히고, 남은 부분들은 균등 공간 형성 배치
- justify-content : space-around : 왼쪽과 오른쪽 끝에 있는 공간도 포함해서 균등한 여백을 형성한 상태로 배치
- justify-content : space-evenly : 항목들 간에 동일한 간격
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
border: 2px solid red;
}
.item{
padding: 10px;
margin: 10px;
background: #0bd;
color: #fff;
}
/*
flex-wrap : 자식 요소를 줄 바꿈
*/
#container{
display: flex;
justify-content: flex-start;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>
- align-item : 수직방향 맞춤
- 부모 요소에 빈공간이 있으면 자식 요소에 수직 방향으로 어떻게 맞출지 지정
- align-items: flex-start : 부모 요소의 윗부분에 맞춰 배치
- align-items: flex-end : 부모 요소의 아랫부분에 맞춰 배치
- align-items: center : 중앙에 배치
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
border: 2px solid red;
}
.item{
padding: 10px;
margin: 10px;
background: #0bd;
color: #fff;
}
/*
flex-wrap : 자식 요소를 줄 바꿈
*/
#container{
display: flex;
justify-content: space-evenly;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
- align-item : 수직방향 맞춤
- 부모 요소에 빈공간이 있으면 자식 요소에 수직 방향으로 어떻게 맞출지 지정
- align-items : flex-start : 부모 요소의 윗부분에 맞춰 배치
- align-items : flex-end : 부모 요소의 아랫부분에 맞춰 배치
- align-items : center : 중앙에 배치
- align-items : stretch : 부모 요소의 높이 또는 콘텐츠의 가장 높이가 높은 자식 요소의 높이에 맞춰 늘어남. 초기값
- align-items: baseline : 베이스 라인에 배치
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
border: 2px solid red;
}
.item{
padding: 10px;
margin: 10px;
background: #0bd;
color: #fff;
}
/*
flex-wrap : 자식 요소를 줄 바꿈
*/
#container{
display: flex;
align-items: baseline;
}
.item:nth-child(2){
padding: 20px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
border: 2px solid red;
}
.item{
padding: 10px;
margin: 10px;
background: #0bd;
color: #fff;
}
/*
* align-content : 여러 줄이 될 때의 맞춤
자식 요소가 여러 줄이 됐을 때의 수직 방향 맞춤을 지정
flex-wrap : nowrap이 적용이 되어 있다면 자식 요소가 한 줄이 되므로 align-content 속성이 아무의미가 없음
*/
#container{
width: 400px;
height: 300px;
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
border: 2px solid red;
}
.item{
padding: 10px;
margin: 10px;
background: #0bd;
color: #fff;
}
/*
* align-content : 여러 줄이 될 때의 맞춤
자식 요소가 여러 줄이 됐을 때의 수직 방향 맞춤을 지정
flex-wrap : nowrap이 적용이 되어 있다면 자식 요소가 한 줄이 되므로 align-content 속성이 아무의미가 없음
align-content : flex
*/
#container{
width: 400px;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
</div>
</body>
</html>
연습문제
- reset.css 파일 생성
- 이미지 사이즈로 부터 넓이가 1600px 확인
- 로고는 <h1>, 네비게이션 <nav>, 본문은 <section>으로 전체 레이아웃 작업
- 전체 레이아웃에 css 적용, 임시로 배경과 높이를 지정해 레이아웃이 틀린 것이 없는지 확인
자바 스크립트
- 기본 자료형 : 불 boolean
- 참과 거짓 두 가지 값만 가지는 자료형
- 비교 연산자
- == : 양쪽이 같다
- !== : 양쪽이 다르다
- > : 왼쪽이 더 크다
- < : 오른쪽이 더 크다
- >= : 왼쪽이 더 크거나 같다
- <= : 오른쪽이 더 크거나 같다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
console.log(1 == 2); // false 양쪽이 같다.
console.log(1 !== 2); // true 양쪽이 다르다
console.log(1 > 2); // false 왼쪽이 크다.
console.log(1 < 2); // true 오른쪽이 크다.
console.log(1 >= 2); // false 왼쪽이 크거나 같다.
console.log(1 <= 2); // true 오른쪽이 크거나 같다.
// 문자열에도 비교 연산자 사용 가능. 내림차순 값이 크다.
console.log('강아지' > '냐옹이'); // false
// 논리 부정 연산자(!)
// 값을 반대로 바꿈
console.log(!true); // false
console.log(!false); // true
</script>
</body>
</html>
자료형 검사 : 자료형을 확인 할 때 typeof 연산자 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
자료형 검사 : 자료형을 확인할 때 typeof 연산자 이용
*/
let num = 10;
console.log(num);
num='하이';
// typeof 연산자 사용 : typeof(자료)
console.log(typeof ('안녕하세요')); // string
console.log(typeof (100)); // number
console.log(typeof (true)); // boolean
// 괄호가 없어도 됨 : typeof연산자라서 가능
console.log(typeof '안녕하세요') // string
console.log(typeof 100) // number
console.log(typeof true) // boolean
console.log(typeof "안녕하세요" === "string"); // true '안녕하세요'의 자료형이 string
console.log(typeof ("안녕하세요") === "string"); // true '안녕하세요'의 자료형이 string
console.log(typeof ("안녕하세요" === "string")); // boolean '안녕하세요' === 'string'의 결과값은 false. 즉 boolean
// 자바 스크립트에서는 변수에 함수를 할당하는 것이 가능
// 즉, 함수도 하나의 자료형임
let fun = function () {
console.log('hello');
}
fun();
console.log(typeof fun); // function
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/* undefined 자료형 */
'use strict'; // 엄격 모드
// 상수와 변수로 선언하지 않은 식별자의 자료형은 undefined
console.log(typeof(a)); // undefined
// 변수를 선언하면서 값을 지정하지 않은 경우 식별자의 자료형은 undefined
// 상수는 선언할 때 반드시 값을 지정해야 하므로 값이 없는 상수는 존재하지 않음
let b;
console.log(typeof (b)); // undefined
c = 100;
console.log(typeof(c));
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
변수 : 데이터를 저장하는 장소
* 식별자
변수명은 반드시 식별자의 일반 문법을 준수해야 함
1) 유니코드 문자, 숫자, _(언더바), $ 문자로 구성
2) 유니코드 문자를 사용할 수 있으나 가급적 영문자만 사용
3) 숫자는 첫번째 문자가 될 수 없음
4) $ 문자로 시작하는 이름은 보통 도구나 라이브러리에서 사용하기 떄문에 가급ㅈ거 사용하지 말것
자바스크립트는 카멜법을 사용
*/
var num = 10; // var : 변수 선언을 의미
var str = 'javascript'
var temp = true;
document.write(num + '<br>' + str + '<br>' + temp + '<br><br>')
// 여러 개의 변수를 선언할 경우 다음과 같은 방법으로 선언 가능
var num, str, temp;
num = 20;
str = 'ECMascript'
temp = false;
document.write('$(num)<br> $(str)<br> ${temp}<br><br>')
var num =30, str='jquery', temp = true;
</script>
</head>
<body>
</body>
</html>
var를 이용한 변수 선언의 문제점
- 기존의 자바스크립트에서는 var를 이용해 변수를 선언
- 그러나 var로 변수를 선언하는 것은 몇 가지 문제점이 있어서 모던 자바스크립트 개발에서는 거의 이용되지 않음
- 그 문제점 1) 변수를 덮어 쓸 수 있다는 점과 2) 다시 선언 (재선언) 할 수 있다는 점
- var로 선언한 변수를 덮어쓰거나 재선언하는 예
var val1 = 'var 변수'
console.log(val1)
// var 변수는 덮어쓰기 가능
val1= 'var 변수 덮어 쓰기';
console.log(val1)
// var 변수는 재선언 가능
var var1 = 'var 변수를 재선언'
console.log(val1)
- 덮어쓰기 가능
- 한 번 정의한 변수에 다른 값을 대입할 수도 있음
- 덮어 쓰고 싶을 때도 많지만 프로그램을 작성하다 보면 덮어 쓰고 싶지 않을 때도 많기 때문에 무조건 덮어 쓰는 것은 좋지 않음
- 재선언 가능
- 완전히 같은 변수명을 여러 위치에서 변수를 정의할 수 있음
- 프로그램 실행 순서에 따라 어느 변수가 사용되는지 해석하기 어려우므로 재선언은 기본적으로 안되는 편이 좋음
- 변수 선언에 var만 사용하는 경우 프로젝트 규모가 커짐에 따라 의도치 않은 시점에 변수를 덮어 쓰거나 재선언하는 등의 문제가 발생
- 그래서 ES2015에서는 새로운 변수 선언 방법으로 const와 let이 추가
- let을 이용한 변수 선언
- let로는 재선언 할 수 없음
- 단, let은 변수를 덮어 쓸 수는 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let val2 = 'let 변수'
console.log(val2)
val2 = 'let 변수 덮어 쓰기'
console.log(val2)
// 재선언 실행
let val3 = 'let 변수'
console.log(val3)
// let은 재선언 불가능
let val3 = 'let 변수 재선언' // 에러
// let.html:18 Uncaught SyntaxError: Identifier 'val3' has already been declared
// 이미 선언되어 재선언 할 수 없다는 메시지
// 이렇게 let은 var를 이용했을 때 문제가 되었던 재선언을 개선한 변수 정의 방법
// 덮어 쓰기를 허가만 할 변수는 let을 이용해야 함
</script>
</head>
<body>
</body>
</html>
- const를 이용한 변수 선언
- const는 재선언, 덮어 쓰기가 모두 불가능한 가장 엄격한 변수 선언 방법
- constant (상수)라는 의미에서 이런 이름을 사용
- 다음은 const로 정의한 변수를 덮어 쓰려고 할 때의 예
- const를 이용한 변수 선언은 덮어 쓰기를 사전에 감지해서 알려주기 때문에 '실수로 덮어쓰는' 사태를 피할 수 있음
- 물론 let과 마찬가지로 재선언을 해도 에러가 발생
- 그러나 변수 종류에 따라 const로 정의해도 변수값을 변경할 수 있는 경우가 있으므로 주의
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const val1 = 'const 변수'
console.log(val1)
// const 변수를 덮어 쓰기 불가능
val1 = 'const 변수 덮어 쓰기'
// Uncaught TypeError: Assignment to constant variable.
/*
const
*/
</script>
</head>
<body>
</body>
</html>
- const로 정의한 변수를 변경할 수 있는 예
- 문자열이나 수치 등 프리미티브 타입 primitive type 종류의 데이터는 const를 이용해 정의한 경우 덮어쓰기 가능
- 하지만 객체나 배열 등 오브젝트 타입 object type 이라 불리는 데이터들은 const로 정의해도 도중에 값을 변경 가능
- 프리미티브 타입 primitive type
- boolean, number, String, undefined, null, Symbol
- 오브젝트 타입
- 객체, 배열, 함수 등 프리미티브 타입 이외의 것
- const를 이용해 정의한 객체의 속성값을 변경, 추가하는 예
- 객체 정의
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const obj1 ={
name: '길동',
age: 24
}
console.log(obj1)
// 속성값 변경
obj1.name = 'tom';
console.log(obj1)
// 속성 추가
obj1.address = 'daegu'
console.log(obj1)
// address : 'daegu', age:24, name:'tom'
// const로 정의해도 객체 내용은 자유롭게 변경할 수 있음
// 즉, 객체를 정의할 때는 기본적으로 const를 이용
// 재할당은 에러가 남
// obj1 = {
// name: '길동',
// age: 24
// }
// const를 이용해 정의한 배열 값을 변경, 추가 하는 예
// 배열 정의
const arr1 = ['dog', 'cat']
console.log(arr1);
// 값 변경
arr1[0] = 'bird'
console.log(arr1)
// 값 추가
arr1.push('monkey')
console.log(arr1)
// 배열도 const를 이용해 정의했어도 값은 자유롭게 변경할 수 있음
// 따라서 배열 역시 기본적으로 const를 이용해 정의
</script>
</head>
<body>
</body>
</html>
숫자 자료형으로 변환하기
다른 자료형을 숫자 자료형으로 변환할 때는 Number() 함수를 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
숫자 자료형으로 변환하기
다른 자료형을 숫자 자료형으로 변환할 때는 Number() 함수를 사용
*/
// prompt로 입력을 받으면 기본형이 문자열
const rawInput = prompt('inch 단위의 숫자를 입력해주세요.'); // 숫자를 입력
console.log(typeof rawInput); // string
// 입력받은 데이터를 숫자형으로 변경하고 cm 단위로 변경
const inch = Number(rawInput)
console.log(typeof inch) // Number
const cm = inch * 2.54;
// 출력
alert(inch + 'inch는 ' + cm + 'cm 입니다.');
alert(`${inch}inch는 ${cm}cm 입니다.`)
</script>
</head>
<body>
</body>
</html>
- 연습문제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const rawInput = prompt('cm 단위의 숫자를 입력해주세요.')
const cm = Number(rawInput)
const inch = cm / 2.54
alert(`${cm}cm는 ${inch}inch 입니다.`)
</script>
</head>
<body>
</body>
</html>
- 자료형변환
- Boolean으로 Number을 형변환 시 0이 아니면 모두 True가 나온다
문자열을 불린으로 형변환. 빈 문자열은 false, 나머지는 true
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 자료형 변환
*/
var number = 100;
console.log(typeof(number)) // number
number = String(number); // 숫자 자료형을 문자 자료형으로 변환
console.log(typeof(number)) // string
console.log(number) // 100
// 불 자료형으로 변환하기 : Boolean() 함수 사용
var number = 200; // var의 경우에는 중복 선언이 가능하다. 이전 것이 무효화 된다
console.log(typeof(number)) // number
console.log(number) // 200
number = Boolean(number)
console.log(typeof(number)) // boolean
console.log(number); // true
let num = 0;
console.log(typeof(num)) // number
console.log(num) // 0
num = Boolean(num);
console.log(typeof(num)) // boolean
console.log(num) // false. 0은 false로 변환
// 문자열을 불린으로 형변환. 빈 문자열은 false, 나머지는 true
let string2 = 'hello'
console.log(typeof(string2)) // string
string2 = Boolean(string2)
console.log(typeof(string2)) // boolean
console.log(string2) // true
let string3 = '';
console.log(typeof(string3)) // string
string3 = Boolean(string3);
console.log(typeof(string3)) // boolean
console.log(string3) // false
</script>
</head>
<body>
</body>
</html>
공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.
부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.
읽어주셔서 감사합니다 :)
