Semantic UI

grid

수업

소스코드

<!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>
        .column {
            border: 1px solid gray
        }
        .column>*{
            back
        }
    </style>
</head>

<body>
    <h1>Basic grid</h1>
    <div class="ui grid">
        <div class="column">item1</div>
        <div class="column">item2</div>
        <div class="column">item3</div>
        <div class="column">item4</div>
        <div class="column">item5</div>
        <div class="column">item6</div>
        <div class="column">item7</div>
        <div class="column">item8</div>
        <div class="column">item9</div>
        <div class="column">item10</div>
        <div class="column">item11</div>
        <div class="column">item12</div>
        <div class="column">item13</div>
        <div class="column">item14</div>
        <div class="column">item15</div>
        <div class="column">item16</div>
    </div>
    <h1>Merge grid</h1>
    <div class="ui grid">
        <div class="three wide column">
            <div class="ui fluid selection dropdown">
                <input type="hidden" name="gender">
                <i class="dropdown icon"></i>
                <div class="default text">Gender</div>
                <div class="menu">
                    <div class="item" data-value="1">Male</div>
                    <div class="item" data-value="0">Female</div>
                </div>
            </div>
        </div>
        <div class="two wide column">
            <button class="ui fluid button">
              Follow
            </button>
        </div>
        <div class="column">item6</div>
        <div class="column">item7</div>
        <div class="column">item8</div>
        <div class="column">item9</div>
        <div class="column">item10</div>
        <div class="column">item11</div>
        <div class="column">item12</div>
        <div class="column">item13</div>
        <div class="column">item14</div>
        <div class="column">item15</div>
        <div class="column">item16</div>
    </div>
    <h1>Custom width grid</h1>
    <div class="ui four column grid">
        <div class="column">item1</div>
        <div class="column">item2</div>
        <div class="column">item3</div>
        <div class="column">item4</div>
    </div>
    <h1>Grid row</h1>
    <div class="ui four column grid">
        <div class="row">
            <div class="column">item1</div>
            <div class="column">item2</div>
            <div class="column">item3</div>
            <div class="column">item4</div>
        </div>
        <div class="row">
            <div class="column">item3</div>
            <div class="column">item4</div>
            <div class="column">item5</div>
            <div class="column">item6</div>
        </div>
    </div>
    <h1>Container + grid</h1>
    <div class="ui four column grid container">
        <div class="column">item1</div>
        <div class="column">item2</div>
        <div class="column">item3</div>
        <div class="column">item4</div>
    </div>
    <h1>Gutters</h1>
    <div class="ui four column relaxed grid container">
        <div class="column">item1</div>
        <div class="column">item2</div>
        <div class="column">item3</div>
        <div class="column">item4</div>
    </div>
    <h1>Stackable</h1>
    <div class="ui stackable four column Stackable grid container">
        <div class="column">item1</div>
        <div class="column">item2</div>
        <div class="column">item3</div>
        <div class="column">item4</div>
    </div>
</body>
</html>

 

댓글

댓글 본문
  1. 잘 봤습니다.
  2. vogueupp
    좋은 강의 너무나 감사합니다.
  3. psmqdt
    정말 도움됩니다.
  4. Bless
    오 semantic UI 좋네요. 잘 활용해서 예쁜 웹 만들고 싶어요!
    영어도 잘 모르고 자바스크립트는 아예 모르고
    이제부터 눈치게임인가 ㅎㅎ
    배워나가면 활용 더 잘할 수 잇을것 같아 너무 기대됩니다 : )
  5. 미댈
    감사합니다^^
  6. 한강
    sementic ui도 완료~~!!!
    항상 감사합니다~~^^!
    200618~200622
  7. h-hh19@naver.com
    항상 많은것을 알려주셔서 감사합니다.
  8. testrestbestwest
    감사합니다.
  9. SanFrancisco
    Semantic UI에서도 뷰포트 크기에 따라 로우의 아이템 개수를 특정해줄 수 있나요?
  10. SanFrancisco
    감사하게 잘 보았습니다. 역시 부트스트랩이나 시맨틱 UI이나, API 해석 능력은 필수이군요. 영어를 모르면 안 되겠네요 ㅎㅎ
  11. 스페이스몽키
    이제 끝났네요 감사합니다!!
  12. 뭉뭉이
    2018-04-24 감사합니다 (__)
  13. codval
    2018 03 20 완료~!!
  14. 코딩잘하고싶어요 ㅎ
    2018 02 27 끝
  15. Jupi
    Stackable grid 말씀이시라면,
    <div class="ui stackable four column Stackable grid container">에서,
    대문자로 시작하는 Stackable을 소문자로 시작하는 stackable로 바꾸어주세요.

    대 소문자를 구별하는거 같더라구요.
    대화보기
    • 이봉
      감사합니다!!
    • Sean Kim
      제 컴에서는 올려주신 명령어를 복사해서 넣어도 grid의 정렬이 가로가 아닌 세로로 정렬이 되는 데 제 컴의 시스템 오류인가요?
    • 감사합니다
      감사합니다!!^^ 다음수업이 기대가 됩니다