webplacidcy

웹 페이지에서 이미지를 띄우는 방법과 텍스트를 어떻게 같이 배치할 것인지를 설정한다 1. inherit : 부모 요소에서 상속 2. left : 왼쪽에 블록 박스 생성, 페이지 텍스트는 오른쪽에 위치한다 3. right : 오른쪽에 블록 박스 생성, 페이지 텍스트는 왼쪽에 위치한다 4. none : 요소를 설정하지 않는다 - left와 right 값 설정 시 display 속성은 무시된다, clear 속성이 있을때 페이지 흐름이 달라진다 This is the image file 결과

레이아웃 배치를 목적으로 만들어진 기능 컨테이너에 적용되는 속성과 아이템에 적용되는 속성이 있다 컨테이너에 적용되는 속성 display: flex 각 아이템(요소)들의 width값과 height값만큼 크기가 변경되고 가로 방향으로 정렬한다 { .container { display: flex; display: inline-flex; } } flex-direction 아이템들이 배치되는 축의 방향을 결정한다, 메인축(정렬된 아이템의 축 기준)의 방향을 가로, 세로로 할지 결정한다 { .container { flex-direction: row; // 아이템들의 방향이 행(가로)으로 정렬된다 flex-direction: column;// 방향을 열(세로)으로 정렬한다 flex-direction: row-reve..

Display display 속성은 요소를 어떻게 보여줄지를 결정한다 인라인 요소들을 블록 요소로 보이게 만들 수 있고 블록 요소를 인라인처럼 보이게 만들 수도 있다 1. display:inline 요소를 감쌀정도의 크기만을 보여준다, 줄바꿈이 되지 않고 width값과 height값을 지정할 수 없다 2. display:block display의 기본값, 기본적으로 width값이 자신의 컨테이너 크기의 100%가 되게 설정한다 3. display:none 박스가 생성되지 않고 공간을 차지하지 않는다 4. display:inline-block 인라인과 블록의 특성을 합쳐놓은 속성, 기본적으로 인라인의 속성을 지니고 있지만 크기를 바꿔줄 수 있다 HTML This is div1 This is div2 Thi..