New 병아리 개발자

# 이클립스로 css 작업 시 바로 적용 안될 경우

• 서버 캐시, 브라우저 캐시 문제일 가능성이 높다.
• 크롬을 이용하는 경우 Ctrl + Shift + R or Shift + F5 로 바로 해결 가능하다. (해당 단축키는 캐시 콘텐츠를 무시하고 현재 페이지 새로고침 하는 단축키)
  
  

*MySQL 카테고리 추가

# 캐릭터SET 설정
SET NAMES utf8mb4;

# DB 생성
DROP databse IF EXISTS site35;
CREATE DATABASE site35;
USE site35;

# 카테고리 생성
CREATE TABLE cateItem (
    id INT(10) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,
    regDate DATETIME NOT NULL,
    `name` CHAR(100) NOT NULL UNIQUE
);

# 카테고리 아이템 4-5개 추가.
INSERT INTO cateItem SET `name` = 'IT/JAVA', regDate = NOW();
INSERT INTO cateItem SET `name` = 'IT/자격증', regDate = NOW();
INSERT INTO cateItem SET `name` = '일상/취미', regDate = NOW();
INSERT INTO cateItem SET `name` = '여행', regDate = NOW();

# 게시물 테이블 생성
DROP TABLE IF EXISTS article;
CREATE TABLE article (
    id INT(10) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,
    regDate DATETIME NOT NULL,
    cateItemId INT(10) UNSIGNED NOT NULL,
    displayStatus TINYINT(1) UNSIGNED NOT NULL,
    `title` CHAR(200) NOT NULL,
    `body` TEXT NOT NULL
);

*토스트 UI 에디터

1. 기본 에디터 생성

- 아래 코드를 통해 기본적인 형태의 에디터 생성 가능.

<!-- 코드 미러 라이브러리 추가, 토스트 UI 에디터에서 사용됨 -->
<link rel="stylesheet" href=href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
<!-- 토스트 UI 에디터, CSS 코어 -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />

var editor1 = new toastui.Editor({
	el: document.querySelector('#editor1') 
});

2. 모드 설정 (wysiwyg, vertical 등)

- 아래 코드를 통해 에디터에 옵션? 설정.

3. 신택스 하이라이트 등 추가

- 하이라이트 라는 별도의 라이브러리 존재, 토스트 UI에 아래 코드 입력 시 언어에 따른 결과를 얻고 싶을때 각 하이라이트 라이브러리 언어 추가 및 토스트 UI 에디터에 하이라이트 플러그인 추가.

```xml
<ul></ul>
```

```java
class A {
int a = 10;
}
```

```javascript
var a = 10;
```

<!-- 하이라이트 라이브러리 추가, 토스트 UI 에디터에서 사용됨 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css">


<!-- 하이라이트 라이브러리, 언어 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/languages/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/languages/java.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/languages/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/languages/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/languages/php.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/languages/php-template.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/languages/sql.min.js"></script>


<!-- 토스트 UI 에디터, 신택스 하이라이트 플러그인 추가 -->
<script src="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight-all.min.js"></script>


// 에디터 JS에도 플러그인 추가해 줘야 적용이 된다.
var editor1 = new toastui.Editor({
  el: document.querySelector('#editor1'),
  plugins: [toastui.Editor.plugin.codeSyntaxHighlight]
});

4. 이미지 추가

- 토스트 UI 상단 사진모양(insert image) 클릭 > Image URL, Description 입력.

- image url의 경우 https://postimages.org/ko/ 를 통해서 변환. 

* Position 속성

- 태그를 어떻게 위치시킬지 정의.

1. static

- 기본값으로 다른 태그와의 관계에 의해 자동으로 배치된다.

- 위치를 임의로 설정할 수 없다.

2. absolute

- 절대 좌표와 함께 위치 지정 가능

- top / bottom / left / right 등을 이용하여 설정 가능하다.

- 가로 크기가 100%가 되는 block 태그의 특징이 사라진다.

3. relative

- 원래 있던 위치를 기준으로하여 좌표를 설정한다.

4. fixed

- 스크롤과 상관없이, 항상 문서 최 상단의 좌측 상단을 기준으로 좌표를 고정한다.

- 가로 크기가 100%가 되는 block 태그의 특징이 사라진다.

5. inherit

- 부모 태그의 속성값을 상속 받는다.