728x90 반응형 CSS/CSS display5 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. CSS - display(2) grid와 container CSS - display(2) grid와 container 오늘은 저번 시간에 다뤘던 display에서 grid에 대해 먼저 알아보겠습니다. grid는 간단하게 엑셀과 비슷하다고 생각하셔도 좋을 것 같습니다. 이유는 특정한 영역 안에서 엑셀처럼 표와 같은 형태로 구성이 되어있기 때문입니다. 부모 태그에 grid를 지정해주면 안에 자식 태그들은 부모 태그 안에 표와 같은 형태로 배치가 됩니다. 그래서 grid를 지정해주면 표를 구성하는 것처럼 행과 열의 수를 지정해야 하며 행과 열을 지정해주면 자식 요소를 어떤 행에 배치할지 어떤 열에 배치할지 지정해야 합니다. 그럼 왜 grid를 사용하는지 설명드리면 저번 시간에도 말씀드렸듯이 웹을 디자인하면서 HTML 태그들이 내가 구성했던 위치로 정확하게 배치해야 하.. 2022. 7. 21. 이전 1 2 다음 728x90 반응형
