10주차 - jsp (10) id, class, <style>

2022. 9. 8. 18:15jsp/html

html 코드를 작성할때에 화면에 출력되는 부분은 <body>태그 내에 작성하게 됩니다.

이때에 각각의 객체에 디자인적인 속성을 적용해도 좋습니다.

하지만 이렇게 하면 하나를 수정하기 위해서는 시간이 너무 오래 걸리기 때문에 객체에 id, class명을 지정하고,

헤더의 <style> 태그에서 이들의 스타일을 지정해주는 것이 현재에는 더 많이 쓰이고 있습니다.

 

라고 배웠습니다. 기업 분위기에 맞춰서 합시다. 적응 잘하는 생물이 어디서든 최고니까.

 

오늘의 목표

01. 객체에 id , class를 지정하고 <style> 태그에서 이들의 디자인을 만들어보자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex10</title>
<style>
body {
	margin: 0px;
	padding: 0px
}

#wrap {
	width: 80%;
	border: 1px solid;
	margin: auto;
	background: #EAEAEA;
	height: 300px;
}

.box1, .box2, .box3 {
	width: 300px;
	height: 200px;
	margin: 30px;
	padding: 20px;
	border: 1px solid;
	float: left;
}

.box1 img, .box2 img, .box3 img {
	float: left;
}

.box1 h3, .box2 h3, .box3 h3 {
	height: 50px;
	text-align: center;
}

.box1 {
	background: #D9D6FF;
	margin-left: 180px;
}

.box2 {
	background: #F6FFCC;
}

.box3 {
	background: #53C14B;
}
</style>
</head>
<body>
	<div id="wrap">
		<div class="box1">
			<img src="images/icon1.png" />
			<h3>지구 사랑</h3>
			<p>우리 회사는 지구의 환경을 위해 탄소배출을 당장 내일까지 제로배출을 약속합니다.</p>
		</div>
		<div class="box2">
			<img src="images/icon2.png" />
			<h3>지구 보호</h3>
			<p>우리 회사는 지구의 환경 보호를 위해 당장 내일부터 친환경 에너지만 사용할 것을 약속합니다.</p>
		</div>
		<div class="box3">
			<img src="images/icon3.png" />
			<h3>환경 어플리케이션</h3>
			<p>우리 회사의 개발자가 만든 앱 스토어입니다. 환경을 위한 측정 등 다양한 어플이 준비되어 있습니다.</p>
		</div>
	</div>
</body>
</html>

갑자기 지금까지 배운것들을 한꺼번에 응용하는 부분이라서 조금 어려울 수 있습니다.

천천히 코드를 하나씩 읽어보면서 기능을 보면 이해할 수 있습니다.