Semantic UI

container

수업

소스코드

<!doctype html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="semantic/semantic.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="semantic/semantic.js"></script>
    <style>
        h1{
            text-align: center;
            padding-top:3rem;
        }
    </style>
</head>
<body>
  <h1>standard</h1>
   <div class="ui container">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, voluptate numquam, earum voluptas fugiat sunt velit totam eveniet error et, sit molestiae consequatur nam quos officia maiores quas, ut optio doloremque ducimus perspiciatis quia aliquid explicabo perferendis. Sint quod eos rem, deserunt maiores sed adipisci deleniti voluptas eveniet sit voluptates saepe recusandae vel doloribus, a nesciunt, fuga sequi optio commodi. Laborum sequi minima ad ipsa, quos natus, illo porro nemo reprehenderit inventore libero ratione nesciunt voluptas, autem possimus eius enim necessitatibus impedit dignissimos, unde alias officia iste quam dolore accusantium. Ducimus nemo porro molestias commodi, quas possimus dolores dolore veritatis.
   </div>
   <h1>text</h1>
   <div class="ui text container">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, voluptate numquam, earum voluptas fugiat sunt velit totam eveniet error et, sit molestiae consequatur nam quos officia maiores quas, ut optio doloremque ducimus perspiciatis quia aliquid explicabo perferendis. Sint quod eos rem, deserunt maiores sed adipisci deleniti voluptas eveniet sit voluptates saepe recusandae vel doloribus, a nesciunt, fuga sequi optio commodi. Laborum sequi minima ad ipsa, quos natus, illo porro nemo reprehenderit inventore libero ratione nesciunt voluptas, autem possimus eius enim necessitatibus impedit dignissimos, unde alias officia iste quam dolore accusantium. Ducimus nemo porro molestias commodi, quas possimus dolores dolore veritatis.
   </div>
   <h1>fluid</h1>
   <div class="ui fluid container">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, voluptate numquam, earum voluptas fugiat sunt velit totam eveniet error et, sit molestiae consequatur nam quos officia maiores quas, ut optio doloremque ducimus perspiciatis quia aliquid explicabo perferendis. Sint quod eos rem, deserunt maiores sed adipisci deleniti voluptas eveniet sit voluptates saepe recusandae vel doloribus, a nesciunt, fuga sequi optio commodi. Laborum sequi minima ad ipsa, quos natus, illo porro nemo reprehenderit inventore libero ratione nesciunt voluptas, autem possimus eius enim necessitatibus impedit dignissimos, unde alias officia iste quam dolore accusantium. Ducimus nemo porro molestias commodi, quas possimus dolores dolore veritatis.
   </div>
</body>
</html>

 

댓글

댓글 본문
작성자
비밀번호
  1. emmet이라는 플러그인을 쓰시면됩니다.
    대화보기
    • .ui.text.container 를
      <div class='ui text cintainer'> 로 변경하는 건 어떻게 하는 건가요?
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기