CSS 5일차 - 4일차 정리

##########################################
15. 색상

  1) 영단어 표기 ( 120 여개 됨 )

    예> color:red|blue|aqua|...

  2) 16진수 ( 0~15)
    
    - #RRGGBB ( 6비트), #RGB ( 3비트 )
    - #FFFFFF: 흰색
      #000000: 검정
     
    예> color: #FF6347;

   3) 10진수 ( 0~255) + rgb(r,g,b)

     - rgb(0~255,0~255,0~255)
       rgb(0,0,0) <==검정
       rgb(255,255,255) <==흰색

   예> color: rgb(15, 184, 226);

   4) 투명도 + 10진수 ==> rgba(0~255,0~255,0~255, 0~1)

      - alpha값은 0이면 완전투명, 1이면 완전불투명

     예> color: rgba(15, 184, 226, 0.3);

 ##########################################
16. visibility 속성

  용도: 요소를 보이거나 보이지 않게 동작.

  문법:

      visibility:visible(기본)|hidden|collapse

   * display:none  vs visibility:hidden

     display:none 은 영역유지 안됨.
     visibility:hidden 는 영역유지가 됨.


  - visibility:collapse 는 <table> 를 안보이게 처리(영역유지 안됨)


##########################################
17. 투명도(opacity) 속성

 - 요소의 투명도 제어
 - 0~1 사용 ( 0:완전투명, 1:완전불투명)

 예> opacity:0.3


##########################################
18. 글꼴(font) 관련

  1) 스타일 속성

    font-style:normal|italic|oblique|..

  2) 두께 속성

    font-weight:bold|bolder|lighter|100~900

  3) 사이즈 속성
   
    font-size:rem(*)|px

  4) 글꼴 속성

   - font-family: 값1, 값2, 값3;

   - 값에 지정가능한 이름 2가지

    가. generic family ( 실제 글꼴들의 카테고리라고 생각하자 )
       - 웹브라우저에서 기본적으로 제공
       - 여러 폰트가 가지는 특별한 주요 특징을 가짐.
       - 종류:  serif
               sans-serif
       monospace(고정폭글꼴)
       cursive(필기체)
       산술글꼴

    나. font family
       - generic family에 속하는 실제 글꼴의미.

       대표:
            serif: Tims New Roman, Geogia
            sans-serif: consolas
            monospace: ..

    결론:
      글꼴들의 특징을 담은 generic family가 있고
      그 안에 공통특징은 공유하지만 생김새는 다른 여러 다양한 font family가 있다고 생각하자.


   - 웹브라우저가 글꼴(font)를 결정하는 방법

      가. font-family를 명시적으로 지정하지 않은 경우
         - 웹브라우저의 표준글꼴에 설정된 font family로 랜더링된드
 현재 설정된 표준글꼴인 font family는 Malgun Gothic이다.
 따라서 웹 브라우저에서 출력되는 글꼴은 Malgun Gothic임.
  
 글꼴확인 방법은 마우스 오버 또는 개발자도구에서 computed 탭 클릭하면 됨.

      나. font-family를 명시적으로 지정한 경우

        
  a. generic family만 지정한 경우


    font-family: serif;
     <== 웹브라우저의 글꼴설정에서 정의된 serif에 해당하는 실제 font family로 랜더링이 된다.
       현재는 Batang 글꼴임.

    font-family: sans-serif;
      <== 웹브라우저의 글꼴설정에서 정의된 san serif에 해당하는 실제 font family로 랜더링이 된다.
       현재는 Malgun Gothic 글꼴임.

  b. font family 지정한 경우 ( 마지막에는 generic family 지정 권장 )

      font-family: 'Malgun Gothic', 'Batang', serif; 

      font-family: 'Malgun Gothic', 'Batang', sans-serif; 

  * 단축표현식

     font:  style  weight  size  family;

    예> font: italic  bold  2rem  'Malgun Gothic', 'Batang', serif; 


19. 구글폰트
   
    - 웹폰트(web font)라고 부름.
    - 장점은 로컬에 설치된 폰트와 상관없이 사용 가능함.
      단점은 <link> 사용해야됨.

    http://fonts.google.com 접속해서 
    language 와  generic family 먼저 선택 > 목록에 나온 글꼴 선택 > get Fonts 버튼 선택 >
    get embed code 선택 >  <link> 와 css 복사해서 사용.


20. text 관련 속성
  1) 색상
     color: red
  2) 수평 정렬
    text-align:center|left|right|justify(양쪽정렬)
  3) 밑줄 및 취소선
    text-decoration: underline|overline|line-throuth
  4) 대소문자, 첫글자 대문자
    text-transform:uppercase|lowercase|capitalize
  5) 첫라인 들여쓰기
     text-indent:10px;
  6) 줄간격
    - font-size:16px 에 비례해서 적용됨
    line-height: 값
    예>   line-height: 1
         line-height: 2
 line-height: 0.8

