[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는 컨텐츠의 크기에 맞게 너비가 변하고 width: 100%는 전체를 채운다

아까와 같이 padding-left: 40px 줘도 inline-block일때 width:auto는 40px이 더해진 컨텐츠의 크기에 맞춰 너비가 커지고

width:100%는 부모의 크기와 상관없이 벗어난다

 

width:auto는 태그 요소의 성질(inline, inline-block, block) 에 맞춰서 크기가 변한다! 만약 width를 입력하지 않으면 default 값은 auto라서 인라인 블락 요소를 block으로 변경해도 너비가 자동으로 바뀌지 않기 때문에 width : 100%를 줘야한다. 에 적용되는것!

 

 

width: 100% 부모 요소의 너비에 영향을 받는다 margin, padding, border 영역 모두 포함

width: auto; 자식 요소 너비에 영향을 받는다 margin, padding, border 영역 포함하지 않는다