기억의 DataBase

ETC( border / none,opacity / overflow / line-height ) 본문

CSS

ETC( border / none,opacity / overflow / line-height )

Zester; 2020. 4. 8. 18:58

border: 두께 종류 색상 (종류만 지정해도 보여짐 - solid)

   <div class="box"></div>

    .box {

        width: 200px;

        height: 200px;

        background: orange;

        padding: 10px;

        border: 10px solid red;

        box-sizing: border-box;

    }

box-sizingborder-box

(border/padding 모두를 포함한 크기 200/200)

(padding/border등을 사용할 때 계산할 필요없이 본래 크기(w/h)를 유지)

 

 

display: none(아예 존재하지 않음 - 삭제)과

opacity: 0(단순히 보이지 않음 - 투명)은 다른 의미

* opacity 0~1(0투명/1불투명)

    

.hide {

        display: none;

    }

class="hide" 를 JS로 줘서 지워줄 수도 있다.



overflow: visable(기본값) / hidden / scroll / ***auto(박스를 넘어가면 스크롤이 나옴)



line-height : 따로 지정하지 않으면 글자와 동일(한줄의 두께와 동일)

                 숫자만 쓰면 글자 크기의 배수(수정할 필요를 줄임 - 1.4 ~1.7 권장)

    

'CSS' 카테고리의 다른 글

flex  (0) 2020.04.08
float  (0) 2020.04.08
Size( pixel / % / em / rem / vw / vh / vmax / vmin )  (0) 2020.04.08
Emmet  (0) 2020.04.08
우선순위와 상속 / 초기화  (0) 2020.04.08
Comments