'웹 프로그래밍' 태그의 글 목록

웹 프로그래밍

[JSP 강좌] JSP문서에 주석 달기 2010.08.23 13
[JSP강좌] JSP 문서 만들기 2010.07.25 4
JSP 프로젝트 생성 및 "Hello, world!" 프로그래밍 2010.07.19 8
링크 태그 걸기 <a> </a> 태그 연습 2010.05.03 6
윈도우( Windows )에 APM( Apache + Php + MySql ) 설치하기 2010.02.04 31
우분투 APM 설치하기 2009.11.21 7

[JSP 강좌] JSP문서에 주석 달기

2010. 8. 23. 16:49

[JSP 강좌] JSP문서에 주석 달기

JSP 뿐만아니라 대부분의 프로그래밍 언어에서 "주석" 이라는 기능을 제공합니다. 웹 프로그래밍 언어인 JSP 역시 자바 문법을 따르고 있으므로 주석 기능이 제공 되는데요. 주석은 프로그램의 논리적 구조에는 전혀 영향을 미치지 않는 글로 각 부분의 간략한 설명을 써 놓을 때 사용합니다.

JSP 프로그래밍 환경에서는 두 가지 형태의 주석이 사용됩니다.
JSP 부분에서 사용되는 주석과 HTML 환경에서 사용되는 주석이 있습니다.

JSP 주석 1 - HTML 스타일 주석

먼저 HTML의 주석을 JSP 프로그래밍에도 사용 할 수 있습니다. JSP로 HTML 태그를 생성하는 것이기 때문에 뭐 당연한 말이겠네요. HTML 주석은 다음과 같이 생겼습니다.

이런 스타일의 주석은 동적 웹 프로그래밍언어가 아니라 순수한 HTML로만 이루어진 웹 페이지에서도 많이 볼 수 있는 태그입니다. 실제로 웹 브라우저에서 실행시켜 보면 "HTML 주석입니다." 라는 글자는 출력되지 않죠.

JSP의 관점에서 보면, 이런 HTML 스타일의 주석은 클라이언트로 전달되는 주석이라는 특징이 있습니다. HTML 스타일의 주석도 어떻게 보면 하나의 태그이기 때문에 다른 태그들과 마찬가지로 클라이언트의 웹 브라우저로 전송이 됩니다.

그렇기 때문에 비즈니스 로직이나 JSP 프로그램의 핵심 알고리즘을 노출 시킬 수 있는 주석을 이런 HTML 스타일로 작성을 하게 되면, 주석이 그대로 클라이언트 웹 브라우저로 전송이 됩니다. 클라이언트에서 <소스보기> 기능을 이용해서 HTML 코드를 뜯어 볼 경우 이런 주석은 그대로 노출되기 때문에 보안상 위험이 있는 내용은 HTML 주석으로 처리하면 안 됩니다.

HTML 스타일의 주석 사용의 예를 들어보겠습니다. 다음 소스를 작성해서 실행 시켜 보도록 하겠습니다.

index.jsp

그리고 실행 결과가 나오는 창에서 소스보기를 통해 주석이 클라이언트에서 어떻게 보이는지 보도록 하겠습니다.

HTML 주석이 그대로 노출 되는 것을 볼 수 있습니다. 위의 예에서 본 것 처럼 만약 데이터 베이스나 기타 시스템의 아이디와 비밀번호를 HTML 스타일 주석으로 처리를 했다면, 그 아이디와 비번은 만천하에 공개되는 것입니다.

그렇기 때문에 HTML 스타일 주석을 사용 할 때에는 주의가 필요합니다.

JSP 주석 2 - JSP 스타일 주석

그렇다면 핵심적인 비즈니스 로직이나 비밀번호 같은 중요한 정보를 주석으로 설명하되, 클라이언트로 전송이 되지 않도록 하는 방법은 없을까요? 없다면 거짓말이겠죠.

바로 JSP 스타일의 주석을 이용하면 서버에서만 ( JSP 파일에서만 ) 볼 수 있고 결과로 전송되는 HTML에서는 보이지 않는 주석을 작성 할 수 있습니다. JSP 스타일의 주석은 다음과 같습니다.

<%-- JSP 주석입니다 -- %>

아까 봤던 HTML 스타일의 주석과 비슷하지만 약간 다르네요. 느낌표 대신에 퍼센트 문자가 들어갔습니다.
이렇게 쓰는 주석은 JSP 파일을 편집 할 수 있는 서버측에서만 볼 수 있으며, 클라이언트 쪽에서는 이 주석을 볼 수가 없습니다.
테스트를 해보자면, 다음 소스코드를 실행해 보도록 합시다.

index.jsp

그리고 실행 결과가 나오는 창에서 소스보기를 통해 이 주석이 클라이언트에서 어떻게 보이는지 보도록 하겠습니다.

아까와는 달리 JSP 스타일의 주석은 클라이언트가 <소스보기>를 통해서 볼 수 없음을 알 수 있습니다.
그러므로 중요한 비즈니스 로직이나 JSP 파일의 핵심 내용, 보안상 중요한 정보 등은 HTML 스타일의 주석보다는 JSP 스타일의 주석을 이용해서 설명해 놓는 것이 좋다는 걸 알 수 있습니다.

