[CSS] span 태그에서 높이, 너비 조정

계산기 만들기 프로젝트를 하는중 span 태그안에서 높이와 너비를
지정하고 싶은데 잘 되지않아 방법을 찾아보았다.
공부한 내용을 한번 더 정리하고 싶어서 남겨놓는다.

📌 span 태그는 기본적으로 인라인(inline) 요소로 동작한다. 인라인 요소는 자신이 포함한 콘텐츠의 크기만큼만 공간을 차지하며, 높이와 너비를 직접 조정할 수 없다.

만약 span 태그의 높이와 너비를 조정하고 싶다면, span 태그를 블록(block) 또는 인라인-블록(inline-block) 요소로 변환해야 한다. 이렇게 하면 span 태그가 일반적인 블록 요소와 같은 방식으로 동작하여 높이와 너비를 조정할 수 있게 된다.

span {
        display: block; // 블록 요소로 변환 
        height: 100px;
        width: 200px;
        /* display: block은 span 요소를 블록 레벨 요소로 변환하며, 너비와 높이 설정이 가능하다. 
        하지만 다른 요소와 같은 줄에 표시되지 않고 항상 새로운 줄에서 시작한다. */
}

span {
  		display: inline-block; // 인라인-블록 요소로 변환
  		height: 100px;
  		width: 200px;
        /* display: inline-block은 span 요소를 인라인 블록 요소로 변환하며,
        너비와 높이 설정이 가능하다. 블록 레벨 요소와 같이 다른 요소와 같은 줄에 표시된다. */
}