개발자 노트 - 강경훈 story

HTML CSS/CSS · 2024. 4. 9. fullscreen 넓게보기

CSS 레이아웃

CSS 레이아웃

1. CSS 포지셔닝과 주요 속성들

box-sizing 속성

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .box1{
         width: 300px;
         height: 150px;
         border: 2px solid red;
         margin: 10px;
         padding: 30px;
         box-sizing: content-box;
      }
      .box2{
         width: 300px;
         height: 150px;
         border: 2px solid red;
         margin: 10px;
         padding: 30px;
         /* content-box 보다 작게 표시됨 */
         box-sizing: border-box;
      }
   </style>
</head>
<body>
   <div class="box1">box-sizing = "content-box"</div>
   <div class="box2">box-sizing = "border-box"</div>
</body>

float 속성

요소를 왼쪽이나 오른쪽에 떠 있게 만듦

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
   #container{
      width: 800px;
      margin: 20px auto;
      padding: 20px;
   }
   p{
      line-height: 30px;
   }
   .lef-img{
      /* 이미지가 왼쪽으로 배치되면서 글자들이 오른쪽에 배치됨 */
      float: left;
      /* 이미지 오른쪽 여백 */
      margin-right: 25px;
   }
   </style>
</head>
<body>
   <div id="container">
      <img src="images/cover2.jpg" class="lef-img">
      <h1>바쁜 3,4학년을 위한 빠른 분수</h1>
      <h2>3,4학년이 꼭 알아야 할 분수를 한 권에 모았어요!</h2>
      <p>
         한국 교육과정평가원이 최근 발표한 보고서에 따르면 '수포자'는
         초등 3학년때 분수를 배우면서 시작된다고 합니다.
         한국 교육과정평가원이 최근 발표한 보고서에 따르면 '수포자'는
         초등 3학년때 분수를 배우면서 시작된다고 합니다.
      </p>
   </div>
</body>

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .box1{
         background: #ffd800;
         padding: 20px;
         margin-right: 10px;
         float: left;
      }
      .box2{
         background: #0094ff;
         padding: 20px;
         margin-right: 10px;
         float: left;
      }
      .box3{
         background: #00ff21;
         padding: 20px;
         margin-right: 10px;
         float: left;
      }
      .box4{
         background: #ffffff;
         padding: 20px;
         margin-right: 10px;
         border: 1px solid black;
         float: right;
      }
   </style>
</head>
<body>
   <div class="box1">박스1</div>
   <div class="box2">박스2</div>
   <div class="box3">박스3</div>
   <div class="box4">박스4</div>
</body>

clear 속성

float 속성을 무효화 시키는 속성

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div{
         padding: 20px;
         margin: 10px;
      }
      .box1{
         background: #ffd800;
         float: left;
      }
      .box2{
         background: #0094ff;
         float: left;
      }
      .box3{
         background: #00ff21;
         float: left;
      }
      .box4{
         background: #ffffff;
         border: 1px solid black;
         /* 주석 처리하면 박스1,2,3번이 왼쪽 위에 둥둥 떠서 배치됨 */
         /* float: right; */
         /* float의 영향을 받지 않음 */
         clear: both;
      }
   </style>
</head>
<body>
   <div class="box1">박스1</div>
   <div class="box2">박스2</div>
   <div class="box3">박스3</div>
   <div class="box4">박스4</div>
</body>

position 속성

웹 문서 안에 요소들을 배치하기 위한 속성

position : static
- 문서의 흐름대로 배치한다
- left 속성이나 top 속성을 지정할 수 없다
position : relative
- 자연스럽게 배치
- 고정되어 있지 않고 다른 요소에 의해 바뀔 수 있다.
- 상대적인 위치를 사용하기 때문에 다른 요소와 조화를 이룬다.
- left나 top 속성을 이용해 요소의 위치를 옮길 수도 있다.
position : absolute
- 문서의 흐름과는 상관없이 원하는 위치에 요소를 배치
- left, top, right, bottom 속성을 사용해 네 모서리에서 얼마나 떨어져 있는지 지정
position : fixed
- 문서의 흐름과는 상관없이 원하는 위치에 요소를 배치
- 부모 요소가 아닌 브라우저 창 기준 → 브라우저 창 왼쪽 위 꼭지점(0,0) 기준으로 좌표 계산
- 브라우저 창 화면을 스크롤하더라도 계속 같은 위치에 고정

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      #wrap{
         border: 1px solid #ccc;
         width: 300px;
         height: 300px;
         /* 자연스럽게 연결해 배치 */
         /* 아이디 wrap 테두리 안에 배치됨 */
         position: relative;
      }
      .box{
         width: 50px;
         height: 50px;
         background: #0094ff;
         /* 원하는 위치를 지정해서 배치 */
         position: absolute;
      }
      #crd1{
         top : 0;
         left : 0;
      }
      #crd2{
         top : 0;
         right : 0;
      }
      #crd3{
         bottom : 0;
         left : 0;
      }
      #crd4{
         bottom : 0;
         right : 0;
      }
      #crd5{
         top : 100px;
         left : 100px;
      }
   </style>
