231122 WEB - CSS9, JSP1(서버의 역할)

KDT/WEB

231122 WEB - CSS9, JSP1(서버의 역할)

001cloudid 2023. 11. 22. 12:51

728x90

*플렉스 레이아웃을 활용해 항상 중앙에 표시

<style>
* {margin: 0px; box-sizing: border-box;}
body {background : url(img/bg5.jpg) no-repeat left top fixed; background-size: cover; display: flex;
/* 왼쪽 오른쪽 가운데 정렬 */ justify-content: center; /* 위 아래 가운데 정렬 */ align-items: center; /* 최소 높이 */ min-height: 100vh;}
button {background-color: #ccc; font-size: 1.2em; padding: 1em 2em; border: none; border-radius: 5px; box-shadow: 1px 1px 2px #fff;}
</style>
</head>
<body>
<button>클릭</button>
</body>

플렉스 레이아웃을 사용해 화면 중앙에 배치 — 그림 1. 플렉스 레이아웃을 활용해 항상 중앙에 표시하기

※ 뷰포트 단위

1vw 뷰포트 너비 1%, 1vh 뷰포트 높이 1%, 1vmin 너비 높이 중 작은값 1% 1vmax 너비 높이 중 큰값 1%

CSS 그리드 레이아웃 사용하기

그리드 레이아웃 기준으로 박스를 사용할 때 주축(수직, 수평, 기준축) 기준으로 요소를 배치하는 것

가로방향(줄 row), 세로방향(열 column) 웹 화면 구성. 간격을 지정해서 원하는 레이아웃

*display

display : grid; 컨테이너 안의 항목을 블록 레벨 요소로 배치

display : inline-grid; 컨테이너 안의 항목을 인라인 레벨 요소로 배치

<style>
#wrapper{display: grid;}
.items {padding: 10px; background-color: #eee;}
.items:nth-child(odd){background-color: #bbb;}
</style>
</head>
<body>
<div id="wrapper">
<div class="items">1. ㅂㅈㄷㄱ</div>
<div class="items">2. qwer</div>
<div class="items">3. ㅁㄴㅇㄹ</div>
<div class="items">4. asdf</div>
<div class="items">5. zxcv</div>
</div>

<style>
#wrapper{display: inline-grid;}
.items {padding: 10px; background-color: #eee;}
.items:nth-child(odd){background-color: #bbb;}
</style>
</head>
<body>
<div id="wrapper">
<div class="items">1. ㅂㅈㄷㄱ</div>
<div class="items">2. qwer</div>
<div class="items">3. ㅁㄴㅇㄹ</div>
<div class="items">4. asdf</div>
<div class="items">5. zxcv</div>
</div>

display inline-grid — 그림 3. display : inline-grid

*grid-template-columns, grid-template-rows

그리드 컨테이너 안의 항목을 몇 개의 컬럼ㅇ로 배치할지, 각 컬럼의 너비를 얼마나 할지 지정

<style>
#wrapper{display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 100px;}
.items {padding: 10px; background-color: #eee;}
.items:nth-child(odd){background-color: #bbb;}
</style>
</head>
<body>
<div id="wrapper">
<div class="items">1. ㅂㅈㄷㄱ</div>
<div class="items">2. qwer</div>
<div class="items">3. ㅁㄴㅇㄹ</div>
<div class="items">4. asdf</div>
<div class="items">5. zxcv</div>
</div>

*상대적인 크기 지정 fr 단위

ex) 너비가 같은 컬럼 3개 배치 grid-template-columns: 1fr 1fr 1fr;

<style>
#wrapper{display: grid; /*grid-template-columns: 200px 200px 200px; grid-template-rows: 100px;*/
grid-template-columns: 1fr 1fr 1fr;}
.items {padding: 10px; background-color: #eee;}
.items:nth-child(odd){background-color: #bbb;}
</style>
</head>
<body>
<div id="wrapper">
<div class="items">1. ㅂㅈㄷㄱ</div>
<div class="items">2. qwer</div>
<div class="items">3. ㅁㄴㅇㄹ</div>
<div class="items">4. asdf</div>
<div class="items">5. zxcv</div>
</div>

*repeat()

값이 반복될 때 줄여서 표현할 수 있는 함수

ex) grid-template-columns : repeat(3, 1fr);

<style>
#wrapper{width: 600px;display: grid; /*grid-template-columns: 200px 200px 200px; grid-template-rows: 100px;*/
/* grid-template-columns: 1fr 1fr 1fr;*/ grid-template-columns: repeat(3,1fr);}
.items {padding: 10px; background-color: #eee;}
.items:nth-child(odd){background-color: #bbb;}
</style>
</head>
<body>
<div id="wrapper">
<div class="items">1. ㅂㅈㄷㄱ</div>
<div class="items">2. qwer</div>
<div class="items">3. ㅁㄴㅇㄹ</div>
<div class="items">4. asdf</div>
<div class="items">5. zxcv</div>
</div>

*minmax()

최솟값과 최댓값을 지정

<style>
#wrapper{width: 600px;display: grid; /*grid-template-columns: 200px 200px 200px; grid-template-rows: 100px;*/
/* grid-template-columns: 1fr 1fr 1fr;*/ grid-template-columns: repeat(3,1fr); grid-template-rows: minmax(100px,auto);}
.items {padding: 10px; background-color: #eee;}
.items:nth-child(odd){background-color: #bbb;}
</style>
</head>
<body>
<div id="wrapper">
<div class="items">1. ㅂㅈㄷㄱ</div>
<div class="items">2. qwer</div>
<div class="items">3. ㅁㄴㅇㄹ</div>
<div class="items">4. asdf</div>
<div class="items">5. zxcv</div>
</div>

*grid-column-gap, grid-row-gap

그리드 항목 간격 지정

ex) grid-gap: 20px 30px; = grid-column-gap : 30px ; grid-row-gap : 20 px;

<style>
#wrapper{width: 600px;display: grid; /*grid-template-columns: 200px 200px 200px; grid-template-rows: 100px;*/
/* grid-template-columns: 1fr 1fr 1fr;*/ grid-template-columns: repeat(3,1fr); grid-template-rows: minmax(100px,auto);
grid-column-gap: 30px; grid-row-gap: 20px;}
.items {padding: 10px; background-color: #eee;}
.items:nth-child(odd){background-color: #bbb;}
</style>
</head>
<body>
<div id="wrapper">
<div class="items">1. ㅂㅈㄷㄱ</div>
<div class="items">2. qwer</div>
<div class="items">3. ㅁㄴㅇㄹ</div>
<div class="items">4. asdf</div>
<div class="items">5. zxcv</div>
</div>

*auto-fill, auto-fit

자동으로 컬럼 개수를 조절

ex) grid-template-columns: repeat(auto-fit, 200px);

auto-fit 화면이 넓을 때 남는 공간 없이 꽉 채워 컬럼을 표시,

auto-fill 컬럼의 최소 너비만 표시하고 남는 공간은 그대로 표시

<style>
#wrapper{/*width: 600px;*/ display: grid; /*grid-template-columns: 200px 200px 200px; grid-template-rows: 100px;*/
/* grid-template-columns: 1fr 1fr 1fr;*/ grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); grid-template-rows: minmax(100px,auto);
grid-column-gap: 30px; grid-row-gap: 20px;}
.items {padding: 10px; background-color: #eee;}
.items:nth-child(odd){background-color: #bbb;}
</style>
</head>
<body>
<div id="wrapper">
<div class="items">1. ㅂㅈㄷㄱ</div>
<div class="items">2. qwer</div>
<div class="items">3. ㅁㄴㅇㄹ</div>
<div class="items">4. asdf</div>
<div class="items">5. zxcv</div>
</div>

<style>
#wrapper{/*width: 600px;*/ display: grid; /*grid-template-columns: 200px 200px 200px; grid-template-rows: 100px;*/
/* grid-template-columns: 1fr 1fr 1fr;*/ grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); grid-template-rows: minmax(100px,auto);
grid-column-gap: 30px; grid-row-gap: 20px;}
.items {padding: 10px; background-color: #eee;}
.items:nth-child(odd){background-color: #bbb;}
</style>
</head>
<body>
<div id="wrapper">
<div class="items">1. ㅂㅈㄷㄱ</div>
<div class="items">2. qwer</div>
<div class="items">3. ㅁㄴㅇㄹ</div>
<div class="items">4. asdf</div>
<div class="items">5. zxcv</div>
</div>

*그리드 라인을 이용해 배치

grid-column-start 컬럼 시작의 라인 번호를 지정

grid-column-end 컬럼 마지막의 라인 번호를 지정

grid-column 컬럼 시작 번호와 컬럼 끝 번호 사이에 /를 넣어 사용

grid-row-start 줄 시작의 라인 번호를 지정

grid-row-end 줄 마지막의 라인 번호

grid-row 줄 시작 번호와 줄 끝 번호 사이에 /를 넣어 사용

<style>
#wrapper{width: 700px; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,100px);}
.items{padding: 15px; color: #fff; font-weight: bold;text-align: center;}
.box1{background-color: blue; grid-column: 1/4;}
.box2{background-color: green; grid-row: 2/4;}
.box3{background-color: orange; grid-column: 2/4; grid-row-start: 2;}
.box4{background-color: red; grid-column-start: 3; grid-row-start: 3;}
</style>
</head>
<body>
<div id="wrapper">
<div class="items box1">1. ㅂㅈㄷㄱ</div>
<div class="items box2">2. qwer</div>
<div class="items box3">3. ㅁㄴㅇㄹ</div>
<div class="items box4">4. asdf</div>
</div>

*템블릿 영역을 만들어 배치

<style>
#wrapper{width: 700px; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,100px);
grid-template-areas:
"box1 box1 box1"
"box2 box3 box3"
"box2 . box4";}
.items{padding: 15px; color: #fff; font-weight: bold;text-align: center;}
.box1{background-color: blue; grid-area: box1;}
.box2{background-color: green; grid-area: box2;}
.box3{background-color: orange; grid-area: box3;}
.box4{background-color: red; grid-area: box4;}
</style>
</head>
<body>
<div id="wrapper">
<div class="items box1">1. ㅂㅈㄷㄱ</div>
<div class="items box2">2. qwer</div>
<div class="items box3">3. ㅁㄴㅇㄹ</div>
<div class="items box4">4. asdf</div>
</div>

ex1)

<style>
* {
box-sizing: border-box;
}
body {
background-color: #eee;
font-size: 16px;
}
#wrapper {
/*배치 grid / 열 자동으로 개수 auto-fit 최소최대 320px 1fr / grid 행 열 모든 간격 1rem*/
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
grid-gap: 1rem;
}
.card {
background-color: #fff;
box-shadow: 0px 1px 5px #222;
}
.card > header {
font-size: 1.5rem;
padding: 0.5rem;
}
.card > p {
padding: 0.5rem;
line-height: 1.6em;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="card">
<header>
<h3>사진 제목</h3>
</header>
<figure>
<img src="images\cup-1.jpg">
</figure>
<p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
</div>

<div class="card">
<header>
<h3>사진 제목</h3>
</header>
<figure>
<img src="images\cup-2.jpg">
</figure>
<p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
</div>

<div class="card">
<header>
<h3>사진 제목</h3>
</header>
<figure>
<img src="images\cup-3.jpg">
</figure>
<p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
</div>

<div class="card">
<header>
<h3>사진 제목</h3>
</header>
<figure>
<img src="images\cup-4.jpg">
</figure>
<p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
</div>

<div class="card">
<header>
<h3>사진 제목</h3>
</header>
<figure>
<img src="images\cup-5.jpg">
</figure>
<p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
</div>

<div class="card">
<header>
<h3>사진 제목</h3>
</header>
<figure>
<img src="images\cup-6.jpg">
</figure>
<p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
</div>

<div class="card">
<header>
<h3>사진 제목</h3>
</header>
<figure>
<img src="images\cup-7.jpg">
</figure>
<p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
</div>

<div class="card">
<header>
<h3>사진 제목</h3>
</header>
<figure>
<img src="images\cup-8.jpg">
</figure>
<p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
</div>
</div>

JSP

서버의 역할

웹 서버 : 서버에 내용을 사용자에게 보여주는 기능

웹 어플리케이션 서버 : JSP, JAVA 코드를 HTML변경해서 사용자에게 보여주는 기능

<title>JSP1/form1.jsp</title>
</head>
<body>
<form action="formPro1.jsp" method="get">
아이디 : <input type="text" name="id"><br>
비밀번호 : <input type="password" name="pw"><br>
<input type="submit" value="로그인">
</form>

<title>JSP1/formPro1.jsp</title>
</head>
<body>
<h1>JSP1/formPro1.jsp</h1>

728x90

'KDT > WEB' 카테고리의 다른 글

231128 WEB - JSP3(웹 서버 동작 과정, %, 내장객체) (0)	2023.11.28
231127 WEB - JSP2(웹 서버 동작 원리, 주석, %) (0)	2023.11.27
231120 WEB - CSS8 (0)	2023.11.20
231117 WEB - CSS7 (0)	2023.11.17
231116 WEB - CSS6 선택자, 클래스 (0)	2023.11.17

현재글231122 WEB - CSS9, JSP1(서버의 역할)

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

001cloudid