All about {Web}

Google Prettify - 티스토리에 소스코드 표시

Web Design/CSS & CSS32018. 4. 25. 02:22


티스토리에 소스코드(Code snippets) 표현을 예쁘게!
Google Prettify - 티스토리에 소스코드 표시

01. Google prettify 사용에  필요한 파일을 다운로드 후 압축을 해제합니다.
[다운로드]  :  googlePrettify.zip
설정 > 스킨편집 > html 편집 > 파일업로드 > + 추가를 클릭해 압축해제한 2개의 파일 tomorrow-night-eighties.css ,  run_prettify.js를 업로드합니다.

02. HTLM의 <head>~</head>안에 아래 코드를 삽입합니다.
<!-- prettify 설정 시작-->
<link rel="stylesheet" type="text/css" href="./images/tomorrow-night-eighties.css">
<script type="text/javascript" src="./images/run_prettify.js"></script>
<!-- prettify 설정 끝--> 

03. <pre class="prettyprint linenums">
          소스코드 들어갈 자리
     </pre>

example)

<div class="camera_wrap">
<div data-src="images/image_1.jpg"></div>
<div data-src="images/image_1.jpg"></div>
<div data-src="images/image_2.jpg"></div>
</div>
           
<div class="camera_wrap">

<div class="row"> 

<div class="col-sm-3">

<a href="#">Type 05</a>

</div>

<div class="col-sm-3">

<a href="#">Type 06</a>

</div> 

<div class="col-sm-3">

<a href="#">Type 07</a>

</div>

<div class="col-sm-3">

<a href="#">Type 08</a>

</div> 

</div>


저작자표시

'Web Design > CSS & CSS3' 카테고리의 다른 글

[CSS] Text Property (속성 ) : direction  (0) 2018.05.01
[CSS] Text Property (속성 ) : color  (0) 2018.05.01
SyntaxHighLighter 3.0.83 사용 - 티스토리에 소스코드 표시  (0) 2018.04.24
CSS Property (속성 ) : Font  (0) 2018.04.16
CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를...  (0) 2018.04.16

SyntaxHighLighter 3.0.83 사용 - 티스토리에 소스코드 표시

Web Design/CSS & CSS32018. 4. 24. 21:16

SyntaxHighLighter 3.0.83 사용 - 소스코드 표시 [티스토리]

☞ SyntaxHighlighter v3.0.83  

syntaxhighlighter_3.0.83.zip

※ 신텍스하이라이터란?
블로그, 웨사이트 등에 프로그램 소스를 예쁘게 표시해 주는 자바스크립트 라이브러리 입니다. PHP, HTML, CSS, JavaScript, ColdFusion, Ruby, Python 등 다양한 언어의 코드의 개발문서를 웹에 게시할 때 유용하게 사용할 수 있습니다.  

[1] 필요파일 업로드
01. 다운로드한 파일의 압축을 풉니다.

02. 압축을 해제한 폴더 중에 [scripts]와 [styles] 두개의 폴더 안의 파일을 다음과 같이 업로드 합니다.


티스토리 블로그 "설정" > (1) 스킨편집 > (2) html 편집 > (3) 파일업로드 > (5) + 추가
[scripts]와 [styles] 두개의 폴더 안의 파일을 업로드 합니다.

[2} 필요 소스 삽입
다운로드  :   themeSkin.txt

HTML (6)으로 이동해
<head>안의 <title>All about {Web} : : '분류 전체보기' 카테고리의 글 목록 (21 Page)</title>밑에 themeSkin.txt의 내용을 삽입한 후 저장합니다.

[3] 사용방법
글작성시 HTML에 체크 후 
<pre class="brush: html;">소스 넣을 자리</pre>

SAMPLE : Theme - Midnight


Name                  File
---------------------------------------------------
Default shThemeDefault.css
Django shThemeDjango.css
Eclipse shThemeEclipse.css
Emacs shThemeEmacs.css
Fade To Grey shThemeFadeToGrey.css
Midnight shThemeMidnight.css
RDark shThemeRDark.css 