</head>
<body>
   <div id="wrap">
      <div class="box" id="crd1"></div>
      <div class="box" id="crd2"></div>
      <div class="box" id="crd3"></div>
      <div class="box" id="crd4"></div>
      <div class="box" id="crd5"></div>
   </div>
</body>

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      #fx{
         top: 5px;
         right: 5px;
         width: 50px;
         height: 50px;
         background: #ff6a00;
         /* 지정한 위치에 고정해서 배치 */
         /* 스크롤 움직여도 고정해서 표시됨 */
         position: fixed;
      }
      #content{
         width: 400px;
      }
      p{
         line-height: 30px;
      }
   </style>
</head>
<body>
   <div id="fx"></div>
   <div id="content">
      <p>
         fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼
         문서 흐름과는 상관없이 좌표로 위치를 결정하지만,
         기준이 되는 요소가 부모 요소가 아니라 브라우저 창이
         기준이 됩니다.
         fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼
         문서 흐름과는 상관없이 좌표로 위치를 결정하지만,
         기준이 되는 요소가 부모 요소가 아니라 브라우저 창이
         기준이 됩니다.
         fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼
         문서 흐름과는 상관없이 좌표로 위치를 결정하지만,
         기준이 되는 요소가 부모 요소가 아니라 브라우저 창이
         기준이 됩니다.
         fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼
         문서 흐름과는 상관없이 좌표로 위치를 결정하지만,
         기준이 되는 요소가 부모 요소가 아니라 브라우저 창이
         기준이 됩니다.
         fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼
         문서 흐름과는 상관없이 좌표로 위치를 결정하지만,
         기준이 되는 요소가 부모 요소가 아니라 브라우저 창이
         기준이 됩니다.
      </p>
      <p>
         fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼
         문서 흐름과는 상관없이 좌표로 위치를 결정하지만,
         기준이 되는 요소가 부모 요소가 아니라 브라우저 창이
         기준이 됩니다.
         fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼
         문서 흐름과는 상관없이 좌표로 위치를 결정하지만,
         기준이 되는 요소가 부모 요소가 아니라 브라우저 창이
         기준이 됩니다.
         fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼
         문서 흐름과는 상관없이 좌표로 위치를 결정하지만,
         기준이 되는 요소가 부모 요소가 아니라 브라우저 창이
         기준이 됩니다.
         fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼
         문서 흐름과는 상관없이 좌표로 위치를 결정하지만,
         기준이 되는 요소가 부모 요소가 아니라 브라우저 창이
         기준이 됩니다.
         fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼
         문서 흐름과는 상관없이 좌표로 위치를 결정하지만,
         기준이 되는 요소가 부모 요소가 아니라 브라우저 창이
         기준이 됩니다.
      </p>
   </div>
</body>

visibility 속성

특정 요소를 화면에 보이거나 보이지 않게 설정하는 속성

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      img{
         margin: 10px;
         padding: 5px;
         border: 1px solid black;
      }
      .invisible{
         /* visible : 기본값 */
         /* visibility: visible; */
         /* hidden은 숨겨지면서 공간은 남아 있음 */
         visibility: hidden;
      }
   </style>
</head>
<body>
   <img src="images/pic1.jpg">
   <img src="images/pic2.jpg" class="invisible">
   <img src="images/pic3.jpg">
</body>

z-index 속성

요소 쌓는 순서 정하기
z-index 값이 크면 값이 작은 요소보다 위에 쌓인다.
z-index 값을 명시하지 않으면 1부터 시작해서 1씩 커진다

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .box{
         width: 100px;
         height: 100px;
         border: 1px solid black;
         font-size: 26px;
         position: absolute;
      }
      /* 쌓는 순서 1->2->3 */
      /* 쌓는 순서 3->1->2 */
      #b1{
         left : 50px;
         top : 50px;
         background: #ff0000;
         z-index: 2;
      }
      #b2{
         left : 110px;
         top : 70px;
         background: #ffd800;
         z-index: 3;
      }
      #b3{
         left : 70px;
         top : 110px;
         background: #0094ff;
         z-index: 1;
      }
   </style>
