WEB(13)
-
[JavaScript] 자바스크립트 연산자 우선순위
이번 포스팅은 자바스크립트의 연산자 우선순위에 대해 알아본다. 연산자의 우선순위?연산자가 여러 개 섞여 있을 때 어떤 연산을 먼저 수행할지를 결정하는 규칙을 말한다. 수학에서 곱셈/나눗셈이 덧셈/뺄셈보다 연산의 우선순위가 빠른 것처럼프로그래밍 언어에서의 연산자도 그러한 규칙을 정해놓고 있다. 연산자 우선순위우선순위연산자설명예시높음()괄호 (가장 먼저 계산됨)(2 + 3) * 4 → 20 ++, --증가/감소 연산자x++, --y!논리 NOT!true → false*, /, %곱하기, 나누기, 나머지4 * 5 / 2 → 10+, -더하기, 빼기5 + 3 → 8, =크기 비교5 > 2 → true==, !=, ===, !==값/타입 비교3 === '3' → false&&논리 ANDtrue && false ..
2025.04.09 -
[JavaScript] 자바스크립트를 기초 문법 배우기 (연산자)
이번 포스팅에서는 연산자에 대해 배워본다. 연산자란?연산자는 프로그래밍에서 값을 계산하거나 조작할 때 사용하는 기호 또는 키워드를 말한다.쉬운 예를 들자면 산수/수학의 덧셈, 뺄셈, 곱셈, 나눗셈 같은 것을 할 수 있도록 해주는 키워드,즉 + - * / 이런 기호들을 말한다. 연산자는 종류가 많지만 자주 사용되는 연산자들부터 익혀보자. 산술 연산자숫자를 계산할 때 사용하는 연산자를 산술 연산자라고 한다.연산자설명예시결과+덧셈5 + 27-뺄셈5 - 23*곱셈5 * 210/나눗셈5 / 22.5%나머지5 % 21**거듭제곱(ES6+)2 ** 38 대입 연산자값을 변수에 할당(또는 저장)할 때 사용하는 연산자를 대입 연산자라고 한다.연산자설명예시결과=할당x = 5x는 5+=더해서 할당x += 2x = x + ..
2025.04.09 -
[JavaScript] 자바스크립트 기초 문법 배우기 (변수)
자바스크립트로 다양한 기능을 만들기 위해서는 기초 문법부터 정확히 익혀야 한다.이번 포스팅에서는 변수에 대해 배워본다. 변수란?: 데이터를 저장하기 위한 이름표.프로그래밍 언어에서 "변수"라는 것은 값을 저장해두는 상자 같은 것이라 생각하면 된다. 예를 들어, - 이름을 저장하는 변수 - 점수를 저장하는 변수 - 어떤 상태를 저장하는 변수등등이 되겠다. 변수 만들기 (변수 선언)JavaScript에서는 변수를 만들 때 var, let, const 중 하나를 사용한다.* var, let, const 를 변수 선언 키워드라고 말한다. 각 변수 키워드의 차이점은,키워드설명쉽게 말하면키워드설명참고var함수 단위로 작동. 같은 이름을 중복 선언해도 에러 안 남.변수명 중복 등 여러 문제로 사용을 지양하는 추세l..
2025.04.09 -
[HTML] 클라이언트 사이드 스크립트를 정의하는 <script> 태그를 배워보자
이번 포스팅은 작성한 파일을 웹브라우저에서 실행하고, 아무 텍스트를 넣고 출력해보자. 위 그림에서 볼 수 있듯이 "출력 결과"에 입력한 "script 태그 예제"라는 텍스트가 출력되는 것을 확인할 수 있다. button 태그에 onclick 속성값을 넣어서 버튼을 클릭했을 때 어떤 동작이 수행되도록 했는데,onclick 속성값에는 "printInput()" 이라는 값이 들어가 있다."printInput()" 이라는 값은 자바스크립트로 만든 함수의 이름이고, onclick="printInput()" 이라는 속성은 버튼을 클릭하면 "printInput()" 이라는 함수가 실행된다는 뜻이다. printInput() 함수 내부를 설명하면, const inputValue = document.getElementB..
2025.04.09 -
[HTML] CSS stylesheet를 연결해주는 <link> 태그를 배워보자
이번 포스팅은 태그에 대해 배워본다. link 태그가 무엇인가?TCP school 사이트를 통해 link 태그의 정의를 찾아봤다. (출처 : TCPSchool) 위 정의에서 확인할 수 있듯이 link 태그는 외부 소스와 link 태그가 적용된 문서와의 관계를 정의할 때 사용된다.관계를 정의한다는 건 단순히 외부 소스와 본 문서를 연결해준다는 뜻으로 이해하면 될 것 같다. 태그 자체는 빈 태그이고, 속성을 넣어 사용해야한다.그리고 태그는 h1태그 CSS 적용 p 태그 CSS 적용 CSS/* 전체 배경색 변경 */body { background-color: #f0f0f0; font-family: Arial, sans-serif; text-align: c..
2025.04.01 -
[HTML] 이미지를 삽입해주는 <img> 태그를 배워보자
이번 포스팅에서는 img 태그에 대해 배워본다. img 태그란?태그는 HTML문서 내에 이미지를 삽입할 수 있도록 해주는 태그다.아래 그림처럼 웹페이지에 사진을 넣을 수 있게 해준다. 기본 문법은 아래와 같다. TCP School 에서는 img 태그에 대해 아래와 같이 정의했다. 기본 문법과 정의를 살펴봤으니 실제로 어떻게 하는지 테스트해보자.vscode를 켜고 HTML 문서를 작성해본다.아래와 같이 index.html 파일에 코드를 쓰고 웹브라우저에서 실행해보자.img 태그 출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/img 웹브라우저에서 index.html 파일을 열어보면 아래처럼 출력될 것이다. 일단 이렇게 이미..
2025.03.30