Google Prettify example :

<div class="camera_wrap">
<div data-src="images/image_1.jpg"></div>
<div data-src="images/image_1.jpg"></div>
<div data-src="images/image_2.jpg"></div>
</div>
           
<div class="camera_wrap">

<div class="row"> 

<div class="col-sm-3">

<a href="#">Type 05</a>

</div>

<div class="col-sm-3">

<a href="#">Type 06</a>

</div> 

<div class="col-sm-3">

<a href="#">Type 07</a>

</div>

<div class="col-sm-3">

<a href="#">Type 08</a>

</div> 

</div>

저작자표시

'Web Design > CSS & CSS3' 카테고리의 다른 글

[CSS] Text Property (속성 ) : color  (0) 2018.05.01
Google Prettify - 티스토리에 소스코드 표시  (0) 2018.04.25
CSS Property (속성 ) : Font  (0) 2018.04.16
CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를...  (0) 2018.04.16
CSS - Embedding Styles (HTML에 CSS 적용 방법)  (0) 2018.04.16

XAMPP [3] - 로컬서버 설치 및 PHP 테스트

CMS/server2018. 4. 24. 14:01

XAMPP [3] - 로컬서버 설치 및 PHP 테스트

01. 로컬서버 설정
(1) "config"를 클릭해 사용할 (a)edit와 (b)browser를 선택 설정합니다.
(a) edit는 Brackets로 (b)Browser는 Chrome으로 설정합니다. 

(2) "Admin"을 클릭하면 로컬호스트의 홈페이지가 접속됩니다. 현재로써는 localhost/dashboard에 접속됩니다.

(3) "Admin"을 클릭하면 MySQL(MariaDB)을 관리할 수 있는 phpMyAdmin에 접속됩니다.

02. ※Localhost에서 php 사용하기
localhost의 홈페이지 절대경로 :  C > xampp > htdocs

phpinfo.php 파일을 만들어 아래 내용을 작성해 위의 경로에 저장(업로드)합니다.
<?php phpinfo(); ?>


저작자표시

'CMS > server' 카테고리의 다른 글

Brackets - 플러그인 Synapse : FPT 사용법  (0) 2018.05.04
01.내 로컬에 PHP 홈페이지를 만들자.  (0) 2018.04.30
Brackets [3] - 플러그인 : Emmet 사용법  (0) 2018.04.24
Brackets [2] - 플러그인 : Emmet  (0) 2018.04.24
Brackets [1] - 코드 에디터(Code Editor)  (0) 2018.04.24

Brackets [3] - 플러그인 : Emmet 사용법

CMS/server2018. 4. 24. 08:46

Emmet 축약구문( Abbreviations Syntax )

참고사이트 웹페이지:
https://docs.emmet.io/abbreviations/syntax/

구문의 예 )
   <div id="item"></div> /* #item + Tab */
   <div class="item"></div>  /* .item + Tab */
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cumque quia, ut! Quibusdam quasi, illum nesciunt hic, distinctio, voluptatibus aliquid ex soluta explicabo aspernatur enim pariatur labore aut accusamus saepe.</p>
   <p>Modi velit quia sint molestiae debitis enim architecto voluptatem voluptate asperiores error voluptas, accusamus et expedita omnis, voluptates soluta, doloribus facere aperiam ipsum nam dolores magni! Tempore tempora at cum.</p> /* p*2>lorem + Tab Key */
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia ratione asperiores eum, cupiditate neque exercitationem? Nihil saepe, in, quos unde ratione ullam ut fugit itaque ad esse repellat, obcaecati similique. /* lorem + Tab */  
  
    <pan class="item"></pan> /* span.item + Tab */
    <a href="">Click me</a>  /* a{Click me} */

Brackets Shortcuts &middot; adobe_brackets Wiki &middot; GitHub.pdf

