개발자를 꿈꾸는 여정

구분 Inline ㅡ ㅡ Inline Block □ □ Block □ □ 텍스트를 주입 할 때 사용 되는 형태 높이 또한 폰트의 크기만큼 잡힙니다.(line-height로 설정이 가능 하긴 합니다.) width와 height를 명시 할 수 없다. margin은 위아래엔 적용 되지 않는다. (좌우만 됌) padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다. inline의 특징과 block의 특징을 모두 가진 요소입니다. >> 인라인 요소에 display : inline-block; 선언 줄바꿈이 이루어지지 않는다. block처럼 width와 height를 지정 할 수 있다. 만약 width와 height를 지정하지 않을 경우, inli..

수평 구조를 만드는 속성중 , float, inline-block 등으로도 쓰이지만, 보다 더쉽고 편리한, 그리고 반응형 페이지의 자동적으로 유리한 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. [ 1 - 콘테이너 ] 1. 시작 : 콘테이터의 디스플레이 플렉스 선언 display : flex; > Block 요소와 같은 성향(수직 쌓임)을 가지며, // ( display : inline-flex; ) > Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가집니다. 2. Item 정렬방향 배치 flex-direction row (default) : 요소들을 텍스트의 방향과 동일하게 정렬한다. row-reverse : 요소들을 텍스트의..