* 각 스타일에 대한 예제이다.

border-style:dotted


 

border-style:solid


 

border-style:double


 

border-style:groove


 

border-style:ridge


 

border-style:inset


 

border-style:outset

 


* 보더의 넓이에 대한 예제이다. border-style과 같이 쓰지 않으면 아무런 효과가 없다.

border-style:solid;border-width:5px


 

border-style:solid;border-width:thin


border-style:solid;border-width:memium


 

border-style:solid;border-width:thick

 


* 보더의 색에 대한 예제이다. border-style과 같이 쓰지 않으면 아무런 효과가 없다.

border-style:solid;border-color:red


 

border-style:solid;border-color:gray


 

border-style:solid;border-color:black


 

border-style:solid;border-color:rgb(255,0,0)


 

border-style:solid;border-color:#ff0000

 


* 보더의 넓이, 스타일, 색을 한줄로 나타내기

border:dotted #ff0000 3px

 


* 각 방향의 보더를 다르게 설정

border-top-style:dotted;border-right-style:solid;border-bottom-style:double;border-left-style:ridge


 

border-style:dotted solid double ridge

 


* 아래는 각 스타일에 대한 설명이다.

* 보더의 형태를 나타낸다.

border-style

: none, dotted, solid, double, groove, ridge, inset, outset

 

* 넓이

border-width

: 5px, thin, medium, thick

 

* 색

border-color

: red, blue, green, gray, black, lightgray, rgb(255,0,0), #ff0000

 

* 각 방향의 스타일을 다르게 설정

border-top-style, border-right-style, border-bottom-style, border-left-style

: none, dotted, solid, double, groove, ridge, inset, outset

 

* 위의 스타일을 간단하게 나타내기

border-style: dotted solid double dashed;

: 위는 dotted, 오른쪽은 solid, 아래는 double, 왼쪽은 dashed의 스타일을 가짐

 

* 짧게 넓이, 스타일, 색을 나타태기

border: 5px dotted red;

: 넓이는 5px, 스타일은 dotted, 색은 red (style은 필수)

 

출처 : http://unikys.tistory.com/256

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

css 파일의 내용이 많아지면 이를 관리하기 위해서 주석을 활용하면 좋습니다.

주석은 소스상에서만 표시될뿐 실제적으로는 아무 영향을 미치지 않는 코드입니다.

css의 주석은 /*로 시작하여 */로 끝납니다.

<style type="text/css">
<!--
/*강조하고 싶은 문단에 red 클래스를 적용한다.*/
.red {color:red}
//-->
</style>

<p class="red">이 문단의 id는 red입니다.</p>

<p>일반적인 문단입니다.</p>

CSS 구문이 간단할때는 주석이 크게 필요하지 않지만 홈페이지의 모든 문서에 연결된 외부 CSS파일의 경우 CSS 구문이 아주 복잡합니다.

이때 주석을 적절하게 사용한다면 CSS 문서의 관리가 편해집니다.

출처 : http://www.homejjang.com/07/comment.php

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

name
(1) document.폼객체명.폼원소명.value
(2) document.getElementsByName("name")


name page 안에서 중복되어 사용이 가능하며 action에 해당하는 페이지로 전달하는 파라미터로 사용된다.

GET/POST 방식으로 값을 전달하고 싶은 TAG에 사용. Form 객체들(input , radio box ,checkbox )에서 전송되어지는 Parameter의 Key값으로 사용이 됩니다. 서버단에서는 request.getParameter(parameterName) 이런 식으로 값을 가져오죠.


 

id
(1) document.all.id.value
(2) id.value
(3) document.getElementById("폼 id").value

id page 안에서 중복 사용 불가하며 주로 JavaScript에서 다룰려고 지정하는 것이다. name도 자바스크립트로 속성이나 값을 변경 할 수 있으나 중복값을 갖기 때문에 id로 접근하는 것을 주로 사용한다. document.getElementById(id) 를 통해서 해당 엘리먼트Object 를 가져온다.

XML문서(DOM Tree) 내에서 node를 식별하는 용도로 사용되어 페이지 안에 이름이 한개만 존재해야 한다.

보통은 특정 tag를 지정하기 위해서 사용합니다. 태그 내용을 바꾸는 dhtml 작업에서 주로 사용합니다.

참고로 id로 설정된 값은 서버쪽으로 파라미터로 넘어가지 않기 때문에 서버쪽에서 접근이 안된다.

* 파이어 폭스나 크롬에서는 document.getElementById는 id로만 읽습니다.


이름 name id
중복사용 여부 O X
주 용도 GET/POST 방식으로 서버에 전달하는 parameter JavaScript에서 다룰려고 지정
사용법 예 equest.getParameter(parameterName) document.getElementById("")

 

 

출처 : http://lucetedaniel.tistory.com/69

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

경고 : 2008년도 글입니다. 시대가 많이 달라졌어요.

OKJSP
에 자주 가서 요즘 자바 개발자들이 어떻게 살아가나를 보는 편인데, 아주 많이 반복적으로 올라오는 질문이 "대체 뭘 공부해야 하나요? 프레임워크는 Spring을 해야 할까요? iBATIS를 해야 할까요?" 하는 식의 질문들이다(이 질문은 사실 말이 안된다. 왜 그런지 읽다보면 나온다).

