가장 평범한 블로그

출력하는 화면에 따라서

즉,  해상도에 따라서 출력되는 방식을 다르게 한다!! 

이것이 바로 반응형 !! 이거로 CSS도 끝!!!

우선 받은 HTML

 <div id="allWrap">
        <div id="partWrap">
            <div id="header">
                <h1>HEADER</h1>
            </div> ​     
            <div id="contentWrap">
                <div id="content">
                    <h2>Roboto, 12 Styles by Christian Robertson</h2>   
                    <p>  
                        Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke
                        from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on
                        his armour-like back, and if he lifted his head a little he could see his brown belly, slightly
                        domed and divided by arches into stiff sections. The bedding was hardly able to cover it and
                        seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of
                        the rest of him, waved about helplessly as he looked. One morning, when Gregor Samsa woke from
                        troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his
                        armour-like back, and if he lifted his head a little he could see his brown belly, slightly
                        domed and divided by arches into stiff sections. The bedding was hardly able to cover it and
                        seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of
                        the rest of him, waved about helplessly as he looked.    
                    </p>  
                </div> 
            </div> ​   
            <div id="footer">
                FOOTER
            </div>
        </div>
      </div>

공통적용

  * {
      margin: 0;
      padding: 0;
      font-family: Verdana;
    }
    #allWrap {
      margin: 0 auto;
      text-align: center;
    }
    #partWrap {
      margin: 0 auto;
      width: 100%;
      text-align: left;
      
    }

    #header {
      
      height: 100px;
      text-align: center;
      line-height: 100px;
    }

    #contentWrap #content > h2 {
      
      font-size: 2em;
    }

    #content {
      padding: 30px;
    }

    #footer {
      font-size: 2em;
      font-weight: bold;
      height: 100px;
      text-align: center;
      line-height: 100px;
    
    }

1. 해상도 640px이하일 때 적용되는 css 

@media screen and (max-width:640px) {

        #allWrap {
        width: 100%;
        }

        #content p {
        font-size: 2em;
        }
}

2.해상도가 1000px이상일 때 

 @media screen and (min-width:1000px) {
        #allWrap {
          width: 80%;
         }

        #content p {
          font-size: 1em;
        }
}

3.해상도가 641px~999px사이 일 때

@media screen and (min-width:641px) and (max-width:999px) {
         #allWrap {
          width: 100%;
          }

        #content p {
          font-size: 1.5em;
         }
}

이제 이런 반응형을  좀 더 깊게 배우기 위해

부트스트랩을 배울거래!!

css 안녕 ~

Import규칙

이것HTML문서안에 css를 바로 적용 하는게 아니고

외부의css파일을 연결해서css적용 시키는 것 !!

[import규칙을 이용한 외부css파일 연결하기 !!]

규칙1. style태그 안에 적용(연결)시킨다.
규칙2. 형태는 @import url(주소); 

규칙3. @improt 는 최 상단에 와야한다. (순서가 중요하다 !!)

받은 HTML문서

<div class="content">
        <p>
            이런 가운데 전세 수요는 폭발하고 있다. 
            한국감정원의 지난 5일 기준 서울의 전세 수급지수는 121.4로 2016년 1월 이후 가장 높은 수준을 보였다. 
            수도권 역시 117.6으로 같은 해 2월 이후 최고치다. 
            이 지수는 0~200으로 표현되는데, 200을 향해갈수록 수요가 더 많다는 것을 드러낸다.
            서울을 비롯한 수도권 아파트 전셋값이 60주 이상 오름세를 보이는 것도 공급자 우위 시장이 굳어진 데 따른 것이다.
        </p>
      </div>

 외부의 css 문서(같은 디렉토리 안 styles폴더 안에 imports.css파일)

.content{
    color:black;
    width:80%;
    background-color: yellow;
    margin: 0 auto;
}
.content p{
    width:100%;
    font-size:1.5em;
    border:5px red solid;
    box-sizing: border-box;
}

받은 HTML문서에

<style>
 @import url(Styles/import.css);/*외부 연결한 css*/
 
      .content{   /*이건 내부에서 적용한css,임포트로 외부 연결한 css가 있으면 우선 적용됨*/
            color: yellow;
            background-color: black;
         }
         

 @import url(Styles/import.css); /*이게 밑에 있으면 위의 .content만 적용이 됨*/
</style>

Media규칙

media 규칙은 위치가 상관이 없다
서비스 되는 장치마다 출력하는 상태를 다르게 적용 할 수 있다

마찬가지로style 태그 안에 적용시킨다.

형태 @media 장치명{ 적용할 css }

위 받은 HTML 문서 그대로 사용

1. 장치가 모니터 일떄 (글자가 흰색 배경은 검정색)  

  @media screen{
            .content{
                color: white;
            }
        }

2.장치가 프린트 일 때(글자는 검정, 배경은 흰색)-원본 데이터 그대로임

 @media print{
            .content{
                color: black;
                background-color: white;
            }
        }

[키프레임 규칙(@keyframe)을 이용한 애니메이션]

애니메이션 적용 할 건데 이건 keyframe을 이용할 것임

규칙이기 때문에 규칙을 잘 지켜줘야 함

** 규칙 **

키프레임 애니메이션 이름지정
    animation-name:  애니메이션이름 ;
    animation-duration: 3s;  요거 필수!! 있어야지 애니메이션 일어남
    animation-delay: 2s;   
    축약(한방에 적용하기) 순서 상관없음 단 duration은 delay 보다 앞에 있어야 한다 !!!

