조건문 자바스크립트에서 조건문은 조건에 따라 다른 코드를 실행하는데 사용됩니다. 조건문은 if, else if, else 키워드를 사용하여 구성됩니다. if문 if (조건식) { 조건식의 결과가 참일 때 실행하고자 하는 명령문; } if ~ else문 if (조건식) { 조건식이 참일 때 실행될 문장 } else if (조건식) { 첫번째 조건식이 거짓이고 현재의 조건이 참인 경우 실행 될 문장 } else { 조건식이 거짓일 때 실행 될 문장 } let num = prompt("숫자를 입력 하세요 : ", ""); if(num >= 0) { document.write("" + num + "은 양수 입니다." + ""); } else { document.write("" + num + "은 음수 입니다."..
산술 연산자 수학 연산을 수행하는 연산 let a = 2; let b = 3; console.log(a + b); console.log(a - b); console.log(a * b); console.log(a / b); // 몫을 구하려면 parseInt 해줘야 함. console.log(a % b); console.log(a ** b); // 거듭 제곱, 2^3 console.log(--a); // 전위 단항 연산자, 1 console.log(b++); // 후위 단항 연산자, 3 대입 연산자 대입연산자와 복합 대입 연산자가 있음 let x = 10; let y = 20; // x = x + 10; : x에 10을 더해서 x에 다시 대입 x += 10; // 복합 대입 연산자 console.log(x..
주석 // 한 줄 주석 /* 여러 줄 주석 이 줄은 실행되지 않습니다. */ 스타일 가이드 소스 파일의 이름은 알파벳 소문자, 하이픈(-), 밑줄(_)으로만 작성 소스파일의 확장자명은 .js 소스파일의 인코딩은 UTF-8 코드는 보기 좋게 줄 바꿈을 합니다. 세미콜론으로 문장을 구분 합니다. 식별자는 첫글자는 영문자, 언더스코어, $시작 해야 합니다. 단어와 단어를 연결하여 식별자를 작성하는 경우 하이픈이나 언더바 사용, 카멜표기법으로 표기 가능 예약어는 식별자로 사용 불가 변수와 상수 변수(Variable)와 상수(Constant)는 데이터를 저장하기 위한 역할을 합니다. 변수와 상수는 선언, 할당, 참조 등의 동작을 통해 사용됩니다. 변수의 선언은 var, const, let 키워드로 할 수 있으며,..
Node.js 설치 원래 자바스크립트는 클라이언트 즉, 브라우저에서 동작하는 언어 입니다. Node.js는 크롬V8 엔진을 이용하여 브라우저에서 자바스크립트가 동작하듯이 서버에서 자바스크립트를 동작할 수 있도록 해주는 런타임 환경 입니다. 버전은 가급적 최신 버전 보다는 안정적인 것으로 ...(ㅎㅎ) https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 다운로드 받고 이리저리 Next 눌러가며 설치를 완료합니다. 완료가 되면 cmd에서 node -v를 눌러 버전을 확인합니다. 정상적으로 나오면 성공! 참고로 저는 18.15.0으로 설치하였습니다. VS Co..
부트스트랩? Twitter에서 개발한 HTML, CSS, JavaScript로 이루어진 오픈 소스 프레임워크 입니다. 웹 페이지 레이아웃, 버튼, 폼, 타이포그래피 등의 다양한 UI 컴포넌트를 쉽게 구현할 수 있습니다. 반응형 웹 디자인을 지원하므로 모바일 기기에서도 웹 페이지가 적절하게 표시됩니다. 오픈 소스로 배포되어 있으며, 무료로 사용할 수 있습니다. 부트스트랩을 이용하면 빠르고 쉽게 깔끔하고 모던한 UI를 만들 수 있습니다. 특징 반응형 웹 디자인 지원 : 모바일 기기에서도 적절하게 웹 페이지가 표시되도록 반응형 웹 디자인을 지원합니다. 다양한 UI 컴포넌트 : 레이아웃, 버튼, 폼, 타이포그래피 등 다양한 UI 컴포넌트를 제공합니다. 쉬운 사용성 : 문서와 예제 코드가 풍부하게 제공되어, 쉽게..
반응형 웹 디자인 다양한 크기의 디바이스에서 일관된 사용자 경험을 제공하기 위한 디자인 방법론 입니다. 그리드 레이아웃, 플렉스 박스, 미디어 쿼리 등의 CSS 기술을 사용합니다. 미디어 쿼리 사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하는 기술 뷰포트 모바일 기기에서 웹 페이지를 볼 때, 실제 화면에 보이는 영역을 말합니다. 모바일 기기에서는 뷰포트가 다양한 크기로 나타날 수 있으므로, 웹 페이지가 다양한 뷰포트 크기에 대응할 수 있도록 반응형 웹 디자인을 구현해야 합니다. 브라우저에서는 기본적으로 뷰포트가 설정되어 있습니다. 그러나 브라우저마다 뷰포트의 크기가 다를 수 있으므로, 뷰포트를 설정하는 것이 중요합니다. ✅ VS Code에서 만드는 기본 설정이자 가장 많이..
그리드 레이아웃 웹 페이지에서 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 스타일 입니다. 2차원 방식이란 가로(row)와 세로(column)를 같이 사용해 레이아웃을 설계하는 방식 입니다. 그리드 박스는 '그리드 컨테이너'와 '그리드 항목'으로 구성 됩니다. 반응형 디자인에도 유용하게 사용될 수 있으며, 미디어 쿼리와 함께 사용하여 화면의 크기에 따라 격자의 크기와 요소들의 배치를 변경할 수 있습니다. 구성 요소 행(row) : 가로줄 열(column) : 세로줄 그리드 셀 : 행과 열이 만나 이루어지는 하나의 공간 그리드 갭 : 그리드 셀과 그리드 셀 사이의 간격 그리드 아이템 : 그리드 셀 안에서 표현되는 컨텐츠 그리드 컨테이너 : 최상위 부모 요소 기본 속성 display 속성 그리드 레이..
해당 시리즈는 제가 책(쉽게 배우는 자료구조 with 자바)을 읽고 해당 내용을 정리하기 위하여 작성되었습니다. 어렵다고 느껴지는 자료구조를 최대한 쉽게 설명하고자 풀어쓰는 점 참조해주시고, 같이 자료구조/알고리즘에 대해 공부하는 시간이 되었으면 좋겠습니다. 감사합니다. 자료구조와 재귀 재귀? 재귀는 성격은 같고 크기만 작은 나를 찾아 큰 나와 작은 나가 연결된 관계를 드러내는 것 입니다. 단어가 생소하여 무슨 의미인지 잘 와닿지 않을 수 있는데요. (제가 그랬습니다.) 가장 간단한 예인 팩토리얼(!)로 설명 드리겠습니다. 팩토리얼은 1부터 n까지 곱하는 것으로 n! = 1 * 2 * 3 * ... * (n - 1) * n 입니다. 여기서 맨 끝에 있는 n을 제외하면 1 * 2 * 3 * ... * (n..
해당 시리즈는 제가 책(쉽게 배우는 자료구조 with 자바)을 읽고 해당 내용을 정리하기 위하여 작성되었습니다. 어렵다고 느껴지는 자료구조를 최대한 쉽게 설명하고자 풀어쓰는 점 참조해주시고, 같이 자료구조/알고리즘에 대해 공부하는 시간이 되었으면 좋겠습니다. 감사합니다. 자료구조? 데이터를 저장, 조직, 관리하는 방법 서점이나 도서관을 가면 어떻게 내가 원하는 책을 바로 찾을 수 있을까요? 책이 10권 이내라면 아무 기준없이 쌓아둬도 내가 원하는 책은 쉽게 찾을 수 있을 것입니다. 허나 책이 100권, 1000권, 1만권이 넘어간다면? 이때부터는 종류별로 분류가 필요합니다. 이처럼 책(자료)을 효율적으로 관리하는 방법을 '자료구조'라고 합니다. 이러한 자료구조는 일상생활에서 쉽게 찾아볼 수 있습니다. 문..
(2023.03.25) 추가 기존에 작성한 코드는 반응형을 우겨넣은(?) 형태라 굉장히 지저분하고, html 레이아웃도 상속을 고려하지 않아서 가독성이 매우 떨어지는 단점이 있었습니다. 수정하는 것보다 뜯어 고쳐서 새롭게 다시 해보자! 라는 생각이 들어서 처음부터 벽돌을 쌓는 기분으로 했는데, 이걸 계기로 리팩토링의 매력도 알게되었습니다. 😁 완성해놓고 나몰라라 끝이 아닌 계속해서 좋은 코드는 무엇일까 고민하는 자세를 가지고 임해야겠습니다. 무엇보다 css 코드가 반으로 줄어든게 제일 만족스럽습니다. (ㅋㅋ) 수정된 코드는 [바로가기]를 눌러주세요. 안녕하세요!!! 오늘은 그간 배운 것을 활용하여 클론 페이지를 만들어 보았습니다. 어떤 사이트를 해볼까 고민 많이 했는데 최근 AI로 급부상중인 Micros..