728x90 반응형 CSS15 CSS- 박스, 이미지 위치를 중앙으로 옮기는 방법 CSS- 박스, 이미지 위치를 중앙으로 옮기는 방법 오늘은 CSS를 사용하여 박스나 이미지의 위치를 중앙으로 배치하는 방법에 대해 알아보겠습니다. 텍스트의 경우에는 text-align 속성을 사용해서 center 속성 값으로 중앙에 배치할 수 있는데 박스나 이미지는 따로 중앙에 배치하는 속성이 명확하게 없기 때문에 다음과 같은 방식을 사용하시는 게 좋습니다. (1) 중앙에 배치하는 방법은 margin 속성을 사용하시는 것이 좋습니다. margin 속성을 사용하실 때 auto라는 속성 값이 있기 때문에 수월하게 중앙에 배치할 수 있습니다. margin: 0 auto;를 사용하시면 되는데 이 코드는 margin-top:0; margin-left:auto; margin-bottom:0; margin-right.. 2022. 8. 18. CSS - display(4) flexbox, item CSS - display(4) flexbox, item 오늘은 저번 글에 이어서 flexbox에서 item에 관련한 속성에 대해 알아보겠습니다. (해당 코드는 순서가 정해진 박스에 order 속성을 사용하여 배치 순서를 바꾸어보는 예시입니다.) (1) order order은 item들의 배치 순서를 지정해 줄 수 있는 속성으로 숫자가 낮을수록 왼쪽으로 배치가 됩니다. 기본적으로 원래 작성된 태그의 순서대로 진행이 되며 숫자가 높을수록 오른쪽으로 배치가 됩니다. (기본값은 0으로 되어있습니다.) 그래서 배치를 바꾸고 싶을 때는 태그의 순서를 바꿀 수도 있지만 태그가 많고 복잡한 상황이라면 order속성을 통해 재배치를 할 수 있습니다. (해당 예시는 flex-grow를 사용하여 1번 아이템의 크기를 다른 .. 2022. 7. 29. CSS - display(4) flexbox, container CSS - display(4) flexbox, container 오늘은 display 속성에서 사용되는 flexbox에 대해 알려드리겠습니다. (편하게 flex라고 칭하겠습니다.) flex는 앞에서 작성했던 grid와 비슷한 속성을 가지고 있습니다. grid는 container로 감싸고 안에 item으로 구성이 되어 있습니다.flex도 grid와 똑같이 container와 item으로 구성되어 있고container을 구성하는 속성과 item을 구성하는 속성이 나누어져 있습니다. 오늘은 많은 속성 중 많이 사용되는 속성에 대해 알아보겠습니다. flex는 css3에서 나온 방식으로 가장 최신의 방식이라고 할 수 있습니다.그만큼 활용도가 높고 간단하게 코드를 작성할 수 있습니다. 기존에 한 줄로 아이템을 배치.. 2022. 7. 29. CSS - display(3) grid와 item CSS - display(3) grid와 item 오늘은 저번 시간에 다뤘던 display에서 grid에서 item과 관련된 속성에 대해 알아보겠습니다. 저번 시간 내용을 정리해 보면 grid는 엑셀과 비슷하게 구성되어 있으며 행과 열을 지정해서 원하는 위치에 배치하는 형태로 디자인을 합니다. grid는 겉에 container와 안에 item들로 구성되어 있습니다. container와 관련된 속성으로 행과 열, 행과 열 간의 사이 값과 같은 박스를 만들어주고 item과 관련된 속성으로 원하는 위치에 태그라는 아이템을 배치해서 디자인할 수 있다는 것을 설명드렸습니다. 저번 시간에는 grid에 관련한 내용과 conainer와 관련된 기본적인 속성에 대해 알아보았었는데요. 오늘은 그중 item과 관련된 기본적.. 2022. 7. 22. 이전 1 2 3 4 다음 728x90 반응형
