728x90 반응형 개발자27 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. CSS display CSS display CSS에서 display는 화면에서 요소들을 어떤 식으로 배치할 것인지 지정해주는 속성입니다. 여기서 요소란 HTML에서 작성되는 태그를 의미합니다. 예를 들어 요소란 ' 안녕하세요 ' 이런 구조를 요소라고 부르고 있습니다. 본론으로 돌아와 HTML을 공부하셨다면 아실 내용이지만 HTML은 기본적으로 적용되는 스타일이 있습니다. 굵기, 폰트 크기, 폰트, 테두리 등이 있는데 그중 inline 속성과 block 속성에 대한 내용이 있습니다. 먼저 inline 속성을 가진 태그들은 한 라인에 자신의 앞과 뒤에 있는 태그들을 배치할 수 있는 속성입니다. 대표적으로 span 태그가 있는데 span 태그를 사용하면 앞과 뒤에 있는 태그들이 같은 위치에 배치되는 특징이 있습니다. 다음은 blo.. 2022. 7. 20. 이전 1 2 3 4 5 6 7 다음 728x90 반응형