</head>
<body>
   <div id="wrapper">
      <div id="b1" class="box">1</div>
      <div id="b2" class="box">2</div>
      <div id="b3" class="box">3</div>
   </div>
</body>

2. 다단으로 편집하기

column-width

단의 너비를 고정해 놓고 화면 분할
화면이 커지면 단의 개수가 많아진다

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .multi{
         /* column-width: 해당 픽셀은 고정되고, 브라우저 크기에 따라서 단이 변함 */
         column-width: 120px;
      }
   </style>
</head>
<body>
   <div>
      <h2>건강에 좋은 식품 - Super Food</h2>
   </div>
   <div class="multi">
      <p>
         <b>코코넛 오일</b>
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
      </p>
      <p>
         <b>블루베리</b>
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
      </p>
      <p>
         <b>아몬드</b>
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
      </p>
   </div>
</body>

column-count

단의 개수를 먼저 정해 놓고 화면 분할
화면이 커질수록 단의 너비가 넓어진다

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .multi{
         /* column-width: 해당 픽셀은 고정되고, 브라우저 크기에 따라서 단이 변함 */
         /* column-width: 120px; */
         /* column-count: 브라우저 크기를 변경해도 단이 고정됨 */
         column-count: 3;
      }
   </style>
</head>
<body>
   <div>
      <h2>건강에 좋은 식품 - Super Food</h2>
   </div>
   <div class="multi">
      <p>
         <b>코코넛 오일</b>
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
      </p>
      <p>
         <b>블루베리</b>
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
      </p>
      <p>
         <b>아몬드</b>
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
      </p>
   </div>
</body>

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .multi{
         /* column-width: 해당 픽셀은 고정되고, 브라우저 크기에 따라서 단이 변함 */
         /* column-width: 120px; */
         /* column-count: 브라우저 크기를 변경해도 단이 고정됨 */
         column-count: 3;
         /* column-rule: 단의 경계선 스타일 */
         column-rule: 2px dotted #000;
         /* column-gap: 단 사이의 여백 */
         column-gap: 50px;
      }
   </style>
</head>
<body>
   <div>
      <h2>건강에 좋은 식품 - Super Food</h2>
   </div>
   <div class="multi">
      <p>
         <b>코코넛 오일</b>
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
      </p>
      <p>
         <b>블루베리</b>
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
      </p>
      <p>
         <b>아몬드</b>
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
         남미 파나마에서는
         "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
         정도로 그 효능이 뛰어나다.
      </p>
   </div>
</body>

break-before, break-after

특정 요소의 앞이나 뒤에 다단 위치 지정 (주로 인쇄 목적)
- break-before: column
- break-before: avoid-column
- break-after: column
- break-after: avoid-column

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .multi{
         /* column-width: 해당 픽셀은 고정되고, 브라우저 크기에 따라서 단이 변함 */
         /* column-width: 120px; */
         /* column-count: 브라우저 크기를 변경해도 단이 고정됨 */
         /* column-count: 3; */
         column-count: 4;
         /* column-rule: 단의 경계선 스타일 */
         column-rule: 2px dotted #000;
         /* column-gap: 단 사이의 여백 */
         column-gap: 50px;
         margin: 20px auto;
         padding: 20px;
      }
      .multi h3{
         /* 이 기준 다음으로 단이 넘어감 */
         /* break-after: column; */
         /* 이 기준 이전으로 단이 넘어감 */
         break-before: column;
      }
      section{
         width: 600px;
         margin: 20px auto;
         padding: 20px;
         border: 1px solid #ccc;
         border-radius: 10px;
      }
   </style>
</head>
<body>
   <section>
      <div>
         <h2>건강에 좋은 식품 - Super Food</h2>
      </div>
      <div class="multi">
         <p>
            <h3>코코넛 오일</h3>
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
         </p>
         <p>
            <h3>블루베리</h3>
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
         </p>
         <p>
            <h3>아몬드</h3>
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
         </p>
      </div>
   </section>
</body>

column-span

