15일차 - CSS (Box속성)

Yohan·2024년 3월 12일
CSSTIL
0

코딩기록

목록 보기
17/156
post-custom-banner

3장 - Box속성

px, %

  • px 단위는 픽셀이라는 뜻, 화면에 고정적인 길이를 의미하며 절대적인 수치를 의미
  • 1px은 디바이스마다 고정크기가 다를 수 있다.
  • %는 부모요소 대비 비율
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      div {
        border: 2px solid gray;
      }
      /* %는 항상 부모대비 ! */
      .root {
        width: 500px;
      }
      .parent {
        width: 50%;
        margin-left: 10%;
      }
      .child {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- .root>.parent>.child*3 -->
    <div class="root">
      ROOT
      <div class="parent">
        PARENT
        <div class="child">CHILD1</div>
        <div class="child">CHILD2</div>
      </div>
    </div>
  </body>
</html>

-> 위 코드에서 root의 자식은 parent이다. 여기서 root의 width가 500px이므로 parent의 width: 50%는 250px를 의미

em, rem

  • em 은 요소 자기 자신의 font-size에 영향
    -> 예를 들어 h1태그의 font-size를 10px로 지정하고 width를 5em으로 지정하면 가로 길이는 5 x 10px의 50px
  • rem 는 html태그에서 지정한 font-size에 영향
    -> html태그에는 기본값으로 16px이 정의되어 있다. 따라서 따로 font-size를 조절하지 않으면 2rem은 32px

vw, vh

  • vw, vh 는 뷰포트(디바이스 화면)를 기준으로 설정되는 길이 단위, 0~100사이의 값을 가짐
  • vw는 width를 지정할 때 사용,vh는 height를 지정할 때 사용
  • 뷰포트란 화면 전체 크기를 의미하며 만약 어떤 이미지의 높이값을 100vh로 지정하면 데스크탑 화면이든 태블릿, 모바일 화면과 관계없이 높이가 화면 전체를 꽉 채우게 됨
    -> 즉, 100vw, 100vh가 전체 화면의 기준이 됨!!
      .box {
        background: orange;
        width: 100vw;
        height: 70vh;
      }

vh, vw 와 %

  • vh, vw 는 열려있는 화면 전체의 상대적길이 이기 때문에 스크롤바를 포함한 길이를 반환
  • 반면에 % 는 창이 중심이 아닌, %를 쓰고 있는 요소의 부모 요소대비 비율에 맞게 반환

width, heigth

  • 자식에서 width를 지정하지 않으면 부모대비 100% (부모와 같음)

max, min

  • max-width, min-width, max-height, min-height
    -> 최대, 최소를 걸어둠으로써 그 이하 그 이상으로는 갈 수 없다.

margin

  • margin: 0 auto; /* 중앙 정렬을 위한 마진 설정 */
  • margin의 값을 %로 지정했을 때 부모요소의 width의 비율로 계산
    -> 부모 width: 600px일 때 margin: 5%이면 30px

    -> width가 80%이니 양쪽에 10% 여유마진
  • margin을 먹이고싶으면 여유마진이 필요함. 즉, 여유마진을 위해 자식에 width를 설정한다. (설정하지않으면 부모대비 100%를 가져와서 자식도 100%가 되기때문에 여유마진이 없음)

padding

  • box 사이즈 변함
    -> box-sizing: border-box; 을 같이 입력해줘서 box사이즈 유지!
    -> 어차피 쓸 것이기 때문에 전체설정에 걸어줌

border

  • box 사이즈 변함
    -> 마찬가지로 box-sizing 적용

box-sizing

display

overflow

  • 부모에게 overflow를 적용시키는 것 !! (자식 x)

opacity

연습문제1

  • 처음 했던 코드
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="
    https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css
    "
      rel="stylesheet"
    />
    <style>
      #container {
        width: 550px;
        height: 30vh;
        border: 2px solid #123456;
      }
      .main_first {
        background: #abcdef;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        height: 50px;
        padding-top: 20px;
        border-bottom: 2px solid #123456;
      }
      .main_second {
        height: 10vh;
      }
      .main_third {
        height: 10vh;
      }
      .main_big {
        font-size: 24px;
        font-weight: bold;
        padding:10px 0 5px 5px;
      }
      .smallone {
        padding-bottom: 5px;
        border-bottom: 2px solid #123456;
      }
      .main_small {
        padding:0 0 5px 5px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="main_first">속 담 풀 이</div>
      <div class="main_second">
        <div class="main_big">말 한마디에 천냥 빚진다.</div>
        <div class="main_small smallone">
          생각해보지 않고 나오는 대로 말하다가 실수하면 상대의 마음에 아픔을
          남기게 된다.
        </div>
      </div>
      <div class="main_third">
        <div class="main_big">웃는 얼굴에 침 못 뱉는다.</div>
        <div class="main_small">
          호의적인 의사소통 방법은 자기 말만 하는 것보다 좋은 결과로 이어진다.
        </div>
      </div>
    </div>
  </body>
</html>

-> div를 남발하여 제대로 구분이 되지 않았다. 또한 height를 주지 않아도 되었지만 주어서 풀었다.

  • 수정코드
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- reset css -->
    <link
      href="
    https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css
    "
      rel="stylesheet"
    />
    <!-- custom css -->
    <link rel="stylesheet" href="practice(1).css" />
  </head>
  <body>
    <section id="container">
      <h1 id="title">속 담 풀 이</h1>
      <div class="content">
        <h2>말 한마디에 천냥 빚진다.</h2>
        <p>
          생각해보지 않고 나오는 대로 말하다가 실수하면 상대의 마음에 아픔을
          남기게 된다.
        </p>
      </div>
      <div class="content">
        <h2 class="secondTitle">웃는 얼굴에 침 못 뱉는다.</h2>
        <p>
          호의적인 의사소통 방법은 자기 말만 하는 것보다 좋은 결과로 이어진다.
        </p>
      </div>
    </section>
  </body>
</html>
#container {
  width: 550px;
  margin: 50px auto;
  border: 3px double #123456;
}