JSP 주석 3 - JAVA 스타일 주석

그 밖에 JSP는 자바 언어의 문법을 그대로 이용하고 있기 때문에 기존의 자바스타일의 주석도 이용할 수 있습니다. 자바 스타일의 주석에는 두 가지가 있는데,

// 한 줄 짜리 자바 주석

/*
    한줄 혹은
    여러 줄 짜리
    자바 주석
*/

첫 번째는 한 줄 전체를 주석처리하는 것으로 다음 줄은 주석처리가 되지 않습니다.
두 번째는 주석의 범위를 지정할 수 있는데, '/*' 문자는 주석을 여는 문자이고, '*/'는 주석을 닫는 문자입니다. 즉, '/*' 과 '*/' 사이의 모든 문자는 줄 바꿈문자를 비롯하여 모두 주석처리가 되는 것입니다. 자바를 배워보셨거나 기타 다른 프로그래밍 언어를 배워 보신 분들은 쉽게 이해가 가실 거라고 생각합니다.

마지막으로 한번 더 주석처리에 대한 연습을 해보겠습니다.

index.jsp

이 소스 코드를 실행해 보면,

이렇게 나옵니다.
주석은 안 쓰는 것보다 쓰는 것이 프로젝트 관리와 진행에 있어서 많이 도움이 됩니다. 하지만 웹 프로그래밍과 같은 경우에는 주석을 잘 못 썻을 경우에 보안상 문제가 발생 할 수도 있는데요.

어떤 주석이 어떤 특성을 갖고 있는지 알고 사용해야 합니다.

저작자표시 비영리 변경금지

[JSP강좌] JSP 문서 만들기

2010. 7. 25. 16:24

JSP 문서 만들기

이제 본격적으로 JSP라고 할 수 있는 것들을 배워 보겠습니다.
여러분의 컴퓨터에 JSP 프로그래밍 환경이 갖추어 지지 않았다면, 이전에 포스팅 해놓은 것들을 따라하면서 JSP 프로그래밍 환경을 구축하시기 바랍니다. JSP 프로그래밍 환경이 없으면 JSP를 실행 할 수 없겠죠?

2010/04/06 - [놀이터/글 창고] - 자바( Java )설치하기 & 환경변수( path ) 설정하기
2010/04/06 - [놀이터/글 창고] - 자바( JAVA ) 개발 환경 설치( IDE 설치 ) - 이클립스( Eclipse ) 설치하기 및 오류
2010/07/15 - [놀이터/글 창고] - 이클립스와 톰캣 설치 및 연동하기
2010/07/19 - [놀이터/글 창고] - JSP 프로젝트 생성 및 "Hello, world!" 프로그래밍

이전에 "Hello, World!" 프로그래밍을 해봤는데요. 사실 이것은 JSP 라고 하기가 뭐 한게, JSP 함수들을 이용하지 않고 단지 HTML문서를 JSP 파일로 돌려 본 것 뿐입니다. 그래서 오늘은 진짜 JSP라고 할 수 있는 기초 프로그래밍을 배워 보도록 하겠습니다.

JAVA 언어를 이용한 "Hello, World!"

이전에 실행 해 봤던, "Hello, World!" 라는 소스를 기억 하시나요?
2010/07/19 - [놀이터/글 창고] - JSP 프로젝트 생성 및 "Hello, world!" 프로그래밍
위에서 말씀 드렸다 시피 이 소스는 JSP라기 보다는 HTML이라고 해야 더 정확 할 것입니다. 동적인 요소, 특히 JAVA 언어가 사용되지 않았기 때문이죠. 이제 여기에 JSP적 요소( JAVA 언어를 이용한 )를 추가한 "Hello, World!" 소스 코드를 작성해 보도록 하겠습니다.

소스는 다음과 같습니다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<% String str = new String("Hello, World!"); %>
<%= str %>
</body>
</html>

이전에 작성했었던 "Hello, World!" 소스와 달라진 부분이 있지요?

이전 "Hello, World!" 소스

바뀐 "Hello, World!" 소스

바로 <Body> 태그의 안쪽에 단순히 Hello, world! 라는 문자열만 있었던 부분이 자바 비스무리한 소스코드로 바뀌어 진 부분입니다. 출력되는 결과는 같습니다만, 표현하는 방식이 약간 다른데요. 전자는 HTML을 이용한 정적인 방식이고, 후자는 JSP를 이용한 동적인 방식이 되겠습니다.

JSP 코드의 출력 결과

더 설명을 하자면, JSP 소스 코드에는 HTML 코드 뿐만아니라 자바 프로그래밍 코드도 약간 들어가 있다는 것입니다. 바로 HTML 문서 중간에 <% %>로 둘러 쌓인 부분이 바로 자바 프로그래밍 부분인데요. 위에서는 문자열인 String 클래스를 생성자를 이용해 "Hello, World!" 라는 문자열을 만들어서 저장을 하고 있습니다. 여기까지는 자바 코드와 같은 패턴이네요.

다음은 <%= str %> 부분입니다. 원래 자바에서 콘솔에 문자열을 출력하는 메소드는 System.out.println("") 임을 자바를 배우신 분이라면 아실 겁니다. 하지만 JSP에서 출력이 되는 곳은 콘솔이 아니라 HTML을 출력하는 웹 브라우저입니다. 이 때 사용하는 방법이 <%= 변수 %> 를 사용하는 방법으로, 변수에 들어있는 내용이 문자열의 형태로 HTML 상에 출력이 되는 것입니다.

위 소스 코드를 설명해보면, str 이라는 변수에 "Hello, World!"라는 문자열 객체를 만들어서 가리키게 하고 있습니다. ( str이라는 변수에 "Hello, World!"라는 문자열을 저장하고 있다고 보시면 됩니다. ) 그 다음줄에서 <%= str %> 이라는 부분에 의해서 str 변수에 들어있는 문자열이 HTML 상으로 출력이 됩니다. 즉, str에 "Hello, World!" 라는 문자열이 들어 있으므로 <%= str %> 코드를 만나서 Hello, World 가 HTML로 출력이 되는 것입니다.

로그인 처리

JSP를 이용하는 이유가 바로 여기에 있는데요. 프로그래밍이 가능하다는 부분입니다. 만일 로그인한 사용자의 정보를 표현하고 싶을 때, 그 정보를 변수에 담았다가 요소요소에 사용 할 수 있습니다. 또, 회원의 등급에 따른 if 문의 사용으로 JSP 페이지를 다르게 표현 할 수도 있는 강력한 프로그래밍 가능성을 가지고 있습니다.

요약하면 JSP를 이용해서 좀 더 유연하고, 강력한 웹 페이지를 구성 할 수 있다는 말입니다.

JSP에 대한 더 자세한 내용은 차차 배워 가도록 하겠습니다. JSP를 배워서 게시판을 만들어 보는 것이 이번 스터디의 목적이니 잘 따라 오시고 좀 더 공부를 하시면 쇼핑몰이나 블로그 플랫폼, 홈페이지 정도를 만들 수 있는 실력까지 올라 가실 수 있을 겁니다. ^^

JSP 학습 추천 도서

저작자표시 비영리 변경금지

JSP 프로젝트 생성 및 "Hello, world!" 프로그래밍

2010. 7. 19. 11:57

JSP 프로그래밍의 시작

이전 포스팅에서 JSP 프로그래밍을 할 수 있는 환경을 구축 하였습니다. 만약 여러분의 컴퓨터에 JSP를 프로그래밍 할 수 있는 환경이 갖추어 지지 않았다면, 이전 포스트를 보면서 JSP 환경 구축을 하시기 바랍니다. 프로그래밍 환경이 구축되지 않았다면 JSP 프로그래밍 하기 힘들어요~ ( 메모장을 이용해서 서버에 올리는 식으로 할 수도 있지만 시간이 많이 걸리고 복잡해서 처음 배우는 분들에겐 비추입니다. )

2010/04/06 - [컴퓨터 공학/Java] - 자바( Java )설치하기 & 환경변수( path ) 설정하기
2010/04/06 - [컴퓨터 공학/Java] - 자바( JAVA ) 개발 환경 설치( IDE 설치 ) - 이클립스( Eclipse ) 설치하기 및 오류
2010/07/15 - [컴퓨터 공학/Java] - 이클립스와 톰캣 설치 및 연동하기

이클립스 프로젝트 생성하기

그러면 JSP 프로그래밍을 하기위해서 개발환경인 이클립스를 실행시킵니다.

이클립스에도 여러가지 버젼이 있는데, 저는 갈릴레오 버전을 사용하고 있습니다. 갈릴레오 버전이 나온지 얼마 안되서 아직 호환성 문제 및 여러가지 잡음이 있는데, 만약 JSP 프로그래밍을 하다가 안 되는 점이 있으면, 잘 찾아 보시고 정 안되면 이전 버전인 유로파 같은 버전을 다시 설치해 주시기 바랍니다.

어짜피 이클립스는 인스톨 과정이 없고, 그냥 압축 파일만 압축 해제 해주면 되기 때문에 다운그레이드 하는 과정이 굉장히 쉽습니다.

하위 버전을 사용 하실 경우 톰캣 연동 플러그인을 다시 설치해 주셔야 합니다. ( plugins 폴더에 다시 집어 넣어 주셔야 합니다. )

2010/07/15 - [컴퓨터 공학/Java] - 이클립스와 톰캣 설치 및 연동하기

이클립스를 실행 하셨으면, [File] -> [New] -> [Project]를 선택합니다.

Project 를 새로 생성 할 수 있는 창이 뜨는데요. 이 메뉴 중에서 'Web' 의 하위메뉴에서 'Dynamic Web Project'를 선택해 줍니다.

여기서 Dynamic Web Project 란 동적인 웹 페이지를 만들 수 있는 프로젝트를 말합니다. 동적인 웹 페이지란, 게시판 처럼 데이터 베이스나 어떤 입력, 조건 등에 따라서 웹 페이지의 내용이 동적으로 변하는 페이지를 말합니다. JSP나 PHP, ASP 등의 웹 프로그래밍 언어로 쓰여진 웹 페이지가 이런 동적 웹페이지 ( Dynamic Web Page )에 해당합니다.

