Frontend/CSS

프론트엔드 CSS - padding, margin, box-sizing , 테두리, 레이아웃

쏠솔랄라 2023. 2. 11. 15:30

 

 

박스모델


: HTML 요소(태그)는 사각형의 모양을 하고 있다
구성요소에는
    테두리
    내용물
    안쪽여백과 바깥여백

패딩, 마진
    패딩: 안쪽 여백
    마진: 바깥 여백

    ex.
    padding(margin): 위오아왼 (시계방향)
                    : 위 오왼 아래
                    : 위아 오왼
                    : 모두
        ex. padding: 9px 3px 2px 5px;
    
   만약 한 방향만 padding 이나 margin을 주어야 한다면
           padding: 0 0 16px 0
            padding-bottom: 16px; // padding vs padding-bottom의 우선순위는 같음 ; 나중에 나온 것이 덮어씀

            top, bottom, right, left

 

 

박스사이징


태그(요소)의 크기를 어떤 것을 기준으로 계산할 것인가

box-sizing

    content-box(기본값)
    내용물 기준으로 크기 지정
    (패딩, 테두리가 크기에 포함x)

 

order-box
     테두리 기준으로 크기 지정
     (패딩, 테두리가 크기에 포함o)

 

 

테두리


border
        border-width 굵기
        border-style 타입
        border-color 색상

        border: 1px solid #000
                (굵기) (타입) (색상)
        
        종류
            none* : nothing ; input, button, textarea 속성 ; 기본값이 있으므로 제거하기 위해 사용
            dotted : 둥근점선
            dashed : 사각점선
            solid* : 직선, 실선
            double : 이중선

border-radius
        요소 테두리의 꼭짓점을 둥글게

        top-left x
        top-left y

border-radius

: top-left-x top-right-x bot-right-x bot-left-x / top-left-y top-right-y bot-right-y bot-left-y (시계방향)
                        8px 66px 3px 6px / 8px 2px 3px 5px

                    *   16px;
                        ; 네 꼭짓점 xy를 모두 16px로 사용하겠다
                    **   16px 0 0 16px ; 가장 많이 사용
                        ; 네 꼭짓점
                    *   50%
                        ; 완전한 원으로


테이블 테두리
        border-collapse : separate
                        : collapse

            표 테두리가 겹치는 부분이 분리될지 상쇄될지를 정하는 속성

 

 

 

 

 

Exercise 1


<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        border: 1px solid #333;
        text-align: justify;
      }

      #padding-1 {
        padding: 0 16px;
      }

      #padding-2 {
        padding: 24px;
      }

      #padding-3 {
        padding: 0 0 16px 0;
        padding-top: 16px;
      }

      #margin-1 {
        margin: 50px 0;
      }

      #margin-2 {
        margin: 32px;
      }

      /*
      세로 겹침 현상
      margin이 세로로 겹쳐졌을 때
      가장 큰 마진이 적용되는 현상      
      */
    </style>
  </head>

 

 

 

Exercise 2

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border</title>
    <style>
      div {
        width: 300px;
        height: 300px;
        background: #000;
        margin: 16px 0;
      }

      #border {
        border: 1px solid #ff0;
        border: 10px dashed #f00;
        border: 10px dotted #f0f;
        border: 10px double #f00;
        border: none;
        border-bottom: none;
        /* 방향 설정 가능*/
        border-collapse: collapse;
        /* 겹쳤을 떄 상쇄 여부 */
      }

      input {
        border: none;
        border: 1px solid #999; /* 박스사이징의 보더값은 기본값이 아니다*/
      }

      #radius {
        border-radius: 14px 5px 30px 20px / 12px 5px 45px 11px;
        border-radius: 45%; /* 원! 전체가 50%이기 때문에 50%이상은 안 깎여요*/
        border-radius: 160px / 80px;
        border-radius: 0 0 0 32px;
      }

      table,
      th,
      td {
        border: ipx solid #000;
      }
      /* table의 border 속성을 주게 되면 th, td에도 테두리 생성*/
    </style>
  </head>
  <body>
    <div id="border"></div>
    <div id="radius"></div>
    <table border="1" style="border-collapse: collapse">
      <thead>
        <tr>
          <td>1</td>
          <td>안녕하세요</td>
          <td>2</td>
        </tr>
        <tr></tr>
      </thead>
      <tbody>
        <tr>
          <td>3</td>
          <td>ㄴㅇㅁㄹㄴㅇㄹ</td>
          <td>김메론</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
 
 
 
 

'Frontend > CSS' 카테고리의 다른 글

프론트엔드 CSS 요소의 레이아웃[위치, 정렬] - display, position, flexible layout  (0) 2023.02.17
프론트엔드 CSS 속성 - 글꼴, 크기단위, 배경  (0) 2023.02.11
프론트엔드 Text관련 CSS 속성 - color, text-align, line-height, text-indent, text-decoration, text-shadow  (0) 2023.02.05
프론트엔드 웹 CSS 적용법(스타일링 기법), 선택자  (0) 2023.02.05

'Frontend/CSS'의 다른글

  • 현재글프론트엔드 CSS - padding, margin, box-sizing , 테두리, 레이아웃

관련글

티스토리툴바