#4. 버튼(class)에 효과 주기 - 기본 스타일링(테두리,텍스트)

1. 기본스타일링_2

• border: 테두리 스타일
  • 두께, 스타일, 색상: border: 1px solid black;
  • 스타일 종류
    • none
      • 테두리가 없음
    • hidden
      • none과 유사하지만, 테이블 요소의 테두리를 숨길 때 사용
    • dotted
      • 점선으로 된 테두리
    • dashed
      • 대쉬(긴 점)로 된 테두리
    • solid
      • 실선 테두리
    • double
      • 두개의 실선으로 된 테두리
    • groove
      • 테두리가 홈이 파진 것처럼 보임.
      • 테두리 색상은 음영 처리
    • ridge
      • 테두리가 솟아오른 것처럼 보임
      • groove와 반대로 테두리 색상은 양각 처리.
    • inset
      • 테두리가 요소 안쪽으로 들어간 것처럼 보임
      • 입체적
    • outset
      • 테두리가 요소 밖으로 돌출된 것처럼 보임
      • 입체적
  • 예시: border: 2px dashed red;
• border-radius: 테두리의 모서리 곡선 정도
  • 픽셀 단위: border-radius: 10px
  • 퍼센트: border-radius: 50%;
• padding: 내부 여백
  • 모든 면 동일: padding: 10px;
  • 상하 좌우 다르게: padding: 10px 20px; (상하 10px, 좌우 20px)
  • 각 면 개별 설정: padding: 10px 15px 20px 25px; (상, 우, 하, 좌)
• margin: 외부 여백
  • 모든 면 동일: margin: 10px
  • 상하 좌우 다르게: margin: 10px 20px; (상하 10px, 좌우 20px
  • 각 면 개별 설정: margin: 10px 15px 20px 25px; (상, 우, 하, 좌)
• font-size: 글자 크기
  • 픽셀: font-size: 16px;
  • em 단위: font-size: 1em;
  • rem 단위: font-size: 1rem;
  • 퍼센트: font-size: 100%;
• font-weight: 글자 두께
  • 숫자 값:
    • font-weight: 400; (일반)
    • font-weight: 700; (굵게)
  • 이름 값
    • font-weight: normal;
    • font-weight: bold;
• text-align: 텍스트 정렬
  • left, right, center, justify

 

 

   <style>
        /* border 예제 */
        .border-none {
            border: 2px none black;
        }
        .border-dotted {
            border: 2px dotted black;
        }
        .border-dashed {
            border: 2px dashed red;
        }
        .border-solid {
            border: 2px solid blue;
        }
        .border-double {
            border: 2px double green;
        }
        .border-groove {
            border: 2px groove grey;
        }
        .border-ridge {
            border: 2px ridge grey;
        }
        .border-inset {
            border: 2px inset grey;
        }
        .border-outset {
            border: 2px outset grey;
        }

        /* border-radius 예제 */
        .border-radius-px {
            border: 2px solid black;
            border-radius: 10px;
        }
        .border-radius-percent {
            border: 2px solid black;
            border-radius: 50%;
        }

        /* padding 예제 */
        .padding-all {
            border: 1px solid black;
            padding: 10px;
        }
        .padding-vertical-horizontal {
            border: 1px solid black;
            padding: 10px 20px;
        }
        .padding-individual {
            border: 1px solid black;
            padding: 10px 15px 20px 25px;
        }

        /* margin 예제 */
        .margin-all {
            border: 1px solid black;
            margin: 10px;
        }
        .margin-vertical-horizontal {
            border: 1px solid black;
            margin: 10px 20px;
        }
        .margin-individual {
            border: 1px solid black;
            margin: 10px 15px 20px 25px;
        }

        /* font-size 예제 */
        .font-size-px {
            font-size: 16px;
        }
        .font-size-em {
            font-size: 1em;
        }
        .font-size-rem {
            font-size: 1rem;
        }
        .font-size-percent {
            font-size: 100%;
        }

        /* font-weight 예제 */
        .font-weight-normal {
            font-weight: 400;
        }
        .font-weight-bold {
            font-weight: 700;
        }

        /* text-align 예제 */
        .text-align-left {
            text-align: left;
        }
        .text-align-center {
            text-align: center;
        }
        .text-align-right {
            text-align: right;
        }
        .text-align-justify {
            text-align: justify;
        }