close
프로필 배경
프로필 로고

개발자 노트 - 강경훈 story

HTML CSS/CSS · 2024. 4. 9. fullscreen 넓게보기

CSS 실습문제 모음

6 - 1

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container{
         width: 500px;
         border: 1px solid #ccc;
         padding: 10px;
      }
   </style>
</head>
<body>
   <div class="container">
      <h1>최신 웹 디자인 트렌드</h1>
      <p>반응형 웹 디자인 - 다양한 화면 크기에 최적화하다</p>
      <p>플랫 디자인 - 입체에서 평면으로</p>
      <p>풀스크린 배경 - 콘텐츠에 집중</p>
      <p>원 페이지 사이트 - 한 페이지에 모든 내용을 담다 </p>
      <p>패럴랙스 스크롤링 - 동적인 효과로 강한 인상을! </p>
      <p>웹 폰트 - 웹 타이포그래피를 받쳐주는 기술</p>
   </div>
</body>
</html>

6 - 2

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container{
         width: 500px;
         border: 1px solid #ccc;
         padding: 10px;
      }
      .border{
         font-weight: 700;
         font-size: larger;
       }
   </style>
</head>
<body>
   <div class="container">
   <h1>최신 웹 디자인 트렌드</h1>
      <ul>
         <li><span class="border">반응형 웹 디자인</span> - 다양한 화면 크기에 최적화하다</li>
         <li><span class="border">플랫 디자인</span> - 입체에서 평면으로</li>
         <li><span class="border">풀스크린 배경</span> - 콘텐츠에 집중</li>
         <li><span class="border">원 페이지 사이트</span> - 한 페이지에 모든 내용을 담다 </li>
         <li><span class="border">패럴랙스 스크롤링</span> - 동적인 효과로 강한 인상을! </li>
         <li><span class="border">웹 폰트</span> - 웹 타이포그래피를 받쳐주는 기술</li>
      </ul>
   </div>
</body>
</html>

6 - 3

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container{
         width: 500px;
         border: 1px solid #ccc;
         padding: 10px;
      }
      .subjcet{
         font-weight: 700;
         font-size: larger;
         color: #ad3000;
      }
      ul{
         list-style-type: none;
      }
      li{
         line-height: 2;
      }
   </style>
</head>
<body>
   <div class="container">
   <h1>최신 웹 디자인 트렌드</h1>
      <ul>
         <li><span class="subjcet">반응형 웹 디자인</span> - 다양한 화면 크기에 최적화하다</li>
         <li><span class="subjcet">플랫 디자인</span> - 입체에서 평면으로</li>
         <li><span class="subjcet">풀스크린 배경</span> - 콘텐츠에 집중</li>
         <li><span class="subjcet">원 페이지 사이트</span> - 한 페이지에 모든 내용을 담다 </li>
         <li><span class="subjcet">패럴랙스 스크롤링</span> - 동적인 효과로 강한 인상을! </li>
         <li><span class="subjcet">웹 폰트</span> - 웹 타이포그래피를 받쳐주는 기술</li>
      </ul>
   </div>
</body>
</html>