@keyframes 애니메이션이름 {

     요 안에다가 keyframe 규칙 작성 : 애니메이션 일어나게 한다.

    방법1 : from-to 사용
       from{
           width: 100px;
          height: 100px;         처음값 그대로 시작하는거면 생략가능 (to만 있어도 괜춘)
        }
        to{
          width: 400px;
          height: 400px;
          background-color: rgb(247, 150, 5);
        }

      방법2 : %로 지정
        50%{
          width: 250px;
          height: 250px;
          background-color: rgb(247, 150, 5);
        }
        100%{
          width: 400px;
          height: 400px;
          background-color: rgb(39, 205, 235);
        }

}

 <style>
        /*키프레임 규칙(@keyframe)을 이용한 애니메이션*/
    *{
     margin: 0;
     padding:0;     
    }

    #wrap{
        display: flex;
        flex-direction:column;
    }
    #rect{
        width: 100px;
        height: 100px;
        background-color: brown;
        animation: myani1 3s 2s ;

    }

    @keyframes myani1 { 
        50%{
          width: 250px;
          height: 250px;
          background-color: rgb(247, 150, 5);
        }
        100%{
          width: 400px;
          height: 400px;
          background-color: rgb(39, 205, 235);
        }
    }

    #circ1{
        width: 100px;
        height: 100px;
        background-color: rgb(233, 191, 102);
        text-align: center;
        line-height: 100px;
        animation-name: myani2 ;
        animation-duration: 3s;
        animation-delay: 3s;
    }
        @keyframes  myani2{
            50%{
            width: 200px;
            height: 200px;
            line-height: 200px;
            transform: rotate(180deg);
            border-radius: 100px;
            }
            100%{
            width: 400px;
            height: 400px;
            line-height: 400px;
            transform: rotate(360deg);
            border-radius: 500px;
            }
            
        }

    #circ2{
        width: 100px;
        height: 100px;
        background-color: rgb(26, 150, 53);
      
      /*  animation-name: myani3 ;
        animation-delay: 2s;  /*delay는 처음에만 적용*/
      /*  animation-duration: 3s;  
        animation-iteration-count: infinite;/*애니메이션 횟수*/
        animation: myani3 infinite 3s 2s ;
        
    }

    @keyframes myani3 {
        to{
            transform: translate(400px,400px);
        }
    }
    #circ2:hover{
        animation-play-state: paused;
    }

    </style>
</head>
<body>
    <h2>키프레임 규칙을 이용한 애니메이션</h2>
    <div id="wrap">
        <div id="rect"></div>
        <div id="circ1">CIRCLE</div>
        <div id="circ2"></div>
    </div>  
</body>

키프레임 규칙을 이용한 애니메이션

2. 문제 !! 로딩중  애니메이션 만들기 !!

<style>
    .container{
        display: inline-flex;
        margin: 10px; 
     
    }
    .item{
        width: 20px;
        height: 20px;
        background-color: brown;
        border-radius:50%;
        animation: myani 3s 1 ;
    /*    animation-duration: ;*/
        animation-iteration-count: infinite;
    }
    @keyframes myani {
        50%{
         transform: scale(0.5);
         background-color: rgb(155, 120, 120);
        }
        100%{
            transform: scale(1);
            background-color: brown;
        }
    }
    .item:nth-child(1){        
   
        animation-name: myani ;
        margin: 20px;
    }
    .item:nth-child(2){  
      
        animation-delay: 0.2s;
        margin: 20px;
    }
    .item:nth-child(3){
      
        animation-delay: 0.4s;
        margin: 20px;
    }
    .item:nth-child(4){    
        animation-delay: 0.6s;
        margin: 20px;
    }
    .item:nth-child(5){    
        animation-delay: 0.8s;
        margin: 20px;
    }

    .item:nth-child(6){
        animation-delay: 1s;
        margin: 20px;
    }




</style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
</body>

자쟌 !!

신기한거 !!!!!!! 애니메이션처럼 만들거야 오오오오!!

[변형1-반응선택자와 CSS속성변경을 통해 변형]   :    transition-duration

--> 마우스를 올려놓으면

    그리고

      마우스를 클릭하고 있으면

  도형의 색깔,모양이 변하고 크기가 커지게 만듦 근데!!!!! 애니메이션처럼 움직이게 할 거임

<style>
        #rect{
            width: 150px;
            height: 150px;
            background-color: brown;
            line-height: 150px;
            text-align: center;
            transition-duration: 3s ;  /*변형이 일어나는데 걸리는 시간 설정 이거 설정해야 변화가 부.드.럽.게 이어져서 보임!!!*/
        }
        #rect:hover{   /*마우스 올렸을 때 변화*/
            width: 300px;
            height: 300px;
            background-color: green;
            line-height: 300px;
        }
  
        #rect:active{   /*클릭하고 있을 시 변화*/
            background-color: rgb(252, 197, 115);
            border-radius: 150px;
        }

    </style>
</head>
<body>
    <h2>변형1-반응선택자와 CSS속성변경을 통해 변형</h2>
    <div id="rect">RECTANGLE</div>
</body>

변형1-반응선택자와 CSS속성변경을 통해 변형

[변형2-반응선택자와 CSS속성변경을 통해 변형]

[transition-xxxx : 변형을 부드럽게 만드는 속성들! ]

-transition-duration : 숫자 ;  => 숫자시간만큼 변형이 이루어짐 

-transition-property:background-color,width,height   => 지정한 색깔,높이,넓이가 변함

-transition-timing-function: ease-in / linear / ease-out;  => 변형 속도가 처음에 느렸다가 빨라짐 / 속도가 일정 / 처음에 빨랐다가 느려짐

- transition-delay: 숫자 ; =>숫자시간만큼 처음 동작 진행 이 딜레이 됨

