티스토리 뷰

Front-end/CSS

[Web/CSS] CSS - 실습해보기

poopooreum 2024. 4. 22. 21:00
반응형

✏️ 연습문제 1

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>연습문제 1</title>
    <style>
			.container {
				width:500px;
				padding:10px;
				border:1px solid #ccc;
			}
			.subject {
				color:#ad3000;
				font-weight:700;
				font-size:larger;
			}
			ul {
				list-style-type: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>

 

 

 

 

✏️ 연습문제 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>연습문제 2</title>
    <style>
      h1 {
        color: white;
        text-shadow: 3px 2px 5px black;
        text-align: center;
        line-height: 70px;
      }
      .container {
        background: #444;
        width: 300px;
        height: 70px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>웹 개발 기초</h1>
    </div>
  </body>
</html>

 

 

 

✏️ 연습문제 3

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>연습문제 3</title>
    <style>
      table {
        caption-side: bottom;
        border: 1px solid black;
        border-collapse: collapse;
      }
      th,
      td {
        border: 1px solid black;
        padding: 10px;
        text-align: center;
      }
      .padding {
        background: #eee;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        2019 국민 독서실태
      </caption>
      <tr class="padding">
        <th>구분</th>
        <th>성인</th>
        <th>독서자</th>
      </tr>
      <tr>
        <td class="padding"><b>종이책</b></td>
        <td>6.1권</td>
        <td>11.8권</td>
      </tr>
      <tr>
        <td class="padding"><b>전자책</b></td>
        <td>1.2권</td>
        <td>7.1권</td>
      </tr>
      <tr>
        <td class="padding"><b>오디오북</b></td>
        <td>0.2권</td>
        <td>5.5권</td>
      </tr>
    </table>
  </body>
</html>

 

 

 

✏️ 연습문제 4

<!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: #ff0000; /* 글자색 */
			font-size: 1.5em; /* 글자 크기 */
			text-align: center;  /* 가운데 정렬 */
		}
		p {
			font-size: 1.2em; /* 글자 크기 */
			line-height: 2em; /* 줄간격 */
			font-weight: bold; /* 굵게 */
			text-align: center;  /* 가운데 정렬 */
		}
		.accent {
			color: #0000ff; /* 글자색 */
		}
		.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>

연습문제 4

반응형
저작자표시 비영리 변경금지

'Front-end > CSS' 카테고리의 다른 글

[Web/CSS] CSS - 테두리 스타일 지정하기  (0) 2024.04.23
[HTML/CSS] CSS - 박스 모델  (0) 2024.04.23
[Web/CSS] CSS - 복습2  (0) 2024.04.22
[Web/CSS] CSS - 표 스타일  (0) 2024.04.22
[Web/CSS] CSS - 목록 스타일  (0) 2024.04.22
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
글 보관함