반면 Static Web Project는 JSP 같은 웹 프로그래밍 언어가 아니라 단지 HTML과 Javascript, css와 같은 웹 페이지 자체의 동적인 요소가 없는 페이지를 만드는 프로젝트를 의미합니다.

우리는 JSP 프로그래밍을 할 것이기 때문에 'Dynamic Web Project'를 선택합니다.

'Dynamic Web Project'를 선택 하셨으면 위와 같은 창이 나올 겁니다. 'Project Name'에 적절한 프로젝트 이름을 써줍니다. 나머지는 그냥 기본 설정을 따라가시면 됩니다.

그 밑에 'Project contents' 는 프로젝트의 컨텐츠 ( 설정사항, 소스 코드 등 ) 들이 어느 디렉토리에 저장이 될 것인가를 말합니다. 기본으로 설정을 하면, 여러분의 'Work Space' 에 저장이 될 겁니다.
그리고 'Target Runtime'은 개발한 JSP 등의 실행을 위한 서버를 설정하는 곳인데, 나중에 설정을 하게 될 것이니 <None>을 사용하도록 합니다.

프로젝트 이름을 입력 하셨으면, [Finish] 를 눌러서 진행합니다.

프로젝트가 생성되어 'Project Explorer'에 방금 생성한 프로젝트가 등록이 되어 있는 것을 볼 수 있습니다.
저는 'JspProgramming' 이라는 이름으로 생성을 했습니다. 여러분도 여러분이 써 넣으신 프로젝트 이름이 저 곳에 뜰 겁니다.

"Hello, world!" 프로그램 소스 작성

이제 JSP를 프로그래밍 할 수 있는 프로젝트까지 생성이 되었습니다.
지금부터는 실제로 JSP 프로그래밍을 해보도록 하겠습니다. 프로그래밍을 배울 때, 가장 먼저 작성하는 프로그래밍이 바로 Hello, World 인데요. 간단하기 "Hello, World!"라는 문자를 출력하는 프로그램 입니다.

Project Explorer에 보시면 'WebContent' 라는 폴더가 있습니다. 이 폴더를 선택하고 우클릭해서 폴더를 하나 만들어 줍니다.
[우클릭] -> [New] -> [Folder] 를 선택합니다.

폴더 이름에 적절한 이름을 넣어줍니다.
저는 HelloWorld 라는 이름을 넣었습니다.
적절한 이름을 넣고 [Finish]를 선택합니다.

뭐, 사실 이렇게 폴더를 만들어서 관리를 하지 않아도 됩니다만 효과적인 소스 관리를 위해서 저는 폴더를 만들어서 관리를 하는 편입니다. 나중에 프로젝트가 커지거나 소스 파일이 많아지면 헷갈리게 되거든요 ^^

귀찮으신 분들은 폴더 안 만드셔도 됩니다.

HelloWorld 라는 폴더가 생성이 되었으면 ( 여러분이 입력한 폴더가 생성이 되었으면 ) 그 폴더를 선택하고 [우클릭] -> [New] -> [JSP]를 선택합니다.

만약 JSP가 보이지 않으신다면,

[New] -> [Other] -> 'Web' -> 'JSP' 를 선택하시기 바랍니다.

"File Name" 에 생성할 파일이름을 써 넣습니다.
저는 "HelloWorld.jsp"를 써 넣겠습니다.
[Finish] 를 눌러도 되지만 [Next]를 눌러서 템플릿 소스를 선택하도록 하겠습니다.

여러가지 템플릿 항목들이 있는데, 그 중에 "New JSP File (html)" 을 선택하고 [Finish] 버튼을 누르겠습니다.

템플릿이란?

프로그래밍을 하게 되면, 기본적인 구조를 계속해서 입력해야 할 상황이 있습니다.

HTML을 예로 들면,
<html>
<head>

</head>
<body>
</body>
</html>

이 부분은 새로운 html 페이지를 만들 때 항상 반복적으로 써 넣어야 합니다. 하지만 템플릿을 사용하면 이런 기본적인 구조가 미리 쓰여진채로 생성이 되어서 보다 편리하게 프로그래밍을 할 수 있습니다.

물론 Ctrl + C,V 를 해서 복사를 할 수도 있지만 이 기능을 사용하는게 더 깔끔하고 멋지지 않을 까요? ㅋㅋ

그럼 "Hello, World!"를 출력하는 프로그램을 작성해 보도록 하겠습니다.

단순히 템플릿에 의해 생성된 내용 중에 '<body>' 와 '</body>' 사이에 "Hello, World!" 만 타이핑 해서 넣은 화면입니다. 템플릿을 이용하면 편리하긴 하지만 좀 더럽게 느껴질 수도 있습니다. 생략 할 수도 있는 것들이 추가 되니까 말이죠.

[Ctrl] + [F11] 을 눌러서 실행을 시킵니다.

위와 같은 창이 뜨는데, 아마 'IBM WebSphere v6.0' 이라는 항목이 기본으로 설정되어 있을 텐데, 조금 위로 올라가면
'Apache' -> 'Tomcat v5.5 Server' 가 있을 겁니다. 여기서 여러분이 설치한 톰캣 서버의 버전을 선택해 주시면 됩니다. 저는 5.5 버전을 설치했으니 v5.5 를 선택하겠습니다.

