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. 한강
    container 잘 배웠습니다~!
    200622
  2. SanFrancisco
    Semantic UI의 컨테이너와 부트스트랩의 컨테이너는 완전히 동일한 역할을 하는 것인가요?
  3. 스페이스몽키
    감사합니다!!
  4. feel5
    emmet이라는 플러그인을 쓰시면됩니다.
    대화보기
    • .ui.text.container 를
      <div class='ui text cintainer'> 로 변경하는 건 어떻게 하는 건가요?
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기