[KOSTA] Spring 기반 Cloud 서비스 개발자 양성 과정 35일차 - CSS 실습
0
💻 KOSTA Spring 기반 Cloud 서비스 구현 개발자 양성 과정 실습
목록 보기
30/47
.png)
📃 속성에 CSS 적용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
<style>
.container {
width:500px;
padding:10px;
border:1px solid #ccc;
}
.subject {
font-weight:700;
font-size:larger;
color : red;
}
ul{
list-style: none;
}
li{
line-height: 2.0;
}
</style>
</head>
<body>
<div class="container">
<h1>최신 웹 디자인 트렌드</h1>
<ul>
<li><span class="subject">반응형 웹 디자인</span> - 다양한 화면 크기에 최적화하다</li>
<li><span class="subject">플랫 디자인 </span> - 입체에서 평면으로 </li>
<li><span class="subject">풀스크린 배경 </span> - 콘텐츠에 집중</li>
<li><span class="subject">원 페이지 사이트 </span> - 한 페이지에 모든 내용을 담다</li>
<li><span class="subject">패럴랙스 스크롤링 </span> - 동적인 효과로 강한 인상을!</li>
<li><span class="subject">웹 폰트 </span> - 웹 타이포그래피를 받쳐주는 기술</li>
</ul>
</div>
</body>
</html>
📃 속성에 CSS 적용하기2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 4</title>
<style>
#container { /* 전체 콘텐츠를 감싸는 div */
width:650px; /* 너비 */
margin:0 auto; /* 가로로 중앙에 배치 */
padding:5px; /* 테두리와 내용 사이의 패딩 여백 */
}
#check { /* 텍스트 부분을 감싸는 div */
width:640px; /* 너비 - 그림 너비 값에 맞춤 */
border:1px solid #ccc; /* 테두리 */
}
h1 {
color: white; /* 글자색 */
font-size: 1em; /* 글자 크기 */
background: #222; /* 배경색 */
margin: 0; /* 제목과 다른 요소 간의 마진 여백 */
padding: 10px; /* 테두리와 제목 텍스트 사이의 패딩 여백 */
}
h2{
color: red;
font-size: 30px;
font-weight: bold;
text-align: center;
}
p{
font-size: 20px;
font-weight: bold;
line-height: 2;
text-align: center;
}
.accent{
color: blue;
font-weight: bold;
}
.smalltext{
font-size: 0.7em;
}
</style>
</head>
<body>
<div id="container">
<img src="images/top.jpg" alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 질좋은 사과를 저렴하게 즐겨보세요">
<div id="check">
<h1>확인하세요</h1>
<h2>주문 및 배송</h2>
<p><span class="accent">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
<hr>
<h2>교환 및 환불</h2>
<p>불만족시 <span class="accent">100% 환불</span>해 드립니다<br>
고객센터로 전화주세요</p>
<hr>
<h2>고객센터 </h2>
<p>0000-0000<br>
<span class="smalltext">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
</div>
</div>
</body>
</html>
📃 layout 설정하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
section{
width:800px;
margin: 0 auto;
}
h2{
font-size:1.5em;
}
h3 {
font-size:1.0em;
}
p {
line-height:20px;
font-size:12px;
}
footer {
width:100%;
height:50px;
background-color:#222;
clear: left;
}
footer > p {
color:#fff;
font-size:0.9em;
text-align: center;
line-height:50px;
}
article{
border: solid 1px;
width: 40%;
height: 300px;
padding: 10px;
margin: 25px;
float: left;
}
</style>
</head>
<body>
<section>
<h2>강아지 용품 준비하기</h2>
<article class="at1">
<h3>강아지 집 </h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</article>
<article class="at2">
<h3>강아지 먹이 </h3>
<p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
</article>
<article class="at3">
<h3>밥그릇, 물병 </h3>
<p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
</article>
<article class="at4">
<h3>이름표, 목줄</h3>
<p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p>
</article>
<footer>
<p>boxmodel 연습하기</p>
</footer>
</section>
</body>
</html>
📃float 이용하기
<?xml version="1.0" encoding="EUC-KR" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<title>Insert title here</title>
<style type="text/css">
#balm{
float: left;
}
#content{
margin-left: 200px;
}
#sidebar{
background: yellow;
float: right;
}
</style>
</head>
<body>
<h5>허브란?</h5>
<img src="images/balm.jpg" id="balm"/>
<div id="sidebar">
<p id="sidetext">허브는 약용식물이다</p>
<p id="sidetext">허브는 향기식물이다</p>
<p id="sidetext">허브는 채소이다</p>
<p id="sidetext">허브는 향신료이다</p>
<p id="sidetext">허브는 미인을 만든다</p>
</div>
<div id="content">
<p>라틴어의 ‘푸른 풀’을 의미하는 Herba에서 유래된 말로, ‘잎, 줄기와 뿌리 등이 식용, 약용에 쓰이거나, 향기나 향미가 이용되는 식물의 총체’ 라고 할 수 있다. 즉, 잎, 줄기, 뿌리, 꽃 등을 허브의 의미에 포함하며 그 성분이 식품이나 음료속에 보존용 향신료 또는 건강증진제로서 첨가되는 식물과 식품, 음료 외에 제품에 향수, 화장, 세정의 효과를 기대하여 이용되는 식물의 전부라고 할 수 있다.현재 국내에서 일반적으로 알고 있는 허브에 대한 개념은 외국에서 도입된 식물에 한정지어 생각하는 경우가 대부분이나 사실은 이미 수 천년 전부터 우리 조상들도 생활 전반에 걸쳐 많은 곳에서 이용하여 왔다. 즉, 산야초들, 예를들면 쑥, 냉이, 씀바귀, 곰취 등 봄철식단에 반찬으로 이용된 것과 한방 처방에 들어가 있는 모든 식물들도 넓게는 모두 허브의 범주에 넣을 수 있는 것이다.</p>
</div>
</body>
</html>
DB 엔지니어👍