9 - 1

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div{
         border: 1px solid #ccc;
      }
      .container{
         border: 1px solid #ccc;
         width: 960px;
         padding: 20px;
         margin: 0 auto;
      }
      .header{
         margin-bottom: 20px;
         padding: 20px;
      }
      .contents{
         width: 620px;
         padding: 20px;
         margin-bottom: 20px;
      }
      .sidebar{
         float: right;
         width: 220px;
         padding: 20px;
         background-color: #eee;
      }
      .footer{
         padding: 20px;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="header">
         <h1>사이트 제목</h1>
      </div>
      <div class="sidebar">
         <h2>사이드 바</h2>
         <ul>
            <li>모든 국민은 근로의 의무를 진다. 
               국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.</li>
         </ul>
      </div>
      <div class="contents">
         <h2>본문</h2>
         <p>
            재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을
            편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까
            지 이를 의결하여야 한다.
         </p>
         <p>
            대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다.
            제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론출판에 대한 허가나 검
            열과 집회•결사에 대한 허가는 인정되지 아니한다.
         </p>
      </div>
      <div class="footer">
         <h2>푸터</h2>
         이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.
      </div>
   </div>
</body>
</html>

9 - 2

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div{
         border: 1px solid #ccc;
      }
      .container{
         padding: 20px;
         width: 970px;
         margin: 0 auto;
      }
      .header{
         padding: 20px;
         margin-bottom: 20px;
      }
      .left-sidebar{
         padding: 20px;
         float: left;
         width: 150px;
      }
      .contents{
         padding: 20px;
         margin: 0 20px 20px;
         width: 500px;
         float: left;
      }
      .right-sidebar{
         padding: 20px;
         float: right;
         width: 150px;
      }
      .footer{
         padding: 20px;
         clear: both;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="header"><h1>사이트 제목</h1></div>
      <div class="left-sidebar">
         <h2>사이드 바</h2>
         <ul>
            <li>항목1</li>
            <li>항목2</li>
            <li>항목3</li>
            <li>항목4</li>
         </ul>
      </div>
      <div class="contents">
         <h2>본문</h2>
         <p>
            예비비는 종액으로 국회의 의결을 얻어야 한다. 예비비의 지출은 차
            기국회의 승인을 얻어야 한다. 이 헌법시행 당시의 법령과 조약은 이 
            헌법에 위배되지 아니하는 한 그 효력을 지속한다.
         </p>
         <p>
            국가의 세입•세출의 결산，국가 및 법률이 정한 단체의 회계검사와 행
            정기관 및 공무원의 직무에 관한 감찰을 하기 위하여 대통령 소속하
            에 감사원을 둔다.
         </p>
         <p>
            모든 국민의 재산권은 보장된다. 그 내용과 한계는 법률로 정한다. 대
            한민국의 국민이 되는 요건은 법률로 정한다. 법률이 헌법에 위반되
            는 여부가 재판의 전제가 된 경우에는 법원은 헌법재판소에 제청하
            여 그 심판에 의하여 재판한다.
         </p>
      </div>
      <div class="right-sidebar">
         <h2>사이드 바</h2>
         <ul>
            <li>항목1</li>
            <li>항목2</li>
            <li>항목3</li>
            <li>항목4</li>
         </ul>
      </div>
      <div class="footer">
         <h2>푸터</h2>
         <p>저작권 정보</p>
         <p>연락처 등</p>
      </div>
   </div>
</body>
</html>

9 - 3

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div ul{
         padding: 0px;
         margin: 0px;
         list-style-type: none;
      }
      a{
         text-decoration: none;
      }
      .content{
         border-top: 1px dashed #a6a6a6;
         border-bottom: 1px dashed #a6a6a6;
         margin-bottom: 10px 0;
         padding-left: 10px;
      }
      div ul li{
         font-size: 1.5em;
         padding-left: 7px;
         margin-bottom: 15px;
         border-left: 5px solid #990066;
      }
   </style>
</head>
<body>
   <div>
      <ul>
         <li><a href="#">애완견 종류</a></li>
         <li><a href="#">입양하기</a></li>
         <li><a href="#">건강돌보기</a></li>
         <li><a href="#">더불어살기</a></li>
      </ul>   
   </div>
   <h1>강아지 용품 준비하기</h1>
   <div class="content">
      <h3>강아지 집</h3>
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates eos molestiae voluptatum iste atque nostrum nihil suscipit asperiores odio praesentium, placeat voluptate voluptas ullam voluptatibus, eveniet a, exercitationem quod iusto.
      </p>
   </div>
   <div class="content">
      <h3>강아지 집</h3>
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates eos molestiae voluptatum iste atque nostrum nihil suscipit asperiores odio praesentium, placeat voluptate voluptas ullam voluptatibus, eveniet a, exercitationem quod iusto.
      </p>
   </div>
   <p>
      Coptyright 2012 funnycom
   </p>
</body>
</html>

9 - 4

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div ul{
         padding: 0px;
         margin: 0px;
         list-style-type: none;
      }
      a{
         text-decoration: none;
      }
      .content{
         border-top: 1px dashed #a6a6a6;
         border-bottom: 1px dashed #a6a6a6;
         margin-bottom: 10px 0;
         padding-left: 10px;
      }
      div ul li{
         font-size: 1.5em;
         padding-left: 7px;
         margin-bottom: 15px;
         border-left: 5px solid #990066;
         float: left;
      }
      #cont{
         clear: both;
      }
   </style>
</head>
<body>
   <div>
      <ul>
         <li><a href="#">애완견 종류</a></li>
         <li><a href="#">입양하기</a></li>
         <li><a href="#">건강돌보기</a></li>
         <li><a href="#">더불어살기</a></li>
      </ul>   
   </div>
   <div id="cont">
      <h1>강아지 용품 준비하기</h1>
      <div class="content">
         <h3>강아지 집</h3>
         <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates eos molestiae voluptatum iste atque nostrum nihil suscipit asperiores odio praesentium, placeat voluptate voluptas ullam voluptatibus, eveniet a, exercitationem quod iusto.
         </p>
      </div>
      <div class="content">
         <h3>강아지 집</h3>
         <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates eos molestiae voluptatum iste atque nostrum nihil suscipit asperiores odio praesentium, placeat voluptate voluptas ullam voluptatibus, eveniet a, exercitationem quod iusto.
         </p>
      </div>
   </div>
   <p>
      Coptyright 2012 funnycom
   </p>
</body>
</html>

9 - 5

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      table{
         border-collapse: collapse;
         caption-side: bottom;
         margin: 0 auto;
      }
      table td, th{
         border: 1px solid #000;
         padding: 10px;
      }
      .heading{
         background: #eee;
      }
   </style>
</head>
<body>
   <table>
      <caption>2015 국민 독서실태</caption>
      <col class="heading">
      <thead>
         <tr class="heading">
            <th style="width: 150px;">구분</th>
            <th>성인</th>
            <th>학생</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <th>독서율</th>
            <td>65.3%</td>
            <td>94.9%</td>
         </tr>
         <tr>
            <th>연평균 독서량</th>
            <td>9.1권</td>
            <td>29.8권</td>
         </tr>
         <tr>
            <th>공공도서관 이용률</th>
            <td>28.2%</td>
            <td>64.9%</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

목차로 돌아가기

'HTML CSS > CSS' 카테고리의 다른 글

CSS 목차  (0) 2024.04.09
HTML5와 시맨틱 태그  (0) 2024.04.09
CSS 레이아웃  (0) 2024.04.09
CSS 박스 모델  (0) 2024.04.09
색상과 배경을 위한 스타일  (0) 2024.04.09
HTML CSS/CSS 관련 글
더 보기

티스토리툴바