개발자를 꿈꾸는 여정

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

레이아웃 구성시 수평구조 및 블록 개념은 FLEX 를 써서 보다 유용하게 쓸 수 있었지만, 레이아웃 구성시, 단위별 그룹 및 전체 레이아웃 구성, 전체적인 틀 구성은 Grid 기법이 또한 더 유용할 때가 있다. 선언 [ dispaly : grid; ] grid-template 행 : grid-template-row 표현 예) grid-template-rows: 150px 150px; grid-template-rows: 1fr 1fr; >> 1/n : 비율분배 grid-template-rows: 1fr auto; >> auti : 자동분배 grid-template-rows: repeat(2, 150px); 열 : grid-template-colum 표현 예) grid-templat..