Java는 웹 관련 프레임워크들이 너무 다양하고, Ruby나 Python 같은 경우에는 RubyOnRailsDjango 처럼 하나의 프레임워크 안에 기능별 프레임워크들도 모두 다 All in one 형태로 들어 있어서 혼란을 주지 않는 반면, Java는 각 영역별로 프레임워크가 모두 다르고, 또한 각 영역별로 존재하는 프레임워크들의 종류도 많아서 초보 개발자들에게 극심한 혼란을 주고 있다.

그래서 나름대로 Java Web 개발자들을 위한 학습 로드맵을 정리해 보았다.

1. Java 그 자체
많은 웹 개발자들이 마치 JSP 코드를 짤 줄 알면 그걸로 Java 웹 개발을 할 줄아는 것이라 생각하고 Java 그 자체를 소홀히 하는 것을 본다.
말도 안되는 소리이다. Java를 모르고서 Java 웹 개발을 제대로 한다는 것은 어불 성설이다. Java 그 자체를 먼저 공부하라.

특히 Java 5 문법을 숙지하길 권한다. 이제 우리나라도 점차 Java 5가 대세가 되어 가고 있다. 대부분의 프레임워크들과 WAS(JSP와 서블릿을 구동하는 서버)도 모두 Java 5를 기준으로 바뀌었으며, JVM 자체도 버전이 높을 수록 성능이 더 좋다.

2. JSP와 Servlet 그리고 Model 1
모델 1은, JSP 하나에 DB에 접속해서 쿼리를 날리는 등의 모든 업무적인 기능(Business Logic)을 넣고, 그 아래에 HTML 코드를 박아 넣는 식으로 개발하는 것을 의미한다.
아직도 많은 개발자들이 여기에 길들여져 있는데, 일단 JSP 자체에 대한 기본기를 익힌 뒤로는 재빨리 버려야 할 습관이다.

그리고 많은 개발자들이 Servlet을 무시하고 JSP만 하는 것을 보곤 하는데, Servlet에 대한 학습이 제대로 이뤄지지 않으면 더 나은 웹 개발이 곤란하다. Servlet에 대한 기초 개념을 확실히 잡길 권한다.


모델 1은 제가 알기로는 HTML과 로직을 모두 한 JSP에 넣는 방식이 아니라 jsp:beans를 이용하는 방식입니다. 모델 1에서도 여전히 비즈니스 로직과 UI는 분리할 수 있죠. thin controller, fat model에는 더 맞는 방식이라고도 할 수 있습니다. - 영록, 그리고 Servlets and JSP Pages Best Practices에서 Model 1 관련 부분 참조



모델 1은 JSP나 혹은 서블릿 하나가 요청에 대한 처리, 데이터 유효성 검사, 비즈니스 로직 처리, 응답 생성을 모두 다 책임지는 방식이다. 모델 1은 작고, 간단한 애플리케이션에서 개발을 쉽게하고자 할때 사용된다.

In Model 1, a request is made to a JSP or servlet and then that JSP or servlet handles all responsibilities for the request, including processing the request, validating data, handling the business logic, and generating a response. The Model 1 architecture is commonly used in smaller, simple task applications due to its ease of development. - Wikipedia




3. Model 2 - 프레임워크의 등장
JSP로 열심히 개발을 하다보니 프로젝트 규모도 커지기 시작하고, JSP 파일 크기도 수천줄에 달하는등 엄청나게 커진다.
그런데 이 JSP에다 두서없이 모든 기능을 다 때려 넣다보니 JSP마다 똑같은 기능들이 Copy&Paste로 들어가고, JSP 안에 들어 있는 Java 코드들에서 에러가 발생하면 찾아내서 디버깅 하는 일이 지옥같이 느껴지기 시작한다.

여기서 Model 2가 구원자로 등장한다.

Model 2는 말만 멋드러졌지 실제로는 간단한 개념이다.

JSP에서 수행하던 DB 쿼리 등의 작업을 Servlet에게 넘겨주고 JSP에서는 오로지 화면 출력만 담당하는 것이다.

Servlet에서 DB 쿼리등 화면 출력과는 상관없는 비지니스 로직을 일단 먼저 모두 수행하고, 그 결과를 request.setAttribute("key",결과객체);로 담은 다음 JSP 페이지로 포워딩(forward)을 하면 JSP에서는 request.getAttribute("key")로 그 객체를 받아서 화면에 뿌려주기만 한다.
이런 업무 수행단/화면 출력단의 철저한 역할 분리가 Model 2이다.

여기서 이러한 각 역할을 "MVC - Model View Controller" 라고 한다. 그래서 Model 2는 MVC와 동일한 의미로 사용하기 도 한다. MVC의 의미는 공부하면서 찾아보라.

이게 뭐가 좋냐고? 개발 기간이 좀 길어지고 프로젝트 규모가 쬐끔 커지고, 기존 프로젝트를 유지보수를 해보면 얼마나 좋은지 몸소 뼈져리게 느끼게 된다.

