[bootstrap] 부트스트랩 – 반응형 선택자

반응형 선택자는 특정 기기를 대상으로 노출을 제한하는데 사용합니다.

모바일 환경에서는 모든 데스크톱 웹사이트에 있는 모든 콘텐츠를 보여줄 필요가 없는데요. 이럴 때 반응형 선택자를 삽입해주면 됩니다. 선택자는 하나 이상 동시에 사용할 수 있습니다.

	스마트폰(768px 미만)	태블릿(768px 이상)	데스크톱(992px 이상)	대형 화면(1200px 이상)
.visible-xs-*	보임	안보임	안보임	안보임
.visible-sm-*	안보임	보임	안보임	안보임
.visible-md-*	안보임	안보임	보임	안보임
.visible-lg-*	안보임	안보임	안보임	보임
.hidden-xs	안보임	보임	보임	보임
.hidden-sm	보임	안보임	보임	보임
.hidden-md	보임	보임	안보임	보임
.hidden-lg	보임	보임	안보임	안보임

 

별표가 있는 .visible-*-* 선택자는 다시 세 가지 선택자를 만들 수 있습니다.
따라서, xs 사이즈인 경우 .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block 세 가지가 됩니다.

클래스	CSS display 속성 값
.visible-*-block	display: block;
.visible-*-inline	display: inline;
.visible-*-inline-block	display: inline-block;

 

inline은 좌우 마진과 패딩은 허용하지만 상하 마진과 패딩은 무시하며 높이와 너비도 무시됩니다. 따라서 inline 요소에 대해 이들 속성 값을 설정해도 적용되지 않습니다. 대신 다른 요소를 좌우로 배열할 수 있습니다ㅏ.

block은 상하 좌우 패딩과 마진, 너비, 높이를 적용할 수 있지만 좌우에 다른 요소를 배치할 수 없습니다. 블록 요소의 성격을 가지면서 요소를 좌우로 배열할 수 있도록 하는 것이 display:inline-block;입니다. 상황에 따라 위 선택자를 적절하게 사용하면 됩니다.