생활코딩

Coding Everybody

코스 전체목록

닫기

flex

CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구입니다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았습니다. flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있습니다. 아래 영상에서는 flex가 도입된 배경을 설명합니다. 

이 기술을 현재 사용해도 좋을지는 아래 페이지를 참고하셔요. 

http://caniuse.com/#search=flex

flex의 기본

flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야 합니다. 또한 flex-direction을 이용해서 정렬방향을 바꿀 수 있습니다. 기본은 row입니다. 아래 영상은 flex의 기본적인 사용법을 알려드립니다. 

 

예제 - flex_1_basic

<!doctype>
<html>
<head>
    <style>
        .container{
            background-color: powderblue;
            height:200px;
            display:flex;
            flex-direction:row;
        }
        .item{
            background-color: tomato;
            color:white;
            border:1px solid white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

grow & shrink

아이템은 컨테이너의 크기에 따라서 작아지기도 하고 커지기도 합니다. 이 때 작아지고, 커지는 비율을 지정하는 방법이 바로 grow & shrink입니다. 여기서는 이 속성들에 대해서 알아보겠습니다. 

예제 - flex_2_grow_shrink.html

<!doctype>
<html>
<head>
    <style>
        .container{
            background-color: powderblue;
            height:200px;
            display:flex;
            flex-direction:row;
        }
        .item{
            background-color: tomato;
            color:white;
            border:1px solid white;         
        }
        .item:nth-child(1){
            flex-basis: 150px;
            flex-shrink: 1;
        }
        .item:nth-child(2){
            flex-basis: 150px;
            flex-shrink: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

Holy Grail layout

Holy Grail은 성배라는 뜻입니다. 많은 사람들이 성배를 찾기 위해서 노력했지만 찾지 못한 것처럼 많은 사람들이 아래와 같은 레이아웃을 만들기 위해서 노력했지만 완벽한 방법을 찾지 못했습니다. 이것에 비유해서 이런 레이아웃을 성배 레이아웃이라고 부르곤 합니다. flex는 아주 세련된 방법으로 이 문제를 간편하게 해결합니다. 여기서는 플랙스를 이용해서 성배 레이아웃을 만드는 법을 알아봅니다.  

 

 

예제 - flex_3_holyGrailLayout.html

<!doctype>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .container{
            display: flex;
            flex-direction: column;
        }
        header{
            border-bottom:1px solid gray;
            padding-left:20px;
        }
        footer{
            border-top:1px solid gray;
            padding:20px;
            text-align: center;
        }
        .content{
            display:flex;
        }
        .content nav{
            border-right:1px solid gray;
        }
        .content aside{
            border-left:1px solid gray;    
        }
        nav, aside{
            flex-basis: 150px;
            flex-shrink: 0;
        }
        main{
            padding:10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>생활코딩</h1>
        </header>
        <section class="content">
            <nav>
                <ul>
                    <li>html</li>
                    <li>css</li>
                    <li>javascript</li>
                </ul>
            </nav>
            <main>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam totam labore ipsum, nesciunt temporibus repudiandae facilis earum, sunt autem illum quam dolore, quae optio nemo vero quidem animi tempore aliquam voluptas assumenda ipsa voluptates. Illum facere dolor eos, corporis nobis, accusamus velit, similique cum iste unde vero harum voluptatem molestias excepturi. Laborum beatae, aliquid aliquam excepturi pariatur soluta asperiores laudantium iste, architecto ducimus fugiat sed, saepe quaerat recusandae exercitationem sapiente, impedit nostrum error. Doloremque impedit, eos in quos assumenda illo eum dicta. Voluptatum quaerat excepturi consectetur, doloremque esse deleniti commodi natus, maxime sit? Officia rerum quibusdam porro dolorum numquam harum soluta ex quo! Vero, nam? Necessitatibus rem hic perferendis maiores obcaecati voluptate sunt autem id doloribus, similique repudiandae nesciunt vel facere ex accusantium ipsum provident iste itaque? Perferendis culpa nostrum repellendus dolores repudiandae assumenda, tempora laudantium in quibusdam placeat facilis ex voluptatem provident velit iusto fuga eum nobis deserunt enim minus. Explicabo vel labore, eum doloremque, impedit recusandae aut illum corporis quis atque sit vero quasi tempore placeat ipsam similique quo delectus provident animi distinctio debitis eligendi voluptatum! Dolorem perspiciatis similique non fugit eaque? Commodi suscipit earum aliquam rem, neque ad. Obcaecati nisi beatae officia inventore laborum nostrum natus perspiciatis iste, aperiam vero quisquam saepe labore facilis veritatis illo excepturi vitae autem quis! Voluptatibus atque doloribus perferendis, eligendi ex aliquid debitis laudantium omnis accusamus similique cum mollitia quos adipisci reprehenderit assumenda sequi, dolore tenetur ipsam, odio, vero reiciendis iure. Dolore itaque nesciunt ipsam, id maxime saepe officiis dolorum molestias earum temporibus? Possimus ipsum accusamus quasi minima, quod magnam iusto non cupiditate facilis pariatur aliquam omnis, blanditiis assumenda magni ad voluptas dicta est optio reprehenderit rem ratione earum ipsa, dolor vero! Totam, adipisci eos nihil repellendus. Maiores, blanditiis. Officiis aspernatur iure culpa illo sint ex id perferendis, explicabo architecto ipsa voluptatibus nesciunt pariatur commodi cum quam. Obcaecati ut quidem quam error nemo. Pariatur aliquid autem inventore laboriosam, velit totam, temporibus ad magnam minus, quis nesciunt aperiam veritatis. Vitae porro provident magni eos sit sed dignissimos iure natus odio nostrum molestiae atque mollitia saepe adipisci ut velit quo hic fuga ex, voluptates vel eum ipsum amet, sunt corporis. Maxime odit alias, ratione tenetur, asperiores consequuntur deserunt modi velit ab maiores pariatur voluptates beatae aut nesciunt perspiciatis sed veritatis doloremque quibusdam amet vero. Qui, labore. Atque ratione quae ducimus reprehenderit perferendis nisi earum, debitis commodi maxime sequi facere optio doloribus, repudiandae ex quidem amet iusto inventore quaerat at praesentium sint. Omnis mollitia esse illum suscipit, quis dolorem maxime sunt eaque, autem nisi corrupti perferendis provident tempore quas, unde! Doloribus, at, accusamus, maiores enim amet quod provident temporibus atque, ipsam fugiat incidunt. Quasi iusto ea quibusdam eveniet porro officiis dicta fugiat fugit laudantium ipsum esse quisquam quo laboriosam odit voluptates alias veritatis expedita quidem consectetur eos, impedit, incidunt dolorum? Laborum, facere nulla ullam, aliquid rerum nihil non adipisci, architecto obcaecati iure quam, fuga minus alias eligendi provident ex odio sit. Ducimus, facilis veritatis numquam, maxime quos natus animi, a magnam itaque veniam pariatur sed alias eos quas? Voluptatum fugit doloribus fugiat iste adipisci quidem odit consectetur, sapiente culpa magnam laborum, laboriosam exercitationem cupiditate dignissimos, nisi doloremque hic itaque aspernatur. Ab labore dolorum cumque rem vitae repellat quo quae porro cupiditate minus. Perspiciatis cumque sequi provident fugit. Nulla reiciendis voluptates molestiae corporis voluptate, quidem consequuntur, dolor vero necessitatibus deleniti tempora ab facilis similique, ea error deserunt fuga quia atque omnis nam earum non, illo. Minima quos optio nostrum eos aperiam? Quam, obcaecati velit deserunt tempore, iure vitae repudiandae quos illum quasi esse quas quaerat at consectetur necessitatibus. Cum, quod, dolore voluptatibus quibusdam accusamus aliquam consequatur dolorum illo! Sequi commodi adipisci explicabo soluta necessitatibus magni expedita cumque, officiis voluptas, vel amet recusandae sunt, quidem eum aliquid deleniti unde, impedit non magnam consectetur est minima facere architecto. Molestias cum vero nostrum saepe, dignissimos eius beatae natus fugiat deserunt esse, nesciunt eos ducimus id amet magnam possimus? Optio adipisci quisquam earum totam nemo sunt provident iure ab consectetur et deleniti molestiae blanditiis laudantium, autem consequatur rerum labore ipsa ipsam deserunt nisi, expedita doloremque quibusdam! Illo nemo laborum a sequi in, ad ipsum blanditiis alias! Eaque eos eligendi hic dolorum sint, tempore voluptatum ut numquam. Corporis similique itaque accusantium, esse porro ea dolor, quae consequuntur ullam necessitatibus magni rem optio officiis totam in dicta quas, odio quam blanditiis dolores pariatur? Dolorem, fuga? Harum ratione nemo perspiciatis culpa eum repudiandae esse, atque impedit nihil debitis, assumenda est. Sapiente rerum alias ipsa tempore obcaecati deserunt maiores distinctio officiis itaque fugit optio, eveniet facere amet ipsum, harum laboriosam eius, enim magni blanditiis temporibus nobis consequuntur ut. Quia magnam vero atque modi aspernatur in perferendis voluptas reprehenderit, rerum dolore unde iusto ab non eius molestiae quasi tenetur beatae ipsam quidem, quos at architecto voluptate alias eos. Deserunt velit beatae, ullam, accusantium sit asperiores! A vero perferendis, harum praesentium dolorem deserunt. Numquam voluptas necessitatibus, aliquam ullam saepe harum amet consequatur minima neque officia maxime quo beatae ab aliquid ex placeat rerum unde, reiciendis aspernatur similique, doloremque ad laboriosam modi. Minus quam aperiam, sed aliquid. Fugiat amet harum consequuntur reprehenderit id eum ratione quos temporibus, quae. Ab ut omnis tempora voluptates, sed ea animi voluptatem pariatur quod mollitia corrupti voluptas repellendus consequatur quae adipisci, enim vitae harum nulla natus iusto hic totam officia architecto quam. Debitis dignissimos praesentium, hic. Ad assumenda, aliquid consequuntur dolore eum repudiandae ab explicabo ipsa sed blanditiis. Quidem unde necessitatibus facilis, quis commodi. Dignissimos perferendis, nihil labore corrupti autem cumque ipsum vel voluptatum? Nostrum labore, omnis provident ullam repellendus culpa amet rem consequatur animi, necessitatibus porro. In consequatur optio recusandae, quisquam accusantium at deserunt voluptatem fugit quibusdam neque libero assumenda consectetur numquam ratione quaerat. Quos omnis neque atque, id perferendis possimus, alias, dignissimos doloribus ducimus similique ratione vitae eos laudantium, tempore cupiditate quod consectetur! Voluptas enim laboriosam nesciunt rem. Recusandae beatae numquam asperiores adipisci neque, vel pariatur suscipit provident, a est magni. Laborum dolore incidunt saepe ipsam? Eveniet doloremque animi maxime aliquid rem fugit dolor dignissimos! Quo, ut quod ab.
            </main>
            <aside>
                AD
            </aside>
        </section>
        <footer>
            <a href="https://opentutorials.org/course/1">홈페이지</a>
        </footer>
    </div>
</body>
</html>

flex의 여러 속성들 

댓글

댓글 본문
작성자
비밀번호
  1. 박지성
    이번 수업은 상당히 볼 영상이 많아 고전했다고 생각하기 때문에
  2. 컨테이너 안에
    아이템을 3개로 설정 후
    1,3를 flex-basis 주고
    2를 내용없이 flex-grow 1이상

    그럼 2가 1,3의 고정된 basis 제외하고 다 독식
    display flex 로만 하는 건 모르겠습니당
    대화보기
    • flex??
      혹시 display flex로 float와 같이 가운데에 여백을 두고 왼쪽 , 오른쪽 정렬이 가능한가요?
      ---------------------------
      ㅁ여백여백여백여백ㅁ
      ---------------------------
      이런식으로???
    • 김경모
      flex-shrink 속성에서 값을 0으로 줄 때와 1로 줄 때와 차이가 전혀 없습니다 구글 크롬으로 실제로 테스트해보고 검사탭으로 코드가 적용되었는지도 확인했는데 어째서인가요?
    • 2019-03-03 완료
    • 배은구
      저도 안되서 고민하다가 html과 body에 height를 추가하니 되네요. 감사합니다.
      대화보기
      • 한승민
        드디어!!
        190226
      • 환장
        flex4 강좌 홀리그레일에서요
        <main> 에서 생활코딩입니다 이런식으로 아주 짧은 문장하면
        shrink 가 안먹히네요. ad 가 옆으로 길어져요
        로렘입섬으로 의미없는 문장을 가득 채우면 적용되요.
        원래 이런가요? 윈도우10 쓰고 윈도우랑 크롬 두개다 그래요. 둘다 지금시점에서 제일 최신버전입니다.
      • 숨이
        완료햇습니당
      • Flex 신세계 에요!!

        Holy Grail 나눔 감사요!
      • 오승룡
        세상 감사합니다..ㅠㅠㅠㅠ 여기에서 막혀서 왜그런가하고 엄청 고민중이었거든요 ㅠㅠ 오늘 집에 갈 수 있을 듯 합니다 ㅠㅠ 감사합니다ㅠㅠ
        대화보기
        • 성명준
          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <style type="text/css">
          html{
          height:100%;
          }
          body{
          height:100%;
          display:flex;
          align-items:center;
          }
          .container{
          display: flex;
          flex-direction:column;
          }
          header{
          border-bottom: 1px solid gray;
          padding-left: 20px
          }
          footer{
          border-top: 1px solid gray;
          padding-left: 20px;
          text-align: center
          }
          .content{
          display: flex;
          }
          .content nav{
          border-right: 1px solid gray;
          }
          .content aside{
          border-left: 1px solid gray;
          }
          .content nav,.content aside{
          flex-basis: 150px;
          flex-shrink: 0;
          }
          main{
          padding: 10px;
          }
          </style>
          <title></title>
          </head>
          <body>
          <div class="container">

          <header>
          <h1>생활코딩</h1>
          </header>

          <section class="content">
          <nav>
          <ul>
          <li>html</li>
          <li>javascript</li>
          <li>css</li>
          </ul>
          </nav>
          <main>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </main>
          <aside>
          AD
          </aside>
          </section>

          <footer>
          <a href="http://opentutorials.org/course/1">홈페이지</a>
          </footer>
          </div>
          </body>
          </html>

          위말씀처럼하니깐 가운데로 가네요 감사합니다.
          대화보기
          • 리젤린
            굿!
          • 김민영
            완료!
          • kimYoon
            <!doctype html5>에서 align-items 적용하는법

            body {
            height:100vh;
            }

            html5 표준코드에서는 body 태그의 height가 화면전체를 차지하는 것이 아닌 자신이 감싸고 있는 컨텐츠 내용만을 차지하고 있는 듯 합니다.
            그래서 뷰포트(보고있는화면) 단위를 100vh로 height를 화면 전체를 차지하게 하면 되는 듯 합니다.
          • beginner
            태그가 <div class="container"> 기 때문에 css를 적용하려면 클래스를 명시해줘야 사용가능합니다.
            선택자에 앞서 붙는 '.'은 class를 뜻하고 '#'은 아이디를 뜻해요.
            따라서 <div id="contain" class="container"> 의 경우 css를 적용하려면 #contain 또는 .comtainer를 사용해야합니다!
            대화보기
            • hitman1439
              좋은정보와 답변 감사드립니다!
              대화보기
              • Emmet 입니다. 확장기능 메뉴에서 검색 후 설치하실 수 있어요.
                대화보기
                • hitman1439
                  강의영상 중에 사용하시는 brackets의 확장기능이 있으신건가요?
                  태그 생성하실때 저장해두신 키워드로 하시는 것 같던데, 혹시 그것에 대한 정보를 얻을 수 있을까요?
                • 스페이스몽키
                  으악 어렵네요 ㅠㅠ
                • 옥슬이
                  class 값을 가리킵니다
                  대화보기
                  • 야부키죠
                    .container{
                    background-color: powderblue;
                    height:200px;
                    display:flex;
                    flex-direction:row;

                    이것처럼 선택자 앞에 점찍는건 뭔가요??
                  • 볼볼
                    플레스 쓰는 것까지는 이해가 가는데... 저기 각각 링크를 걸고 타겟을 줘서 웹페이지를 만드는 것은 어떻게 해야 하는거지요? 인라인 프레임을 삽입하면, 뒤에 있는 시맨틱 태그들은 의미를 잃어버리고.... 문제가 생기는데...실제 저기 리스트들에 링크를 걸어서 main에 나오게 하려면 어떻게 해야 하는지요??@_@
                  • 제갈량
                    저도
                    body{ ... }에 CSS를 넣으면 안되고

                    html{
                    height:100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    }
                    넣으니 웹 문서 딱 가운데 위치하네요.

                    이고잉님 말대로 FLEX는 속성이 많다고 하니깐 확실하게 짚고 넘어가야 겠다는 생각이 듭니다.
                  • 라큰뉴
                    설명은 최고십니다.
                  • 이병정
                    멋집니다.
                  • 멜번리디아
                    flex 기능활용으로 어려운 한 고개 넘었습니다. 감사합니다.
                  • caniuse.com 들어가면 flex 기능이 사용 가능/불가능한 대략적인 브라우저 사용 비율을 확인할 수 있습니다.
                    (이고잉님의 이전 강의를 참고하세요)
                    대화보기
                    • 이상학
                      항상 강의 잘 보고 있습니다. 정말 감사하다는 말 꼭 하고 싶었습니다!!^^

                      flex기능이 IE8, 9에 적용이 안돼서 여쭤 볼게 있는데요~
                      혹시 IE8,9를 사용하는 사람들이 얼마나 많이 있는지 알고 싶은데 어떻게 확인하나요??
                    • ijun
                      안녕하세요1! 강의 너무 잘 보고 있습니다 ㅎㅎㅎㅎ궁금한게 잇는데요. 모바일로 들어왔을 경우는 또 레이아웃 형태가 바뀔수도 있자나요 그런거는 어떻게 컨트롤 하나요?
                    • 띠링
                      와~ 감사합니다. 해보겠습니다.
                      대화보기
                      • 띠링
                        Holy Grail layout에서
                        nav,aside 에 flex-shrink:0 을 쓰기 전에는 flex-basis:150px 이 적용되지 않네요.
                        영상에서 고잉님은 바로 적용되시는 거 같은데, 저만 그런가요?
                      • 열나뛰어
                        css언어의 핵심이네요 flex 진짜 어려우면서도 무궁무진한 가능성이 있어
                        반드시 습득하고 넘어가야 할 부분이네요.
                        강의 감사합니다.
                      • BlueSalt
                        html{
                        height:100%;
                        }
                        body{
                        height:100%;
                        display:flex;
                        align-items:center;
                        }
                        해야하는 것 같습니다.
                        대화보기
                        • 푸른하늘
                          11일차 공부 감사합니다
                        • qwer
                          html 말고 body{ height:100%} 로 해보세요
                          대화보기
                          • violet
                            저도 <!DOCTYPE html>에서 body에 align-items가 적용되지 않아서 다른 분이 올려주신 해결법 html { height:100%; }을 추가해보았는데 문제가 해결되지 않았습니다.
                            <!DOCTYPE>으로 변경하는 것 외에 <!DOCTYPE html>에서 적용이 가능한 다른 방법을 알고 계시는 분이 계시면 꼭 댓글 남겨주세요!
                          • violet
                            flex 정말 재밌네요!
                          • Yohan Lee
                            궁금한게 있습니다. flex 레이아웃을 짤때 웹페이지의 모든 코드에 display:flex 를 선언해줘야되나요? 헤더만 그냥 width하고 margin으로 잡아줘도 그아래 요소들만 flex선언해서 flex레이아웃으로 짜도 되나요?
                          • 지니
                            많은 도움 받고 있습니다. flex를 알게되서 더 쉽게 만들 수있을 것 같아요 ㅎㅎ 감사합니다.
                          • Proter
                            레이아웃을 잡을때 flex와 position을 합께 사용해도 무관한가요?
                          • 오빠는다르다
                            감사합니다~!!!!!!!
                          • ballbot
                            flex 배우기 전엔 float 가지고 해결하느라 오래걸렸는데
                            완전 신세계군요.
                          • 웅쓰
                            정말 감사합니다!! v
                          • jimmyzip
                            Jeffy님 문서를 파싱? 읽을 때 .content nav{}라고 써있는 것을 읽으면 content라는 클래스를 가진 요소의 자식요소인 nav라고 아주 상세하게 지정되어있으니 아주 빠르고 정확하게 선택해서 스타일링을 하겠죠? // 이때 님의 html문서에 nav태그가 한 번만 등장하고, 코드가 길지 않고(복잡하지 않고) id나 class를 그닥 많이 부여하지 않았거나 아무튼 문서가 심플하면 .content nav{}와 nav{}가 별 차이 없습니다. 그냥 편하게 차이없다고 생각하셔도 됩니다. 그런데 이고잉님께서 계속 부모의 선택자를 같이 달아주시는 것은 추측컨데,
                            1. 옛날부터 정석대로 다져오던 습관
                            2. opentutorials수강생들이 나중에 자신의 애플리케이션을 만들 때, 코드가 길어지고 복잡해질 때를 대비해서 선택자를 정확하게 지정해서 실수,오류없이 하라는 뜻에서
                            하시는게 아닌가 생각합니다.
                            페이지가 길어지고 태그를 썼던 것을 한참 뒤에 줄에 또쓰고 하다보면(특히 li태그)
                            그냥 li{padding:50px 0;}이런식으로 하면 그 문서의 모든 li에 적용되잖아요? 그걸 특정 li만 지정하고 싶을 때

                            1. li의 부모요소가 ul /ol로 다른 경우 : ul li가 변경대상이면 ul li{}로 , 반대면 ol li{}로
                            2. 변경하고자 하는 특정 li들에 class지정해서
                            이렇게 스타일링 하죠.

                            그런데 페이지가 복잡해지고 하다보면,
                            태그, 클래스 이런거 지정을 해줘도 잘 안될 때가있습니다.
                            그럴 때에는 정말 부모요소 부터 원하는 요소까지 선택자로 일일이 다 써줘야
                            그제서야 적용이 될 때가 있기도 합니다. 그런 측면에서 이고잉님처럼 .content nav{}이렇게 선택자를 부모까지 다 잡아주는 것은 아주 괜찮은 습관 같습니다.
                            대화보기
                            • 스벅뚜벅
                              그건 기능상의 차이는없구요.그냥 경로같은거를 쭉표시를해서 스타일이 길어졌을때도 한눈에 알아보게하거나,
                              아니면 다른사람들이 코드를볼때도 헷갈리지않고 해당위치를 찾을수있게 해주는역할이라고알고있어요.
                              대화보기
                              • Jeffry
                                .content nav{} 와 nav{} 해서 style 하는것과 어떠한 차이가 있는지 궁금합니다.!
                                감사합니다. 언제나 강의 잘 듣고있습니다.
                              • 러브큐핏
                                해결이 잘 되었습니다. 많은 도움을 주셔서 감사합니다.
                                대화보기
                                • <!DOCTYPE html> → <!DOCTYPE>
                                  대화보기
                                  • 독타입 뒤에 html 을 지워야 적용이 되네요 ㅎㅎ
                                    대화보기
                                    버전 관리
                                    egoing
                                    현재 버전
                                    선택 버전
                                    graphittie 자세히 보기