예)

 transition-duration:4s,3s,2s;   =>변형이 일어나는 시간을 각각 지정가능함

 한꺼번에 적용도 가능
   transition-duration:4s;
   transition-property:all;
   transition: 2s 1s ease-out;  =>   단축속성!  1초 딜레이 후 시작, 2초 동안 변형이 이루어질 때 속도는 빨랐다 느려짐

----마우스 올렸을 때 변형 !!!

 #content{
            display: flex;
        }
    #rect1,#rect2{
            width: 100px;
            height: 100px;
            /*단축속성 2초동안 일어나는데 1초는 딜레이됨 */
             transition: 2s 1s ease-out; 
        transition-delay: ;
        }
        #rect1{
            background-color: brown;
        }
        #rect2{
            background-color: rgb(31, 114, 31);
        }
        #rect1:hover{  
            width: 300px;
            height: 200px;
            background-color: rgb(74, 74, 175);
        }
        #rect2:hover{
            width: 200px;
            height: 300px;
            background-color: rgb(236, 190, 40);
        }
    </style>
</head>
<body>
    <h2>변형2-반응선택자와 CSS속성변경을 통해 변형</h2>
  <div id="content">
      <div id="rect1"></div>
      <div id="rect2"></div>
  </div>
  <div style="width:100px;height:100px;background-color: gold;"></div>    
</body>

변형2-반응선택자와 CSS속성변경을 통해 변형

[변형3-CSS함수를 통해 변형(반응 선택자와 CSS속성 변경이 아닌)] 

transform : 속성지정   -> 요거 이용!

근데 !!!!!! 이건 그냥 변형된 상태임 ...  transform 함수에는 애니메이션 동작이 적용 안됨

그니까  transition-duration:4s;  얘는  transform 함수에는 적용 안된다. !! 에이 얜 재미 없어....

그냥 예제만 보고 아하 그렇구나 하고넘어가...

 <style>
        div{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;            
        }
        #trans1{
            background-color: brown;
          /*transition-duration:4s;  얘는 여기에선 적용 안됨 transform 함수에는 적용 안된다.*/
          /*함수를 이용한 변형   transform:함수()*/
           transform: translateX(200px) rotate(90deg) scaleX(1.5);
        
        }
        #trans2{
            background-color: rgb(243, 209, 55);
            transform:translate(200px,200px) rotate(180deg) scale(2,2) skewX(45deg);
        }
    </style>
</head>
<body>
    <h2>변형3-CSS함수를 통해 변형(반응 선택자와 CSS속성 변경이 아닌)</h2>
  <div id="trans1">TRNAS1</div>
  <div id="trans2">TRNAS2</div>
</body>

만들기 전 !!

flex : none    => 아이템의 크기 고정 시 사용 (0 0 auto  와 같음)

flex: 1   => 아이템이 컨테이너를 채우도록 즉 컨테이너의 크기에따라 아이템들의 크기도 확장하거나 축소된다(1 1 0 와 같음)

flex-grow속성이 1이상이면 아이템의 크기에 상관없이 컨테이너를 주축방향으로 채우게 된다.
교차축방향으로 채울 때는 align-items:strerch(기본값) 아이템을 수평.수직으로 정중앙에 배치하려면 
 justify-content:center와 align-items:center를 준다.

받은 HTML문서

   <div class="wrap">
        <div class="header">
          <div class="logo"><img src="../HTML5/Images/logo.jpg" alt="회사 로고 이미지"/></div>
          <div class="topMenu">
            <ul>
              <li>HOME</li>
              <li>로그인</li>
              <li>회원가입</li>
              <li>공지사항</li>
              <li>Q&A</li>
              <li>일반게시판</li>
            </ul>
          </div>
        </div>
        <div class="content">
          <div class="aside">
            <ul>
              <li>서브메뉴1</li>
              <li>서브메뉴2</li>
              <li>서브메뉴3</li>
              <li>서브메뉴4</li>
              <li>서브메뉴5</li>
              <li>서브메뉴6</li>
              <li>서브메뉴7</li>
              <li>서브메뉴8</li>
              <li>서브메뉴9</li>
              <li>서브메뉴10</li>
            </ul>
          </div>
          <div class="main">
            <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
                <h2>실제 내용이 들어갑니다</h2>
        
              
          </div>
        </div>
        <div class="footer">
            <address>서울시 금천구 가산동 한국소프트웨어 인재개발원</address>
        </div>
      </div>

1. 전체적으로 적용

   [모든 여백 없애기]

*{ 

      margin: 0;   
      padding: 0;
      font-family: 'Courier New', Courier, monospace;

  }

   [부모를 만들어 flex적용시키기]   -- flex가 적용되는 범위는 부모의 바로 밑에 자식만 적용 된다 !! 기본기본 

  wrap  얘가 flexbox / container가 됨!

.wrap{ 
        display: flex ;
        flex-direction: column ;
        flex: 1 ;
        height: 100%;               =>높이는 부모인 body에 다 맞추겠음
       }

2. top  배치하기

.header{  => flex가 바로 자식만 적용되니 요거 안에서도 또 가로배치 하고 싶으면 얘도 flexbox / container 로 만들면 됨 ! 
         display: flex ;
         justify-content:space-between;    =>양쪽에 붙고 가운데 빈공간!! 
 }
header .logo{     =>로고배치
        flex: none ;      =>아이템 크기 고정
        width: 15%;
        padding-top: 10px;     =>패딩은 부모한테 입히기        
 }

 .logo img{
        width: 100%;
        background-color: antiquewhite;
        margin-left: 10px;
   }
 .header .topMenu{  
        display: flex ;    =>수직으로 가운데 배치 하기위한 flex속성이용 
        align-items: center; 
 }
