10주차 - jsp (10) id, class, <style>
2022. 9. 8. 18:15ㆍjsp/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>
갑자기 지금까지 배운것들을 한꺼번에 응용하는 부분이라서 조금 어려울 수 있습니다.
천천히 코드를 하나씩 읽어보면서 기능을 보면 이해할 수 있습니다.
'jsp > html' 카테고리의 다른 글
| 10주차 - jsp (11) rowspan, colspan (0) | 2022.09.08 |
|---|---|
| 10주차 - jsp (11) <table>, <th>, <td> (0) | 2022.09.08 |
| 10주차 - jsp (9) <img>, 반응형&고정형 (0) | 2022.09.08 |
| 10주차 - jsp (8) <div>, <big>, <small> (0) | 2022.09.08 |
| 10주차 - jsp (7) <a>, href, target, title (0) | 2022.09.08 |