사이트의 공통적인 컨셉이 있는데 기본적인 틀이 있고 메인(본문)이 있는데 틀을 템플릿이라고 한다.
파란색 부분이 보통 해더입니다.
색상을 입힐수 있는 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>
로그인 화면 결과 값.
************* 컴퓨터 공학부가 모두 잘 되는 날이 왔으면 좋겠습니다. *************
*************틀린 부분이 있다면 말씀해주신다면. 정정 하도록 노력겠습니다. *************
'핫돌의 잡 지식 놓는 곳' 카테고리의 다른 글
| 신도림 운전면허 학원 학과교육(필기시험) (8) | 2024.09.02 |
|---|---|
| 언젠가 사용할지도 모르는 JSP 인클루드 소스코드 사용법(인터넷 링크 , 인터넷이 페이지끼리 연결되는법). (2) | 2024.06.28 |
| 언젠가 사용할지도 모르는 JSP GET방식과 POST방식 (0) | 2024.06.27 |
| 언젠가 사용할지도 모르는 JSP 파라미터. (0) | 2024.06.27 |
| 언젠가 사용할지도 모르는 JSP JSP의 요소 (0) | 2024.06.27 |