🌱 오늘의 주제 : HTML과 자바스크립트(Javascript) 🌱 DOM(Document Object Model)이란? W3C의 표준 객체 모델 브라우저가 HTML 웹 문서를 읽어들인 후 Tree 구조로 구성하여 메모리에 적재한다. DOM Tree를 볼 수 있는 사이트아래 HTML 문서를 복사해서 붙여넣기 Hello World! 내 이름은 OO이다. 내 이름은 ㅁㅁ이다. 마론달로 이동 🌱 자바스크립트로 각 Node 접근해보기 선택자(Selector)로 Node를 가져온다. 선택자의 종류 태그 id class 태그의 name 속성 예) 1) id로 노드 가져오기 id는 문서 안에서 하나만 사용한다. let p1 = document.getElementById('p1'); console.log(p1); 결과..
🌱 오늘의 주제 : 자바스크립트(Javascript)란? 🌱 자바스크립트(JavaScript) Java와는 완전 다른 언어이다. HTML을 동적으로 움직이게 하는 역할 서버와 서로 데이터를 전송하는 역할 일반적으로 클라이언트 언어로 사용하지만, 서버 언어로 사용되기도 한다. 🌱 자바스크립트 작성 방법 1) HTML 태그 안에서 사용 태그 안에 자바스크립트 문법으로 코드를 작성할 수 있다. 2) 외부 파일로 작성 확장자는 .js로 사용한다.
🌱 오늘의 주제 : CSS(Cascading Style Sheets)란? 🌱 CSS(Cascading Style Sheets)란? CSS(Cascading Style Sheet)는 HTML 문서의 스타일이나 레이아웃 등 디자인 서식을 작성하는 언어이다. 🌱 CSS 특성 css를 활용하면 문서의 내용과 디자인 서식이 분리되어 문서가 깔끔하고, 수정이 용이하다. HTML 처럼 텍스트 에디터에서 작성 가능 확장명은 .css 이다. css 문서의 파일 이름은 알파벳, 숫자, 하이픈(-), 밑줄(_)만을 사용해야 한다. 🌱 CSS 기본 문법 선택자 { 속성: 속성값; } 형식으로 사용 선택자(Selector)의 종류 전체: * tag 명 id 명 class 명 주석: /* 주석 내용 */ h2 태그를 꾸미는 예제..
🌱 오늘의 주제 : HTML 란? 🌱 HTML(HyperText Markup Language) 웹 표준을 주관하는 W3C에서 발표한 프로그래밍 언어로 웹 문서를 제작하는데 사용된다. 🌱 HTML 특성 HTML 문서는 태그(Tag)라고 부르는 마크업(Markup) 요소를 이용하여 문서를 구현함 메모장, 일반 에디터 등 문서 편집 프로그램으로 작성 가능함 HTML 문서의 확장명은 .htm 또는 .html 이다. 대부분 .html로 쓴다. HTML로 제작된 문서는 웹 브라우저가 해석하여 보여지게 된다. 🌱 HTML의 기본 구조 주석: 본문 🌱body 태그에서 자주 사용하는 태그 목록
🌱 오늘의 주제 : Web의 동작 방식 🌱 Web의 동작 방식 클라이언트(Client) 정보를 요청하는 곳 HTTP 프로토콜 규약에 따른 요청(Request) 문서로 정보를 요청한다. 서버(Server) 정보를 주는 곳 요청 받은 Request 문서의 내용을 기반으로 HTTP 프로토콜 규약에 따른 응답(Response) 문서를 돌려준다. Request의 구조 HTTP 규약에 따른 Request 문서의 구조 Request의 구조 HTTP 규약에 따른 Request 문서의 구조 🌱 다양한 클라이언트의 요청 클라이언트(Client)의 종류 웹 브라우저 안드로이드 Application IOS Application 🌱 서버와 데이터베이스의 통신 🌱서버의 데이터 가공을 위한 다양한 통신
🌱 오늘의 주제 : 테이블 JOIN 🌱 테이블 JOIN key값이 연결되어 있는 N개의 테이블의 데이터를 합쳐서 한번에 가져오는 문법 JOIN 방식은 LEFT JOIN, RIGHT JOIN, INNER JOIN 3가지가 있다. JOIN 방식을 명시하지 않으면 기본적으로 INNER JOIN이 된다. 조인 문법 예제 SELECT 테이블명1.*, 테이블명2.* FROM 테이블명1 JOIN 테이블명2 ON 테이블명1.id = 테이블명2.Id [where 조건] 🌱 INNER JOIN key값이 같은 데이터가 조인되는 모든 테이블에 존재할 경우에만 두 테이블의 결과를 가져온다. 즉 모든 테이블의 교집합 🌱 LEFT JOIN(OUTER) 맨 좌측 테이블은 전체가 출력되며, 맨 좌측 테이블을 제외한 테이블들은 데이터..
🌱 오늘의 주제 : SELECT문과 다양한 문법 (MySQL) 🌱 가져올 데이터의 개수 제한하기 - LIMIT 처음부터 50개만 가져오기 SELECT * FROM 테이블명 [WHERE 조건] LIMIT 50 100개 이후부터(101번째 부터) 50개 가져오기 SELECT * FROM 테이블명 [WHERE 조건] LIMIT 100, 50 🌱 특정 문자가 들어간 데이터 찾기 - LIKE %로 시작되는 경우 index 조회가 아닌 Full scan이 되므로 사용하지 않는게 좋다. A%로 조회하면 A로 시작하는 데이터로 범위가 좁혀지므로 range scan이 된다. 이름이 A로 시작하는 데이터 찾기 SELECT * FROM 테이블명 WHERE `name` LIKE `A%` 이름에 A가 들어가는 데이터 찾기 - ..
🌱 오늘의 주제 : Query (MySQL) 🌱 INSERT 한 행 추가 INSERT INTO 테이블명(컬럼명1, 컬럼명2, 컬럼명3, ...) VALUE (값1, 값2, 값3, ...) 또는 INSERT INTO 테이블명(컬럼명1, 컬럼명2, 컬럼명3, ...) VALUES (값1, 값2, 값3, ...) 한번에 여러행 추가 INSERT INTO 테이블명(컬럼명1, 컬럼명2, 컬럼명3, ...) VALUES (값1, 값2, 값3, ...), (값1, 값2, 값3, ...), (값1, 값2, 값3, ...) sample INSERT INTO `user` ( /*`id`, auto increment이므로 추가하지 않는다.*/ `name`, `yyyymmdd`, `hobby`, `introduce`, /* ..
🌱 오늘의 주제 : MySQL Workbench 프로그램 사용법 🌱 Database 접속 로컬 서버에 세팅된 127.0.0.1:3306 서버에 접속한다. 🌱 DB 선택 좌측 Navigator에 스키마가 정의 되어 있는데 그 중 sample DB인 sakila를 선택한다.(더블 클릭) 테이블의 목록이 보인다. 🌱 테이블 스키마(설계 정보) 조회 film 테이블의 스키마(Schema)를 조회해보자. 아래 쿼리를 블록 잡고 번개 모양 또는 Ctrl + Enter desc `film`; 🌱 테이블 데이터 조회 film 테이블의 내용을 조회해보자. 아래 쿼리를 블록 잡고 번개 모양 또는 Ctrl + Enter select * from `film`;
🌱 오늘의 주제 : Database - 테이블 생성/삭제/수정 (MySQL) 🌱 자주 쓰는 MySQL 자료형(Data Type) 종류 🌱 DB 생성하기 쿼리문 CREATE database 데이터베이스명; workbench 🌱 테이블 생성하기 테이블의 스키마를 정의한다. CREATE TABLE `lectureList` ( `id` int NOT NULL AUTO_INCREMENT primary key, `lectureId` int NOT NULL, `order` int NULL DEFAULT 0, `subject` varchar(255) NOT NULL, `userId` int NOT NULL, `author` char(20) NOT NULL, `md` text, /* NULL 가능 */ `onlyMate..
