Brackets - 플러그인 Synapse : FPT 사용법
Brackets - 플러그인 Synapse : FPT 사용법
Brackets - 플러그인 Synapse : FPT 사용법
01. Brackets 상단 메뉴중 파일 > "확장기능 관리자"를 실행합니다.
02. 확장기능 관리자 대화상자 검색창에서 "SFTP"로 검색합니다.
03. Brackets Synapse 플러그인을 설치합니다.
(1) 아이콘을 클릭합니다.
(A) + 버튼을 누르면 그림과 같이 Server Setting 대화상자가 나타납니다.
(B) FTP, SFTP 중 사용할 프로토콜을 선택.
(C) HOST : 접속할 도메인
(D) 접속포트 : FTP - 21, SFTP - 22
(E) USER : 신청한 웹호스팅 ID
(F) PASSWORD : 신청한 웹호스팅 비번
(G) SETTING NAME : 사용할 FTP명으로 임의로 정하면됩니다. (ex; Synape Test)
(H) APPEND 버튼을 클릭하면 저장됩니다.
(A) APPEND 아이콘을 클릭하면 (B)가 나타납니다. 이때 (C) CONNECT를 클릭하면 서버에 연결됩니다
좌측서버안의 파일을 클릭해 오른쪽에서 열리면 수정후 저장하면 자동 업로드 된다.
'CMS > server' 카테고리의 다른 글
| 01.내 로컬에 PHP 홈페이지를 만들자. (0) | 2018.04.30 |
|---|---|
| XAMPP [3] - 로컬서버 설치 및 PHP 테스트 (0) | 2018.04.24 |
| Brackets [3] - 플러그인 : Emmet 사용법 (0) | 2018.04.24 |
| Brackets [2] - 플러그인 : Emmet (0) | 2018.04.24 |
| Brackets [1] - 코드 에디터(Code Editor) (0) | 2018.04.24 |
자바스크립트(JavaScript)란?
자바스크립트(JavaScript)란?
-웹을 풍부하게 만들어주는 작고 가벼운 언어
우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다. HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다. 자바스크립트는 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다.
자바스크립트를 이용하면 웹에 풍부한 효과를 넣을 수 있지만, 2000년대 초반만 해도 자바스크립트는 개발자들에게 무시당하는 언어였다. 별다른 기능도 없고, 성능도 별로 좋지 않았기 때문이다. 하지만 최근 몇 년 사이에 다양한 자바스크립트 프레임워크와 라이브러리가 생기면서 자바스크립트 생태계는 크게 확장되고 있으며, 그 위상도 점점 높아지고 있다.
출처: 자바스크립트 [Javascript] - 웹을 풍부하게 만들어주는 작고 가벼운 언어 (용어로 보는 IT)
-1995년 탄생한 동적 언어
-배우기 쉽고 확장성 높지만, 보안엔 취약해
-‘개발자가 가장 관심 많이 갖는 언어’로 꼽혀
※ 자바스크립트 관련 라이브러리나 프레임워크 : 앵귤라.JS, D3.JS, 노드JS, 리액트JS
'JavaScript' 카테고리의 다른 글
| 홈페이지 접속시 자동으로 모바일 홈페이지로 이동 스크립트 (0) | 2018.05.01 |
|---|
MySQL(MariaDB) 관리툴 - phpMyAdmin
MySQL(MariaDB) 관리툴 - phpMyAdmin
phpMyAdmin이란?
phpMyAdmin은 MySQL을 월드 와이드 웹 상에서 관리할 목적으로 PHP로 작성한 오픈 소스 도구이다. 데이터베이스, 테이블, 필드, 열의 작성, 수정, 삭제, 또 SQL 상태 실행, 사용자 및 사용 권한 관리 등의 다양한 작업을 수행할 수 있다.
공식사이트 : https://phpmyadmin.net/
01. 오른쪽 상단의 "Download" 버튼을 클릭해 다운로드 합니다.
02. 다운로드한 phpMyAdmin-4.8.0.1-all-languages.zip의 압축을 풉니다. 압축을 해제한 파일 및 폴더를 FTP 프로그램을 이용해 [phpMyAdmin] 폴더를 만든 후 서버에 업로드(웹호스팅 사용의 경우) 하거나 로컬서버 사용시 XAMPP를 설치한 경로(예: C\XAMPP\htdocs\phpMyAdmin에 복사합니다.
03. 접속합니다.
A. 로컬서버의 경우 : 브라우저 주소창에 localhost/phpMyAdmin 또는 127.0.0.1/phpMyAdmin에 접속합니다.
B. 웹호스팅의 경우 : 브라우저 주소창에 도메인명(또는 무료도메인명)/phpMyAdmin
☞ 다음 강좌 : phpMyAdmin 설정
[CSS] Text Property (속성 ) : word-spacing
[CSS] Text Property (속성 ) : word-spacing
☞ Text 관련 14개 속성(Property)
01. color - 텍스트의 색상 설정
02. direction - 텍스트 방향을 설정
03. letter-spacing - 글자 사이의 여백 설정
04. line-height - 줄 높이를 정하는 속성
05. text-align - 텍스트의 정렬
06. text-decoration - 선으로 텍스트를 꾸밀 수 있게 해주는 속성
07. text-indent - 들여쓰기 또는 내어쓰기 속성
08. text-shadow - 글자에 그림자 효과를 주는 속성
09. text-transform - 대문자 또는 소문자로 바꾸는 속성
10. text-overflow - 글자 자르기
11. unicode-bidi ※ 참조
12. vertical-align - 세로 정렬 방식 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
14. word-spacing - 단어 사이의 간격을 정하는 속성
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
14. word-spacing - 글자 간격을 지정
word-spacing 속성은 단어와 단어 간의 공간을 지정한다.
- 버전 : CSS 1
- 모든 주요 브라우저에서 지원
- 속성값 (value)
normal : 기본값(default), 브라우저 기본 스타일로 나타냄
length : px, cm, em 단위로 단어 간격을 직접 지정하며 음수도 허용
inherit : 지정 요소의 단어 간격 속성을 부모(상위) 요소로부터 상속받음
/* 구문 */
{ word-spacing:value; }
/* example */
div { word-spacing:30px; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
| [CSS] Text Property (속성 ) : white-space (0) | 2018.05.02 |
|---|---|
| [CSS] Text Property (속성 ) : vertical-align (0) | 2018.05.02 |
| [CSS] Text Property (속성 ) : unicode-bidi (0) | 2018.05.02 |
| [CSS] Text Property (속성 ) : text-overflow (0) | 2018.05.01 |
| [CSS] Text Property (속성 ) : text-transform (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : white-space
[CSS] Text Property (속성 ) : white-space
☞ Text 관련 14개 속성(Property)
01. color - 텍스트의 색상 설정
02. direction - 텍스트 방향을 설정
03. letter-spacing - 글자 사이의 여백 설정
04. line-height - 줄 높이를 정하는 속성
05. text-align - 텍스트의 정렬
06. text-decoration - 선으로 텍스트를 꾸밀 수 있게 해주는 속성
07. text-indent - 들여쓰기 또는 내어쓰기 속성
08. text-shadow - 글자에 그림자 효과를 주는 속성
09. text-transform - 대문자 또는 소문자로 바꾸는 속성
10. text-overflow - 글자 자르기
11. unicode-bidi ※ 참조
12. vertical-align - 세로 정렬 방식 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
14. word-spacing - 단어 사이의 간격을 정하는 속성
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
white-space 속성은 엘리먼트 안에서 공백문자를 어떻게 처리할지 지정한다.
- 버전 : CSS 1
- 모든 주요 브라우저에서 지원
- 속성값 (value)
normal : 기본값(default), 브라우저 기본 스타일로 나타냄, 연속공백과 줄바꿈을 통합
nowrap : 연속공백은 통합하고 줄바꿈은 하지 않음
pre : 연속공백, 줄바꿈 모두 하지 않고 원본 그대로 나타남
pre-line :
pre-wrap :
inherit : 지정 요소의 빈공간 속성을 부모(상위) 요소로부터 상속받음
/* 구문 */
{ white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit; }
/* example */
div { white-space:nowrap; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
| [CSS] Text Property (속성 ) : word-spacing (0) | 2018.05.02 |
|---|---|
| [CSS] Text Property (속성 ) : vertical-align (0) | 2018.05.02 |
| [CSS] Text Property (속성 ) : unicode-bidi (0) | 2018.05.02 |
| [CSS] Text Property (속성 ) : text-overflow (0) | 2018.05.01 |
| [CSS] Text Property (속성 ) : text-transform (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : vertical-align
[CSS] Text Property (속성 ) : text-overflow
☞ Text 관련 14개 속성(Property)
01. color - 텍스트의 색상 설정
02. direction - 텍스트 방향을 설정
03. letter-spacing - 글자 사이의 여백 설정
04. line-height - 줄 높이를 정하는 속성
05. text-align - 텍스트의 정렬
06. text-decoration - 선으로 텍스트를 꾸밀 수 있게 해주는 속성
07. text-indent - 들여쓰기 또는 내어쓰기 속성
08. text-shadow - 글자에 그림자 효과를 주는 속성
09. text-transform - 대문자 또는 소문자로 바꾸는 속성
10. text-overflow - 글자 자르기
11. unicode-bidi ※ 참조
12. vertical-align - 세로 정렬 방식 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
14. word-spacing - 단어 사이의 간격을 정하는 속성
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
12. vertical-align - 요소의 수직 정렬에 대한 지정
vertical-align 속성은 요소의 수직 정렬 상태를 지정한다.
- 버전 : CSS 1
- 모든 주요 브라우저에서 지원
- 속성값 (value)
length
%
baseline
sub
super
top
text-top
middle
bottom
text-bottom
inherit : 지정 요소의 수직정렬 속성을 부모(상위) 요소로부터 상속받음
/* 구문 */
{ vertical-align:value; }
/* example */
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
'Web Design > CSS & CSS3' 카테고리의 다른 글
| [CSS] Text Property (속성 ) : word-spacing (0) | 2018.05.02 |
|---|---|
| [CSS] Text Property (속성 ) : white-space (0) | 2018.05.02 |
| [CSS] Text Property (속성 ) : unicode-bidi (0) | 2018.05.02 |
| [CSS] Text Property (속성 ) : text-overflow (0) | 2018.05.01 |
| [CSS] Text Property (속성 ) : text-transform (0) | 2018.05.01 |
Foundation 5, Foundation 6, Skeleton 소개
Foundation 6 소개 - 세계에서 가장 앞서나가는 반응형 프론트 엔드 프레임워크!
사이트 : https://foundation.zurb.com/
Skeleton
사이트 : http://getskeleton.com/
[CSS] Text Property (속성 ) : unicode-bidi
[CSS] Text Property (속성 ) : unicode-bidi
☞ Text 관련 14개 속성(Property)
01. color - 텍스트의 색상 설정
02. direction - 텍스트 방향을 설정
03. letter-spacing - 글자 사이의 여백 설정
04. line-height - 줄 높이를 정하는 속성
05. text-align - 텍스트의 정렬
06. text-decoration - 선으로 텍스트를 꾸밀 수 있게 해주는 속성
07. text-indent - 들여쓰기 또는 내어쓰기 속성
08. text-shadow - 글자에 그림자 효과를 주는 속성
09. text-transform - 대문자 또는 소문자로 바꾸는 속성
10. text-overflow - 글자 자르기
11. unicode-bidi -
12. vertical-align - 세로 정렬 방식 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
14. word-spacing - 단어 사이의 간격을 정하는 속성
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
11. unicode-bidi - direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
- 버전 : CSS 2
- 모든 주요 브라우저에서 지원
- 속성값 (value)
/* 구문 */
{ unicode-bidi: normal|embed|bidi-override|initial|inherit; }
/* example */
div {
direction: rtl;
unicode-bidi: bidi-override;
}
'Web Design > CSS & CSS3' 카테고리의 다른 글
| [CSS] Text Property (속성 ) : white-space (0) | 2018.05.02 |
|---|---|
| [CSS] Text Property (속성 ) : vertical-align (0) | 2018.05.02 |
| [CSS] Text Property (속성 ) : text-overflow (0) | 2018.05.01 |
| [CSS] Text Property (속성 ) : text-transform (0) | 2018.05.01 |
| [CSS] Text Property (속성 ) : text-shadow (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-overflow
[CSS] Text Property (속성 ) : text-overflow
☞ Text 관련 14개 속성(Property)
01. color - 텍스트의 색상 설정
02. direction - 텍스트 방향을 설정
03. letter-spacing - 글자 사이의 여백 설정
04. line-height - 줄 높이를 정하는 속성
05. text-align - 텍스트의 정렬
06. text-decoration - 선으로 텍스트를 꾸밀 수 있게 해주는 속성
07. text-indent - 들여쓰기 또는 내어쓰기 속성
08. text-shadow - 글자에 그림자 효과를 주는 속성
09. text-transform - 대문자 또는 소문자로 바꾸는 속성
10. text-overflow - 글자 자르기
11. unicode-bidi ※ 참조
12. vertical-align - 세로 정렬 방식 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
14. word-spacing - 단어 사이의 간격을 정하는 속성
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
10. text-overflow - 해당 영역을 벗어난 글자들의 상태를 지정
text-overflow 속성은 글자들이 속한 영역에서 벗어났을 때 어떤 방식으로 보여줄지를 지정한다.
- 버전 : CSS 3
- firefox를 제외한 모든 주요 브라우저에서 지원
- 속성값 (value)
clip : 문자를 해당 영역까지만 나타내고 짜른다
ellipsis : 문자를 해당 영역까지만 나타내되 “…”을 사용하여 표시한다
string : ..
/* 구문 */
{ text-overflow:clip|ellipsis|string; }
/* example */
div {
text-overflow:ellipsis;
}
'Web Design > CSS & CSS3' 카테고리의 다른 글
| [CSS] Text Property (속성 ) : vertical-align (0) | 2018.05.02 |
|---|---|
| [CSS] Text Property (속성 ) : unicode-bidi (0) | 2018.05.02 |
| [CSS] Text Property (속성 ) : text-transform (0) | 2018.05.01 |
| [CSS] Text Property (속성 ) : text-shadow (0) | 2018.05.01 |
| [CSS] Text Property (속성 ) : text-indent (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-transform
[CSS] Text Property (속성 ) : text-transform
☞ Text 관련 14개 속성(Property)
01. color - 텍스트의 색상 설정
02. direction - 텍스트 방향을 설정
03. letter-spacing - 글자 사이의 여백 설정
04. line-height - 줄 높이를 정하는 속성
05. text-align - 텍스트의 정렬
06. text-decoration - 선으로 텍스트를 꾸밀 수 있게 해주는 속성
07. text-indent - 들여쓰기 또는 내어쓰기 속성
08. text-shadow - 글자에 그림자 효과를 주는 속성
09. text-transform - 대문자 또는 소문자로 바꾸는 속성
10. text-overflow - 글자 자르기
11. unicode-bidi ※ 참조
12. vertical-align - 세로 정렬 방식 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
14. word-spacing - 단어 사이의 간격을 정하는 속성
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
09. text-transform - 텍스트의 대문자화 상태를 지정
text-transform 속성은 텍스트의 대문자화 속성을 지정한다.
- 버전 : CSS 1
- 모든 주요 브라우저에서 지원
- 속성값 (value)
none : 기본값(default), 대문자화 없이 기본 상태로 지정
capitalize : 각 단어의 첫 번째 문자를 대문자로 지정
uppercase : 모든 문자를 대문자로 지정
lowercase : 모든 문자를 소문자로 지정
inherit : 지정 요소의 텍스트 대문자화 속성을 부모(상위) 요소로부터 상속받음
/* 구문 */
{ text-transform:value; }
/* example */
h1 { text-transform:uppercase; }
h2 { text-transform:capitalize; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
| [CSS] Text Property (속성 ) : unicode-bidi (0) | 2018.05.02 |
|---|---|
| [CSS] Text Property (속성 ) : text-overflow (0) | 2018.05.01 |
| [CSS] Text Property (속성 ) : text-shadow (0) | 2018.05.01 |
| [CSS] Text Property (속성 ) : text-indent (0) | 2018.05.01 |
| [CSS] Text Property (속성 ) : text-decoration (0) | 2018.05.01 |
