이전에 생성한 회원가입, 로그인, 게시판 페이지를 이용해본다.

 

 

 

입력 양식 - 회원가입

1. 가장 상단에 폼 태그를 입력하고 값을 전달할 방식, 페이지가 넘어갔을때 출력할 파일명을 지정한다. 지금은 폼만 만들지만, 추후 자바스크립트나 제이쿼리에서 각 기능을 추가할 예정이다.

kiwikiwisae.tistory.com

 

입력 양식 - 로그인 폼의 login.jsp 생성, GET방식과 POST방식

이전 글에서 이어지는 포스트↓ 입력 양식 - 로그인 폼 입력 양식, 폼 태그, 폼 객체 사용자에게 정보를 입력받는 요소 사용자에게 입력받은 데이터를 전달하는 방식에는 GET, POST 두 가지가 있는

kiwikiwisae.tistory.com

 

 

입력 양식 - 게시판

1. 가장 상단에 폼 태그를 입력하고 값을 전달할 방식, 페이지가 넘어갔을때 출력할 파일명을 지정한다. 내용 2. 이제 폼 태그 사이의 내용을 입력해본다. 레이아웃을 쉽게 제어하기 위해 테이블

kiwikiwisae.tistory.com

 

 

 

 

 

 

 

 

 

 

 

1. 새로운 dynamic project를 생성한다. 이름은 myhome으로 지정했다.

 

 

 

회원가입, 로그인, 게시판문서가 들어갈 jsp 파일을 생성한다.

각각 memberform.jsp, loginform.jsp, boardform.jsp 라는 이름으로 생성했다.

 

 

 

 

 

 

 

 

 

2. 이전에 생성한 회원가입, 로그인, 게시판.html 파일을 열어 코드를 복사,

myhome프로젝트의 동일한 이름을 가진 jsp 파일에 붙여넣기 한다.

 

이 때, 중요한 것은 .jsp 파일의 상단 1,2번줄의 코드가 훼손되지 않아야 한다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

 

이런식으로 memberform, loginform, boardform.jsp 에도 각각 붙여넣기 한다.

 

 

 

 

 

 

 

3. 다음 파일을 사용할 예정

webpage.html 이라는 하나의 파일이지만

이 파일의 header 부분과 footer 부분을 분리하여 각각 jsp 파일로 만들 예정이다.

 

 

 

 

 

 

4. header.jsp와 footer.jsp를 각각 생성후, memberform, loginform, boardform과 마찬가지로

상단 1,2번 줄의 코드가 훼손되지 않도록 주의하며 헤더와 푸터의 내용을 붙여넣기 한다.

 

 

5. index.jsp 파일을 생성, 1,2번 문단의 코드가 훼손되지 않도록 주의하며

예제 webpage.html의 내용을 똑같이 복사 붙여넣기 한다.

 

header와 footer의 내용을 따로 파일로 분리하였기 때문에 header와 footer의 내용은 삭제한다.

대신 다음과 같은 코드를 header와 footer의 자리에 붙여넣기 한다.

 

 

 

header.jsp를 불러올 부분

 

<%@ include file="header.jsp" %>

 

 

footer.jsp를 불러올 부분

 

<%@ include file="header.jsp" %>

 

 

 

 

header 부분의 회원가입, 로그인, 게시판 에 각각 링크를 연결한다.

 

 

 

 

 

 

 

Dynamic web project EXPORT

 

프로젝트 파일 우클릭 > Export > WAR file 메뉴를 선택한다.

위치를 지정하면 .war 확장자인 파일로 추출이 가능하다.

 

 

 

war 파일의 압축을 풀어 폴더의 내용물을

C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapps\ROOT 로 붙여넣기 하면 배포가 된다.

포트번호를 알고 있다면 해당 내용에 접속이 가능하다.

 

 

Dynamic web project IMPORT

 

Project Explorer의 빈 화면을 우클릭 > Import > WAR file 메뉴를 누른다.

 

 

 

import를 누르면 Browse... 를 눌러 파일을 지정한다.

경고 메시지가 뜨는 이유는 기존에 myhome이라는 이름을 가진 프로젝트가 이미 있기 때문이다.

이름을 바꾸면 문제없이 import 가능하다.

 

 

 

'웹표준 > CSS' 카테고리의 다른 글

CSS 적용방식 - 3.인라인 방식  (0) 2022.08.08
CSS 적용방식 - 2.외장형 방식  (0) 2022.08.08
선택자와 CSS 적용방식 - 1.내장형 방식  (0) 2022.08.08

특정 태그 1개에 대해 css를 적용하는 방식이다.

다음과 같은 형식으로 적용한다.

 

특정 태그에 style="속성:속성값" 

 

<BODY BGCOLOR="white">
	<CENTER>
		<H1>
			<SPAN STYLE="font-style: italic">범위 안에서</SPAN> 스타일 지정
			<DIV STYLE="color: red">범위 안에서 스타일 지정</DIV>
		</H1>
	</CENTER>
</BODY>

 

적용

'웹표준 > CSS' 카테고리의 다른 글

부트 스트랩 템플릿에 회원가입, 로그인, 게시판.html 적용해보기  (0) 2022.08.10
CSS 적용방식 - 2.외장형 방식  (0) 2022.08.08
선택자와 CSS 적용방식 - 1.내장형 방식  (0) 2022.08.08

