핫돌의 잡 지식 놓는 곳

언젠가 사용할지도 모르는 JSP 로그인 화면 만들기. 그리고 홈페이지 색상입히기.

핫돌 2024. 6. 27. 00:45
728x90
반응형

사이트의 공통적인 컨셉이 있는데 기본적인 틀이 있고 메인(본문)이 있는데 틀을 템플릿이라고 한다.
파란색 부분이 보통 해더입니다.

 
색상을 입힐수 있는 css 파일 소스코드 .
@charset "UTF-8";

.header, .footer{
width: 80%;
padding: 1em;
background: #8db9fc;
color: #f4dee6;
font: sans-serif;
font-weight: bold;
}

.main{
width: 80%;
padding: 1em;
min-height: 400px;
padding-top: 15px;
background: #f4e8f0;
color: #c7ddff;
}

.table{
    border: 2px thin;
    border-color: #422a3a;
font: sans-serif;
font-style: normal;
color: #c7ddff;
}
홈페이지 화면에 색상이 나오게 하는 부분을 설명하겠습니다. 
커다란 div 안에 총 3개의 div가 존재한다.
그 부분에는 고유 이름이 있고. css에서 지정한 것처럼 나오게 된다.   
width: 화면 안에서의 너비.
padding: 어떠한 컨포던트가 있고 내용(그림이나 영상)이 있을 때  내용과 컴포넌트의 간격을 패딩이라고 한다.
background: #8db9fc
color: #f4dee6
font: sans-serif
font-weight: bold
width: 80%
padding: 1em
min-height: 최소너비
padding-top: 컴포넌트와 디브의 거리를 나타냄
background: #f4e8f0
color: #c7ddff
*#블라 블라로 돼있는 부분은 색상의 색깔 이름입니다.

로그인 화면 소스코드

 
 
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String title ="나의홈페이지"
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%=title %></title>
<link rel="stylesheet" type= "text/css" href="layouy.css">
</head>
<body>
<div align = "center">
<div class = "header" align ="center">
LOGIN |
LOGOUT |
JOIN |
MY PAGE |
BOARD |
DOWNLOADS
</div>
<div class="main" align="center">
header.jsp
 
</div>
<div class="footer" align="center"> 핫돌Work copyright.</div>
</div>
</body>
</html>

로그인 화면 결과 값.
 
 
 
 
 
 
 
************* 컴퓨터 공학부가 모두 잘 되는 날이 왔으면 좋겠습니다. *************
*************틀린 부분이 있다면 말씀해주신다면. 정정 하도록 노력겠습니다. *************
 
 

728x90
반응형