여러 단을 하나로 합치기
column-span : all;

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .multi{
         /* column-width: 해당 픽셀은 고정되고, 브라우저 크기에 따라서 단이 변함 */
         /* column-width: 120px; */
         /* column-count: 브라우저 크기를 변경해도 단이 고정됨 */
         /* column-count: 3; */
         column-count: 4;
         /* column-rule: 단의 경계선 스타일 */
         column-rule: 2px dotted #000;
         /* column-gap: 단 사이의 여백 */
         column-gap: 50px;
         margin: 20px auto;
         padding: 20px;
      }
      .multi h3{
         /* 이 기준 다음으로 단이 넘어감 */
         /* break-after: column; */
         /* 이 기준 이전으로 단이 넘어감 */
         break-before: column;
      }
      section{
         width: 600px;
         margin: 20px auto;
         padding: 20px;
         border: 1px solid #ccc;
         border-radius: 10px;
      }
      .no-col{
         background: #f0f0f0;
         margin: 10px 30px;
         padding: 20px;
         border-radius: 5px;
         /* all : 전체단을 하나로 합침 */
         column-span: all;
      }
   </style>
</head>
<body>
   <section>
      <div>
         <h2>건강에 좋은 식품 - Super Food</h2>
      </div>
      <div class="multi">
         <p>
            <h3>코코넛 오일</h3>
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
         </p>
         <p>
            <h3>블루베리</h3>
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
         </p>
         <p>
            <h3>아몬드</h3>
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
            남미 파나마에서는
            "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
            정도로 그 효능이 뛰어나다.
         </p>
         <div class="no-col">
            <p>
               <h3>케일</h3>
               남미 파나마에서는
               "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
               정도로 그 효능이 뛰어나다.
               남미 파나마에서는
               "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
               정도로 그 효능이 뛰어나다.
               남미 파나마에서는
               "코코넛 오일 한컵이면 모든 병이 낫는다"라고 이야기할
               정도로 그 효능이 뛰어나다.
            </p>
         </div>
      </div>
   </section>
</body>

3. 표 스타일

caption-side

캡션(설명글)은 기본으로 표 위쪽에 표시됨
이 속성을 이용해 아래쪽에 표시 가능
caption-side : top | bottom

border

표의 바깥 테두리와 셀 테두리 모두 지정해야 함

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .table1{
         border: 1px solid black;
      }
      .table1 td{
         border: 1px solid black;
         padding: 10px;
      }
   </style>
</head>
<body>
   <table class="table1">
      <caption>프로축구 경기 일정</caption>
      <tr>
         <td>울산</td>
         <td>울산 vs 인천</td>
      </tr>
      <tr>
         <td>부산</td>
         <td>부산 vs 대전</td>
      </tr>
      <tr>
         <td>서울</td>
         <td>서울 vs 강원</td>
      </tr>
   </table>
</body>

border-collapse

표 테두리와 셀 테두리를 합칠 것인지 설정
border-collapse : collapse | separate

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .table1{
         border: 1px solid black;
         /* separate : 분리된(기본값으로 변화 없음) */
         /* border-collapse: separate; */
         /* collapse : 표하고 셀 테두리를 합침 */
         border-collapse: collapse;
      }
      .table1 td{
         border: 1px solid black;
         padding: 10px;
      }
   </style>
</head>
<body>
   <table class="table1">
      <caption>프로축구 경기 일정</caption>
      <tr>
         <td>울산</td>
         <td>울산 vs 인천</td>
      </tr>
      <tr>
         <td>부산</td>
         <td>부산 vs 대전</td>
      </tr>
      <tr>
         <td>서울</td>
         <td>서울 vs 강원</td>
      </tr>
   </table>
</body>

border-spacing

border-collapse : separate를 사용해 셀들을 분리했을 경우, 인접한 셀 테두리 사이의 거리를 지정
값이 1개 : 수평 거리 & 수직 거리를 같게
값이 2개 : 첫번째 값은 수평 거리, 두번째 값은 수직 거리

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      table{
         margin-bottom: 50px;
      }
      .table1{
         border: 1px solid black;
         /* separate : 분리된(기본값으로 변화 없음) */
         border-collapse: separate;
         /* collapse : 표하고 셀 테두리를 합침 */
         /* border-collapse: collapse; */
         /* 좌우 20 상하 10 */
         border-spacing: 20px 10px;
      }
      .table2{
         border: 1px solid black;
         border-collapse: separate;
         /* 셀 여백으로 가로/세로 적용됨 */
         border-spacing: 30px 20px;
      }
      td{
         border: 1px solid black;
         padding: 10px;
      }
   </style>
</head>
<body>
   <table class="table1">
      <caption>프로축구 경기 일정</caption>
      <tr>
         <td>울산</td>
         <td>울산 vs 인천</td>
      </tr>
      <tr>
         <td>부산</td>
         <td>부산 vs 대전</td>
      </tr>
      <tr>
         <td>서울</td>
         <td>서울 vs 강원</td>
      </tr>
   </table>
   <table class="table2">
      <caption>프로축구 경기 일정</caption>
      <tr>
         <td>울산</td>
         <td>울산 vs 인천</td>
      </tr>
      <tr>
         <td>부산</td>
         <td>부산 vs 대전</td>
      </tr>
      <tr>
         <td>서울</td>
         <td>서울 vs 강원</td>
      </tr>
   </table>
