댓글 목록

CSS레이아웃-inline-block

페이지 정보

작성자 운영자 작성일 17-10-29 19:18 조회 1,396 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

인라인블록값

오랫동안 브라우저 폭을 채우고 브라우저를 크기 조정할 때 멋지게 감싸는 상자 그리드를 float속성을 사용하여 만들었습니다.

그러나 display속성의 inline-block값이 이것을 더 쉽게 만듭니다.


인라인 블록 요소는 인라인 요소와 유사하지만 너비와 높이를 가질 수 있습니다.


이전 방법 - float 사용 (float속성을 사용한 상자뒤에 요소에 대한 clear속성을 지정해야 합니다.)

.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}

.after-box {
    clear: left;
}

display속성에 inline-block값을 사용하여 동일한 효과를 얻을 수 있습니다. (clear속성이 필요하지 않습니다.)

.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}


댓글목록 0

등록된 댓글이 없습니다.

CSS Flexbox강좌

CSS Variables강좌 

CSS Grid강좌