inline-block 2

[css]display 속성(2)

display 속성이 변하는 경우 1) float 속성 : inline-block으로 변경됨 2) position : inline-block 으로 변경됨 3) 가상 클래스 ::before :: after : inline 으로 변경됨 인라인 요소를 block으로 변경하면 너비는 자동으로 100%로 변경됨 인라인 블락 요소를 block으로 변경해도 너비가 자동으로 바뀌지 않기 때문에 width : 100%를 줘야한다. 여기서 width: 100% 와 width : auto의 차이는 뭘까? 기본 코드가 이렇게 있다고 가정하고 양 옆에 padding-left:40px 씩 주면 width : 100% 를 하면 밖으로 빠져 나온다 display를 inline-block으로 바꾸면 width: auto는 컨텐츠의 크..

프론트/css 2022.06.21

display 속성 핵심 정리

block ex) div, p , table h1~h6 등등... 기본 너비 값 : 100% 한줄에 하나씩만 배치됨 너비 값, 높이 가질 수 있음 상하좌우 margin 가능 inline ex) span, a,em, string ... 글자 개별적으로 꾸미는 서식 관련 태그 기본 너비 값 : 컨텐츠 너비 값(text의 글자 넓이 만큼) 한줄에 여러 개 배치 가능 크기 값 가질 수 없음 상하 margin 안되고 좌우만 가능 inline-block ex) img, input, button, textarea , iframe ... 이미지, 대부분 폼 요소 기본 너비 값 : 컨텐츠 너비 값 한줄에 여러개 배치 가능 크기값 가질 수 있음 상하좌우 margin 가질 수 있음 셋다 기본적으로 padding은 가능하다!..

프론트/css 2022.06.09