</body>

empty-cell

border-collapse:separate를 사용해 셀들을 분리했을 경우, 내용이 없는 빈 셀들의 표시 여부를 지정
empty-cells : show | hide

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      table{
         margin-bottom: 50px;
      }
      .table1{
         border: 1px solid black;
         /* separate : 분리된(기본값으로 변화 없음) */
         border-collapse: separate;
         /* collapse : 표하고 셀 테두리를 합침 */
         /* border-collapse: collapse; */
         /* 좌우 20 상하 10 */
         border-spacing: 20px 10px;
         /* show : 기본값으로 변화 없음 */
         empty-cells: show;
      }
      .table2{
         border: 1px solid black;
         border-collapse: separate;
         /* 셀 여백으로 가로/세로 적용됨 */
         border-spacing: 30px 20px;
         /* hide : 빈 셀을 숨김 */
         empty-cells: hide;
      }
      td{
         border: 1px solid black;
         padding: 10px;
      }
   </style>
</head>
<body>
   <table class="table1">
      <caption>프로축구 경기 일정</caption>
      <tr>
         <td>울산</td>
         <td>울산 vs 인천</td>
         <td>TV 중계</td>
      </tr>
      <tr>
         <td>부산</td>
         <td>부산 vs 대전</td>
         <td></td>
      </tr>
      <tr>
         <td>서울</td>
         <td>서울 vs 강원</td>
         <td></td>
      </tr>
   </table>
   <table class="table2">
      <caption>프로축구 경기 일정</caption>
      <tr>
         <td>울산</td>
         <td>울산 vs 인천</td>
         <td>TV 중계</td>
      </tr>
      <tr>
         <td>부산</td>
         <td>부산 vs 대전</td>
         <td></td>
      </tr>
      <tr>
         <td>서울</td>
         <td>서울 vs 강원</td>
         <td></td>
      </tr>
   </table>
</body>

width, height

너비나 높이를 지정하지 않으면 셀 안의 내용이 표시될 만큼만 표시된다.
width 값을 지정할 경우 padding 속성을 이용해 여백을 넣어 주면 보기 좋게 꾸밀 수 있다.

table-layout

셀 안의 내용 양에 따라 셀 너비를 변하게 할지, 고정시킬지 결정
table-layout : fixed | auto

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      table, td{
         border: 5px solid #ccc;
      }
      .table1 td{
         width: 150px;
         padding: 5px;
      }
      .table1{
         border-collapse: collapse;
         /* 너비를 설정시 화면 확대해도 글자가 세로로 한줄로 표시 안됨 */
         width: 300px;
         /* 300px: 에 맞추어서 테두리 밖으로 글자가 튕겨 나감 */
         table-layout: fixed;
         /* 테두리 밖으로 글자가 튕겨 낙나 글자가 들어옴 */
         word-break: break-all;
      }
   </style>
</head>
<body>
   <h1>Table Layout</h1>
   <table class="table1">
      <tr>
         <td>
            한글은띄어쓰기없이길게붙여넣기
         </td>
         <td>
            long_description_without_space
         </td>
      </tr>
   </table>
</body>

text-align

셀 안에서의 수평 정렬 방법
text-align : left | right | center

vertical-align

셀 안에서의 수직 정렬 방법
vertical-align : top | bottom | middle

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      table, td{
         border: 1px solid #ccc;
      }
      td{
         height: 100px;
         padding: 20px;
      }
      .va1{
         /* 수직 정렬에서 위 */
         vertical-align: top;
      }
      .va2{
         /* 수직 정렬에서 아래 */
         vertical-align: bottom;
      }
      .va3{
         /* 수직 정렬에서 가운데 */
         vertical-align: middle;
      }
   </style>
</head>
<body>
   <table>
      <caption>vertical-alignment</caption>
      <tr>
         <td class="va1">alignment</td>
         <td class="va2">alignment</td>
         <td class="va3">alignment</td>
      </tr>
   </table>
</body>

목차로 돌아가기

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

CSS 실습문제 모음 (1)	2024.04.09
HTML5와 시맨틱 태그 (0)	2024.04.09
CSS 박스 모델 (0)	2024.04.09
색상과 배경을 위한 스타일 (0)	2024.04.09
텍스트 관련 스타일 (0)	2024.04.09

HTML CSS/CSS 관련 글

더 보기

티스토리툴바