Brackets Shortcuts ( 브라켓 단축키 일람표 )

저작자표시

'CMS > server' 카테고리의 다른 글

01.내 로컬에 PHP 홈페이지를 만들자.  (0) 2018.04.30
XAMPP [3] - 로컬서버 설치 및 PHP 테스트  (0) 2018.04.24
Brackets [2] - 플러그인 : Emmet  (0) 2018.04.24
Brackets [1] - 코드 에디터(Code Editor)  (0) 2018.04.24
XAMPP (Apache + MariaDB + PHP + Perl) 메뉴 설명 및 설정  (0) 2018.04.17

Brackets [2] - 플러그인 : Emmet

CMS/server2018. 4. 24. 01:21

Brackets Plugin (확장기능) 설치 :  emmet
※ Emmet - 웹개발자의 필수불가결의 툴킷

1) 파일 > 확장기능 설치 > 검색창에 Emmet 검색후 설치

2) 설치가 끝나면 상단 메뉴에 "Emmet" 메뉴가 생성됩니다.

2) Emmet 플러그인 테스트 :
i) 파일 > 새파일 생성 후 -> 빈파일을 다른 이름으로 저장 합니다. 파일명은 test.html
ii) ! 를 입력후 키보드의 Tab 키를 누릅니다. 아래와 같이 html 기본 코드가 자동생성됩니다.


저작자표시

'CMS > server' 카테고리의 다른 글

XAMPP [3] - 로컬서버 설치 및 PHP 테스트  (0) 2018.04.24
Brackets [3] - 플러그인 : Emmet 사용법  (0) 2018.04.24
Brackets [1] - 코드 에디터(Code Editor)  (0) 2018.04.24
XAMPP (Apache + MariaDB + PHP + Perl) 메뉴 설명 및 설정  (0) 2018.04.17
XAMPP ( Apache + MariaDB + PHP + Perl ) 설치  (0) 2018.04.16

Brackets [1] - 코드 에디터(Code Editor)

CMS/server2018. 4. 24. 00:14

코드 에디터(Code Editor) - Brackets : Adobe에서 무료로 배포하는 에디터
https://brackets.io

01. 위의 사이트에 접속해 Brackets을 다운로드한 후 설치합니다.
02. Brackets을 실행합니다.  메뉴중  파일 > 확장기능 관리자를 실행합니다. 플러그인을 설치합니다.

1) 실행한 "확장기능 관리자"의 검색창에서 "Smart Theme Dark"를 검색해 설치합니다.
2) CSS important property를 검색해 설치합니다.


저작자표시

'CMS > server' 카테고리의 다른 글

XAMPP [3] - 로컬서버 설치 및 PHP 테스트  (0) 2018.04.24
Brackets [3] - 플러그인 : Emmet 사용법  (0) 2018.04.24
Brackets [2] - 플러그인 : Emmet  (0) 2018.04.24
XAMPP (Apache + MariaDB + PHP + Perl) 메뉴 설명 및 설정  (0) 2018.04.17
XAMPP ( Apache + MariaDB + PHP + Perl ) 설치  (0) 2018.04.16

웹디자인을 위한 컬러 앱 소개

Mobile/Mobile App2018. 4. 22. 22:03

웹디자인(WEb Design)을 위한 컬러 앱(Color App)



01. Color

02. Color Reference
https://play.google.com/store/apps/details?id=com.by_syk.mdcolor

03. Color Picker

 

 



 

저작자표시

'Mobile > Mobile App' 카테고리의 다른 글

[추천] Mobile App - Chord Tracker [YAMAHA]  (0) 2018.04.17

Bootstrap 3 (부트스트랩 ver.3.7.7) 다운로드 & 사용법

Framework/bootstrap2018. 4. 19. 16:55


부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함한다.                         





http://getbootstrap.com/  (다운로드 사이트)
01. 부트스트랩 파일을 다운로드 합니다.  아래 페이지에서 다운로드 받으면 Bootstrap 4 이고 아래 페이지 오른쪽 상단에서 버전선택 셀렉트 박스를 눌러 v3.3.7을 선택해 다운로드!

