IT Story/Css 2

css float 수평 정렬 속성(left, right)에 대해서 알아보자

웹 페이지를 만들 때 가장 많이 사용하는 스타일 속성입니다. float 속성의 의미는 '뜨다'라는 뜻을 가지고 있습니다. 즉, 이미지를 띄워서 텍스트와 어떻게 배치할 것인가를 다루는 속성이라 생각하면 됩니다. float : inherit, left, right, none float 속성에 사용 가능한 키워드는 inherit, left, right, none 가 있습니다. inherit 부모 요소에서 상속 left 왼쪽에 박스를 생성하며, 페이지 내용은 박스 오른쪽에 위치 right 오른쪽에 박스를 생성하며, 페이지 내용은 박스 왼쪽에 위치 none 요소를 부유시키지 않는다. ※ left, right 를 통해 부유속성을 지정시 display는 무시됩니다. 이 때 none 은 제외됩니다. See the Pe..

IT Story/Css 2022.08.10

CSS Flex는 flex-direction 어떻게 사용할까?

플레서블 박스 (Flexible box)는 플렉스 박스(Flexbox)라고 불리는 친구입니다. CSS3에서 처음 소개된 레이아웃 명령어? 모델? 무튼 그렇습니다. 이 친구는 다른 크기의 화면에서도 Html 요소들이 자동으로 재정렬되는 유연함을 가진 친구입니다. See the Pen Untitled by Hokyun (@Grayruma) on CodePen. 또 FlexBox를 따라다니는 친구들이 있는데요. display / flex-direction / justify-content / align-items / flex-wrap / flex-flow / align-content 이 중에서 오늘은 flex-direction 을 알아보려고 합니다. flex-direction flex-direction 속성은 ..

IT Story/Css 2022.07.22