[KOSTA] Spring 기반 Cloud 서비스 개발자 양성 과정 35일차 - CSS 실습

44811 단어 KOSTAKOSTA

📃 속성에 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>
영화/리뷰 프로젝트 적용하기-(3)
styled-components- ThemeProvider 적용하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage