'웹프로그래밍'에 해당되는 글 3건

홈페이지지 제작을 위한  웹에디터  Edit plus 3 사용법

 * C/C++ 구문 강조와 출력 캡쳐 화면
* CSS 구문 강조 화면
* PHP 구문 강조 화면
* ASP 구문 강조 화면
* Perl 구문 강조와 출력 캡쳐 화면
* 자바 구문 강조와 출력 캡쳐 화면
* 자바스크립트 구문 강조 화면
* VB스크립트 구문 강조 화면
* 내장 브라우저 창 화면

에디트플러스는 인터넷 환경에서 편리하게 사용할 수 있는 윈도우용 문서 편집기로서, HTML 편집기, PHP 편집기, 자바 편집기, Hex 뷰어 기능을 지원하고, 메모장을 대신할 뿐 아니라 웹문서나 프로그램 개발을 쉽게 할 수 있도록 도와주는 많은 기능들을 지원합니다.

EditPlus Text Editor
•HTML, PHP, 자바, C/C++, CSS, ASP, Perl, 자바스크립트, VB스크립트, Paython, Ruby on Rails 파일에서 구문 강조 기능을 지원합니다. 사용자가 작성한 구문 파일을 추가하여 다른 프로그래밍 언어도 지원할 수 있습니다.
•HTML 문서의 내용을 확인해 볼 수 있는 내장 브라우저와, 작성한 문서를 FTP 서버로 업로드할 수 있는 FTP (sftp, FTPS 포함) 기능을 지원합니다.
•이 밖에 Hex 뷰어, HTML 도구모음, 사용자 도구, 줄 번호, 눈금자, URL 강조, 자동 완성, 클립텍스트, 칸 단위 선택, 강력한 찾기와 바꾸기, 다중 실행 취소및 재실행, 사용자 정의 단축키 등 다양한 기능들을 쉽고 편리하게 사용할 수 있습니다.
 
에디터로는 울트라에디트 에디트플러스 (EditPlus) 등 많이 있지만 요즈음 프로그래머가 홈페이지를 제작하고
수정할 때 가장 쉽게 빨리 작업을 마칠 수 있는 에디터라고 생각합니다 . 저는 오래 전부터 이 에디트플러스 (EditPlus)를 사용해 오고 있어 이번에는 이 에디터플러스를 소개하고자 합니다 .
 
이번에 이 에디트플러스 (EditPlus)를 소개하려고 참고 자료를 준비하다가 우연히 이 것이 한국인이 개발했다는
사실을 알게 되었다 위키백과에서 나온 것으로 보면 에디트플러스 (EditPlus)는 마이크로소프트 윈도용 문서 편집기로 경상남도 진주시에 본사를 둔 이에스컴퓨팅의 김상일씨가 개발하였다고 합니다 . 1998 년 3 월 20 일에 첫 버전이 공개되었고 셰어웨어 저작권으로 배포되어 30 일 동안 사용할 수 있으며 기간이 지난 후에는 등록하지 않으면 쓸 수 없다고 합니다 .
 
완전한 유니코드를 지원하며 파일마다 다른 시스템 코드 페이지를 갖춘 텍스트 파일의 내용을 깨지지 않게 맞추어 불러올 수 있으며 프로그래머를 위한 구문 강조 기능을 갖추고 있고 검색 및 바꾸기를 위한 정규 표현식과 세 가지 파일 형식 (윈도 , 리눅스 , 매킨토시 )을 지원한다 . 문법 확인 기능은 미국 영어와 영국 영어를 지원한다고 합니다 .
 
지원하는 파일 유형 [편집 ]으로는 기본적으로 지원하는 파일의 유형으로는 텍스트 , HTML, C/C++, 펄 , PHP, 자바 , JSP, 자바스크립트 , VBS, CSS, XML, C#이 있으며 , 그 중에서 몇 가지 파일 유형을 위한 문서 템플릿 (HTML, XHTML, C/C++, 펄 , 자바 )을 기본으로 포함하고 있다고 합니다 .
  
 

 제가 특히 쓰면서 좋았던 점은 기능 중에 구문강조나 자동완성 기능있고 , EditPLUS3 로 스크립트 작성하다가 버튼만 누르면 바로 스크립트 실행하고 단축키등으로 쉽게 작업을 할 수 있었습니다 .
EditPlus 의 강력한 기능중 하나가 바로 페이지 미리보기 기능이며 브라우져로 미리 바로 바로 볼 수 있어서
실시가느로 미리보기가 가능하다는 점을 들 수 있습니다 .
 
 
Edit plus 는 코딩하는 프로그램이며 작업을 하기 위해서는 프로그래밍을 배워야 하고 자바스크립트 같은 언어로 개발해야하지만 이 에디트플러스를 이용하면 여러 저가가지를 손쉽게 가져다가 프로그램을 작성할 수 있습니다 .

[웹프로그래밍 ]CSS따라잡기 -패딩(padding)속성적용하기

CSS 패딩속성 부여하기
CSS padding속성은 내용 주위에 공간을 생성하는 데 사용됩니다.
패딩은 요소 주위의 내용 (테두리 안쪽)을 지 웁니다.
CSS를 사용하면 패딩을 완전히 제어 할 수 있습니다. 요소의 각면 (위쪽, 오른쪽, 아래쪽 및 왼쪽)에 대해 채우기를 설정하기위한 CSS 속성이 있습니다.
패딩 - 개별면
CSS에는 요소의 각면에 대해 채우기를 지정하는 속성이 있습니다.
padding-top
padding-right
padding-bottom
padding-left
모든 패딩 속성은 다음 값을 가질 수 있습니다.
length - px, pt, cm 등의 패딩을 지정합니다.
% - 포함하는 요소의 너비에 대한 패딩을 %로 지정합니다.
inherit - 패딩을 부모 요소로부터 상속해야한다고 지정합니다.
다음 예제에서는 <p> 요소의 네면에 대해 서로 다른 패딩을 설정합니다.
예
p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
 