section #title {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  background: #abcdef;
  padding: 20px 0;
  border-bottom: 3px solid #123456;
}

section .content {
  padding: 10px;
}

section .content h2 {
  font-size: 1.2em;
  font-weight: bold;
}
section .content p {
  font-size: 0.8em;
  padding-top: 5px;
}

section .content:last-child {
  border-top: 3px dotted #123456;
}

회고

  1. div로 남발하던 것을 h1, h2, div, p로 의미부여하여 가독성이 좋게 하였다.
  2. font-size 를 em을 이용하여 더 간단하게 표현했다.
  3. height 요소를 사용하지 않고 만들어냈다.
  4. 우선순위를 주도록 최대한 많은 조상을 나열했다.

연습문제2

  • 처음했던코드
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="
https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css
"
      rel="stylesheet"
    />
    <style>
      #container {
        width: 600px;
        height: 210px;
        border: 1px solid #000;
        font-size: 23px;
        background: lightgray;
      }
      #first_sentence,
      #second_sentence,
      #third_sentence {
        padding: 23px 23px 23px 30px;
        color: white;
        font-weight: bold;
        text-shadow: 0 1px 1px black;
      }

      #second_sentence:hover {
        display: inline-block;
        background: skyblue;
        color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="first_sentence">
        [주문] 긴급재난지원금을 쿠x에서 사용할 수 있나요?
      </div>
      <div id="second_sentence">
        <span>다슬기를 키우고 싶은데 어떤 환경이 필요한가요?</span>
      </div>
      <div id="third_sentence">달팽이가 집을 나갔습니다. 어떻게 하죠??</div>
    </div>
  </body>
</html>
  • 수정코드
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- reset css -->
    <link
      href="
https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css
"
      rel="stylesheet"
    />
    <!-- custom css -->
    <link rel="stylesheet" href="practice(2).css" />
  </head>
  <body>
    <div id="container">
      <ul>
        <li>[주문] 긴급재난지원금을 쿠X에서 사용할 수 있나요?</li>
        <li>다슬기를 키우고 싶은데 어떤 환경이 필요한가요?</li>
        <li>달팽이가 집을 나갔습니다. 어떻게 하죠??</li>
      </ul>
    </div>
  </body>
</html>
* {
  box-sizing: border-box;
}
#container {
  width: 50%;
  margin: 50px auto;
  background: lightgray;
  padding: 10px;
  color: white;
}

div ul {
  display: inline-block;
}
div ul li {
  font-size: 1.5em;
  font-weight: bold;
  margin: 30px;
  text-shadow: 1px 1px 2px black;
}

div ul li:hover {
  background: skyblue;
  color: yellow;
}

회고

  1. div로 남발되던 것들을 ul과 li를 통해 작성해줬음, 왜냐하면 목록처럼 보였기 때문이다.
  2. width를 %로 작성하고 font-size를 em으로 작성하여 새로운 코드를 도전해보았다.
  3. text-shadow의 쓰임에 대해 이해할 수 있었다.
profile
Yohan
백엔드 개발자
이전 포스트

14일차 (2) - CSS (선택자, 상속, 우선순위)

다음 포스트

16일차 - CSS (글꼴, 문자)

post-custom-banner

0개의 댓글