CSS의display속성
웹문서의레이아웃(구조) 을잡기위해서반드시알아야하는부분
display속성으로는여러가지가있지만우리는inline,block,inline-block,flex에대해서만배워볼거예요.
inline과block의차이점
inline을사용하면내용물만큼만공간이할당되지만,block을사용하면무조건한줄전체를다차지하며강제로줄바꿈이돼요
div를사용하면다음내용을출력할때줄바꿈이되지만span은줄바꿈없이바로다음내용이나왔었죠?
span태그는inline속성을가지고있고,div태그는block속성을가지고있어요.
이처럼div의block속성은자신만의공간을차지하고span의inline속성은다른inline속성들과같은줄을공유하는특징이있어요.
여기서block이공간을차지한다는건,단순히한줄을다차지하는것뿐아니라가로세로크기를지정할수있음을의미해요.
즉,block은색종이같은것이라생각할수있고,inline은글자같은것이라생각할수있어요.
이제inline-block속성에대해서가르쳐드릴게요.inline-block속성은block처럼공간을지정하되,inline처럼다른내용들과같은줄을공유하고싶을때사용돼요.inline-block속성은block처럼공간을지정하되,inline처럼다른내용들과같은줄을공유하고싶을때사용돼요.
flex 속성
flex속성은최근에추가된속성인데,현대웹문서의레이아웃을가장쉽게구성할수있게해주는속성이라해도과언이아니에요.
모니터마다해상도가다르기때문에똑같은웹문서라해도어떤모니터에서는스크롤을많이해야하고(더길게나타나고),어떤모니터에서는아예스크롤바가나타나지않을수도있어요(더짧게나타날수있어요).
내가만든웹문서의길이가100px가된다는보장이있다면가운데를50px라확신할수있을텐데위와같은여러가지변수때문에확신할수가없는거
단,flex속성을사용하기전에반드시명심해야하는것이있는데flex 속성을 부여하면 그 자식 태그들은 inline-block 속성을 갖게 된다. 는점이에요.
div든span이든모두강제로inline-block속성이부여되어flex속성의 다른 자식 태그들과 같은 줄을 공유
그것이div든span이든모두강제로inline-block속성이부여되어flex속성의 다른 자식 태그들과 같은 줄을 공유 해요.
flex속성의자식의 자식 태그 가아닌바로 아래 자식 태그 들만이inline-block속성을부여받아요.
.flex_container 에width: 100%; height: 100%; 를줌으로써화면전체만큼의공간을확보하도록하였고,display에flex를줬어요.
flex와함께쓰인justify-content:center;는가로가운데정렬을,align-items:center;는세로가운데정렬을의미해요.
Bootstrap홈페이지에가보면지금처럼객체를가운데정렬하는것뿐아니라다양하게정렬하는방법에대해서나와있어요.
