본문 바로가기

전체보기111

DOM(Document Object Model) 이란? Document Object Model, DOM : 문서 객체 모델 브라우저는 HTML코드를 DOM은 객체형태 모델로서 HTML Element를 트리 구조(DOM Tree)로 저장하며, 특정 엘리먼트를 찾거나 조작하는 것을 쉽게 도와주는 메서드(다양한 DOM API)를 제공한다. DOM은 HTML, XML 문서의 프로그래밍 인터페이스이다. 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. 웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects로 구성된다. 예를 들어 document object는 document 자체를 의미하며.. 2020. 5. 27.
Front-end, Back-end Study Guide Front-end Developer Roadmap 2020 Back-end Developer Roadmap 로드맵 출처 kamranahmedse/developer-roadmap Roadmap to becoming a web developer in 2020. Contribute to kamranahmedse/developer-roadmap development by creating an account on GitHub. github.com 프론트엔드 로드맵 현업 개발자님의 설명 영상 2020. 5. 27.
자간, 행간, 어간 조절 자간 (글자 사이의 간격) 조절 : letter-spacing 다음과 같이 자간을 조절할 수 있다. letter-spacing: normal; letter-spacing: .2rem; letter-spacing: 1px; letter-spacing: -1px; 행간 (텍스트 줄의 간격) 조절 : line-height 다음과 같이 행간을 조절할 수 있다. line-height: normal; line-height: 3.5; line-height: 2em; line-height: 140%; line-height: 30px; 어간 (단어 사이의 간격) 조절 : word-spacing 다음과 같이 어간을 조절할 수 있다. word-spacing: normal; word-spacing: 1rem; word-spa.. 2020. 5. 25.
mix-blend-mode : 요소를 겹치는 효과 이미지 등의 요소가 겹치는 경우 중첩된 상태를 표시하는 방법에 대해 알아보고자 한다. 포토샵에서 사용하는 블렌드 모드와 유사한데, 이 효과를 css에서도 사용할 수 있다. 서로 다른 요소(ex.레이어)를 겹쳐서 색상에 대한 효과를 주고 싶을 때 믹스 블렌드 모드를 사용하면 좋겠다. /* Keyword values */ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode.. 2020. 5. 23.
[JS ES6] 변수와 선언 / 데이터 타입 변수의 타입 변수의 타입인 primitive, object에 따라 메모리의 저장 방식이 다르다. - primitive type : 값 자체가 메로리에 저장된다. - object type : 오브젝트가 가리키는 레퍼런스가 메모리에 저장된다. 데이터 타입 - Mutable data types : 변경이 가능한 데이터 타입으로 스스로 변경이 가능 (objects) - Immutable data types : 데이터 자체를 변경하지 못하는 데이터 타입 (Constants, premitive, frozen objects) 변수명 식별자(identifier)라고 불리우며, 다음과 같은 규칙을 따라 변수명을 작성한다. - 대소문자를 구분하기 때문에, 구분하지 않을 경우 서로 다른 변수가 된다. - 문자, 언더바( _.. 2020. 5. 21.
JavaScript란 JavaScript는 객체 기반의 스크립트 프로그래밍 언어이다. 표준화된 JavaScript는 ECMAScript(ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어)라고 한다. JavaScript는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js(브라우저 외부에서 가장 인기있는 크로스 플랫폼 JavaScript 런타임 환경)와 같이 서버 프로그래밍에도 사용되고 있다. 앞서 말했듯 주로 브라우저에서 사용되므로 개발자는 DOM을 통해 웹 페이지 컨텐츠를 조작하고, Ajax 및 IndexedDB로 데이터를 조작하며, 캔버스로 그래픽을 그리거나 다양한 API를 통해 브라우저를 실행하는 장치와 상호 작.. 2020. 5. 20.
자바스크립트의 탄생 배경 본 게시글에서는 개발자이자 유튜버인 드림코딩by엘리님의 강의를 통해 자바스크립의 탄생 배경에 대해 알아보고자 한다. 강의가 재미있고 유익하니, 함께 스터디 해보도록 하자. 본격적으로 자바스크립트를 배우기 앞서 전반적인 역사의 흐름을 통해 자바스크립트란 어떤 것인지 알아보도록 하자. 2020. 5. 20.
[Eclipse] 기본 브라우저 설정 이클립스에서 테스트를 위해 웹 브라우저를 실행할 상황이 있다. 연결 시 기본으로 할 웹 브라우저를 설정하는 방법을 알아보자. 1. Window → Preferences 2. General → Web Browser → External web browsers: 기본으로 할 브라우저 선택 → Apply and Close! 2020. 5. 15.
삼항연산자 if 문과 같은 코딩을 할 경우에 코딩 라인이 길어지기 마련인데, 상대적으로 짧게 표기할 수 있는 연산자가 바로 삼항연산자다. 표기 문법과 예문을 통해 사용방법을 알아보자. 삼항연산자 문법 : 조건문 ? 'a' : 'b'; → 조건문 : 참/거짓을 판단할 변수 → a : 참일 때 사용할 값 → b : 거짓일 때 사용할 값 삼항연산자 예문 : → pub : 체크를 (참/거짓) 하거나 안한다 → checked : 참이면 체크한다 → : 거짓이면 체크하지 않는다 아래 예문을 보면, 주석 처리된 if문의 라인 4줄을 삼항연산자를 통해 ${pub?'checket':''} 코드로 간단하게 표기한 것을 확인할 수 있다. 예문은 관리자 게시판 목록으로서 (forEach문, EL표기[${ }]) 체크박스에 해당하는 코드.. 2020. 5. 15.
Tiles 라이브러리 다운로드 / 레이아웃 템플릿에 적용 지난 글에서 간략히 tiles에 대해 알아봤는데, 이번엔 tiles 라이브러리를 다운받아 적용해보자. Include와 Tiles 웹 사이트를 제작할 때, 공통 영역은 수정이 용이하도록 분리해서 관리하도록 작업한다. 이를테면 수십 개의 페이지들에는 동일한 내용의 상단 영역과 푸터 등이 있다. 이러한 공통 영역은 별도 hyoni-k.tistory.com Apache Tiles 라이브러리 다운 : 1. Apache Tiles 사이트 접속한다. http://attic.apache.org/projects/tiles.html 2. 버전에 맞게 타일즈 버전을 잘 선택하여 다운 받는다. 3. 다운로드해 압축을 풀면 라이브러리가 많은데, optional 폴더를 제외한 모든 jar파일을 복사한다. 참고로 라이브러리란.. .. 2020. 5. 12.
Include와 Tiles 웹 사이트를 제작할 때, 공통 영역은 관리와 수정이 용이하도록 분리해서 작업한다. 이를테면 수십 개의 페이지들에는 동일한 내용의 상단 영역과 푸터 등이 있다. 이러한 공통 영역은 별도로 분리하여 관리하지 않는다면 특정 페이지에서 상단 메뉴를 수정하는 일이 있을 경우, 모든 페이지의 상단 메뉴를 수정하는 반복적이고 비효율적인 업무가 필요하다. 그렇기 때문에 분리해서 참조하도록 작업(모듈화) 해두고 관리하는 것이다. Include 페이지를 분리하고 참조하도록 할 때 include 태그를 사용한다. 와 함께 분리된 페이지를 현재 페이지에 포함시킬 수 있는 기능을 한다. 즉, 영역을 분리하고 분리한 jsp 파일들을 레이아웃 틀이 있는 템플릿으로 집중화하는 것이다. ▶ include 사용 예 (layout.jsp.. 2020. 5. 12.
[MySQL] 기본 문법, Oracle SQL과의 차이 - DataBase : 데이터가 실질적으로 적재되는 테이블들을 분류하는 상위 개념 - Table : 데이터가 실질적으로 저장되는 저장소 - Schema : 테이블에 적재될 데이터의 구조와 형식을 정의 하는 것 MySQL 사용 시 (Oracle SQL과 다름) 주의 - DB를 사용한다고 지정하지 않을 경우 테이블 사용 시, 테이블명과 함께 DB명을 반드시 기재해야 한다. - ORACLE SQL과 달리 별도 COMMIT없이 자동 업데이트하도록 설정 가능하다. - 문자 데이터타입은 기본적으로 UTF-8이므로 CHAR, VARCHAR에 N형식 없다. - 테이블의 데이터를 쿼리할 때 대/소문자를 구분하기 때문에 오류나지 않도록 작성한다. (Workbench 환경 설정에서 표기관련 설정 가능) - 다중 행에 영향을.. 2020. 5. 8.
[ORACLE SQL] 데이터 조회 기본 문법 !! ▶ DML* (Data Manipulation Language) ; 데이터 조작어 - SELECT : 데이터를 조회 (SELECT*FROM) SELECT * FROM MEMBER; - INSERT : 데이터를 추가 (INSERT INTO ~ VALUES( , );) INSERT INTO MEMBER VALUES(50, 'YH', '010-1234-1212'); -- ID가 50인 회원의 레코드(로우)를 추가 INSERT INTO TABLE VALUES('IDXX', 'HYONI', '010~'); - UPDATE : 데이터를 변경 (UPDATE ~ SET 00 = ' ' WHERE ID = ' ';) UPDATE MEMBER SET NAME = 'HYOEUN' WHERE ID = 'IDXX'; - DEL.. 2020. 5. 8.
[크롬] 캐시 비활성화 설정 방법 & 캐시 비우는 방법 개발자가 계속해서 개발하는 과정 중인 상황에서 캐시는 의미가 없을 수 있다. 구글 크롬 웹 브라우저에서 캐시를 비활성화하도록 설정하는 방법을 알아보자. 1. F12를 눌러 개발자 도구에 들어간다. 2. 우측 (점 세개) 버튼을 클릭하면 설정(Settings)이 보인다. Settings 클릭! 3. Network에 있는 Disable cache (while DevTools is open)을 클릭하면 완료! 크롬 캐시 비활성화 설정 : F12 → Settings → Network → Disable cache (while DevTools is open) 체크! 혹시 초기에 이 방법으로 설정해두었다가 캐시를 사용해야 할 상황이 생기면 난감해질 수 있는데, 그럴 땐 다른 방법이 있다. 바로 애초에 캐시 방지하도록.. 2020. 5. 6.
CSS 선택자 규칙과 유형, 우선순위 CSS(Cascading Style Sheets)는 규칙 기반 언어로서, 웹 페이지의 특정 요소 또는 요소 그룹에 적용 할 스타일 그룹을 지정하는 규칙을 정의한다. 예를 들어 "특정 페이지 내의 타이틀을 큰 빨간색 텍스트로 표시" 를 원할 때 아래 코드와 같이 CSS로 작성하고 정의한다. .h1 { color: red; font-size: 5em; } ● Cascading : 스타일의 우선순위 CSS 선택자(Selectors)는 HTML 요소의 우선순위에 따라 스타일을 나타내므로 cascading은 매우 중요하다. 작성한 코드가 규칙에 맞지 않아 스타일이 작동하지 않을 수도 있으므로 CSS 메커니즘의 작동 방식을 이해하고, 우선순위에 따라 코드를 작성해야 한다. * 우선순위 : 태그 < 클래스 < #아이.. 2020. 5. 6.
반응형

티스토리툴바