Model 2의 기능을 정형화해서 쉽게 구현하게 해주는 것이 MVC Framework들의 역할이다.
가장 유명한 Model 2 웹 프레임워크들은 다음과 같은 것들이 있다.

* 스트럿츠 1 - Struts 1
* 스트럿츠 2 - Struts 2
* 스프링 MVC - Spring MVC
* 기타 덜 유명한 Wicket, Stripes, JSF, Tapestry 등.

Struts 1은 MVC의 효시라고 할 수 있다. 우리에게 MVC라는 축복을 주기는하였으나, 나온지 오래된 만큼 낡은 개념들이 많이 녹아있고 쓸데 없이 복잡하고 배우기도 어려운 편이다.

오히려 Struts 2와 Spring MVC가 더 배우기 쉬울 것이며, 개발도 더 쉽다. 현재 추세는 Struts 2와 Spring MVC이다. 대형 포탈이나 SI 업체들도 Spring/Struts 2를 주로 채택하는 추세로 가고 있는 것으로 알고 있다.

둘 중 하나의 개념만 확실히 이해해도 다른 것을 배우는데 어려움이 별로 없으므로 그냥 둘중에 골라서 배우길 권한다. 나는 Spring을 선호한다.

그리고 MVC 프레임워크를 사용하기 시작하면서 View를 만드는 JSP에 대해서도 재조명이 시작된다. 기존에 Java 코드를 JSP에 직접 넣던 관행을 버리고 JSTL과 태그 라이브러리를 사용하거나 아예 JSP를 버리고 다른 템플릿 엔진으로 만들기도 한다. 이에 관해서는 맨 마지막에.

4. 퍼시스턴스 프레임워크 : JDBC 반복 작업에 짜증이 나기 시작하다.
현대 웹 개발에서 가장 큰 역할을 차지하는 것은 뭐니뭐니해도 단연 Database 작업이다.
지금까지는 아마도 JDBC에서 DB 커넥션을 맺고, 쿼리를 날리고 그 결과 ResultSet을 JSP로 넘겨주어서 출력하는 식으로 했을 것이다.
이미 다들 알고 있겠지만 JDBC를 사용하면 똑같은 코드가 굉장히 많이 반복해서 나온다. 한마디로 "삽질"의 전형이 JDBC 작업이다.
이것을 깨달은 많은 개발자들이 조금 어정짱하게 반복작업을 해결해주는 Util 클래스들을 프로젝트별로 만들어서 사용하곤 한다.
하지만, 물론 이에 대해 정형화하고 깔끔하고 훨씬 더 사용하기 쉬게 만들려는 노력이 이미 수년에 걸쳐 이루어졌다.

이렇게 DB관련된 작업을 정형화한 것들을 Persistence Framework 라고 한다.

* 아이바티스 - iBATIS : SQL Mapper - JDBC보다 더 쉽게 배우고, 더 편하게 사용한다.
* 하이버네이트 - Hibernate : 객체지향을 객체지향답게, 개발 기간을 엄청나게 단축시켜주다.

퍼시스턴스 프레임워크의 양대 산맥은 iBATIS와 Hibernate이다. 이 둘 모두 우리나라에 책이 나와 있다.
iBATIS는 SQL Mapper의 한 종류이고, Hibernate는 ORM의 한 종류이다.

이 둘의 차이는 iBATIS는 개발자가 SQL 쿼리를 직접 작성한 것을 객체에 매핑시켜주는 것이고, ORM은 DB 스키마와 객체간의 관계를 설정파일로 만들면 자동으로 쿼리를 만들어주는 것이다.

자, 이 둘을 보면 미국에서는 Hibernate가 인기가 좋고, 우리나라에서는 iBATIS가 사실상 SI 업계를 평정했다.
그러니까, 일단은 우리나라에서는 iBATIS를 공부하면 된다고 보면 된다.

이렇게 말하니까 마치 이 둘이 경쟁자 같은데, 사실 이 둘은 경쟁 상대라기 보다는 보완해주는 역할을 한다. SI에서 처럼 DB 테이블이 정규화 되어 있지 않은 경우에는 Hibernate같은 ORM을 사용하면 프로젝트를 말아먹을 수 있다.

iBATIS는 테이블 정규화에 무관하게, 개발자가 작성한 SQL을 객체로 매핑하기 때문에 DB 스키마가 마구 꼬여 있는 상황에서도 유연하게 작동하고, 개발자가 직접 SQL 튜닝을 할 수 있다는 장점이다.

그리고 Hibernate는 배우기가 굉장히 어려운 프레임워크이고 튜닝이 매우 어렵다. Hibernate책을 보면 캐싱을 통해 성능을 향상시키라고 하지만 캐싱은 iBATIS도 못지않게 잘 지원한다. 하지만 일단 배우면, 그로인한 코딩 생산성이 iBATIS가 감히 넘볼 수 없을 정도록 급격히 향상된다.

Hibernate는 DB 정규화가 잘되어 있는 웹 포탈 업체나 패키지 소프트웨어 제작시에 강력히 권장할만 하다.