'Tomcat Installation directory'의 [Browse]를 클릭해서 여러분이 이전에 톰캣 서버를 설치한 디렉토리를 지정해 줍니다.
기본 디렉토리는 "C:\Program Files\Apache Software Foundation\Tomcat 5.5" 입니다.
[Next]를 눌러서 진행합니다.

다음은 실행에 포함시킬 프로젝트를 선택하는 화면입니다.
'Project" Explorer' 에 여러개의 프로젝트를 포함 시킬 수 있는데, 그 중에 실행 시킬 프로젝트를 고르는 화면입니다. Configured 라는 쪽이 실행 시킬 프로젝트 목록이고, Available 이라는 쪽이 추가 시킬 수 있는 프로젝트입니다. 여러개의 프로젝트가 연계해서 작동하는 큰 프로젝트가 아니면 대부분 현재 실행되고 있는 프로젝트만 포함 시킵니다.

이렇게 서버 설정이 끝나고, 다시 [Ctrl] + [F11] 을 눌러서 프로젝트를 실행 시킵니다.

자, Hello, World! 라는 문자열이 뜬 것이 보입니다.
이제 JSP 프로그래밍을 할 수 있는 개발 환경과 간단한 JSP 프로그래밍을 해 봤는데요. 앞으로 배울 것이 더 많고 많이 배울 수록 해보고 싶은 것들이 더 많게 될 것입니다.

JSP 학습 추천 도서

저작자표시 비영리 변경금지

링크 태그 걸기 <a> </a> 태그 연습

2010. 5. 3. 20:25

꼬마낙타 태그 연습장

HTML의 가장 기본이라고 할 수 있는 요소가 바로 링크입니다. 하이퍼 텍스트( Hyper Text ) 라는 말에서 알 수 있듯이 웹에서 모든 문서는 서로 링크라는 것으로 연결이 되어 있습니다. 그러면 링크란 무엇이며 링크 태그는 어떻게 사용하는 것일까요? 먼저 링크 태그는 HTML 페이지를 구성 할 때, 링크를 넣어 주는 역할을 하는 태그를 의미 합니다.

