더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 3개의 일치하는 문서를 찾았습니다.
- css
[CSS] Flexbox 내부의 좌우 상하 정렬 방법 알아보기
css를 사용하면서 DOM 요소의 레이아웃에 사용되던 inline, block 타입의 요소를 이제는 쉽게 flex, inline-flex를 사용할 수 있게되었습니다. flexbox 형태의 레이아웃이 모든 메이저 브라우저에서 사용 가능하게 되었기 때문이죠.그래서 이미 알고 있지만 flexbox를 사용시 간단하면서 실수할 수 있는 부분에 대하여 알아보려고 합니다. 바로 margin값과 함께 사용할 경우 말이죠...(이 글은 flexbox를 어느 정도 사용할 수 있다라는 가정하에 적은 내용입니다. flexbox layout 관련하여 아래 글을 참고하세요.)https://w...
Last Modified : 2021-12-01 14:47:29
Created : 2021-12-01 11:45:38 
css[css] 스타일속성 gap을 flex에서 사용하기
CSS 스타일 속성 gap에 대하여 알아보려고 합니다.# css gap 스타일 속성gap은 내부의 children 요소들이 일정한 간격으로 떨어져 위치할 수 있도록 사용하는 스타일 속성입니다. 보통 가지고 있는 엘리먼트 요소들의 사이를 구분하기 위해서 흔히 margin 값을 사용하죠. 만약 두 줄 이상인 경우라면 margin-bottom을 함께 사용하여 구현하게 됩니다.! margin과 gap을 사용할 때의 차이점은?먼저 gap을 왜 사용하는 것이 좋을까요? margin gap의 차이점은 gap의 경우 엘리먼트 요소들의 사이에만 공간(space)을 만든다는 점입니다....
Last Modified : 2020-12-05 14:48:56
Created : 2020-12-05 14:04:00- css
CSS display flex 사용방법 및 예제보기
다수의 엘리먼트 요소들을 더 쉽게 정렬하는 방법은 무엇일까요? css를 사용하여 레이아웃을 구성할때 많은 고민을 하게됩니다. 이때 flex를 사용하면 다른 방법보다 훨씬 더 쉽고 빠르게 쉽게 정렬 및 레이아웃을 하는 것이 가능합니다. 왜 flex를 써야할까요?Why flex ?각각의 요소들을 정렬하는데는 많은 것들을 고려해야합니다. 이때 flex는 정렬하고 포지션을 결정하는 등등의 많은 옵션들이 존재합니다. 쉽게 얘기하면 세로 정렬을 하는 것도... 그리고 한 줄에 원하는 박스 아이템을 원하는 방식으로 정렬할 수도 있죠......
Last Modified : 2020-10-13 13:37:04
Created : 2018-12-28 17:51:38