ABOUT ME

-

  • 2. Units
    Front-end/CSS3 2020. 6. 6. 15:56
    /*대부분의 브라우저는 1px을 1/96인치의 절대단위로 인식*/
    body {
        text-align: center;
    }
    div {
        font-size: 14px;
        font-weight: bold;
        padding: 2em; /* 14px * 2 = 28px */
        background-color: rgba(255, 0, 0, 0.2);
    }
    
    body {
        font-size: 14px;
        text-align: center;
    }
    div {
        font-size: 120%; /* 14px * 1.2 = 16.8px*/
        padding: 2em; /* 16.8px * 2 = 33.6px */
    }
    
    body {
        font-size: 14px;
        text-align: center;
    }
    div {
        font-size: 1.2em; /* 14px * 1.2 = 16.8px */
        padding: 2em;     /* 16.8px * 2 = 33.6px */
        /*중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미치기 때문에 주의하여야 한다.*/
        /*font-size: 1.2rem;*/
    
        /*rem 은 최상위 요소(html)의 사이즈를 기준으로 삼는다. rem 의 r은 root 를 의미한다.*/
        /*사용자가 브라우저의 기본 폰트 크기를 변경(Mac Chrome 의 경우,
        설정 > 고급 설정 표시 > 웹 콘텐츠 > 글꼴 맞춤 설정)
        하더라도 이에 따라 웹사이트의 레이아웃을 적절히 조정할 수 있다는 장점이 있다.
        따라서 폰트 사이즈 뿐만이 아니라 콘텐츠의 크기에 따라 가변적으로 대응하여야 하는
        wrapper 요소(container) 등에 적합하다.*/
    }
    
    /*반응형 웹디자인은 화면의 크기에 동적으로 대응하기 위해 % 단위를 자주 사용한다.*/
    /*하지만 % 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다.*/
    /*Viewport 단위는 상대적인 단위로 viewport 를 기준으로 한 상대적 사이즈를 의미한다.*/
    /*단위	Description*/
    /*vw  viewport 너비의 1/100*/
    /*vh	viewport 높이의 1/100*/
    /*vmin	viewport 너비 또는 높이 중 작은 쪽의 1/100*/
    /*vmax	viewport 너비 또는 높이 중 큰 쪽의 1/100*/
    body {
        margin: 0px; }
    .item {
        width: 500vw;
        height: 100vh;
        line-height: 100vh;
        font-size: 4rem;
    }
    
    h2 {
        background-color: red;
        /*green blue white orange yellow cyan black*/
    }
    
    /*HEX 코드 단위 (Hexadecimal Colors)*/
    /*RGB (Red, Green, Blue)*/
    /*RGBA (Red, Green, Blue, Alpha/투명도)*/
    /*HSL (Hue/색상, Saturation/채도, Lightness/명도)*/
    /*HSLA (Hue, Saturation, Lightness, Alpha)*/
    #hex-p1 {background-color:#ff0000;}
    #hex-p2 {background-color:#00ff00;}
    #hex-p3 {background-color:#0000ff;}
    #hex-p4 {background-color:#ffff00;}
    #hex-p5 {background-color:#ff00ff;}
    
    #rgb-p1 {background-color:rgb(255,0,0);}
    #rgb-p2 {background-color:rgb(0,255,0);}
    #rgb-p3 {background-color:rgb(0,0,255);}
    #rgb-p4 {background-color:rgb(192,192,192);}
    #rgb-p5 {background-color:rgb(255,255,0);}
    #rgb-p6 {background-color:rgb(255,0,255);}
    
    #rgba-p1 {background-color:rgba(255,0,0,0.3);}
    #rgba-p2 {background-color:rgba(0,255,0,0.3);}
    #rgba-p3 {background-color:rgba(0,0,255,0.3);}
    #rgba-p4 {background-color:rgba(192,192,192,0.3);}
    #rgba-p5 {background-color:rgba(255,255,0,0.3);}
    #rgba-p6 {background-color:rgba(255,0,255,0.3);}
    
    #hsl-p1 {background-color:hsl(120,100%,50%);}
    #hsl-p2 {background-color:hsl(120,100%,75%);}
    #hsl-p3 {background-color:hsl(120,100%,25%);}
    #hsl-p4 {background-color:hsl(120,60%,70%);}
    #hsl-p5 {background-color:hsl(290,100%,50%);}
    #hsl-p6 {background-color:hsl(290,60%,70%);}
    
    #hsla-p1 {background-color:hsla(120,100%,50%,0.3);}
    #hsla-p2 {background-color:hsla(120,100%,75%,0.3);}
    #hsla-p3 {background-color:hsla(120,100%,25%,0.3);}
    #hsla-p4 {background-color:hsla(120,60%,70%,0.3);}
    #hsla-p5 {background-color:hsla(290,100%,50%,0.3);}
    #hsla-p6 {background-color:hsla(290,60%,70%,0.3);}

    'Front-end > CSS3' 카테고리의 다른 글

    6. Font & Text  (0) 2020.06.06
    5. Background  (0) 2020.06.06
    4. Display  (0) 2020.06.06
    3. Box Model  (0) 2020.06.06
    1. Selector  (0) 2020.06.06

    댓글

Designed by Tistory.