인라인블록
-
Fluid layouts with Flexbox이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 28. 05:15
이번시간에는 배열하는 방법 중 하나인 flex, 플렉스에 대해 배워 보도록 하겠습니다. flex, 플렉스가 등장하기 전에 있었던 여러 문제점들은 flex, 플렉스를 사용함으로써 해결할 수 있습니다. flex, 플렉스가 어떤 문제들을 해결 하였는지를 살펴 보도록 하겠습니다. 박스 3개를 만든 후, 배경색은 빨간색, 폭은 200px, 높이는 200px로 설정하고, 디스플레이는 inline-block으로 설정 하겠습니다. 여기서 박스를 더 추가 하게 되면, 박스들이 inline-block 디스플레이 형태로 나란히 옆으로 나열되는 것이 아니라, 박스들이 자리를 충분히 차지했다면, 아래쪽으로 이어 붙는다는 것을 확인할 수 있습니다. 이러한 문제점 뿐만 아니라, 여기에 margin을 넣어주면, 자동으로 완성되는 그..
-
Inline vs. Block vs. Inline Block이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 26. 05:20
저번시간에는 margin, padding에 대해 배웠고, 이번시간에는 display, 디스플레이에 대해 배우도록 하겠습니다 (다음시간에는 position, 포지션에 대해 배우겠습니다.) 디스플레이하는 방법 3가지, 1> block, 블록, 2> inline-block, 인라인-블록, 3> inline, 인라인에 대해 알아보겠습니다. 1> 먼저, block, 블록이 어떻게 생겼는지 살펴 보겠습니다. 박스 3개를 만든 후, 상자들의 배경색은 빨간색, 폭은 200px, 높이도 200px로 값을 주도록 하겠습니다. 여기에 border는 두께는 2px, 실선, 검은색으로 값을 주겠습니다. 그럼 이제 block, 블록 형태를 확인할 수 있습니다. 즉, block, 블록이란 바로 옆에 아무 것도 없는 디스플레이 형태..