반응형 css레이아웃2 CSS 레이아웃의 활용 flex flex 이란? flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않아 flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있게 되었다. flex의 기본 flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야 한다. 또한 flex-direction을 이용해서 정렬 방향을 바꿀 수 있다. 방향 설정을 row을 추가하지 않아도 기본은 row로 설정된다. display:flex 실습 flex의 basic, grow, shrink 아이템은 웹 컨테이너의 창 크기에 따라서 작아지기도 하고 커지기도 한다. 이때 작아지고, 커지는 비율을 지정하는 방법이 바로 grow과 shrink이다. - basic : .. 2020. 10. 21. CSS 레이아웃의 기본 inline과 block inline : 블록라인이 화면 일부를 차지하는 태그이다. block : 블록라인이 화면 전체를 사용하는 태그이다. 1. inline이 적용된 "인라인" 텍스트의 border는 일부분 공간으로 바뀌고, block은 "이 텍스트는 블럭레벨 입니다."의 텍스트 문장이 있는 라인 전체 공간을 사용한다. 2. display 속성 특성을 인하여 텍스트 글의 줄바꿈이 자동으로 되는 것을 볼 수 있다. 1. display와 inline, block을 쓰지 않으니 줄바꿈은 되지 않으며 border와 soild의 효과만 적용된 것을 볼 수 있다. 박스 모델 box model 각 태그들이 웹 페이지에 표현될 때 사각형의 형태(box)로 그 태그의 부피감을 결정한다. - margin : 태그와 태그.. 2020. 10. 20. 이전 1 다음 반응형
