이모저모 일상들

Grid란? 아래의 모양처럼 2차원 형태의 행과 열의 레이아웃을 쉽게 잡아주는 css 속성입니다. display의 inline-block형태로도 만들 수 있지만 grid를 사용하면 훨씬 더 간단하게 만들 수 있습니다. 1 2 3 4 5 6 7 8 9 소스 1 2 3 4 5 6 7 8 9 결과물

display : block div태그에서 기본 값으로 설정되어 있고 너비를 100%로 가지는 특징을 갖고 있음. 어떤 영역을 고정으로 지정하기 위해 사용되며, 배경색 혹은 너비 및 높이를 지정할 수 있고 전체 레이아웃 틀을 잡는데 유용 display : inline span태그에서 기본 값으로 설정되며, 유동적으로 영역을 설정할 때 사용 콘텐츠 사이즈에 따라 자동으로 늘어나고 조절되기 때문에 기존의 레이아웃을 벗어나지 않으면서 특정 부분만 바꾸고 싶을때 사용 display : inline-block inline과 block의 특징을 합쳐놓은 속성 한 행에 여러 컨텐츠들을 나열할 때 사용 됨. display : none 특정 영역을 가리고 싶을 때 사용되며, 반응형 페이지를 만들 때 사용하기 유용함. 예..

div태그는 divison의 약자로 뜻 그대로 콘텐츠의 영역을 나누고 레이아웃을 만드는 데 사용합니다. div는 기본 값으로 너비를 100%로 가지는 특징이 있습니다. 높이와 너비를 설정할 수 있지만 행을 혼자서 차지하는 특성을 가져서 여러개를 만들고 너비를 30%씩 지정해도 한 행에 붙는 것이 아닌 30% 너비를 가진 열 형식으로 나열하게 됩니다. See the Pen Untitled by sodium casein (@xyyhsawg-the-selector) on CodePen. span태그는 div태그와 반대로 너비의 기본 값을 가지고 있지 않습니다. 또한 가지려는 특징도 없습니다. 그래서 높이와 너비를 지정해도 적용이 되지 않습니다. 즉, 안의 이미지나 내용에 따라 사이즈가 유동적으로 변합니다. S..