.header .topMenu ul{
        display: flex ;
        list-style: none;       
}
.header .topMenu ul li{
        padding: 0 5px;
        border-right: 1px gray solid ;      
}
.header .topMenu ul li:last-child{
        border : none ; 
        margin-right: 20px ;  
}

2.왼쪽 사이드 배치

.content{   => 얘도 flex를 위한 부모로 만들고
        display: flex;
    }
.aside{
        flex: none ;    => 크기 고정
        width: 15%;
}
    .aside ul{
        margin: 10px 0 0 10px ;     =>상 우 하 좌 순서
        list-style: none;    
    }
    .aside ul li{
        margin-bottom: 5px;
    }

3. 메인 배치

.main{
        flex-grow: 1;       => 나머지 빈 영역 모두 차지
        padding: 10px 0 0 10px;
  }

4바닥 배치

 .footer{     => 역시 flex 입혀 부모로 만듦
        display:flex ;
        height: 60px;
        justify-content: center; 
        align-items: center;           => 정가운데로 배치  
 }
 .footer address{
        font-style: normal;         ==> 기울어진거 다시 제대로 세우기 
        font-weight: bold;
 } 

쟌!!

이번엔 box/container의 자식들인 Flex Item에 적용되는 속성들을 정리 !!

받아온 HTML문서

  <fieldset>
        <legend><h2>Flex Item의 flex-basis속성</h2></legend>
        <div class="container1">
          <div class="item">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item">item5</div>
        </div>
      </fieldset>
      <hr/>
      <fieldset>
        <legend><h2>Flex Item의 flex-grow속성 및 flex-shrink속성</h2></legend>
        <div class="container2">
          <div class="item-1">item1</div>
          <div class="item-1">item2</div>
          <div class="item-1">item3</div>
          <div class="item-1">item4</div>
          <div class="item-1">item5</div>
        </div>
      </fieldset>
      <fieldset>
        <legend><h2>Flex Item의 margin속성 적용하기</h2></legend>
        <div class="container3">
          <div class="item-2">item1</div>
          <div class="item-2">item2</div>
          <div class="item-2">item3</div>
        </div>
      </fieldset>

우선 부모 태그에 flex를 입히다

    .container1{
            background-color: blanchedalmond;
            display: flex;
     }

1. flex-basis속성

.item{
            background-color: rgb(91, 168, 91);
            border: 2px rgb(151, 31, 31) solid;
            box-sizing: border-box;
           

        [flex-basis 는 아이템의 기본 크기를 설정한다 (아이템의 확장/축소시의 기준크기)]
           
            flex-basis : 기본값이  auto
            width와basis 각각 지정 시 
            width: 150px;                 
            flex-basis:150px;    (   display:flex 일때는 width:150px과 동일)

             width와basis 동시 지정 시
             width:200px;  
             flex-basis:150px;           주축방향이 인라인방향이라width적용 x,  basis가 우선함               
             width:150px;
             flex-basis:0;                  역시 인라인 방향이라 width무시, basis가 적용
        }

2.  flex-grow속성 및 flex-shrink속성

  부모에 flex 입히고

 .container2{
            background-color: blanchedalmond;
            display: flex; 

   }

.item-1{
            background-color: green;
            border: 2px rgb(151, 31, 31) solid;
            box-sizing: border-box;
            grow:0이 기본값 shrink:1이 기본값  브라우저 늘리고 줄이면서 테스트 해보셈
              이땐 width 노노(고정이라 안 바뀜) flex-wrap:nowrap; flex-basis로 지정해야함
                       
     [기본값 테스트]
            flex-basis:50px;   
            [밑은 기본값들]
            flex-basis: auto;
            flex-grow:0 ;
            flex-shrink:1 ;

         [양수로 지정하면 컨테이너의 여유공간을 채움, 아이템의 크기가 지정한 비율대로 커짐]
           flex-grow:1 ;
           flex-basis:0;

   => basis가 0 의 의미???!!    grow값을 주었을 때 늘어난 그때의 그 값! 이 basis가 됨

         auto와의 차이는 무엇????   auto는 컨텐츠 그 자체의 값 이거나 width값이 있을 때 그 값

           flex:1; 

    => 이 뜻은 ??!!!!

           grow:1, shrink:1 , flex-basis:0   이 됨 !

           basis가 auto가 아님 ! 이거 많이 씀 !!!!!!!
           이건 아이템의 크기가 컨테이너의 크기에 따라 늘고 주는 UI를 만들 때 사용함  
                 
            width: 150px;
            flex:none;   

    ==>  이 뜻은 ??!!!

            flex: 0 0 auto와 같음 

           이건 컨테이너 크기 상관없이 고정크기를 사용하는(아이템의 크기를 유지할 때)  UI 를 만들 때 사용        

}

++ order 속성 : 아이템의 시각적 나열 순서를 결정하는 속성으로 HTML 자체의 구조를 바뀌지 않는다(브라우저에서 보일때만 순서 바뀌어서 나옴....)
 숫자로 설정하며 작은 숫자일 수록 먼저 배치된다.(음수도 허용된다. 기본값 0)

    .item-1:nth-child(1){
        flex-basis:100px;
        flex-grow:1;
        flex-shrink:1;
        order:2;
    }
    .item-1:nth-child(2){
        flex-basis:100px;
        flex-grow:2;
        flex-shrink:2;
        order:-5;
    }
    .item-1:nth-child(3){
        flex-basis:100px;
        flex-grow:1;
        flex-shrink:1;
        order:-10;
    }
    .item-1:nth-child(4){
        flex-basis:100px;
        flex-grow:1;
        flex-shrink:1;
    }
    .item-1:nth-child(5){
        flex-basis:100px;
        flex-grow:1;
        flex-shrink:1;
    }

