본문 바로가기

분류 전체보기97

[Javascript] 연산자 연산자 ① 산술 연산자 ② 증감 연산자 ③ 대입 연산자 ④ 비교 연산자 ⑤ 논리 연산자 연산자 프로그래밍에서 '+', '-'와 같은 사칙 연산이나, '>', ' 2023. 6. 12.
[Javascript] 자료형과 형변환 목차 1. 자료형 (Data Type) ① Number (숫자형) ② String (문자형) ③ Boolean (논리형) ④ null / undefined 2. 형변환 (Type Casting) ① 묵시적 형변환 ② 명시적 형변환 0. 개요 let num = 20; console.log(typeof num); //"number" num = "Hello"; console.log(typeof num); //"string" //typeof 연산자는 피연산자의 자료형을 나타내는 문자열을 return하는 연산자이다. //처음에 변수 num의 자료형이 number, 숫자형으로 나왔고 //이후 num의 값을 "Hello"로 바꿨더니 해당 변수의 자료형이 string, 문자형으로 //변경된 것을 확인할 수 있다. 상단.. 2023. 6. 4.
[Javascript] 변수, 상수 1. 변수 (Variable) 프로그래밍에서 변수란 "값이나 데이터를 담을 수 있는 공간"을 말한다. 변수는 사용자의 이름이나 나이, 주소 등의 정보를 저장하기 위한 목적으로 사용되며 변수에는 하나의 값만 저장할 수 있지만 대신 저장한 값을 바꾸는 것이 가능하다. (변수에 저장된 값을 바꾼다면 이전에 저장해둔 값은 사라진다.) 자바 스크립트에서 변수를 선언할 때 사용하는 키워드로는 var과 let이 존재한다. 단, var은 현재로써는 잘 사용되지 않는 변수 선언 방식이기 때문에 대부분 let 키워드를 통해서 변수를 선언한다. (나중에 var로 변수를 선언하는 방식이 잘 사용되지 않는 이유를 정리해서 올려보도록 하겠다.) //변수의 선언과 저장한 값 변경 let Sample = 15; console.log.. 2023. 5. 26.
MySQL Query 문 정리 1. Database ① DB 생성 CREATE DATABASE (DB이름); #(DB이름)이라는 데이터베이스를 하나 생성한다. ② 전체 DB 조회 SHOW DATABASES; #전체 데이터베이스를 조회한다. ③ DB 사용 USE (DB명); #(DB명)이라는 데이터베이스를 사용, 선택한다. ④ DB 삭제 DROP DATABASE (DB명); #(DB명)이라는 이름의 데이터베이스를 삭제한다. #해당 DB가 없으면 에러 발생함. DROP DATABASE IF EXISTS (DB명); #IF EXISTS 절을 통해 삭제하려는 DB가 존재하지 않을 때 #발생하는 에러를 방지할 수 있다. #Exist => 존재하다, 실존하다 2. Table ① Table 생성 CREATE TABLE article (id INT.. 2023. 5. 20.
[Javascript] 자바 스크립트 개요 1. 자바 스크립트란? ① 자바스크립트의 정의 Javascript, 자바 스크립트란 1995년 Netscape 사의 Brendan Eich에 의해 만들어진 프로그래밍 언어이다. HTML이 웹 페이지의 뼈대를 만들고, CSS로 이를 꾸며준다고 하면 Javascript는 이렇게 만든 웹 페이지에 동적인 기능, Interaction을 부여해주는 언어이다. 자바 스크립트는 객체 기반의 스크립트 언어로, 해당 언어로 작성한 프로그램, 소스코드를 '스크립트(Script)'라고 부른다. Javascript는 그 이름 상 다른 프로그래밍 언어인 Java와 같거나 혹은 비슷한 언어라고 착각할 수도 있다. 그렇지만 이 둘은 전혀 다른 언어이다. 이 두 언어 간의 관계를 비유해보자면 "사자 != 바다사자"의 관계를 생각해보.. 2023. 5. 19.
[HTML] <form> 태그 0. 개요 1. 태그의 정의 2. 태그의 속성 ① name 속성 ② target 속성 ③ action 속성 ④ method 속성 (1). GET 방식 (2). POST 방식 3. 4. 마치며 0. 개요 위의 이미지는 통계에 따른 HTML 각 태그의 사용률 순위를 나타낸 이미지이다. 이번 게시글에서 다루는 것은 현재 57.3%의 사용률을 가진 태그에 관한 것이다. 요소의 예제에 , 와 같은 입력 요소를 같이 사용했기 때문에 해당 태그에 대해 잘 모르겠다면 하단의 링크를 참고하길 바란다. (, , 세 가지의 입력 요소에 대해 정리해 둔 게시글이다.) 내용적으로도 이전 게시글에서 다룬 입력 요소와 연관됐기 때문에 어느 정도 도움은 될 것이라고 생각한다. HTML 삽입 미리보기할 수 없는 소스 1. 태그의 정의.. 2023. 5. 14.
[HTML] 입력 요소 3가지 (<input>, <select>, <textarea>) 1. ① type 속성 ② name 속성 ③ value 속성 2. 3. 1. 요소란 사용자로부터 값을 입력받을 수 있는 입력창을 만드는 요소이다. 해당 요소는 기본적으로 인라인 블록을 만드는 인라인 요소이며, 별도의 닫는 태그가 없는 단일 태그이다. 요소는 'type' 속성의 값에 따라 입력 요소의 형태를 다르게 할 수 있으며 추가적으로 'name' 속성을 통해서 각 입력 요소에 대해 식별자를 추가할 수 있다. ① type 속성 type 속성은 요소의 핵심적인 속성으로 해당 속성의 값에 따라 입력창의 형태와 입력할 값의 유형이 달라지고 거기에 맞춰서 추가로 적용할 수 있는 속성의 종류도 조금씩 차이가 생긴다. 해당 속성의 기본 값은 'text'로 아래의 예제를 보면 '이름' Part에 별도로 type을 .. 2023. 5. 5.
[HTML] 시맨틱 태그 (Semantic Tag) 목차 시맨틱 태그 (Semantic Tag) ① 시맨틱 태그의 정의 ② 시맨틱 태그 종류 (1). (2). (3). (4). (5). (6). (7). 시맨틱 태그 (Semantic Tag) ① 시맨틱 태그의 정의 "Semantic"은 "의미의, 의미론적인"이라는 뜻을 가진 단어이다. 이번에 다루는 시맨틱 태그를 그대로 해석해 보자면, "의미를 가진 태그"라고 할 수 있다. 좀 더 쉽게 말하자면 앞에서 배운 와 같은 태그에 별도의 의미를 부여한 것이다. 상단의 이미지에서 빨간색 테두리로 감싼 , , 가 대표적인 시맨틱 태그이다. 시맨틱 태그는 HTML5에서 처음 등장하였으며, 각 태그의 명칭으로 사용된 단어의 뜻을 생각해 보면 는 웹 페이지의 상단부, 는 웹 페이지의 꼬리, 하단부라는 것을 쉽게 알 수 .. 2023. 4. 27.
[CSS] 박스 모델 (Box Model) 1. 박스 모델의 정의 (Box Model) 2. 박스모델 영역 별 속성 ① content 속성 ② padding 속성 ③ border 속성 ④ margin 속성 ⑤ box-sizing 속성 3. 마치며 1. 박스 모델의 정의 (Box Model) Box란 HTML 문서가 랜더링될 때 각 요소가 사각형 형태로 차지하고 있는 영역을 말한다. 위의 소스 코드를 복사해서, html 문서로 만들고 이를 웹 브라우저에서 열어보자. 이제 여기서 '개발자 도구'를 한 번 열어서 요소를 클릭해보자. 그러면 아래와 같은 형태로 해당 요소에 하이라이트가 들어온 것을 확인할 수 있다. 태그는 블록 레벨 요소를 만드는 블록 태그이기 때문에 웹 브라우저의 한 영역을 사격형의 형태로 전부 차지하고 있다. 여기서 HTML 요소가 .. 2023. 4. 5.

티스토리툴바