5. IoC와 DI - 객체의 생성주기와 의존성을 관리하고 싶어지다
사실 내가 경험한 SI를 보면 4단계 까지만 가도 막장은 아닌 프로젝트라고 본다. 아직도 신규 프로젝트를 하면서도 Model 1에 JDBC로 코딩하는 것을 많이 보았기 때문이다.

앞서, MVC라는 형태로 웹 애플리케이션의 역할을 철저하게 분할해서 처리하라고 했었다.

이제 여기서 좀 더 역할을 분할하기 시작한다.

Database를 관장하는 코드(DAO)와 Database 처리 결과를 가지고 그외 비지니스 로직을 추가로 수행하는 코드(Service), 그리고 웹으로 들어온 요청을 받아서 비지니스 로직을 호출하고, 그 결과를 다시 웹(HTML 등)으로 내보내는 코드(Controller)로 분할을 하면 유지보수가 더 쉽고, DB가 Oracle에서 DB2 로 변경되는 식의 중대 변화가 있을 때도 DAO만 바꾸면 되는 식으로 변화에 대한 대처가 유연해 진다는 것을 깨닫기 시작한다.

이제는 각 역할별로 클래스를 분할하고 컨트롤러 객체는 서비스 객체에 서비스 객체는 DAO 객체에 의존해서 작동하도록 코드를 바꾸기 시작한다. 그리고 객체의 생성과 파괴 주기도 관리해야만 하게 된다. 객체를 하나만 생성하면 되는데 불필요하게 매번 new를 할 필요는 없으니까.

이렇게 객체의 생성/파괴 주기를 관리하고 객체간의 의존성을 관리해주는 프레임워크를 IoC 컨테이너라고 부른다.

1. Spring Framework
2. EJB 3.0

사실상 대세는 Spring Framework로 굳어졌다. EJB 3.0은 내가 안써봐서 뭐라 말은 못하겠다.

Spring MVC는 이 Spring Framework의 일부분이다.

Spring은 또한 AOP도 지원한다.

AOP 의 개념이 상당히 어려운 편이라서 개념 자체를 확실히 한마디로는 표현하지 못하겠다. 어쨌든 개발자들에게 가장 쉽게 다가오는 표현으로 하자면, AOP는 동일한 패턴으로 반복적으로 해야하는 일을 설정을 통해 자동으로 해주는 것이다.
이에 관한 가장 보편적인 예가 바로 트랜잭션이다.
지금까지는 아마도 비지니스 로직이 시작될 때 트랜잭션이 시작되고, 비지니스 로직이 끝날 때 트랜잭션을 종료하는 코드를 매번 작성해서 넣었을 것이다.
AOP를 사용하면, 비지니스 로직의 역할을 하는 메소드가 무엇인지 설정파일에 넣어주기만 하면 자동으로 메소드가 시작될 때 트랜잭션을 시작시키고, 메소드가 끝날 때 트랜잭션을 종료시켜준다. 물론 예외가 발생하면 트랜잭션을 rollback도 해준다. 따라서 Spring을 사용한 프로젝트에서는 트랜잭션 관련 코드를 볼 수 없을 것이다.

Spring 프레임워크는 기본적으로 IoC 컨테이너 역할을 하는 것이 핵심이다. 따라서 Spring을 사용한다고 해서 꼭 Spring MVC를 사용할 필요는 없다. Struts 2 + Spring + iBATIS 나 SpringMVC + Spring + Hibernate 등... 어떠한 조합이라도 가능하다.

6. 그 외
◈ Template Engine : JSP 보다 더 간결하면서 강력한게 필요해!
   * JSP + JSTL : Sun이 지정한 산업표준이다. JSTL은 당연히 쓰고 있으리라 믿는다.
   * Freemarker : 가장 권장할 만하다.
   * Velocity : 굉장히 배우기 쉽다. JSTL보다 더 빨리 배워서 쓸 수 있다. 가독성도 좋다. 그러나 Freemarker 만큼 편하고 강력하지는 못하다.
많은 사람들이 Java 웹 개발을 그냥 "JSP 개발"이라고도 부르는데, MVC가 도입되고, Freemarker 같은 다른 템플릿 엔진을 사용하게 되면 더이상 JSP는 코빼기도 안보이게 된다. 그러므로.. JSP 개발이라는 말은 쓰지 않았으면 좋겠다.

◈ Layout Engine
   * Sitemesh : 헤더 푸터 처럼 동일 패턴이 반복되는 레이아웃을 관리해준다.

◈ XML 도우미 : W3C DOM은 너무 어렵고 난잡하다. 좀 더 편한 XML관련 개발을 원한다면..
   * JDOM : Java 표준으로 지정됐다고 한다.
   * DOM4J
둘 다 비슷하게 편한거 같다. 예전엔 JDOM을 썼었는데, 나 같은 경우 현재 프로젝트에서는 DOM4J를 사용한다. Hibernate가 DOM4J를 사용하기 때문에, 별도의 라이브러리 더 넣는게 귀찮아서.

◈ 단위 테스트
   * jUnit : 코드를 철저하게 테스트하자.

◈ 소스코드 버전관리
   * CVS
   * Subversion : 현재 대세는 Subversion