#############################################
21. FlexBox

   1) 개요
    전통적으로 레이아웃 처리할 때 사용했던 방식은 position과 float을 사용하는 방식임.
    FlexBox 문법을 적용하면 매우 쉽게 레이아웃 및 수직 정렬, 요소 순서(ordering), 동적 사이징
    처리가 가능함.


   2) 2가지 구성요소
      - 반드시 부모(flex container)/자식(flex item)관계가 성립되어야 한다. ( 자손은 적용안됨 )
      - 중첩가능
      - 1차원 (행(기본)/열)으로 배치됨. 
       ( 전형적인 normal flow 를 따르지 않음 )
      - 부모는 display:flex 로 지정
       ( 실행결과: -모든 div item 들이 가로(행) 배치됨.
                 -명시적으로 지정된 height 제외한 나머지는 가장 큰 height 값이 적용됨. 
                 -브라우저 화면을 줄이면 어느정도까지 줄어듬 )
      - 부모는 display:inline-flex 로 지정  
       ( 실행결과: -모든 div item 들이 가로(행) 배치됨.
                 -명시적으로 지정된 height 제외한 나머지는 가장 큰 height 값이 적용됨. 
                 -브라우저 화면을 줄여도 안줄어듬.
 이유는 inline이기 때문에 자체적인 크기를 고수한다.)

     가. flex container
 - display:flex;
         - container에서 사용가능한 속성들

     나. flex item
         - item에서 사용가능한 속성들


     예>         
 .container{
           display:flex;
 }

         <div class="container">
            <div>item</div>
            <div>item</div>
    <div>item</div>
    <div>item
       <div>item2</div> <== flex item 아님. 자손은 제외
    </div>
    <div class="container2"> <== 중첩 가능
                  <div>item</div>
    </div>
 </div>


    3) Container에서 사용 가능한 속성
        
* 2가지 축
 주축: item이 배치되는 방향의미
      기본은 row

 교차축: 주축의 수직인 방향의미.

       가. flex-direction 속성
          - 주축의 방향 결정
  - 속성값:

     row : 기본값, 왼--->오
     row-reverse: 오---->왼

     column: 위-->아래
             column-reverse: 아래 --> 위
 
       나. flex-wrap 속성

           - 화면크기를 줄일때 어느정도까지는 축소되고 item이 안보이게 된다.
     축소되지않고 새로운 줄에 랜더링이 가능하도록 제어.

    -속성값:

      nowrap : 기본
      wrap   : 상단기준 ( 아래쪽에 wrap 됨)
      wrap-reverse: 하단기준 ( 위쪽으로 wrap 됨 )

           - 특징
     wrap 되면 기존의 최대 height가 아닌
     컨텐츠의 height만 차지함.
     계속 화면을 줄이면 하나의 열로 표시됨.

        다. flex-flow 
          flex-direction 와 flex-wrap 의 축약표현식

  문법: flex-flow:  direction   wrap

  예> flex-flow: row wrap;


        라.  align-items
            - 교차축에 대한 정렬
            - 속성값
      
       flex-start
       flex-end
       center
       baseline : item의 실제 컨텐츠의 기준에 맞춰 정렬됨.
       stretch : 기본값. 기본적으로 item을 늘려서 Container를 꽉 채운다.


마.  justify-content
    - 주축에 대한 정렬
            - 속성값

               flex-start
       flex-end
       center
       space-around
       space-between
       space-evenly

         바. align-content
             - 반드시 wrap된 상태에서만 적용가능. nowrap 적용안됨.
     - align-items + justify-content 합성 기능.
             속성값
       flex-start
       flex-end
       center
       baseline : item의 실제 컨텐츠의 기준에 맞춰 정렬됨.
       stretch 
               space-around
       space-between
       space-evenly

      4) item에서 사용 가능한 속성

         가) order 속성
   - 기본적으로 코드에 지정된 순서로 표시된다.
     order를 이용해서 나타내는 순서를 변경할 수 있다.
           - order:0 기본값

       -1      0        1
       (앞)  (기본값)    (뒤)
 
         나) algin-self 속성
   - align-items ? Container에 지정해서 모든 item들의 교차축 정렬 제어.
           - algin-self ? 개별적인 item의 교차축 정렬. 
                 ( container에서 설정한 align-items의 교차축 정렬값을 재정의함 )

    속성값:
                flex-start
       flex-end
       center
       baseline : item의 실제 컨텐츠의 기준에 맞춰 정렬됨.
       stretch : 기본값. 기본적으로 item을 늘려서 Container를 꽉 채운다.