요러면 순서는 child3 -> 2 -> 4 -> 5 -> 1 요렇게 브라우저에선 배치되어 보임

3. margin 이용하여 justify-content: 효과내기 

역시 부모에 flex 걸어주고! 

 justify-content는 부모에서 걸어주면 한 방에 끝 낼수 있는데 그걸 그냥 자식(flex -item)에서 margin으로 효과를 내 보는 거

.container3{
            background-color: blanchedalmond;
            display: flex;
              justify-content: center ; 요거 쓰면 쉽게 정 중앙에 오는데 이걸 margin을 이용해서 가운데 정렬 할 거임 !!
              justify-content:flex-end; 요거 쓰면 오른쪽으로 !! 이거도 margin을 이용해서 오른쪽 정렬 해봄
              justify-content:space-around;   이건 어케???  모든 아이템에 margin auto로 !!
              justify-content:space-between;   이거도 해봐요
              justify-content:space-evenly;  요거도
        }

[margin 이용해서  컨테이너에 지정한  justify-content:space-around;효과 내기]

  .item-2{
            background-color: rgb(159, 187, 93);
            border: 2px rgb(151, 31, 31) solid;
            box-sizing: border-box;
            margin:0 auto;  
        }


[margin 이용해서  컨테이너에 지정한 justify-content: center ; 효과 내기]
     .item-2:nth-child(1){
            margin-left: auto;
        }     
        .item-2:nth-child(3){
            margin-right: auto;
        } 

     [margin 이용해서 justify-content:flex-end; 효과]
          .item-2:nth-child(1){
            margin-left: auto;
            }    

        [margin 이용해서 justify-content:space-between; 효과]
          .item-2:nth-child(2){
            margin:0 auto;
          }

      [margin 이용해서 justify-content:space-evenly  효과]
        .item-2:nth-child(1){
            margin: auto;
          }     
        .item-2:nth-child(3){
            margin: auto;
         }   

이론은 정리했으니 실전으로

받은 HTML문서

  <fieldset>
        <legend><h2>Flex Container의 display속성</h2></legend>
        <div class="container1">
          <div class="item">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item">item5</div>
        </div>
        <hr/>
        <div class="container2" >
          <div class="item">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item">item5</div>
        </div>
      </fieldset>
      <fieldset>
        <legend><h2>Flex Container의 flex-direction속성</h2></legend>
        <div class="container3">
          <div class="item">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item">item5</div>
        </div>
      </fieldset>
      <fieldset>
        <legend><h2>Flex Container의 flex-wrap속성</h2></legend>
        <div class="container4">
          <div class="item">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item">item5</div>
          <div class="item">item6</div>
          <div class="item">item7</div>
          <div class="item">item8</div>
          <div class="item">item9</div>
          <div class="item">item10</div>
        </div>
      </fieldset>
      <fieldset>
        <legend><h2>Flex Container의 justify-content속성(주축방향 정렬)</h2></legend>
        <div class="container5">
          <div class="item">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item">item5</div>
          <div class="item">item6</div>
          <div class="item">item7</div>
          <div class="item">item8</div>
          <div class="item">item9</div>
          <div class="item">item10</div>
        </div>
      </fieldset>
      <fieldset>
        <legend><h2>Flex Container의 align-items속성(교차축방향 정렬-한줄일때)</h2></legend>
        <div class="container6">
          <div class="item" style="font-size:.5em">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item" style="font-size:2em">item5</div>
          <div class="item">item6</div>
          <div class="item">item7</div>
          <div class="item">item8</div>
          <div class="item">item9</div>
          <div class="item" style="font-size:.5em">item10</div>
        </div>
      </fieldset>
      <fieldset>
        <legend><h2>Flex Container의 align-content속성(교차축방향 정렬-여러줄일때)</h2></legend>
        <div class="container7">
          <div class="item" style="font-size:.5em">item1</div>
          <div class="item">item2</div>
          <div class="item">item3</div>
          <div class="item">item4</div>
          <div class="item" style="font-size:2em">item5</div>
          <div class="item">item6</div>
          <div class="item">item7</div>
          <div class="item">item8</div>
          <div class="item">item9</div>
          <div class="item">item10</div>
          <div class="item">item11</div>
          <div class="item">item12</div>
          <div class="item">item13</div>
          <div class="item">item14</div>
          <div class="item" style="font-size:.5em">item15</div>
        </div>
      </fieldset>

아이템들은 보기쉽게 구분하기 위해 색을 입혀 줌

.item{
        background-color: green;
        border: 2px red solid;
        box-sizing: border-box ;
    }

1. display 속성 (flex 적용)

   아니 또 헷깔려하는데

   그 아이템들을 보지 말고 부모 !! 배경을 보소 !! 배경=컨테이너=box 가 블락 엘리먼트특성을 지녔다고오 !!!

.container1{
        background-color: bisque; 
        display: flex; /*블락엘리먼트 특성을 가진 컨테이너 생성*/
    }

2.display 속성(inline-flex적용)

얘랑 비교하면 확!!!! 알지  

   .container2{
        background-color: pink;
        display: inline-flex; /*인라인E 특성을 가진 컨테이너가 컨텐츠 크기만큼 줄어듦!!!*/
    }

3.flex-direction 속성 : 주축을 어디로  잡느냐?? 

   row 는 가로방향

   column은 세로방향

   reverse는 순서를 반대로 !

	.container3{
        background-color: bisque;
        display: flex; 
        flex-direction: row;      /*  1. 기본값*/ 
        flex-direction: row-reverse ;  /*  2. 시작선이 오른쪽 끝*/
        flex-direction: column;      /*  3. 주축이 세로방향 시작선이 위*/
        flex-direction: column-reverse;    /*  4. 시작선이 아래*/
     }

4.flex-wrap 속성 : 브라우저 늘리고 줄일 때  컨텐츠들의 반응

 .container4{
     background-color: bisque;
     display: flex ; 
     
     flex-wrap: nowrap;     /*기본값 브라우저 줄여도 안내려감*/
     flex-wrap: wrap;       /* 줄이면 내려감 컨테이너도 줄어든다.*/
     flex-wrap: wrap-reverse;  /*줄이면 행이 위로 올라감*/
     flex-flow: row-reverse  wrap-reverse ;   /* direction, wrap 한꺼번에 지정 가능*/
    }

5.  justify-content 속성 : 아이템들을 어떻게 배치할 거?

 .container5{
        background-color: bisque; 
        display: flex;  /*인라인 flex 일대는 적용 불가 (여유공간 없음 )*/
        justify-content: flex-start ;  /*왼쪽 정렬과 같음*/
        justify-content: flex-end;  /*오른쪽 정렬과 같음 */
        justify-content: center;    /*가운데 정렬  */
     
        justify-content: space-between ; /* 시작 끝 선에 각각 아이템 배치 그 사이는 균일한 공간*/
        justify-content: space-around ;  /*아이템 주위를 둘러싼  여백을 동일하게 공통여백일때 더 널널하겠지*/
        justify-content: space-evenly ;  /*모든 아이템간의 여백이 동일 */
}

6.align-items 속성 

    .container6{
        background-color: bisque; 
        display: flex; 
        height:  100px; 

        align-items: stretch;    /*기본이stretch 타이템들을 교차축방향으로 컨테이너를 늘려 */
        align-items: flex-start; /*교차축의 시작선을 기준으로 아이템 정렬 - 세로폭은 컨텐츠 크기만큼 위쪽 정렬!*/
        align-items: flex-end;  /*아래쪽 정렬 */

        align-items: center;   /*교차축 방향으로 가운데 정렬*/
        
        /*진짜 정 가운데 정렬할 때는 밑에 두가지를 같이 씀 !*/
         justify-content: center;
         align-items: center;
     
        align-items:baseline;  /*글꼴의 기준선인 baseline을 기준으로 아이템들을 정렬 글꼴 크기가 다를 때 의미있음 .*/
      }

7. align-content 속성  이건... 잘 안쓰니까 궁금하면  직접 해봐 ㅎㅎㅎㅎㅎㅎ 

    wrap;이 설정된 상태에서, 아이템들의 줄이 2줄 이상 되었을 때의 교차축을 따라 아이템들을 정렬하는 방식을 지정
    속성값은 justify-content와 동일
    아이템들이 한 줄일 경우 align-items 속성 사용

    wrap일 때는 교차축 정렬은 align-content를 사용하자!

       [요놈들은 컨텐츠모양은 제각각 줄 간격은 없음]
        align-content:stretch ;   기본값
        align-content:flex-start ;  여러줄이 여백없이 묶여서 위쪽 정렬
        align-content:flex-end;   여러줄이 여백없이 묶여서 아래쪽 정렬
        align-content:center; 여러줄이 여백없이 묶여서 가운데 정렬
            

      [요놈들은 줄간격이 떨어지는데 컨텐츠들의 모양이 동일해짐]
        align-content:space-between;   행이 컨텐츠가 되어서 행과 행 사이는 동일한 여백 정렬 (시작/끝선엔 붙고)
        align-content:space-around;     각 행 주위에 동일 여백 여백이 중복일 땐 더 널널
        align-content:space-evenly;    모든 여백이 다 동일 !!! 중복 무시
           
        [요놈들은 컨텐츠모양도 제각각 줄 간격도 떨어짐 ]
       align-items: flex-start;     시작선에서부터 정렬 o , 여러줄이 동일한 여백이 생김   align-content:flex-start ;랑 비교 !!
        align-items: center;    여백생기고 가운데 정렬!!  align-content:center;랑 비교 !!!  

정렬 관련 !! 아직도 끝나지 않은 정 렬

-https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

요기서 이것저것 예제 많음
직접 해보기에 좋으니 한 번 씩 들어가서 확인 해 보장!!


Flexbox내의 아이템 간 여유 공간 배분과 강.력.한. 정렬 기능을 제공하기 위한 모델로 복잡하고 어려운 레이아웃을 쉽게 구성할 수 있다.

[flex-container] 안 에서 줄 수있는 속성들 (container = box 같은표현으로 사용함)
flex를 주면 그건 flexbox가 되고
그안의 요소들은 flex item들이 됨(****모든요소가 적용되는것이 아님 flex를 준 태그를 부모 태그라고 치면 비로 아래 자식태그만 flex item이 됨 ****)
flex-direction : 아이템의 주축을 설정하는 속성( row 냐 column 이냐)
wap - box가 줄어도 아이템들이 밑으로 빠지냐 유지하냐
flow : 이거로 wap속성과 direction 속성을 한꺼번에 줄 때
+ align-items ,justify-content, align-content


[flex- item]안에서 줄 수 있는 속성들( 여유공간/사용 가능한 공간 을 배분하는 방법들 )
flex-grow : 양수로 지정하면 남아있는 여유공간을 지정한 값 만큼(비율만큼 1:1:1 요따구로 ) 아이템들에게 배분해준다
(결국 item의 공간의 크기가 늘어난다.)
flex-shrink : 주축의 공간이 부족할 때(브라우저를 줄였을 때 ) 각각의 아이템들을 어떻게 줄일 지 결정 하는 속성
예를들면 1:2:1 로 주었을 때 , 2로 지정되어있는 애가 1보다 더 빨리 줄어든다. 이렇게 말하는 이유는.... 일관되 진 않는다 딱 떨어져서 줄어드는게 아니고 그냥 값은 큰 애가 적은애 보다는 빨리 줄어 드는 것 뿐임
flex-basis : item의 크기 설정, 기본값은 auto - 자동으로 지정되어있는 width값을 찾아서, 거기에 맞춰 지정됨!
지정되어있는 값이 없으면 컨텐츠 크기만큼 자동설정 됨 !
flex : 저 위의 세가지를 한꺼번에 줄 때 (순서있음 grow , shrink, basis ) 세가지 동시에 줄 때,,,, 우선순위가 basis밖에 될 수가.. 없네? grow 같은 경우 나머지 공간이 있어야 그걸 비율만큼 나눠 갖는 것 이기 때문임 !!
flex : initial로 지정하면 0 1 auto로 지정한 것과 동일하게 동작....
flex : auto 지정하면 1 1 auto로 지정 한 것과 동일 (이거 많이 씀 !!!)
flex : none 지정하면 컨테이너의 크기 변화에도 flex 항목 크기는 변하지 않고 basis를 auto로 지정했을 때 정해지는 크기로 결정

*** align-items : 컨테이너에 지정하는 속성, 교차축을따라 flex 항목 열을 정렬하는 방식을 지정 allign들어가면 교차축!!
flex-start로 지정하면 flex 항목의 첫 열이 교차축 방향의 시작선에서부터 정렬.
flex-end로 지정하면 flex 항목의 첫 열이 교차축 방향의 끝선에서부터 정렬.
center로 지정하면 flex 항목 행에 배분된 공간의 가운데 라인에서부터 정렬됩니다.

**** justify-content : 주축을 따라 flex 항목을 정렬 (이거도 많이 사용 !!!)
stretch
flex-start
flex-end
center
space-around
space-between
space-evenly
요 속성들은 직접 하면서 천천히 해보자!

***align-content : flex-wrap: wrap; 이 설정된 상태에서, 아이템들의 줄이 2줄 이상 되었을 때의
교차축을 따라 아이템들을 정렬하는 방식을 지정(교차축방향 여유 공간을 배분)
Items가 여러 줄이고 여백이 있을 경우만 사용

*****※flex-basis 와 width의 차이*** 다시정리하기 !!!
컨텐츠의 너비를 결정하는것은 flex-basis가 아니고 width이다
flex-basis는 다른 flex 속성(flex-grow, flex-shrink)을 결정할 때 기본(basis)이 되는 값이다.

만약 주축이 column 으로 변경했을 경우 basis 는 height로 적용이 되지만 width는 그런거 상관없이 여전히 width로 적용됨display:flex;인 경우에는 대개의 경우 width와 flex-basis가 동일한 결과를 보여준다
display:inline-flex의 경우에는
flex-basis에 특정 값을 설정하면 컨테이너 너비는 변함 없지만(컨테이너 유지) 아이템들의 총합이
컨테이너보다 길어져 스크롤이 생긴다.(컨테이너를 삐집고 나온다.)
width에 특정 값을 설정하면 아이템들의 width의 합만큼 컨테이너의 너비도 늘어난다.(컨테이너도 같이 커짐)

****FlexBox에서의 Margin****
-아이템에 margin을 속성을 사용하면 각 아이템을 쉽게 배치할 수 있다. 단,컨테이너에 먼저 display:flex를 주어야한다.
-컨테이너의 flex-direction:row일 때(주축이 가로방향)
수평 중앙 배치 : margin: 0(요건 상하) auto(요건 좌우);
왼쪽 배치 : margin-right: auto; (헷깔리면 반대로 생각하기 !!!!!)
오른쪽 배치 : margin-left: auto;

-컨테이너의 flex-direction:column일 때(주축이 세로방향)
수직 중앙에 배치 : margin: auto 0;
위쪽 배치 : margin-bottom auto;
아래쪽에 배치 : margin-top: auto;

이거 잘 안쓴다고 하길래 정리 안하려다가

혹시 몰라서 중요 내용만 정리하고 넘어갈 거

position : static 기본값으로 left(x축),top(y축)의 영향을 받지 않는다
    ※원칙]부모 요소에 position속성(absolute 혹은 relative)을 주면 자식은
    무.조.건. 부모를 기준으로 한다. 즉 부모 영역의 왼쪽 상단이 오프셋(0,0)이다.
[position 종류]
    absolute:브라우저 상단(body가 부모인 경우) 혹은 부.모.를. 기.준.으로 left,top좌표가 결정됨
    relative:원.래. 자리한 위치를 기준으로 left,top좌표가 결정됨

[Z-INDEX속성]

요 속성을 주면 태그들이 겹쳐있는게 가능 함 둥둥 떠다님 숫자는 내맘대로 클수록 위로 올라 온다! 숫자가 같거나 없으면 먼저 기술된게 뒤로 감   이건.... 예시를 봐야겟군...

