CSS

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. 푸른하늘
    11일차 공부 감사합니다
  2. 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 을 지워야 적용이 되네요 ㅎㅎ
              대화보기
              • 러브큐핏
                네 센터정렬을 하기 위해 body에 align-items속성을 주었습니다
                대화보기
                • Chanyang Kim
                  ???? body에다가 align-items 속성을 주신 이유가 뭐예요??? ㅎㅎ
                  혹시 main안에 있는 내용들 센터정렬을 위해서 주신건가요??
                  대화보기
                  • 러브큐핏
                    아래의 소스코드로 공부를 하면서 하다보니 body의 align-items: center; 가 적용되지 않습니다. 다른 부분이 잘못 되었나 찾아보려고 하지만 찾기가 힘드네요...브라이져는 크롬 64bit 입니다. 제가 부족한 부분이 많으므로 많은 도움을 부탁드립니다.

                    <!DOCTYPE html>
                    <html>
                    <head>
                    <meta charset="utf-8">
                    <style>
                    body{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    }
                    .container{
                    display: flex;
                    flex-direction: column;
                    width: 800px;
                    border: 1px solid gray
                    }
                    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>
                    삼성SDS의 사내 벤처에서 '웹글라이더'라는 이름으로 시작해 1998년1월에 분리된 네이버컴 주식회사에서 운영하다가 2000년 자회사인 한게임과 합병하여 NHN이 된 후 재분리하여 현재는 네이버 주식회사에서 운영하고 있다. 네이버는 '항해하다'라는 뜻의 Navigate와 '-하는 사람'의 접미사 -er이 만나 탄생한 이름이다. 이는 '정보의 바다라고 일컫는 인터넷을 항해하는 사람'을 의미한다.[1]
                    대한민국 시장 점유율 1위의 포털로, 2013년 7월 기준 대한민국 내 검색 점유율 74.5%[2] 을 기록, 현재 대한민국에서 가장 많은 사람들이 사용하는 인터넷 포털 사이트이다. 연두색과 하얀색 검색창으로 널리 알려져 있으며 지식iN 서비스로 수천만의 엔트리를 확보하였다. 2013년에는 춘천시에 국내 인터넷기업 중 처음으로 자체 데이터 센터 '각'을 준공했다.[3]
                    삼성SDS의 사내 벤처에서 '웹글라이더'라는 이름으로 시작해 1998년1월에 분리된 네이버컴 주식회사에서 운영하다가 2000년 자회사인 한게임과 합병하여 NHN이 된 후 재분리하여 현재는 네이버 주식회사에서 운영하고 있다. 네이버는 '항해하다'라는 뜻의 Navigate와 '-하는 사람'의 접미사 -er이 만나 탄생한 이름이다. 이는 '정보의 바다라고 일컫는 인터넷을 항해하는 사람'을 의미한다.[1]
                    대한민국 시장 점유율 1위의 포털로, 2013년 7월 기준 대한민국 내 검색 점유율 74.5%[2] 을 기록, 현재 대한민국에서 가장 많은 사람들이 사용하는 인터넷 포털 사이트이다. 연두색과 하얀색 검색창으로 널리 알려져 있으며 지식iN 서비스로 수천만의 엔트리를 확보하였다. 2013년에는 춘천시에 국내 인터넷기업 중 처음으로 자체 데이터 센터 '각'을 준공했다.[3]
                    </main>
                    <aside>
                    AD
                    </aside>
                    </section>
                    <footer>
                    <a href="http://opentutorials.org/course/1">홈페이지</href>
                    </footer>
                    </div>
                    </body>
                    </html>
                  • illliilllliillliii
                    flex 엄청나네요.....ㅎㄷㄷ 감탄했어요ㅜㅜ http://localhost......tml 에서 넘어왔어요 !
                  • illliilllliillliii
                    감사합니다 !
                    대화보기
                    • 세븐나이츠
                      어렵네요.. 나중에 다시한번봐야겠네요
                    • 감사합니다
                      항상 보다가 댓글 처음답니다. 너무너무 감사합니다. flex 속성도 보기 좋게 잘 해주시고..
                      악플도 간간이 보이던데 신경쓰지마셨으면 좋겠습니다.
                      항상 응원합니다.
                    • sk0x0y
                      ie까지 지원해야 되는 상황에서는 flex 활용이 힘듭니다
                    • CSS입문
                      아래 댓글들 보면 <!doctype html>로 안된다고 하시는 분들 많아서
                      도움이 될까해서 올린건데 당신의 뇌는 개념이 없군요.
                      대화보기
                      • 당신의 뇌가
                        답답한게 아닐까요.
                        대화보기
                        • CSS입문
                          제가 질문달고 해결되어서 제가 답글답니다... 저처럼 잘 안되시는 분들이 많을 것 같아서
                          아래와 같이 html에 height속성을 100%로 추가해주면 <!doctype html> (html5) 에서도 elements height로 높이 조절이 안되셨던 분들 잘 되실겁니다.

                          도움얻은 링크
                          https://stackoverflow.com......263

                          With the HTML5 doctype you need to also set the height on the html element:

                          html {
                          height:100%;
                          }
                          대화보기
                          • CSS입문
                            감사합니다.

                            doctype과 doctype html의 차이점을 아무도 답변안해주시니 답답하네요 ㅎㅎ
                          • 쿠쿠다스
                            감사합니다
                          • 14번째
                            혹시 flex를 사용해서 flex-direction을 row로 주고 화면 일부분만 차지하게 해놓고 가운데 정렬 하는 방법도 있나요?
                          • 14번째
                            5.22.
                          • Eunryeong Cha
                            재미있게 잘 공부했어요
                          • 정말 감사합니다 ㅎ
                            대화보기
                            • php가 첫취업?
                              점점 어려워지는 느낌이 드네요...프로그래밍언어를 막 배우기 시작한 느낌이 드는군요 ㅜㅜ
                            • reminisce
                              덕분에 차근차근 잘 배워나가고 있습니다! 그런데 다른 분들도 같은 현상을 겪은 것 같은데요.

                              align-items: center을 body 태그에 넣었을 때
                              <!DOCTYPE html>을 쓰면 적용이 안 되고,
                              영상처럼 <!DOCTYPE>으로 바꾸니 적용이 되네요.

                              다른 영상에서는 계속 <!DOCTYPE html> 쓰셨는데, 이번엔 아니더라구요!
                              어떤 차이가 있는지 궁금합니다!
                            • 정광
                              http://flexboxfroggy.com/#ko
                              게임으로 플렉스를 실습해볼수 있는 좋은 사이트입니다!
                              재밌고 간단하게 flex를 익힐 수 있어요
                            • cocoapps
                              처음 강의 들을때 부터 느낀건데 저의 뮤즈 서태지님과 목소리가 너무 유사해서 자꾸 듣고 싶고 궁금해 지는 강의 입니다. 어려움을 격고 있던 끝에 이런 오픈소스를 나누어 주셔서 너무 감사할 따름 입니다. 앞으로도 쭈욱 ~열심히 들을랍니다.~~거마워용^^
                            • Soyoung Park
                              딱 제가 찾던 기능이에요...!! 각 엘리먼트를 비율에 따라 영역을 확보하는 레이아웃을 안드로이드에서 경험해본 뒤로 웹에서는 왜 구현이 안될까 하던 차에 이 강의를 보게되었네요.
                              좋은 강의 감사합니다 :)
                            • cmj88j@gmail.com
                              필요한 기능인데 좀 어렵네요.
                            • jgatsby
                              ....와 대단하네요. bootstrap 없이도 이런게 된다.
                              이고잉님 말대로 불편함을 엄청 겪고 나니까
                              이런 기능을 보고 감탄할 수 있네요.
                            • 명지대학교 컴퓨터공학과
                              충분히 아톰으로 가능합니다.
                              대화보기
                              • ckocko
                                컨테이너에 디스플레이 플렉스와 콜럼을 주는 이유가 따로 있나요? 있게해보고 빼고 해보고 둘 다 했는데 화면에 보여주는건 똑같아서요..! 혹시 다른 의미가 있으신가 궁금합니다! 그리고 플렉스는 반응형?이라서 플로트를 이용하는 것ㅊ ㅓ럼 마진 오토값을 적용해서 화면 가운데에 배치하는게 의미가 없는건가요?
                              • 유광수
                                좋은 강의 잘 듣고, 많이 배웠습니다.

                                궁금한 점이 있어 문의드립니다.

                                세로정렬(align-items: center)이
                                <!DOCTYPE html>을 쓰면 적용이 안 되고,
                                <!DOCTYPE><html>을 써야 적용이 됩니다.

                                혹시 어떤 차이가 있는지요?
                              • Maisy Kim
                                flex-basis값을 설정해주지 않으면 flex-shrink:0 은 의미가 없는건가요?
                              • 윤재우
                                검색을 해보았는데 아톰쓰시죠 ? 소문에 의하면.. 아톰에서 flex 옵션이 업뎃이 안되서 인식은 하는데 적용이 안된대요. 브라켓에선 된다니 브라켓으로 하시거나 아니면 그저 눈으로 익히셔야 할것같네영
                                대화보기
                                • 김상식
                                  https://opentutorials.org......455
                                  에디터를 Brackets로 바꾸셨어요.
                                  대화보기
                                  • 수업 잘듣고 있습니다!

                                    Atom 에서 패키지 사용 하시는것 같은데,

                                    어떤 패키지들 사용 하시는지 궁금 합니다.

                                    예를들어 수정하면 바로 보기, 코딩 텍스트 컬러, 그리고 네비게이션??(코드 상하 관계 있을때 접었다 폈다 하는 기능) 등과 같은 것들 말이죠, 아톰 패키지 같은데 어떤것으로 검색해서 설치 해야 할지 모르겠네요

                                    이고잉님 쓰시는 아톰 패키지좀 알려 주시면 감사하겠습니다!
                                  • 임지호
                                    flex : 레이아웃을 좀 더 쉽게 짜기 위해 고안됨. item과 그것을 담을 container가 필요.
                                    - 컨테이너에 속성에 display:flex;를 하는 것부터 시작
                                    - 여러 속성들
                                    flex-basis : 크기 지정, flex-grow : 아이템들이 컨테이너를 나눠갖는 비율 결정, flex-shrink : 화면이 작아질 때 줄어
                                    드는 비율 결정, flex-diretion : 컨테이너 방향 결정(row, column), flex-wrap : 아이템 크기가 컨테이너 크기보다
                                    크다면 줄바꿈, align-items : 수직 관련 정렬, justify-items : 수평 관련 정렬, align-content : 아이템을 그룹핑해서
                                    정렬, align-self : 특정 아이템만 크기 다르게, flex : flex-grow + shrink + basis, order : 아이템의 순서 바꿈.
                                    - holy grail layout : 이런 형태의 레이아웃을 flex를 통해 쉽게 만들 수 있음
                                    <header>
                                    <section> - <nav>,<main>,<aside> 수평 정렬
                                    <footer>
                                    수직 정렬
                                  • ㅂㅂㅂ
                                    와! 이런기능까지 알려주시고
                                    너무 감사합니다.
                                    지금 당장 홈페이지 레이아웃 짜서 제작해야됬었는데, 바로 사용가능하겠군요!
                                  • ㅂㅂㅂ
                                    와! 이런기능까지 알려주시고
                                    너무 감사합니다.
                                    지금 당장 홈페이지 레이아웃 짜서 제작해야됬었는데, 바로 사용가능하겠군요!
                                  버전 관리
                                  egoing
                                  현재 버전
                                  선택 버전
                                  graphittie 자세히 보기