CKEditor 를 사용할시 기본적으로 정의되어져 있는 몇가지 스타일이 있는대요. 이 부분이 사용자에 따라 약간 불편할 수도 있습니다. 또한 글을 작성하는 동안 페이지에 커스텀으로 적용되는 CSS 의 경우 보지 못하는대요. 이런 부분을 해결할 수 있는 방법이 CKEditor 자체에 페이지에서 사용될 커스텀 CSS를 넣는 방법입니다. ps. 제 경우 CKEditor 의 p 테그에 margin 이 너무 넓게 들어 가서 적용한 경우 입니다. 아래를 보시면 기본 CKEditor 를 적용했을때 p 테그에 기본적으로 적용 되어 있는 margin 의 크기 입니다. CKEditor 자체에 CSS 파일을 적용하고 싶으시다면 CKEDITOR 를 정의 하실때 config.contentsCss 를 정의해주시기 바랍니다. CK..
지난번에는 간단히 HTML 문서를 만들어 봤는대요. 이번에는 몇가지 태그에 대해 알아보고 사용해보겠습니다. 2015/09/14 - [웹 개발/HTML] - HTML 이란? 첫 HTML 문서 작성하기 우선 HTML 문서는 아래의 기본적인 규칙들을 따라 주셔야 합니다. 1. 문서의 처음은 로 정의해줄 것 ( 문서의 HTML 버전에 따라 다르지만 앞의 DOCTYPE html 는 HTML 5 임을 뜻합니다. ) 2. 문서는 의 안에 넣어 주도록합니다. 3. 사용자들이 보는 부분은 에 작성됩니다. 4. 아래는 최종 결과 예제 파일 입니다. 이제 간단히 태그와 코드를 보도록 하겠습니다. Heading Tag Paragraph Tags 위의 문서에 간단히 주석과 함께 문서를 만들어 봤습니다. * 주석이란? 주석은 개..
NodeJS , Express 그리고 Socket.io 을 이용하여 간단한 채팅 앱 ( 메시지 앱 ) 을 만드는 방법입니다. 기본적으로 Socket.io ( http://socket.io ) 에 들어가 보시면 기본적인 튜토리얼 ( http://socket.io/get-started/chat/ ) 이 있는대요. 여기서는 이전에 진행하던 NodeJS + Express 튜토리얼을 연장하여 간단하게 코드만 넣어 보겠습니다. 튜토리얼을 보시기전 NodeJS + Express generator 를 모르신다면 한번 보시기 바랍니다. 2015/10/01 - [Programming Language/NodeJS] - NodeJS 에서 Express 설치 및 시작하기 * 프로젝트의 기반은 Express generator 로..
PHP 는 동적 웹페이지를 만들수 있는 서버 사이드의 스크립트 언어이며 HTML 코드안에 php 를 넣음으로서 효율적으로 개발이 가능합니다. 또한 PHP 는 OS 에 관계 없이 운영 및 개발이 가능합니다. * PHP 를 알아보기전 기본적으로 HTML, CSS, Javascript 에 관한 지식이 있으셔야 합니다. 우선 간단하게 아래의 PHP 코드를 보겠습니다. 간단히 코드에 관해서 간단히 설명하자면 echo ""; 는 html 페이지내에 텍스트를 뿌려주는 역할을 합니다. 후에 print 와 비교하여 좀더 자세히 설명드리겠습니다. 위의 코드에서 보시면 사이에 부분이 보이실 것 입니다. php 는 이와 같이 HTML 문서 중간에 삽입될 수 있으며 뿐만 아니라 문서 어느 곳 이든 삽입이 가능합니다. 대신 WA..
HTML 은 간단히 말하면 컨텐츠 제공자가 사용자에게 컨텐츠를 쉽고 편하게 보여 주기위한 일종의 문서 입니다. HTML 의 약자는 Hyper Text Markup Language 의 약자로 markup tag 로 이루어진 문서 입니다. Tag ( 태그 ) 는 HTML 문서를 구성하는 작은 단위로 태그라고 부릅니다. 일단 아래의 코드로 첫번째 문서를 만들고 설명 드리겠습니다. 나의 첫 HTML 문서 입니다! 이제 위의 코드를 아무 문서에 작성 후 파일 이름은 원하시는대로 하되 아래와 같이 확장자 명은 .html 로 해주시기 바랍니다. 문서 작성은 편하신 에디터 를 이용하시면 됩니다. 메모장으로도 가능합니다. 이제 이 파일을 웹 브라우져 (익스플로러, Chrome, firefox, safari )에서 열어 ..
Font Awsome 은 웹 페이지 개발시 이미지가 아닌 테그를 이용하여 아래와 같은 특수 문자를 쓸수 있도록 해줍니다. 등 사용전 알아두셔야할 것은 3.2.1 까지는 IE 8.x 등의 하위 버전을 지원하지만 4.3.0 과 같이 4.x 이상 버전에서는 저버전의 브라우저들을 지원하지 않으니 참고하시기 바랍니다. CDN 을 이용한 간단한 사용방법은 아래와 같이 버전별 URL 을 Head 사이에 넣으셔서 로드해주시고 Font Awsome 3.2.1 Font Awsome 4.3.0 아래와 같이 페이지의 문자표 테그를 참고하셔서 HTML 코드에 직접 사용하시면 됩니다. Font Awsome 3.2.1 아이콘 리스트 http://fortawesome.github.io/Font-Awesome/3.2.1/icons/ ..
문자열.split() 은 Javascript 에서 문자열을 특정 문자를 기준으로 분해하여 저장하는 함수 입니다. var str = "B00/C00/D00/E00"; var res = str.split("/"); console.log(res); 위의 res 의 결과는B00,C00,D00,E00 의 형태로 배열로 저장되었다고 보시면 됩니다.Chrome 에서는 아래와 같이 console.log 를 확인하실수 있습니다.
처음 HTML 을 공부하실때 많이 궁금해 하시는 부분일것이 div 와 같은 박스 를 중앙으로 위치 시키는 것입니다. 아래와 같이 붉은 상자처럼 페이지의 중앙으로 위치시키는 방법인대요. 텍스트의 경우 text-align:center; 로 중앙으로 오지만 div 나 ul li 와 같은 경우 중앙에 위치하기 위해서는 div와 css 의 구조를 맞춰줘야 합니다. 우선 간단하게 예를 들어 보면 -HTML- 나는 중앙 상자 -CSS- #wrapper_element{ width:100%; height:450px; border:1px solid gray; } #element{ width:450px; height:450px; border:1px solid red; margin:0 auto 0; text-align:cen..
- Total
- Today
- Yesterday
- cocos2d-x
- it
- Database
- 데이터베이스
- php
- Developer
- Nodejs
- 웹 서버
- 서버 개발
- 웹 개발
- 개발
- 게임
- 게임 개발
- 에러
- 튜토리얼북
- JavaScript
- mac
- SNS
- 웹
- Laravel
- 설치
- html
- 서버
- ubuntu
- 인터넷
- 우분투
- 맥
- 개발자
- 웹 개발자
- Tutorialbook
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |