box exam 8
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/10_exam_box_8.css">
</head>
<body>
<h3>이용요금</h3>
<p>행복카드 소지자는 본인 확인 후 입장료 30% 할인</p>
<ul>
<li>만 5세 이하, 만 65세 이상 무료</li>
<li>단체는 30인 이상 30% 할인</li>
<li>단체 관람 시 인솔 교사는 무료</li>
</ul>
</body>
</html>
css
/* 문제 풀이 : 예제 (모든 태그에 박스 적용하기) */
body {
/* 사용법 : border: 선두께 선스타일 선색상 */
border: 1px solid red;
}
h3 {
border: 1px solid blue;
}
p {
border: 1px solid green;
}
ul {
border: 1px solid red;
}
li {
border: 1px solid blue;
}
box exam 9
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/11_exam_box_9.css">
</head>
<body>
<h3>이용요금</h3>
<p>행복카드 소지자는 본인 확인 후 입장료 30% 할인</p>
<ul>
<li>만 5세 이하, 만 65세 이상 무료</li>
<li>단체는 30인 이상 30% 할인</li>
<li>단체 관람 시 인솔 교사는 무료</li>
</ul>
</body>
</html>
css
/* 문제 풀이 */
/* 코딩용어 : ;(세미콜론), :(콜론), /(슬래쉬), \(역슬래쉬) */
h3 {
/* 외곽선 */
/* border-left: 선두께 선스타일 색깔; */
border-left: 5px solid blue;
/* 바깥여백 */
margin: 20px;
/* 안쪽여백 */
padding-left: 10px;
}
p {
/* 바깥여백 - 왼쪽 */
margin-left: 30px;
/* 바깥여백 - 아래쪽 */
margin-bottom: 10px;
}
ul {
/* 외곽선 - 위쪽 */
border-top: 1px solid gray;
/* 외곽선 - 아래쪽 */
border-bottom: 1px solid gray;
/* 바깥여백 - 외쪽 */
margin-left: 45px;
/* 안쪽여백 - 위쪽 */
padding-top: 5px;
/* 안쪽여백 - 아래쪽 */
padding-bottom: 8px;
}
li {
/* 안쪽 여백 - 위쪽 */
padding-top: 10px;
/* 바깥 여백 - 왼쪽 */
margin-left: 20px;
}
box exam color
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>캠핑장 9월 예약</h3>
<ul>
<li>9월분 예약 2019년 8월 16일(수) 14:00부터~</li>
<li>문의전화: 031-222-1234</li>
</ul>
<div id="button">
<!-- > : 특수태그 (greater than) > -->
자세히 보기 >
</div>
</body>
</html>
css
body {
/* 배경색 */
background-color: yellow;
}
#button {
/* 배경색 */
background-color: blue;
/* 가로크기 */
width: 120px;
/* 세로크기 */
height: 25px;
/* 글자색 */
color: white;
/* 안쪽여백 */
padding: 8px;
/* 글자 중앙 정렬 */
text-align: center;
}
box exam color2
html
<!-- 13_exam_box_color_2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/13_exam_box_color_2.css">
</head>
<body>
<div id="banner">
<h3>산림욕장 안내</h3>
<p>470여 종의 식물과 다람쥐, 산토끼, 족제비,
너구리 및 35종의 새들이 살고 있는
최적의 자연학습장입니다.
</p>
<div id="button">
자세히보기 >
</div>
</div>
</body>
</html>
css
* {
padding: 0;
margin: 0;
}
#banner {
background-color: #f6e9ed;
border: 1px solid #cccccc;
width: 320px;
height: 180px;
padding: 20px;
margin-top: 20px;
margin-left: 20px;
}
#button {
color: white;
background-color: #e1285a;
width: 100px;
font-size: 12px;
text-align: center;
border-radius: 5px;
padding: 5px;
margin: 20px;
}/* 문제 풀이 */
/* css 디자인 여백 초기화 */
/* 웹브라우저 (크롬, 익스플러러, 파이어폭스 등) */
* {
padding: 0;
margin: 0;
}
#banner {
/* 배경색 */
background-color: #f6e9ed;
/* 가로크기 */
width: 320px;
/* 세로크기 */
height: 180px;
/* 외곽선 */
/* border: 선두께 선스타일 선색상 */
border: 1px solid #cccccc;
/* 안쪽 여백 */
padding: 20px;
/* 바깥여백 : 위쪽 */
margin-top: 20px;
/* 바깥여백 : 왼쪽 */
margin-left: 20px;
}
p {
/* 바깥여백 : 위쪽 */
margin-top: 20px;
}
#button {
/* 배경색 */
background-color: #e1285a;
/* 가로크기 */
width: 100px;
/* 둥근 사각형(모서리) */
border-radius: 5px;
/* 글자색 */
color: white;
/* 글자 크기 */
font-size: 12px;
/* 안쪽 여백 */
padding: 5px;
/* 글자 중앙 정렬 */
text-align: center;
/* 바깥여백 - 위쪽 */
margin-top: 30px;
}
background image
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/14_background_image.css">
</head>
<body>
<!-- 백그라운드 이미지(배경 이미지) 예제 -->
</body>
</html>
css
/* body : 웹브라우저 창크기를 의미 */
body {
/* 배경 이미지 : 기본 , 모든 화면을 꽉 채움 */
/* css 이미지 넣기 : url("이미지경로") */
/* 사용법 : background-image: url("이미지경로"); */
/* 배경 이미지 반복 중지 속성 */
background-repeat: no-repeat;
/* 배경 이미지 를 위치(좌표) 이동 : 단위(%, px) */
/* 사용법: background-position: 왼쪽 위쪽; */
background-position: 20% 20px;
/* 배경 이미지 크기 */
/* 화면단위 : %, px(고정크기),
vw(뷰포트가로크기), vh(뷰포트세로크기) : 반응형 디자인 단위 */
/* 사용법 : background-size: 가로크기 세로크기 */
background-size: 50vw 50vh;
}
exam back img
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/15_exam_back_img.css">
</head>
<body>
<p>
가족과 즐거운 크리스마스를 보내세요~~~~
</p>
<div>
카드 보내기
</div>
</body>
</html>
css
body {
background-image: url("../img/card.jpg");
background-repeat: no-repeat;
}
p {
/* 글자 크기 */
font-size: 20px;
/* 바깥여백 - 위쪽 */
margin-top: 160px;
/* 바깥여백 - 왼쪽 */
margin-left: 130px;
/* 가로 크기 */
width: 280px;
}
div {
/* 가로 크기 */
width: 120px;
/* 바깥여백 - 왼쪽 */
margin-left: 210px;
/* 바깥여백 - 위쪽 */
margin-top: 30px;
/* 배경색 */
background-color: blue;
/* 글자색 */
color: white;
/* 글자 중앙 정렬 */
text-align: center;
/* 안쪽 여백 */
padding: 8px;
}
exam back img2
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/16_exam_back_img2.css">
</head>
<body>
<div id="shop">
<!-- 카드 이미지 -->
<img src="./img/shop_now.jpg">
</div>
<div id="button">
<!-- 버튼이미지 -->
<img src="./img/detail.jpg.png">
</div>
</body>
</html>
css
* {
padding: 0;
margin: 0;
}
body {
background-image: url("../img/safe_bg.png");
}
#shop {
/* 간단한 위치 이동 : 마진 활용 */
/* 바깥여백 - 위쪽 */
margin-top: 50px;
/* 바깥여백 - 왼쪽 */
margin-left: 30px;
}
#button {
/* 바깥여백 */
margin-top: 30px;
margin-left: 190px;
}
exam schedule
html
<!-- 17_exam_schedule.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/17_exam_schedule.css">
</head>
<body>
<h3>나의 일정</h3>
<div>◀ 2020년 7월 ▶</div>
<table>
<tr>
<td>일</td>
<td>월</td>
<td>화</td>
<td>수</td>
<td>목</td>
<td>금</td>
<td>토</td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14<br />기말고사</td>
<td>15<br />기말고사</td>
<td>16<br />기말고사</td>
<td>17<br />기말고사</td>
<td>18<br /></td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21<br />하계방학</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29<br />연수</td>
<td>30<br />연수</td>
<td>31</td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
css
body {
color: #444444;
}
/* 나의 제목 */
h3 {
/* 외곽선 - 왼쪽 */
border-left: 5px solid green;
/* 안쪽 여백 - 왼쪽 */
padding-left: 10px;
}
/* 날짜 */
div {
text-align: right;
width: 610px;
}
table, td, tr {
border: 1px solid #aaaaaa;
border-collapse: collapse;
width: 610px;
height: 50px;
font-size: 12px;
margin-top: 15px;
}
tr {
height: 60px;
}
td {
width: 76px;
padding: 5px;
}
css2 (결과 똑같음)
body {
/* 글자색 */
color: #444444;
}
/* 나의 일정 제목 */
h3 {
/* 외곽선 - 왼쪽 */
/* border-left: 선두께 선스타일 선색상 */
border-left: 5px solid green;
/* 안쪽 여백 - 왼쪽 */
padding-left: 10px;
}
/* 날짜 */
div {
width:610px;
text-align: right;
}
/* 공통 속성 :
선택자,선택자2 ... {}
*/
table, td {
border: 1px solid #aaaaaa;
}
table {
/* 테이블 선사이 간격 붙이기 속성 */
border-collapse: collapse;
/* 가로 크기 */
width: 610px;
/* 글자 크기 */
font-size: 12px;
/* 바깥 여백 - 위쪽 */
margin-top: 15px;
}
tr {
height: 60px;
}
td {
width: 76px;
padding: 5px;
}
'HTML > Css' 카테고리의 다른 글
| [CSS] position (0) | 2023.08.11 |
|---|---|
| [CSS]특수 선택자, 가상 선택자 글꼴, 선택자 우선순위, div ,span (0) | 2023.08.09 |
| [CSS] box, border, padding, margin, width (0) | 2023.08.07 |
| [CSS] 폰트, 밑줄, 글자 속성, 정렬 (0) | 2023.08.04 |
| [CSS] 사용법 및 입문 (0) | 2023.08.03 |