링크란 무엇일까요? 이것이 링크입니다. --> http://plusblog.tistory.com/
화살표 오른편에 있는 주소를 클릭하면 여러분은 저의 블로그로 돌아 올 수가 있습니다. ( 비슷한 예로 네이버 주소를 클릭해서 들어가게 만들 수도 있지요. 링크는 사전적으로 연결이란 뜻을 가지고 있는데, 웹 페이지에선 클릭을 해서 다른 페이지로 혹은 자기 자신의 특별한 곳으로 갈 수 있는 기능을 의미합니다.

링크를 걸 수 있는 방법은 여러가지가 있습니다. 첫 번째로 블로그의 스마트 에디터가 있는데요. 티스토리를 예로 들면 글을 쓸 때, 쇠사슬 모양의 링크 버튼이 있습니다.

링크 태그 넣기 : 스마트 에디터

1번 버튼을 누르면 2번이 확장되어 주소를 쓸 수 있는 창이 나오게 됩니다. 2번의 입력 창에 주소를 입력하면 본문에 링크가 삽입이 됩니다. 물론 이런 쉬운 방법이 있지만 HTML 태그를 이용해서 좀 더 강력하고 추가적인 정보를 입력 할 수가 있습니다.

링크 태그의 기본적인 형태는 다음과 같습니다. 태그연습장을 열어서 연습해 보세요~

태그 실행 결과 : 꼬마낙타 블로그
따라해보기

위 속 성에서 주소라는 부분에 연결을 시킬 주소를 써 넣습니다. 만약 href="http://www.naver.com/" 을 써 넣으셨다면 해당 링크 태그를 적용 시켰을 때, 네이버로 링크를 시켜주겠죠. 주의 하실 점은 <a src="주소"> 로 사용하지 않는 것입니다. 다른 태그들은 src 속성으로 주소를 접근하지만 a 엘리먼트는 href 로 접근하니 꼭 외워 두시기 바랍니다.

태그 연습장을 열어서 다음을 연습합니다
.

태그 실행 결과 : 꼬마낙타 블로그
따라해보기

이번에 추가로 볼 속성은 target 속성입니다. target 속성은 링크를 클릭했을때, 링크에 해당하는 html 문서( 혹은 이미지 혹은 비디오 등등... 링크가 걸린 대상 )가 새창에서 열릴 것인지 혹은 현재창에서 열릴 것인지를 결정하는 속성입니다. target 속성은 다음의 값들을 취할 수 있으며 각각 뜻을 가지고 있습니다.

Target 값	의미
_blank	새로운 창을 만들어서 해당 링크를 새로운 창에 불러옵니다.
_self	현재 창에 해당 링크를 불러옵니다. ( 현재 창이 바뀝니다. )
_parent	iframe 같은 엘리먼트에서 부모 프레임에 해당 링크를 불러옵니다.
_top	현재 창 전체에 불러옵니다. ( 프레임이 있을 경우 )

나머지는 조금 응용을 할 때 필요하고 _blank와 _self 정도를 알아두면 편리하게 웹 페이지 혹은 블로그를 꾸미실 수 있을 겁니다.

링크 태그에 추가적인 설명을 덧 붙일 수도 있습니다. 예를 들면, 마우스를 링크에 가져가면 해당 링크에 대한 약간 설명이 덧 붙여져서 나오는 것이지요
.

태그 실행 결과 : 꼬마낙타 블로그
따라해보기

이번엔 title 이라는 속성에 대해서 알아보도록 하겠습니다. title 은 img 태그에서도 쓰이는 속성으로 마우스를 가져 갔을 때, 부가 설명으로 뜨는 작은 메모 같은 것입니다. 위 태그를 태그연습장으로 실행시켜 보면,

위 사진처럼 링크에 부가적인 설명이 붙게 됩니다. 링크의 내용( 여기서 꼬마낙타 블로그라는 글자 )이 너무 길어질 경우에는 간단하게 마우스를 가져가면 부가적인 설명이 뜨도록 하고 싶을 때, title 속성을 이용하면 유용합니다.

링크를 눌렀을 때, 바로 메일을 보낼 수 있게 하는 방법도 있습니다. 링크에 메일 보내기 기능을 사용하면 되는데요. 사용법은 간단합니다
.

태그 실행 결과 : 꼬마낙타 블로그
따라해보기

태그를 위와 같이 쓰면 어떻게 될까요? 주소를 쓰는 href 속성안에 mailto: 라는 생소한 단어와 함께, 뒤에는 메일주소로 보이는 것이 쓰여져 있습니다. 눈치가 빠르신 분이라면 아셨겠지만 바로 웹 페이지에서 클릭 한번으로 메일을 보낼 수 있게 해주는 방법입니다.

제 경우에는 태그연습장을 이용해서 위 태그를 돌려보니, Outlook 이 켜지네요. 아마 다른 분들도 ( 윈도우즈 운영체제를 사용하시는 분이라면 ) 아웃룩이 뜰 꺼라고 생각 됩니다. 다른 메일 관리 프로그램이 설치되어 있고, 그 프로그램이 기본 프로그램으로 설정되어 있다면 아마도 그 프로그램이 뜨겠죠. ^^

앞으로 배울 CSS ( 스타일 시트 ) 를 태그에 적용 시킬 수도 있습니다. 아직 이르지만 연습삼아서 한번 실행을 해 보세요
.

태그 실행 결과 : 꼬마 낙타 블로그
따 라해보기

앞으로 HTML을 배운뒤 CSS라는 것을 배우게 될 텐데, 간단히 CSS를 적용 할 수 있는 속성이 바로 style 속성입니다. 이 style 속성 안에는 css 문법에 맞게 디자인 된 코드가 들어가게 되는데, 위 내용은 이 엘리먼트의 글자 색을 red ( 빨간색 ) 로 하겠다!! 라는 의미입니다. css 는 생각보다 매우 강력한 도구이기 때문에 앞으로 웹 페이지를 디자인 할 때, 이 style 태그를 많이 사용하시게 될 겁니다.

링크 태그를 이용하면 글자 뿐만 아니라 이미지에도 링크를 걸 수가 있습니다. 예를 들면 네이버 글자가 쓰여 있는 그림을 클릭하면 네이버 홈페이지로 이동을 할 수있는 기능이 있습니다. 이것은 이미지 태그도 알아야 하는데, 별로 어렵지 않습니다. 이미지 태그에 대해서는 다음에 자세히 알려드리도록 하겠습니다.

태그 실행 결과 :

위 이미지를 클릭하면 바로 네이버 홈페이지로 링크를 따라 가는 것을 볼 수 있습니다. 링크 태그의 가장 큰 장점이 바로 이것이 아닌가 생각되네요. 홈페이지 꾸밀 때, 배너를 클릭하면 홈페이지로 링크를 따라서 갈 수 있게 해놓면 좀 더 멋진 홈페이지를 만들 수 있을 겁니다.

마지막으로 링크를 자기 자신의 한 부분으로 돌리는 앵커 넣기 기능을 알려드리겠습니다. 웹페이지를 꾸밀 때, 한 페이지에 많은 내용이 들어가는 경우가 있습니다.

예제 :
링크란
링크태그
여는위치
추가설명
메일 보내기
스타일 적용
이미지에 링크 넣기
앵커 넣기

이 포스트에도 앵커를 걸어 놨습니다. 위 링크들을 클릭하면 해당 챕터로 이동하게 되구요. 앵커를 이용하면 웹 페이지의 특정 위치로 이동하기에 편하다는 장점이 있습니다. 좀 더 스마트한 웹 페이지를 만들고 싶으신 분들은 앵커를 사용해서 웹 페이지를 좀 더 구성지게 만들어 보세요.

지금까지 링크 태그의 사용법과 특징들에 대해서 알아 봤습니다. 링크 태그만 알아도 정보로 가득한 웹 페이지를 만들수가 있으니 잘 알아 두시기 바래요. ^^

윈도우( Windows )에 APM( Apache + Php + MySql ) 설치하기

2010. 2. 4. 01:00

홈페이지를 만드시는 분들이면 APM을 아실 겁니다. 아파치( Apache )라는 서버 프로그램과 Php라는 웹 프로그래밍 언어, 그리고 MySql이라는 DBMS를 패키지로 설치할 수 있는 것을 말하는데요. 주로 리눅스 환경에서 사용하기 때문에 윈도우즈 계열의 운영체제를 사용하는 유저에겐 사용하기 어려운 패키지입니다. ( 물론 리눅스를 멀티부팅이나 VMWare 등으로 깔 수는 있지만 어째튼 메인이 윈도우즈이기 때문에 접근이 어려운건 마찬가지 입니다. )

하지만 이런 수요를 만족시키는 프로그램이 있습니다. 윈도우에 APM 패키지를 설치해주는 프로그램입니다. 저도 Windows7에 APM을 설치해 보겠습니다.

먼저 APMSETUP을 다운로드 받겠습니다.

"APMSETUP7 DOWNLOAD"를 다운받습니다. 지금은 버전 7이 최신 버전이군요.

설치 파일을 다운받고 실행을 시킵니다. 보니까 2010년 1월 3일에 배포된 버전인 것 같네요.

경고창 따위는 가볍게 무시해 줍니다. "실행(R)"을 눌러 다음으로 진행합니다.

English로 하실 분은 하셔도 좋습니다만 책임은 못 집니다. ㅋㅋ 전 영어를 잘 못하므로 Korean을 사용하도록 하겠습니다.

이제부터 설치가 시작됩니다. 다시보니까 MySQL 뿐만아니라 큐브리드도 설치가 가능하군요. 큐브리드도 한번 써보고 싶었는데 잘 됐네요. 나중에 한번 써보도록 하겠습니다.

라이센스에 관한 내용입니다. 잘 읽어보시고 동의함 버튼을 누르시면 다음 단계로 이동합니다. 라이센스에 대해서는 한번 잘 읽어 보시는 것이 중요한 것 같습니다. 잘 몰랐던 법적 제한에 대해서도 알 수 있고, 범법을 하지 않게 되니까요.

APMSETUP 7 설치에 딸려오는 부가적인 구성요소를 선택합니다. 큐브리드를 사용하실 분들은 CUBRID DBMS라는 항목을 체크해주시면 됩니다. 잘 모르겠으시면 그냥 다음 > 을 선택합니다.

APMSETUP이 설치될 경로를 선택해 줍니다. 기본적으로 C: 드라이브에 깔지만 찾아보기를 이용해서 여러분이 지정한 경로에 저장 할 수 있습니다. ( 저는 파티션을 나눠서 D: 드라이브에 저장하는 편입니다. )

이제 설치가 진행됩니다. 프로그램이 큰 편은 아니어서 빨리 설치가 되는 편입니다만 심심하신 분들은 자세히 보기를 눌러서 뭐가 설치되고 있는지 보시면 좋습니다. ( 저는 봐도 잘 모르겠습니다만... )

아무튼 뭐가 이렇게 정신없이 지나갑니다. ㅋㅋ

설치를 마치니 위와 같은 경고 창이 뜹니다. 따로 프로젝트를 진행하지 않는 한 액세스 허용은 안하셔도 좋습니다.

설치가 완료되었습니다. 마침 버튼을 누르시면 Readme 파일이 실행 되고, APMSETUP 7 버전이 실행되게 됩니다. ( Readme 안 읽으시는 분은 체크 해제 하시면 되겠구요. )

위와 같은 Readme 파일이 뜹니다. 뭐 나중에 알아야 할 정보들이 들어있을 수도 있으니 참고만 해두시기 바랍니다. 이제 APMSETUP 7 이 제대로 설치 되었는지 확인 해 보도록 하겠습니다.

http://localhost/index.php

이 링크를 클릭하거나 주소창에 써 넣으셔서 해당 주소로 들어가시기 바랍니다.

위와 같은 내용이 나온다면 설치가 정상적으로 완료 된 것입니다. 설치된 php의 정보를 알고 싶으시면

http://127.0.0.1/?page=phpinfo

를 클릭하시면 php에 대한 정보를 알 수 있습니다.

이제 MySQL을 다루는 방법에 대해서 말하겠습니다.

http://127.0.0.1/myadmin/

링크를 들어가셔서 phpMyAdmin 이라는 프로그램을 실행합니다. 아, 참고로 APMSETUP을 처음 설치하셨을 때, 기본 ID와 비밀번호는 root 와 apmsetup 입니다.

로그인이 정상적으로 완료되면 위와 같은 화면이 뜹니다. 암호 변경을 눌러서 기본 암호에서 여러분의 암호로 바꾸도록 하겠습니다.

변경하고자 하는 암호를 두번 입력해주시고 우측의 실행버튼을 누르시면 변경된 암호가 적용 됩니다.

이제 변경 되었습니다. 로그아웃을 하시고 다시 한번 로그인을 하셔서 확인해 주시기바랍니다. 이제 여러분의 컴퓨터에서 홈페이지를 작업하고 확인하실 수가 있습니다.

홈페이지 작업을 할 때, 리눅스 서버의 /var/www/ 의 역할을 하는 폴더가 C:\apmsetup

-- 요약 --
APMSETUP 설치기.
Windows 환경에서 APM 설치해서 홈페이지를 만들어 볼 때 유용한 프로그램입니다.

우분투 APM 설치하기

2009. 11. 21. 15:52

웹프로그래밍을 공부하시는 분들, 특히 PHP를 공부하시는 분들이라면 APM이라는 패키지를 모를리가없다고 생각합니다. ( 모르신다면 지금이라도 한번 찾아 보시기 바랍니다. )

APM은 웹서버를 구성하는 주요 도구인 Apache서버, PHP, MySQL의 이니셜을 말합니다. 여기에 Linux까지 넣어서 LAMP라고도 합니다.

우분투 리눅스 환경에서 APM 패키지를 설치하고 PHP를 공부해 보도록 합시다.

$ sudo apt-get install apache2

위 명령을 실행합니다.

이제 아파치서버가 설치되었습니다. 아파치서버는 전세계 웝서버 점유율이 2007년 기준으로 50%가 넘는 인기있는 서버 프로그램입니다. 자세한 것은 위키백과를 참고하시기 바랍니다.

다음 명령어를 입력합니다. 아파치와 mysql을 연동하는 라이브러리를 설치하는 부분입니다.

$sudo apt-get install libapache2-mod-auth-mysql

두번째 단계도 마쳤습니다. 다음으로 DBMS인 My-sql을 설치하도록 하겠습니다. 다음의 명령어를 실행시킵니다.

$sudo apt-get install mysql-server mysql-client

명령어가 실행이 되면 Mysql 설치에 필요한 자료들을 내려 받고 Mysql 설치가 시작됩니다. 패스워드를 입력합니다. DBMS를 관리하기 위해 앞으로 필요하기 때문에 잘 기억 할 수 있는 암호로 하거나 암호를 잘 기억해 두시기바랍니다.

암호를 한 번더 반복하여 입력합니다.

Mysql의 root 비밀번호를 설정하고 나면 설치가 계속 진행이 됩니다. 잠시후 설치가 끝나고 자동으로 Mysql database server 가 재시작됩니다. 설치가 끝났으면 여러분의 리눅스에는 Mysql이라는 데이터베이스 프로그램이 깔리게 된 것입니다.

이제 PHP5를 설치합니다. 다음 명령어를 입력합니다.

$sudo apt-get install php5-common php5 libapache2-mod-php5

php5이 설치되었습니다. 이제 웹프로그래밍을 할 수 있는 환경이 설치되었습니다.
이제 php5와 Mysql을 연동하기 위한 작업을 시작하겠습니다. 다음 명령어를 입력합니다.

$sudo apt-get install php5-mysql

이제 php 프로그래밍을 하면서 Mysql과 연동해서 DB 프로그램을 할 수 있게 되었습니다. 이제 Apache 서버를 재시작합니다.
다음 명령어를 입력합니다.

$sudo /etc/init.d/apache2 restart

이제 Mysql 서버가 정상적으로 동작하는지 알아보도록 하겠습니다. 다음 명령어를 입력합니다.

$sudo netstat -tap | grep mysql

명령어 입력 후 다음과 같은 메시지가 뜬다면 정상적으로 작동하고 있는 것입니다.

tcp 0 0 localhost.localdomain:mysql *:* LISTEN -

그러면 정상적으로 웹서버가 동작하는지 테스트 해보겠습니다. 다음을 입력해서 텍스트 파일을 만들어 보겠습니다.

$ sudo vi /var/www/phpinfo.php

vi 에디터를 이용해서 다음과 같은 파일을 만듭니다.

<?php
print_r(phpinfo());
?>

간단한 vi에디터 사용법을 알려드리자면 시작하면 i키를 눌러서 삽입 모드를 작동시키고 위의 소스를 타이핑합니다. 타이핑이 완료되면 [ESC]키를 누르고 ":"( 콜론 [Alt] + ";" ) 과 wq를 입력해서 저장하고 종료를 합니다. ( ":wq" )

인터넷 창을 열고( 우분투 데스크 톱에는 기본적으로 파이어폭스가 설치되어 있습니다. ) http://locahost 를 입력합니다. 아파치서버가 정상적으로 설치되었다면 다음과 같은 화면이 출력 될 것입니다.

다음으로 php가 정상적으로 설치되어 있는지 확인해 보도록 하겠습니다. http://localhost/phpinfo.php 를 입력해 봅니다. php5가 정상적으로 설치되었다면 다음과 같이 php5에 대한 정보가 출력이 될 것입니다.

이제 /var/www/ 폴더가 여러분이 개발할 홈페이지의 기본 폴더가 될 것입니다. HTML파일이나 php파일을 만들어서 이 경로에 저장을 하면 다른 컴퓨터에서 웹브라우저를 이용해서 볼 수 있을 것입니다.

이제 php를 이용해서 웹프로그램을 개발해 보도록 합시다!! 이상 우분투 환경에서 APM을 설치해 보았습니다.

PREV 1 NEXT

파프리 블로그