ABOUT ME

-

  • 4. Display
    Front-end/CSS3 2020. 6. 6. 15:57
    /*display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다.*/
    /*block*/
    /*inline*/
    /*inline-block*/
    /*none*/
    /*display 프로퍼티는 상속되지 않는다.*/
    p {
        display: block;
        -webkit-margin-before: 1em;
        -webkit-margin-after: 1em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
    }
    /*항상 새로운 라인에서 시작한다.*/
    /*화면 크기 전체의 가로폭을 차지한다. (width: 100%)*/
    /*width, height, margin, padding 프로퍼티 지정이 가능하다.*/
    /*block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다*/
    
    /*block 레벨 요소 예*/
    /*div*/
    /*h1 ~ h6*/
    /*p*/
    /*ol*/
    /*ul*/
    /*li*/
    /*hr*/
    /*table*/
    /*form*/
    
    
    span {
        background-color: red;
        color: white;
        padding: 10px;
        /* width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. */
        /* width: 200px; */
        /* margin: 10px; */
        /* 상, 하 여백은 line-height 로 지정한다. */
        /* line-height: 50px; */
    }
    /*새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다. */
    /*즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.*/
    /*content 의 너비만큼 가로폭을 차지한다.*/
    /*width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. */
    /*상, 하 여백은 line-height 로 지정한다.*/
    /*inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.*/
    /*inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다. */
    /*inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.*/
    
    /*inline 레벨 요소 예*/
    /*span*/
    /*a*/
    /*strong*/
    /*img*/
    /*br*/
    /*input*/
    /*select*/
    /*textarea*/
    /*button*/
    
    
    .wrapper {
        font-size: 0; /*요소간 간격을 제거*/
    }
    .inline-block {
        display: inline-block;
        vertical-align: middle; /* inline-block 요소 수직 정렬 */
        border: 3px solid #73AD21;
        font-size: 16px;
    }
    .box1 {
        width: 300px;
        height: 70px;
    }
    .box2 {
        width: 300px;
        height: 150px;
    }
    /*block 과 inline 레벨 요소의 특징을 모두 갖는다. inline 레벨 요소와 같이 한 줄에 표현되면서 */
    /*width, height, margin 프로퍼티를 모두 지정할 수 있다.*/
    /*기본적으로 inline 레벨 요소와 흡사하게 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있다.*/
    /*block 레벨 요소처럼 width, height, margin, padding 프로퍼티를 모두 정의할 수 있다. */
    /*상, 하 여백을 margin 과 line-height 두가지 프로퍼티 모두를 통해 제어할 수 있다.*/
    /*inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.*/
    /*inline-block 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.*/
    
    
    .visible { visibility: visible; }
    .hidden  { visibility: hidden; }
    
    table, td { border: 1px solid black; }
    .collapse { visibility: collapse; }
    /* .collapse { visibility: hidden; } */
    /*visibility 프로퍼티는 요소를 보이게 할 것인지 보이지 않게 할 것인지를 정의한다.
    즉, 요소의 렌더링 여부를 결정한다.*/
    /*프로퍼티값 키워드 설명*/
    /*visible	해당 요소를 보이게 한다 (기본값)*/
    /*hidden	해당 요소를 보이지 않게 한다. display: none;은 해당 요소의 공간까지 사라지게 하지만 */
                /*visibility: hidden;은 해당 요소의 공간은 사라지지 않고 남아있게 된다.*/
    /*collapse	table 요소에 사용하며 행이나 열을 보이지 않게 한다.*/
    /*none	table 요소의 row 나 column 을 보이지 않게 한다. */
            /*IE, 파이어폭스에서만 동작하며 크롬에서는 hidden 과 동일하게 동작한다.*/
    
    
    div, img {
        float: left;
        width: 150px;
        height: 150px;
        margin: 30px;
        background-color: blue;
        color: white;
        opacity: 0.5;
        transition: opacity 1s;
    }
    div:hover, img:hover {
        opacity: 1.0;
    }
    /*opacity 프로퍼티는 요소의 투명도를 정의한다. 0.0 ~ 1.0의 값을 입력하며 0.0은 투명, 1.0은 불투명을 의미한다.*/

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

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

    댓글

Designed by Tistory.