02. 사용방법

1) 다운로드 설치 없이 사용
BootstrapCDN 사용:  CSS & JS [ <head></head> 사이에 삽입
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

2) 다운로드 파일 사용
다운로드한  bootstrap-3.3.7-dist.zip 파일의 압축을 풉니다. [css], [fonts], [js]  3개의 폴더가 생성됩니다.

ex) Baic Template
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>​


저작자표시

Google Web Fonts [구글 웹폰트]

Web Design/web design general2018. 4. 18. 17:05

Google Web Fonts [구글 웹폰트]

1996년 :  CSS 1.0
1998년 :  CSS 2.0 - 제작자의 외부 스타일시티에 폰트 적용을 위한 @font-face 포함
1998년 :  CSS 2.1 - 저작권 등의 문제로 @font-face를 CSS에서 제거
2002년 :  CSS 3 -   @font-face를 새로운 폰트 모듈로써 다시 포함.

☞ 구글 폰트 사이트 :  https://fonts.google.com/  (Internet explorer를 제외한  Chrome, Edge, Firefox, Safari로 접속)

 

01. ex)  폰트명의 우측의 + 버튼(1)을 클릭합니다. 그러면 화면 하단에 (2)가 나타나는데 클릭.

02. (3) 클릭하면 폰트를 다운로드 할 수 있습니다.
     (4) 임베드 방식, 커스터마이징 선택
     (5) 적용방식 선택
         standard :  <link href="https://fonts.googleapis.com/css?family=Jua|Nanum+Gothic" rel="stylesheet">
         @import : 
            <style>
            @import url('https://fonts.googleapis.com/css?family=Jua|Nanum+Gothic');
            </style>
      (6) 스타일시트(CSS) 폰트 사용법 :  font-family: 'Jua', sans-serif;

03. 적용결과

소스예시 ;

 

 

저작자표시

'Web Design > web design general' 카테고리의 다른 글

Code Editors - 코딩을 위한 멋진 에디터 프로그램  (2) 2018.04.18
웹폰트 (web font) 사용하기 (1) - CDN  (0) 2018.04.16
테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery )  (0) 2018.04.10
SVG 관련 유용한 사이트  (0) 2018.04.10
APNG (Animated Portable Network Graphics) & PNG  (0) 2017.07.16

Code Editors - 코딩을 위한 멋진 에디터 프로그램

Web Design/web design general2018. 4. 18. 01:55

Code Editors - 코딩을 위한 멋진 에디터 프로그램

01. Brackets (http://brackets.io/) [PC / Mac : 무료] ★★★★★


02. Sublime Text [PC / Mac : 무료] ( http://www.sublimetext.com/ )  ★★★★★

03. Dreamweaver  [PC / Mac : 유료] ( https://www.adobe.com/products/dreamweaver.html )   ★★★★★

04. Atom  [PC / Mac : 무료]  ( https://atom.io )  ★★★★★

05. Bluefish  [PC / Mac : 무료]  ( https://sourceforge.net/projects/bluefish/ ) 

06. CoffeeCup  [PC : 무료]  ( https://www.coffeecup.com/free-editor/ )

07. Notepad++  [PC : 무료]  ( https://notepad-plus-plus.org/ )

08. BBEdit  [Mac : 유료]  ( https://www.barebones.com/ )

08. Coda  [Mac : 유료]  ( https://panic.com/coda/ )


저작자표시

'Web Design > web design general' 카테고리의 다른 글

Google Web Fonts [구글 웹폰트]  (2) 2018.04.18
웹폰트 (web font) 사용하기 (1) - CDN  (0) 2018.04.16
테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery )  (0) 2018.04.10
SVG 관련 유용한 사이트  (0) 2018.04.10
APNG (Animated Portable Network Graphics) & PNG  (0) 2017.07.16

티스토리툴바