본문 바로가기
스터디일지/CSS

[CSS] 기본 익히기 PART 4

by 똥쟁이핑크 2024. 3. 13.

Table

  • table 태그에 border 속성을 활용해서 테두리를 그릴 수 있다.

https://techhans.tistory.com/80

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Table</title>
    <style>
      #movies {
        border-collapse: collapse;
        width: 100%;
      }
      #movies td,
      #movies th {
        border: 1px solid #898989;
        padding: 8px;
      }

      #movies th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: green;
        color: white;
      }
      #movies tr:nth-child(odd) {
        background-color: rgb(201, 200, 200);
      }

      #movies tr:hover {
        background-color: rgb(201, 200, 200);
      }
    </style>
  </head>
  <body>
    <table id="movies">
      <tr>
        <th>영화</th>
        <th>상영시간</th>
        <th>개봉</th>
      </tr>
      <tr>
        <td>블랙핑크 더 무비</td>
        <td>100분</td>
        <td>2021.08.04 개봉</td>
      </tr>
      <tr>
        <td>정글 크루즈</td>
        <td>127분</td>
        <td>2021.07.28 개봉</td>
      </tr>
      <tr>
        <td>보스 베이비2</td>
        <td>107분</td>
        <td>2021.07.28 개봉</td>
      </tr>
      <tr>
        <td>더 수어사이드 스쿼드</td>
        <td>132분</td>
        <td>2021.08.04 개봉</td>
      </tr>
      <tr>
        <td>블랙 위도우</td>
        <td>134분</td>
        <td>2021.07.07 개봉</td>
      </tr>
      <tr>
        <td>방법-재차의</td>
        <td>109분</td>
        <td>2021.07.07 개봉</td>
      </tr>
      <tr>
        <td>모가디슈</td>
        <td>121분</td>
        <td>2021.07.28 개봉</td>
      </tr>
    </table>
  </body>
</html>

 

 

 

 

 

Box Model

https://www.csssolid.com/images/box-model/css-box-model.png

 

  • 모든 HTML 요소는 웹 페이지에서 일정 공간을 차지하는데 이러한 공간을 CSS에서는 Box Model 이라고 정의한다.
  • Box Model 은 Content, Padding, Border, Margin 으로 구성되어 있다.
    • Content - 텍스트나 이미지가 들어가는 실직적인 내용
    • Padding - 안쪽 여백
    • Border - Content 를 감싸는 테두리
    • Margin - 바깥 여백

 

CSS 속성

Content

 

content - CSS: Cascading Style Sheets | MDN

The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. For elements, the content property specifies whether the element renders normally (normal or none) or is replac

developer.mozilla.org

 div.content {
    background-color: rgb(211, 203, 203);
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 10px solid green;
    margin: 40px;
  }
  span {
    border: 1px solid red;
    width: 200px;
    height: 200px;
    display: inline-block;
  }

 

 

 

Padding

 

padding - CSS: Cascading Style Sheets | MDN

The padding CSS shorthand property sets the padding area on all four sides of an element at once.

developer.mozilla.org

 

 

Border

 

border - CSS: Cascading Style Sheets | MDN

The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color.

developer.mozilla.org

 

 

Margin

 

margin - CSS: Cascading Style Sheets | MDN

The margin CSS shorthand property sets the margin area on all four sides of an element.

developer.mozilla.org

 

 

Box-sizing

https://res.cloudinary.com/practicaldev/image/fetch/s--DHKBIxoD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmi6ase1gdezqbtnlb5j.jpg

 

  • HTML요소의 너비와 높이를 계산하는 방법을 지정한다.
  • content-box
    • 기본 CSS 박스 크기 결정법이다.
    • 요소 크기를  100px으로 설정을 하면 콘텐츠 영역 100px 너비 + 테투리 영역 + 안쪽 여백 까지 더해져 보여진다.
  .content-box {
    width: 100px;
    height: 100px;
    border: 10px solid blue;
    padding: 20px;
    margin: 10px;
	box-sizing: content-box;
}

 

  •  border-box
    • 테두리와 안쪽 여백도 요소의 크기(width, height)로 고려된다.
    • 너비를 100px, 안쪽 여백, 테두리까지 설정하면 콘텐츠 영역이 줄어들고 콘텐츠 영역 + 테두리 영역 + 안쪽 여백 = 100px로 유지 된다.
.border-box {
    width: 100px;
    height: 100px;
    border: 10px solid red;
    padding: 20px;
    margin: 10px;
    box-sizing: border-box;
}

 

 

원본코드
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border</title>
    <style>
      .border {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        border-top: 10px dotted red;
        border-bottom: 5px dashed blue;
        border-left: 1px solid yellow;
        border-right: 3px solid cyan;
      }
      .border-radius {
        margin: 20px;
        width: 100px;
        height: 100px;
        border: 1px solid black;
        border-radius: 50%;
      }

      .content-box {
        width: 100px;
        height: 100px;
        border: 10px solid blue;
        padding: 20px;
        margin: 10px;
        box-sizing: content-box;
      }

      .border-box {
        width: 100px;
        height: 100px;
        border: 10px solid red;
        padding: 20px;
        margin: 10px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="border"></div>
    <div class="border-radius"></div>
    <div class="content-box"></div>
    <div class="border-box"></div>
  </body>
</html>

 

 

저작자표시 비영리 변경금지

'스터디일지 > CSS' 카테고리의 다른 글

[CSS] 기본 익히기 PART 6  (0) 2024.03.14
[CSS] 기본 익히기 PART 5  (1) 2024.03.14
[CSS] 기본 익히기 PART 3  (0) 2024.03.13
[CSS] 기본 익히기 PART 2  (0) 2024.03.13
[CSS] 기본 익히기 PART 1  (0) 2024.03.13

관련글

티스토리툴바