[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 7장 연습문제
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 7장 연습문제 4개
Dec 25, 2023
quiz-1.html
<!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; line-height: 2.0; color: #ad3000; } /* 각 항목 줄 간격을 글자 크기의 2배로 지정, 글자색 수정 */ li { list-style-type: none; } /* 순서 없는 목록 불릿 제거 */ </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>
result
quiz-2.html
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>연습문제 2</title> <style> .container { width:300px; height:70px; margin:0 auto; background-color:#444; } h1 { text-align: center; line-height: 70px; color: #fff; text-shadow: 3px 2px 5px #000; } /* 글자색 흰색 지정, 그림자 지정 */ </style> </head> <body> <div class="container"> <h1>웹 개발 기초</h1> </div> </body> </html>
result
quiz-3.html
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>연습문제 3</title> <style> table { caption-side: bottom; border-collapse: collapse; } /* 캡션 아래, 테두리 콜랩스 */ td, th { border: 1px solid black; padding: 10px; } /* 셀에 테두리, 여백 */ .heading { background-color: #eee; } /* 배경색 지정 클래스 */ </style> </head> <body> <table border="1"> <caption>2019 국민 독서실태</caption> <col class="heading"> <!-- 가상 칼럼 설정해서 일괄 적용 가능 --> <col> <col> <thead> <tr class="heading"> <th>구분</th> <th>성인</th> <th>독서자</th> </tr> </thead> <tbody> <tr> <th>종이책</th> <td>6.1권</td> <td>11.8권</td> </tr> <tr> <th>전자책</th> <td>1.2권</td> <td>7.1권</td> </tr> <tr> <th>오디오북</th> <td>0.2권</td> <td>5.5권</td> </tr> </tbody> </table> </body> </html>
result
quiz-4.html
<!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: #f00; 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>
result
Share article