내가 최고 막장으로 꼽는 프로젝트는 아직도 FTP로 소스 관리하는 프로젝트이다. 이런 프로젝트에는 절대로 참여하지 않을 것이라고 굳게 맹세하고 또 맹세했다. --;
소스 코드 버전관리는 여러 개발자들이 동시에 개발할 때 소스코드를 저장하고 충돌을 관리해주며, 소스 변경 내역을 계속해서 추적해서 과거 소스로 언제든지 돌아갈 수 있도록 도와준다.
현재 대세는 Subversion이지만 CVS로도 버전관리의 이점을 충분히 만끽할 수 있다. 그리고.. 사실 CVS가 사용법을 익히기는 더 쉽다.

◈ 자동 빌드
   * Ant : Ant 면 만사 Ok!
   * Maven
아직도 javac 로 컴파일하고 있고, FTP로 파일 올려서 복사하고 있다면.. 이 모든일을 자동으로 명령 한방에 처리하도록 해야 실수도 적고, 퇴근도 일찍한다.
Ant로 빌드와 배포를 자동화 하자.

결론

내가 권하는 조합은
* SI 업체에서 일하는 경우 : Struts 2 혹은 SpringMVC + iBATIS + JSP/JSTL + 가능하다면 Spring Framework
* 웹 포털등과 같은 업계, 패키지 소프트웨어 제작 업체 : Struts 2 혹은 Spring MVC + Hibernate + Spring Framework + Freemarker + Sitemesh


출처 : http://egloos.zum.com/kwon37xi/v/3666564#type=comment&page=4



블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

게시판 모양 깨짐 방지


만약에 게시판에 글을 썼는데 게시판의 길이가 자동적으로 변하면 문제가 됩니다.


원래 모습


다음과 같이 변하면 좀 이상하겠죠?

 

그래서 TABLE의 특별한 옵션인


<td stype="word-break:break-all;">


을 사용하면



<tr>
    <td bgcolor=white colspan=4 style="word-break:break-all;">
        <font color=black>
        <pre><?=strip_tags($row[content]);?></pre>
        </font>
    </td>
</tr>


위와 같이 추가하고서 다시 글을 보면


똑같습니다. 이유는 pre 태그 때문입니다.


pre태그의 의미는 다음과 같습니다.


기본적으로 html 문서에서 <pre>태그는 "Line Break"를 의미하며, 강제적으로 줄바꿈을 할 때 사용합니다. 키보드의 엔터(Enter), 탭(Tab), 사이띄기(Space) 등을 무조건 공백 하나로만 취급합니다. 그러나 <pre> 태그안의 문자열드에 대해서는 원하는 곳에 지정한 문장을 배치할 수 있으며 원하는 만큼 공백을 줄수도 있고 복잡한 문장과 단락구조 자체를 쉽게 효현할 수 있습니다. <pre>태그를 사용할 때 주의점은 다른 태그를 안에 사용하지 말아야 한다는 것입니다.


그래서 이러한 pre 태그 대신에 PHP 함수중의 nl2br(New Line To BR)를 써줘야하는데 이것은 줄 바꿈 문자를 <BR> 태그로 바꾸는 것을 의미합니다.


그래서 수정된 소스는.

<tr>
    <td bgcolor=white colspan=4 style="word-break:break-all;">
        <font color=black>
        <?=nl2br(strip_tags($row[content]));?>
        </font>
    </td>
</tr>


위와 같이 수정이 됩니다.



이번에는 띄어쓰기가 제대로 되질 않았네요. pre 태그가 줄바꿈과 띄어쓰기를 둘 다 처리하게 되는데 nl2br 함수가 줄바꿈은 처리했지만 아직 띄어쓰기를 처리하지 못했습니다.


그래서 모든 띄어쓰기를 &nbspl(non breaking space) 라는 띄어쓰기를 의미하는 특수문자로 바꿔줘야합니다. 그래서 치환 함수인 str_replace 함수를 사용하도록 합시다.


다음과 같이 수정을 할 수 있습니다.


<tr>
    <td bgcolor=white colspan=4 style="word-break:break-all;">
        <font color=black>
        <?=nl2br(str_replace(" ", "&nbsp;", strip_tags($row[content])));?>
        </font>
    </td>
</tr>


결과화면을 보면





제대로 처리된 것을 알 수 있습니다.


만약에 이렇게 해도 안된다면 테이블의 길이를 지정을하고 고정을 시키는 옵션인 style="table-layout:fixed;를 써주시면 되겠습니다.


<table width=600 border=0 cellpadding=2 cellspcing=1 bgcolor=#777777 style="table-layout:fixed;">


소스 출처 : http://brown.ezphp.net/85





블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag HTML, mysql, php

◈ 입력한대로 보여주는 <pre> 태그 ◈

기본적으로 html 문서에서 <pre>태그는 "Line Break"를 의미하며, 강제적으로 줄바꿈을 할 때 사용합니다. 키보드의 엔터(Enter), 탭(Tab), 사이띄기(Space) 등을 무조건 공백 하나로만 취급합니다. 그러나 <pre> 태그안의 문자열드에 대해서는 원하는 곳에 지정한 문장을 배치할 수 있으며 원하는 만큼 공백을 줄수도 있고 복잡한 문장과 단락구조 자체를 쉽게 효현할 수 있습니다. <pre>태그를 사용할 때 주의점은 다른 태그를 안에 사용하지 말아야 한다는 것입니다.



