지금, 개발하기81 HTML/CSS] flex- box로 요소 배치하기2 지난 시간에 이어서 '플렉스 박스 레이아웃'입니다. '플렉스 박스 레이아웃'을 사용할 때 유용한 추가 속성들을 살펴 보겠습니다. 먼저 지난시간에 하던 예시를 이어서 보여드리겠습니다 :) .container{ width: 800px; height: 400px; border: 5px solid black; background-color: burlywood; /* flex-box로 만들어주기 */ display: flex; /* 주축방향 정렬 */ justify-content: center; /* 교차축방향 정렬*/ align-items: center; } .item{ width: 100px; height: 100px; border: 5px solid black; background-color: chocola.. 2021. 8. 22. HTML/CSS] flex- box로 요소 배치하기 CSS로 원하는 형태의 레이아웃을 만드는 건 생각보다 쉽지 않습니다. Position, Float, Table 등을 이용해서 레이아웃을 하면 복잡하고 시간도 많이 걸립니다. 이걸 도와주는 친구가 바로 '플렉스 박스 레이아웃'입니다. '플렉스 박스 레이아웃'을 사용하면 박스 높이를 동일하게 맞추거나 아이템의 사이즈에 상관없이 동일한 간격으로 배치하는 일 등이 쉬워집니다. 1. Flex -box는 'container'와 'item'으로 이루어져 있습니다. 'container'와 'item'에는 들어가는 속성들도 아래처럼 다른데요 ㅎㅎ 오늘은 몇가지만 살펴보겠습니다. contariner속성에는 display, flex-flow, justify-content, align-content, align-item 등이.. 2021. 8. 21. HTML/CSS] float을 이용하여 왼쪽/오른쪽 정렬하기 flaot 속성은 요소를 문서 위에 떠있게 만드는 속성입니다. 땅에 붙어있는 이미지가 위로 슝~ 하고 올라와서 왼쪽이나 오른쪽으로 붙게 되는거죠. 제가 3d그림을 그릴수 없어서 유투브에 나와있는 자료를 가져와봤습니다. 아래에 있는 박스들이 하나의 요소입니다. 원래는 바닥에 다 붙어있는데 지금 red박스만 float이 되어 위에 붕떠있는 상태입니다. 이 상태에서 green박스와 blue박스를 float시키면 어떻게 되는지 보겠습니다. 먼저 green박스의 css에 float:left을 주겠습니다. 붕떠서 왼쪽으로 붙으라는 뜻입니다. 붕뜬 왼쪽에는 이미 red박스가 있어서 그 바로 옆 왼쪽에 green박스가 붙겠네요 그리고 공간이 생긴 blue, yellow박스는 위쪽을 비워두기 좀 그러니 위로 붙을 거예요.. 2021. 8. 20. HTML/CSS] Position으로 요소 배치하기 position은 웹 문서 안의 요소를 배치할 때 쓰는 속성입니다. margin으로도 요소를 이동시킬 수 있지만, margin을 사용할 경우 주변에 있는 요소도 영향을 받기때문에 하나의 요소를 이동시킬 땐 position을 사용하는 게 더 적합합니다. position을 이용하면 하나의 텍스트나 이미지를 원하는 곳에 손쉽게 배치할 수 있습니다. 그럼 먼저 position에는 어떤 속성이 있는지 알아봅시다. position속성은 크게 아래와 같이 두가지로 나뉩니다. static은 문서에 흐름에 맞추어 배치된 상태이고, 나머지인 relative, absolute, fixed는 좌표를 이용해서 각 요소의 위치를 변경할 수 있습니다. 위치는 top, bottom, right, left를 사용하여 지정합니다. 1... 2021. 8. 18. 이전 1 ··· 9 10 11 12 13 14 15 ··· 21 다음
