JudithHopps JudithHopps

요소의 크기 inline이 아닌 요소는 width와 height로 크기를 조절할 수 있습니다. 단위로는 부모의 길이에 상대적인 %를 사용할 수도 있고 뷰포트(viewport) 너비와 높이의 1/100 단위인 vw와 vh, 이들 중 큰 것과 작은 것의 1/100 단위인 vmax와 vmin도 유용하게 사용됩니다. 텍스트가 한 줄일 경우 height과 line-height을 똑같이 맞춰주면 세로 방향에서 가운데로 정렬한 것과 같은 모습이 됩니다. calc(100% - 50px)과 같은 형식으로 연산자를 사용하여 필요에 맞는 길이로 조절할 수도 있습니다. 예시) width를 꽉채우려면 100vw, height를 꽉 채우려면 100vh를 넣으면 된다. 단, html(최상의 부모요소)에 padding이나 margi..

display :block, inline 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다. border-radius 테두리 경계의 꼭짓점을 둥글게 만듭니다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다. margin 요소의 네 방향 바깥 여백 영역을 설정합니다. margin-top, margin-right, margin-bottom, margin-left의 단축 속성입니다. padding 요소의 네 방향 안쪽 여백 영역을 설정합니다. padding-top, padding-right, padding-bottom, padding-left의 단축 속성입니다. 출처 : h..