<fieldset>
        <legend>Z-INDEX속성</legend>  
        <div style="background-color: rgb(255, 255, 164); position: relative ; width: 300px; height: 300px;">
          <div  style="background-color: rgb(192, 127, 42); width: 100px ; height: 100px; position: absolute ; left: 20px; top: 20px; z-index: 10;" >div1</div>
          <div style="background-color: rgb(45, 131, 45); width: 100px ; height: 100px; position: absolute ; left: 60px; top: 60px; z-index: 8;">div2</div>
          <div style="background-color:rgb(46, 46, 184); width: 100px ; height: 100px; position: absolute ; left: 100px; top: 100px; z-index: 8;">div3</div>
        </div>
      </fieldset>

배치 관련 Float속성 정리

folat : right/left    =>오른쪽/왼쪽으로 흘러들기(?) 자기 컨텐츠만큼만의 공간만큼으로 몸집을 줄이고 오른쪽/왼쪽으로 정렬,배치된다 줄어든 공간엔 다음 컨탠츠가 자동으로 흘러 들어옴

clear: right/left /both   => 원래 자동으로 다음 컨텐츠가 흘러 들어가야하는데 이 속성을 쓰면 흘러들어가는 것을 막음

적용 전 HTML

1. div에 width미 지정

- width 미 정 시에는 나머지 여유 공간을 채운다 단,width 지정 시에는 자동으로 여유 공간을 채우지 않는다 따라서
배치를 위해서는 반드시 float속성의 left/right로 배치하자. 그러면 남은 영역의 왼쪽/오른쪽등을 채우게 된다

<body>
    <fieldset>
        <legend>float속성(div에 width미 지정),float: - </legend>
        <div style="background-color: red; float:left;">div1</div>
        <div style="background-color: green; float:right;">div2</div>
        <div style="background-color: blue; clear: both;">div3</div>
      </fieldset>
  </body>

2.div에 width 지정

 height도 지정 시에는 배치 시에 모든 DIV에 float나 clear속성을 부여해라

  <fieldset>
        <legend>float속성(div의 width 지정) 가로폭 지정 시 바로 자기위치 고수</legend>
        <div style="background-color: red; width: 100px; float:left;">div1</div> 
        <div style="background-color: green; width: 100px; float:right;">div2</div>
        <div style="background-color: blue; width: 100px;float:right;">div3</div>
      </fieldset>

3. div에 width/height 지정

<fieldset>
        <legend>float속성(div에 width/height 지정)</legend>
        <div style="background-color: red; width: 50px; height: 50px; float:left;">div1</div> 
        <div style="background-color: green; width: 50px; height: 50px ;float:left;" >div2</div>
        <div style="background-color: blue; width: 50px; height: 50px; float:left;">div3</div>
</fieldset>

Display와 Visivility 속성에관한 CSS

적용 전 우선 모양들 구분이 될 수 있게 셋팅

 /*크기들 비슷하게만들기*/
 <style>
        fieldset{
            width: 400px;
        }
        fieldset div{
            width: 50px;
            height: 50px;
        }
</style>

1. visibility:hidden 속성

 visibility: hidden 속성 적용코드  영역은 그대로 남아있지만 해당 컨텐츠는 안보임

 <h2>display 및 visibility속성</h2>
    <div>
        <h3>visibility</h3>
        <fieldset class="visible">
          <legend>visibility:hidden일 때 영역은 그대로 존재</legend>
            <div style="background-color:red ;">left</div>
            <div style="background-color: green; visibility: hidden;">center</div>
            <div style="background-color: blue ;">right</div>
        </fieldset>

2.display:none 속성

none 적용 코드

같은 숨기기 기능이지만 display:none 속성을 주면 해당 컨텐츠 영역 자체가 사라짐

<h3>display</h3>
       <fieldset class="visible">
            <legend>display:none일 때 영역도 사라짐</legend>
            <div style="background-color:red ;">left</div>
            <div style="background-color: green; display:none;">center</div>
            <div style="background-color: blue ;">right</div>
        </fieldset>

3.태그의 hidden 속성으로 CSS의 diplay:none효과

  위에꺼랑 헷깔리면 안됨 이건 그냥 hidden 임!

<h3>HTML5의 hidden속성</h3>
        <fieldset class="visible">
            <legend>태그의 hidden 속성으로 CSS의 diplay:none효과</legend>
            <div style="background-color:red;">left</div>
            <div style="background-color: green; " hidden >center</div>
            <div style="background-color: blue ;">right</div>
        </fieldset>

4.block엘리먼트를 inline 엘리먼트로 변경

<style>
.inline div{ /*가로배치 되고 inline E  됨*/
            display: inline ;
        }
</style>
<body>
 <h3>block->inline</h3>
        <fieldset class="inline">
            <legend>가로배치로 변경</legend>
            <div style="background-color:red ;">left</div>
            <div style="background-color: green ;">center</div>
            <div style="background-color: blue ;">right</div>
        </fieldset>
</body>

5.block -> inline-block 똑같이 inline 엘리먼트처럼 가로배치 시키나 블락엘리먼트 속성은 유지시키기

<sytle>
.inline-block>div{
        display:inline-block;  /*블락엘리먼트 특성을 그대로 유지*/ 
       }
</sytle>
<body>
   <h3>block->inline-block</h3>
        <fieldset class="inline-block">
            <legend>가로배치로 변경</legend>
            <div style="background-color:red ;">left</div>
            <div style="background-color: green ;">center</div>
            <div style="background-color: blue ;">right</div>
        </fieldset>
</body>

6.inline 엘리먼트를 block 엘리먼트로 변경시키기

<style>
  .block span{
        display: block ;
       }
</style>
<body>
<h3>inline->block</h3>
        <fieldset class="block">
            <legend>세로배치로 변경</legend>
            <span style="background-color:red ;">left</span>
            <span style="background-color: green ;">center</span>
            <span style="background-color: blue ;" >right</span>
        </fieldset>
</body>