◈ 사용예 ◈

<html>
<head>
<title>pre 태그</title>
</head>
<body>
<pre>
입력한대로     나타납니다
나보기가 역겨워 가실때에는
말없이 고이보내 드리오리다.


가시는 걸음 걸음 놓인 그꽃을

사뿐히 즈려밟고 가시옵소서.

</pre>
</body>
</html>



◈ 실행결과 ◈

입력한대로 나타납니다 나보기가 역겨워 가실때에는 말없이 고이보내 드리오리다. 가시는 걸음 걸음 놓인 그꽃을 사뿐히 즈려밟고 가시옵소서.

 

 

출처 : http://dsk114.com.ne.kr/html/pre.html

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag HTML, PRE

일단 div와 span 태그의 차이점을 알아보시죠.

 

div

 block 형식으로 공간 분할

 span

 inline 형식으로 공간 분할

 


block과 inline이 뭔지도 모르실 분들이 많을텐데요.

한번 직접 보고 확인해보세요.


div태그부터 시작하겠습니다.

http://kurien.tistory.com

 

http://kurien.tistory.com

 

http://kurien.tistory.com

 


<div style="background-color:red;">http://kurien.tistory.com</div>

<div style="background-color:red;">http://kurien.tistory.com</div>

<div style="background-color:red;">http://kurien.tistory.com</div>

어떤식으로 나오는지 확인시켜드리기 위해서 일부러 배경색을 넣었습니다.


먼저 div는 기본적으로 width=100%로 나오구요.

물론 설정으로 조절이 가능합니다.

block태그는 이러게 하나하나씩 쌓아 올려지는 형식입니다.


그럼 span태그를 보시죠.

http://kurien.tistory.com http://kurien.tistory.com http://kurien.tistory.com


<span style="background-color:red;">http://kurien.tistory.com</span>

<span style="background-color:red;">http://kurien.tistory.com</span>

<span style="background-color:red;">http://kurien.tistory.com</span>

inline 형식은 글자가 한 줄에 차례차례 들어가는 형식입니다.


이렇게 div태그와 span태그를 알아봤는데요,

이 태그만으로 할 수 있는건 그렇게 많지가 않습니다.


제가 위에 설명하면서 적어놓은 style="background-color:red;"부분이 바로 CSS인데요.

저런 효과가 추가 됐을 때 비로소 공간 분할 태그의 쓰임새가 다양해지는 것 같습니다.


정말 중요한 태그니 꼭 알아두세요!

 

출처 : http://kurien.tistory.com/83

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag HTML

<select name="job">
    <option value="">직업선택</option>
    <option value="학생">학생</option>
    <option value="회사원">회사원</option>
    <option value="기타">기타</option>
</select>

 

<select>태그와 <option>태그로 구성됩니다.

<option> 태그에서 사용하는 value 속성은 텍스트 필드에서의 value 속성과는 조금 틀립니다. 텍스트 필드에서 value 속성에 값을 입력하면 기본값이 입력되지만 <option> 태그의 경우는 이 <option>이 선택된 경우 전송되는 값을 지정하는 것입니다.

위의 예제에서 학생을 선택된채로 폼을 전송했다면 job 필드의 value값은 <option value="학생">의 value값인 "학생"으로 지정됩니다.

기본값으로 회사원이 선택되게 할려면 selected 속성을 사용해야 합니다.

<select name="job">
    <option value="">직업선택</option>
    <option value="학생">학생</option>
    <option value="회사원" selected="selected">회사원</option>
    <option value="기타">기타</option>
</select>

아래와 같이 회사원이 선택된채로 출력됩니다.

<optgroup>은 HTML 4 버전에서 새로 만들어진 태그로 옵션에 카테고리를 만들 수 있습니다. 대부분의 웹브라우저에서 지원하고 있다.

<select name="hobby">
     <option value="독서">독서</option>
     <optgroup label="스포츠">
        <option value="야구">야구</option>
        <option value="축구">축구</option>
     </optgroup>
     <option value="음악감상">음악감상</option>
</select>

스포츠라는 카테고리를 만들고 야구와 축구 옵션을 추가하였습니다.

 

 

출처 : http://www.homejjang.com/05/select.php

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag HTML
보통 새로운 웹페이지를 여는 명령어에서 쓰입니다.
속성명이 target 이고 인수가 _blank, _self, _parent, _top  4개 중 하나가 들어가요.

예)
html : < a href='http://flashfriend.tistory.com' target='_blank' >링크</a>
as : navigateToURL ( new URLRequest( 'http://flashfriend.tistory.com'), '_blank' )

_blank
새 윈도우 창을 열어서, 웹페이지를 엽니다. 기존의 창은 그대로 남겨져 있스빈다. 

_self
현재 윈도우창에 그대로, 링크된 웹페이지를 엽니다. ( 현재의 프레임 )