패딩 - 속성
코드를 단축하려면 모든 패딩 속성을 하나의 속성에 지정할 수 있습니다.
이 padding속성은 다음과 같은 개별 패딩 속성의 속기 속성입니다.
padding-top
padding-right
padding-bottom
padding-left
예
p {
    padding: 50px 30px 50px 80px;
}

그래서, 그것이 작동하는 방법은 다음과 같습니다 :
padding속성에 4 개의 값 이있는 경우 :
패딩 : 25px 50px 75px 100px;
상단 패딩은 25px입니다.
오른쪽 패딩은 50 픽셀입니다.
하단 패딩은 75px입니다.
왼쪽 패딩은 100px입니다.
padding속성에 세 개의 값 이있는 경우 :
패딩 : 25px 50px 75px;
상단 패딩은 25px입니다.
오른쪽 및 왼쪽 패딩은 50 픽셀입니다.
하단 패딩은 75px입니다.
padding속성에 두 개의 값 이있는 경우 :
패딩 : 25px 50px;
상단 및 하단 패딩은 25px입니다.
오른쪽 및 왼쪽 패딩은 50 픽셀입니다.
padding속성에 하나의 값 이있는 경우 :
패딩 : 25px;
4 개의 패딩 모두 25 픽셀입니다.
예
div.ex1 {
    padding: 25px 50px 75px 100px;
}
div.ex2 {
    padding: 25px 50px 75px;
}
div.ex3 {
    padding: 25px 50px;
}
div.ex4 {
    padding: 25px;
}
위 속성을 적욯한 값은 아래와 같습니다.
 

 ====================================================

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

CSS 여백설정하기

CSS margin속성은 요소 주위에 공간을 생성하는 데 사용됩니다.
margin속성은 경계 외부의 공백의 크기를 설정합니다.
CSS를 사용하면 여백을 완전히 제어 할 수 있습니다. 요소의 각면 (위, 오른쪽, 아래 및 왼쪽)의 여백을 설정하기위한 CSS 속성이 있습니다.
여백 - 개별면
CSS에는 요소의 각면에 대한 여백을 지정하는 속성이 있습니다.
margin-top
margin-right
margin-bottom
margin-left
모든 margin 속성은 다음 값을 가질 수 있습니다.
auto - 브라우저가 여백을 계산합니다.
length - px, pt, cm 등의 여백을 지정합니다.
% - 포함하는 요소의 너비에 대한 여백을 %로 지정합니다.
inherit - 부모 요소에서 여백을 상속해야한다고 지정합니다.
팁 : 음수 값이 허용됩니다.
다음 예제에서는 <p> 요소의 네면에 대해 서로 다른 여백을 설정합니다.
예
p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
 

 
여백 - 속기 속성
코드를 줄이기 위해 하나의 속성에 모든 여백 속성을 지정할 수 있습니다.
이 margin속성은 다음과 같은 개별 여백 속성에 대한  속성입니다.
margin-top
margin-right
margin-bottom
margin-left
예
p {
    margin: 100px 150px 100px 80px;
}

그래서, 그것이 작동하는 방법은 다음과 같습니다 :
margin속성에 4 개의 값 이있는 경우 :
여백 : 25px 50px 75px 100px;
상단 여백은 25px입니다.
오른쪽 여백은 50 픽셀입니다.
하단 여백은 75px입니다.
왼쪽 여백은 100 픽셀입니다.
시작은 위에서 오른쪽 아래 왼쪽으로 진행됩니다.
margin속성에 세 개의 값 이있는 경우 :
여백 : 25px 50px 75px;
상단 여백은 25px입니다.
오른쪽 및 왼쪽 여백은 50 픽셀입니다.
하단 여백은 75px입니다.
margin속성에 두 개의 값 이있는 경우 :
여백 : 25px 50px;
상단 및 하단 여백은 25px입니다.
오른쪽 및 왼쪽 여백은 50 픽셀입니다.
margin속성에 하나의 값 이있는 경우 :
여백 : 25px;
네 가지 마진 모두 25 픽셀입니다.
자동 가치
margin 속성을 설정하여 auto컨테이너 내에 요소를 가로로 가운데 놓을 수 있습니다.
그러면 요소가 지정된 폭을 차지하고 나머지 공간은 왼쪽과 오른쪽 여백 사이에서 균등하게 분할됩니다.
예
div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
 

 
상속 된 값
이 예에서는 부모 요소에서 왼쪽 여백을 상속 할 수 있습니다.
예
div.container {
    border: 1px solid red;
    margin-left: 100px;
}
p.one {
    margin-left: inherit;
}
 

여백 축소
요소의 위쪽 및 아래쪽 여백은 두 개의 여백 중에서 가장 큰 것과 동일한 단일 여백으로 축소됩니다.
이것은 왼쪽과 오른쪽 여백에는 발생하지 않습니다! 위쪽 및 아래쪽 여백 만!
다음 예제를보십시오.
예
h1 {
    margin: 0 0 50px 0;
}
h2 {
    margin: 20px 0 0 0;
}
 

위의 예에서 <h1> 요소의 하단 여백은 50px입니다. <h2> 요소의 상단 여백은 20px로 설정됩니다.
상식적으로는 <h1>과 <h2> 사이의 수직 여백이 총 70px (50px + 20px)가 될 것입니다. 그러나 마진 붕괴로 인해 실제 마진은 50px가됩니다

-----------------------------------------------

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)