head 블록에 css 블록을 만들어 놓고

body에서 선택자로 속성을 적용시키는 내장형 방식과는 달리

외장형 방식은 블록 대신 css파일을 따로 만들고, 그 파일의 확장자는 .css로 지정한다.

 

이 파일 안의 내용은 css만 들어가야 한다.

 

 

 

 

link 속성을 통해 call.html 파일에 style.css 파일의 속성을 적용시킨다.

 

 

 

 

적용

'웹표준 > CSS' 카테고리의 다른 글

부트 스트랩 템플릿에 회원가입, 로그인, 게시판.html 적용해보기  (0) 2022.08.10
CSS 적용방식 - 3.인라인 방식  (0) 2022.08.08
선택자와 CSS 적용방식 - 1.내장형 방식  (0) 2022.08.08

헤드 안에 들어갈 값은 정해져있다.

 

제목표시줄에 표시될 문서의 제목,

한글 인코딩.

그리고 css 사용시 css 블록.

 

 

 

 

css를 사용할 때에는 head 괄호 사이에 먼저 css블록을 만든다.

 

<style>
	h1 { color: red; }
</style>

주석은 /* 다음과 같이 */ 처리한다

 

h1 : 선택자

color : 스타일 속성

red : 스타일 값

 

 

 

 

선택자 h1 안에 여러가지 속성을 담아 헤드에 선언을 해두고 본문에서 필요한 곳에

<h1> 괄호로 둘러싸주면 해당 속성이 적용된다.

 

<html>
<head>
<meta charset="UTF-8">
<title>css사용 예제</title>
<style>
h1 {
	font-family: 굴림;
	font-size: 18pt;
	color: red; }
</style>
</head>

<body>
	<h1>
		css에 대한 예제
	</h1>
</body>
</html>

 

 

 

 

 

 

 

여러 선택자를 한 속성에 쓸 수도 있다.

아래와 같이 h2, p를 사용하면 h2와 p는 같은 속성을 담고 있는 선택자가 된다.

 

h2, p {
	font-family: "arial black";
	font-size: 18pt;
	color: gold; }

 

 

 

공백을 많이 벌릴 때에는 &nbsp; 를 소문자로 작성하면 간격이 한 칸씩 생긴다.

 

응용해서 다음과 같은 코드를 작성해본다.

 

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
h2, p {
	font-family: "arial black";
	font-size: 18pt;
	color: gold;
}
</style>
</head>

<body bgcolor="#990099">
	<center>
		<h2>
			css에 대한 예제
			<hr>
		</h2>
		<h2>The              Fun              Corner</h2>
		<br>
		<p>The &nbsp;&nbsp; Street &nbsp;&nbsp; Fair</p>
	</center>
</body>

 

스페이스로 간격을 많이 벌린 the fun corner와

&nbsp;로 공백을 준 the street fair의 단어 간격 사이에 차이가 있다.

 

 

 

 

 

css에도 부모와 자식 개념이 있다. 상속과는 다르다.

 

h3 {
	color: #ff1aff
}
h5 {
	color: skyblue
}
h5 em {
	color: white
}

 

h5, h5 em 이 두 가지 선택자가 중에서

h5 가 부모, em이 h5의 자식이라고 할 수 있다.

 

부모와 자식이라는 용어를 쓰지만 상속과는 조금 다른데,

이 em 은 <h5></h5> 괄호 안에서만 적용되는 태그이다.

 

아래 코드를 보면 

폰트 색깔을 흰색으로 변경해주는 내용을 담은 em 선택자는 총 두번 사용된다.

그러나 적용되는 것은 <h5> 블록 안에 사용된 <em> 뿐이다.

 

<h3>
	개봉 앞둔 애니메이션 <em>"포켓몬 3“</em>
</h3>
<hr>
<h5>
	애니메이션 영화<em>“포켓몬 3”</em>의 홍보 인쇄물에 등장한 애쉬, 피카츄 그리고 미스티의 모습입니다
</h5>

 

 

 

 

 

 

 

 

' . ' 으로 정의하는 선택자

 

.으로 지정된 선택자를 불러올 때에는 class 속성으로 불러와야 한다.

클래스 속성으로 불러온다는 것은 아래와 같은 것이다.

 

<head>
	<style>
    	.pink{color: pink}
    </style>
</head>
<body>
	<h1 class=pink> 핑크 </h1>
</body>

 

 

 

 

 

' # ' 으로 정의하는 선택자

 

id 속성으로 불러온다.

 

더보기

id 속성  고유한 식별을 목적으로 할 때 (자바스크립트) / css를 적용하기 위해서 (css)

class 속성 재사용을 목적으로 할 때

name 속성  form 컨트롤 요소의 value를 서버로 전송하기 위해 필요

 

<head>
	<style>
    	#pink{color: pink}
    </style>
</head>
<body>
	<h1 id=pink> 핑크 </h1>
</body>

 

 

 

 

 

'웹표준 > CSS' 카테고리의 다른 글

부트 스트랩 템플릿에 회원가입, 로그인, 게시판.html 적용해보기  (0) 2022.08.10
CSS 적용방식 - 3.인라인 방식  (0) 2022.08.08
CSS 적용방식 - 2.외장형 방식  (0) 2022.08.08

+ Recent posts

티스토리툴바