_parent
현재 프레임의 부모 프레임에서 새웹페이지가 열립니다.
만약 어떤 창 A에서 창 B를 새로 열었습니다. 그런데 창 B에서 _parent로 창을 열면 창 A에서 열리게 되는 것이죠.

_top
최상위 프레임에서 열립니다. _parent와 비슷한데요. _parent는 바로 이전창(부모창)에서 열리는 반면
_top은 최상위( 가장 최고 부모)창에서 열립니다.

 

출처 : http://flashfriend.tistory.com/1598

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag HTML

Frameset

Frameset 이란 하나의 브라우저 창을 여러개로 분할하여 각각의 분할된 곳(Frame)에 문서를 하나씩 집어넣어 구성한 문서를 말합니다. 그러기 위해서는 그 분할된 곳 마다 들어갈 문서가 있어야 될 것이고 브라우저 창을 어떻게 분할 했는지에 대한 정보를 담고 있는 문서(Frameset page)가 있어야 되겠군요. 이렇게 문서를 분할하는 이유는 한 페이지로 구성했을 경우처럼 다른 문서를 볼 때 마다 화면 전체가 바뀌지 않고 분할된 특정 부분만 바뀌므로서 문서를 보는 사람이 안정감을 가지게 하자는 거죠. 이 사이트도 역시 그런 뜻에서 Frameset으로 문서를 구성했습니다. 하긴 요새 다시 한 페이지로 구성한 사이트가 유행이라고 하긴 하던데... 그래도 역시 Frameset으로 구성한 페이지가 좋다는 생각은 변함이 없습니다. 최소한 저는 그렇습니다.

그런데 이 Frameset Element라는게 전문적으로 자주 쓰는 사람... 머 그러니까 웹 페이지 맹기는걸 직업으로 하는 사람(그것도 그 사람이 Frameset으로 페이지를 짠다는 가정하에서)이 아니면 아주 가끔 쓰는 Element 라서 솔직히 저도 하나 짤라면 그 때 마다 찾아보곤 합니다. 맨 첨에 한 번 짯으면 됐지 누가 맨날 이거 만들고 있겠습니까. 처음하거나 가끔하면 아주 헷갈리는 넘입니다. 하나 씩 정리해 보기로 하져. 우선 DTD 표와 Element들이 가지고 있는 Attribute들을 살펴 봅시다.

Legend : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD  [표 보는 방법]

Element

Start tag

End tag

Empty

Deprecated

DTD

FRAMESET

 

F

E

 

F

FRAME

 

 

 

 

F




FRAMESET Element

cols

화면을 수직으로 분할하는 갯수나 크기, 사용값 pixel, *(나머지 또는 등분), %

)

<frameset cols="125,675"> <frameset cols="125,*">
<frameset cols="*,800,*"> <frameset cols="20%,80%>

rows

화면을 수평으로 분할하는 갯수나 크기, 사용값 pixel, *(나머지 또는 등분), %

)

<frameset rows="50,*"> <frameset rows="100,*,30">

frameborder

각 프레임간의 경계선 (table border와 같음)

)

<frameset cols="125,675" frameborder="0">

framespacing

각 프레임 경계선 간의 거리 ( Frame table cell 이라고 치면 cellspacing과 같음)

)

<frameset cols="125,675" frameborder="0" framespacing="0">




FRAME Element

src

해당 프레임에 들어갈 문서의 uri

)

<frame src="../html/tomato.html">

name

해당 프레임의 이름, 링크 걸때 Target으로 지정하거나, Scripting에서 사용

)

<frame src="../html/tomato.html" name="menu">

scrolling

각 프레임의 문서를 scroll 시킬건지의 여부, 값은 yes, auto(기본값) 또는 no

)

<frame src="../html/tomato.html" name="menu" scrolling="no">

noresize

각 프레임의 경계선을 움직여 면적 조정을 할건지의 여부, 기본값 resize(움직임)

)

<frame src="../html/tomato.html" name="menu" noresize>

 

출처 : http://www.cadvance.org/?leftmenu=doc/include/total_menu.asp&mainpage=doc/html/advanced/frameset.asp

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

&nbsp;


" " : 공백(스페이스 한 칸)을 의미.
띄어쓰기를 할 때는 키보드의 스페이스키(가장 길쭉한 키)를 한 번 눌러 "공백 문자" 즉 빈 칸을 한 개 삽입합니다. 그런데 HTML 문법에서는, 일반 텍스트 편집에서와 달리, 공백 2개를 연속으로 사용해도 2칸을 띄어쓸 수 없습니다. 공백을 아무리 많이 삽입해도 공백 1개로 간주됩니다. 그래서 공백을 여러 개 사용해야 할 때는, 빈 칸을 &nbsp; 이렇게 표현해 줍니다. 그러면 브라우저가 &nbsp; 기호를 빈 칸으로 표시해 줍니다.

예제:

aaa    bbb


이렇게 aaa와 bbb 사이에 공백을 4칸 넣어줄 때에는

aaa&nbsp; &nbsp; bbb


이렇게 합니다. 진짜 공백과 &nbsp; 기호를 번갈아서 쓰면 됩니다.




&lt;


