#5. 버튼(class)에 효과 주기 - 버튼크기 및 레이아웃

2. 크기 및 레이아웃

• width: 너비
• height: 높이
• display: 디스플레이 방식 (inline, block, inline-block, flex, 등)
  • inline
    • 요소가 인라인으로 배치
    • 요소의 너비와 높이를 지정할 수 없음
    • 요소는 컨텐츠의 크기에 맞춰지며, 다른 인라인 요소와 나란히 배치
  • block
    • 요소가 블록 레벨로 배치
    • 요소는 항상 새로운 줄에서 시작
    • 요소의 너비와 높이를 지정
    • 너비는 기본적으로 부모 요소의 100%를 차지
  • inline-block
    • 요소가 인라인으로 배치되지만, 블록처럼 너비와 높이를 지정가능
    • 다른 인라인 요소와 나란히 배치
  • flex:
    • 요소가 플렉스 컨테이너가 되어, 자식 요소들이 플렉스 아이템으로 배치
    • 자식 요소들의 정렬, 크기 조절, 배치를 유연하게 조정가능
  • grid
    • 요소가 그리드 컨테이너가 되어, 자식 요소들이 그리드 아이템으로 배치
    • 행과 열을 이용해 자식 요소들을 배치가능
  • none
    • 요소가 페이지에서 완전히 사라짐
    • 문서 흐름에서 제거되며, 공간을 차지하지 않음
  • position: 위치 지정 방식
    • static
      • 기본 배치, 문서 흐름에 따라 배치.
    • relative
      • 문서 흐름에 따라 배치되지만, 자신의 원래 위치에서 상대적으로 이동 가능.
    • absolute
      • 문서 흐름에서 제거, 가장 가까운 위치 지정 조상을 기준으로 배치.
    • fixed
      • 문서 흐름에서 제거, 뷰포트를 기준으로 배치되어 스크롤해도 고정.
    • sticky
      • 상대와 고정 배치를 오가며 스크롤에 따라 동적으로 동작.
• top, right, bottom, left: 위치 지정
  • 픽셀, 퍼센트, em 등: top: 10px;, left: 50%;
• z-index: 쌓임 순서

 

   <style>
        /* width, height 예제 */
        .box {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            margin: 10px 0;
        }

        /* display 예제 */
        .inline-example {
            display: inline;
            background-color: lightblue;
        }
        .block-example {
            display: block;
            background-color: lightgreen;
        }
        .inline-block-example {
            display: inline-block;
            background-color: lightcoral;
        }
        .flex-example {
            display: flex;
            background-color: lightgoldenrodyellow;
        }
        .grid-example {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            background-color: lightpink;
        }
        .none-example {
            display: none;
        }

        /* position 예제 */
        .static-example {
            position: static;
            background-color: aliceblue;
        }
        .relative-example {
            position: relative;
            top: 10px;
            left: 10px;
            background-color: lavender;
        }
        .absolute-example {
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: lavenderblush;
        }
        .fixed-example {
            position: fixed;
            top: 10px;
            left: 10px;
            background-color: lightcyan;
        }
        .sticky-example {
            position: sticky;
            top: 0;
            background-color: lightsteelblue;
        }

        /* z-index 예제 */
        .z-index-example {
            position: relative;
            z-index: 10;
            background-color: lightgray;
        }
    </style>