부등호(<)
괄호로 사용되기도 하고, 수식에서 "무엇보다 적다(Less Than)"는 의미로 사용되기도 하는 기호입니다. 그런데 < 기호는 HTML 파일에 직접 사용할 수 없습니다. (물론 사용해도 브라우저가 알아서 자동으로 처리해 주지만 나중에 에러가 날 수 있습니다.) 왜냐하면 < 기호는 HTML태그를 둘러싸는 기호이기 때문입니다.

제목이 <여기에> 표시됩니다 라는 문자열을 <h1></h1> 태그 안에 넣을 때,

<h1>제목이 <여기에> 표시됩니다</h1>

라고 하면 <여기에> 라는 것도 하나의 HTML태그로 간주되어 버립니다. <여기에> 라는 태그는 없기에 이것은 오류입니다.

따라서 < 기호를, &lt; 이렇게 표기하면 태그와 혼동되지 않고 부등호가 잘 표현됩니다.



&gt;


부등호(>)
위의 경우와 같습니다. 닫는 괄호 또는, "무엇에 비해 크다(Greater Than)"는 뜻.




&amp;


앰퍼샌드(&) 기호는, 위의 경우들에서 보는 것과 같이 이미 특수한 용도로 사용되고 있습니다. 그래서 & 기호 자체를 표현해 주기 위해서는 & 를, &amp; 이렇게 표기해 주어야 합니다.



&quot;


이것은 쌍따옴표(") 하나를 표현하는 것입니다.

<a href="http://www.google.co.kr/">구글 "검색" 홈페이지</a>

가량 이런 링크가 있다고 할 때, 링크를 표현하는 <a> 태그 안에 속성을 나타내기 위해 href="" 이 부분에서 쌍따옴표가 사용되었습니다. 그런데 <a> 태그 안에 자바스크립트를 집어넣을 때, 자바스크립트의 쌍따옴표들이 태그 속성의 쌍따옴표와 겹쳐져 서로 충돌할 수 있습니다. 이때는 아주 심각한 에러가 납니다. 그럴 경우에는 자바스크립트 안의 쌍따옴표들을 &quot; 이렇게 표현하면 해결됩니다.

그러나 링크 제목 안에서는 구글 "검색" 홈페이지 이렇게 따옴표를 사용해도 괜찮습니다. 자바스크립트가 아닌 평범한 문자열에서는 쌍따옴표든 홑따옴표든 따옴표를 따옴표 그대로 사용하면 되고 굳이 &quot; 이렇게 바꾸지 않아도 됩니다.

요약하자면, &quot; 는, 태그 내부의, 쌍따옴표로 둘러싸인 곳 안에서 다시 쌍따옴표를 사용할 때 필요한 것입니다.

즉 &quot; 는 따옴표 충돌의 문제가 있을 때에만 사용하고 보통의 경우에는 사용하지 않습니다.

 


 출처 : http://mwultong.blogspot.com/2006/07/html-css-nbsp-amp-lt-gt-quot.html

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag HTML

테이블은 기본적으로 각 열마다 동일한 행으로 이루어져야 합니다.

<table border="1">
<tr>
 <td>1*1 셀</td>
</tr>
<tr>
 <td>2*1 셀</td>
 <td>2*2 셀</td>
</tr>
</table>

위와 같이 첫번째 열(row)은 1개의 행(column)을 가지고, 두번째 열(row)은 2개의 행(column)을 가지게 만들면 아래처럼 제대로 모양을 갖추어 지지 않습니다.

1*1 셀
2*1 셀2*2 셀

첫번째 열을 오른쪽으로 확장시켜 주어야 합니다. 이때 사용하는 속성이 colspan 입니다. 

<table border="1">
<tr>
 <td colspan="2">1*1 셀</td>
</tr>
<tr>
 <td>2*1 셀</td>
 <td>2*2 셀</td>
</tr>
</table>

위와 같이 colspan="2"로 지정하면 아래와 같이 의도한 대로 모양이 나옵니다.

1*1 셀
2*1 셀2*2 셀

즉 첫번째 row의 column수가 1개이고, 두번째 row의 column 수가 2개이므로 이를 동일하게 맞추어 주기 위해서 첫번째 row의 셀에서 colspan 속성을 사용하였습니다.

열을 확장할때는 rowspan 이라는 속성을 사용합니다.

<table border="1">
<tr>
 <td rowspan="2">1*1 셀</td>
 <td>1*2 셀</td>
</tr>
<tr>
 <td>2*2 셀</td>
</tr>
</table>

1*1셀의 열(row)을 확장했으므로 2열(row)에서는 첫번째 셀이 필요없습니다.

1*1 셀1*2 셀
2*2 셀

여기에서 중요한것은 확장을 하는 방향입니다.

왼쪽에서 오른쪽으로 column을 확장하는 경우 colspan,
위에서 아래로 row를 확장하는 경우는 rowspan

이렇게 기본적으로 기억하면서 colspan과 rowspan 속성을 자유자재로 다룰 수 있어야 합니다.

아주 빈번하게 사용되므로 시간표 같은것을 만들어 보면서 충분한 연습을 해주어야 합니다.


출처 : http://www.homejjang.com/03/colspan.php

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag HTML