비기너 트랙 9 - CSS 이론 (2)

내용 요약

CSS 박스 모델

content : 텍스트나 이미지가 들어가는 실제 내용 영역
padding : 내용과 테두리 사이 내부 여백
border : 테두리, 요소의 경계
margin : 요소 외부의 여백, 다른 요소와의 간격

<div class="container">박스 모델</div>

.container {
    width : 200px;
    padding : 20px;
    border : 5px solid black;
    margin : 15px;
}

CSS 우선 순위

!important(우선 적용) > style 속성 (인라인 스타일) > id 선택자 > class 선택자 > 태그 선택자

다만 !important는 가독성이나 성능, 유지보수 측면에서 여러모로 좋지 않기 때문에 되도록 사용하지 않는 것이 좋다.

<p id="unique" class="inline-style highlight">CSS 우선순위</p>

p {
  color: blue; /* 태그 선택자 */
}

.highlight {
  color: red; /* 클래스 선택자 */
}

#unique {
  color: green; /* ID 선택자 */
}

p.inline-style {
  color: yellow !important; /* !important */
}

위의 css 코드를 전부 다 작성했을 때 / !important 부분을 삭제했을 때 / #unique 부분도 삭제했을 때

css 단위

고정 단위

- px (픽셀) - 화면의 고정된 크기, 디바이스 화면 크기에 관계없이 일정하게 유지

상대 단위

em, rem : 글꼴 크기에 상대적인 단위
- em : 부모 요소의 글꼴 크기에 비례함 (1em : 부모 글꼴 크기)
- rem : 루트 요소(html)의 글꼴 크기에 비례함
% : 부모 요소 크기에 상대적인 백분율
vw, vh : 각각 뷰포트(화면) 너비, 높이에 비례하는 단위

실습 과제

  <style>
    /* 1. 박스 패딩, 테두리, 마진 설정 */
    .box {
        padding : 10px;
        border : 3px solid blue;
        margin : 20px;
    }

    /* 2. 제목의 기본 색상은 녹색 */
    h1 {
      color : green;
    }

    /* 3. 제목에 클래스 .highlight가 있을 때는 빨간색 */
    .highlight {
      color : red;
    }

    /* 4. id가 special인 경우 노란색 */
    #special {
      color : yellow;
    }

    /* 5. 단위를 적절히 사용해 크기 및 글자 크기를 설정하세요 */
    .content {
      width: 50%; /* 50%로 박스 크기를 설정 */
      font-size: 1.2em; /* 글자 크기 설정 */
    }
  </style>
</head>
<body>
  <h1 class="highlight">박스 모델 실습</h1>
  <h1 id="special">우선순위 실습</h1>

  <div class="box content">
    이곳은 박스 모델이 적용된 콘텐츠입니다.
  </div>

width : 100%일 때는 박스 크기로만 따지면 브라우저의 너비의 100%이지만, 가로 스크롤이 생기는 것을 볼 수가 있다.

이는 박스 모델에 padding값과 margin 값이 적용되어서인데 box-sizing 속성으로 해결할 수 있다.

box-sizing : 요소의 너비와 높이를 계산하는 방법을 지정하는 속성

box-sizing의 값

- content-box(초기값) : weight, height 속성이 콘텐츠 영역만 계산(padding과 border 제외)

- border-box : weight, height뿐만이 아닌 padding, border 값도 요소의 크기로 계산함.

    <style>
      .box {
        padding: 10px;
        border: 3px solid blue;
        margin: 20px;
      }
      .content {
        width: 100%;
        font-size: 1.2em;
      }
      .cont-box {
        box-sizing: content-box;
      }
      .bord-box {
        box-sizing: border-box;
      }
    </style>
  <div class="box content cont-box">
    content-box
  </div>
  <div class="box content bord-box">
    border-box
  </div>

그래도 가로 스크롤이 여전히 남아있는데, 이는 border-box값도 margin 값은 제외하기 때문이다.

.box 에 지정했던 margin 값을 없애주면

border-box는 가로 스크롤을 넘기지 않아도 페이지에 딱 맞게 표시되는 것을 볼 수 있다.

(가로 스크롤을 없애고 싶다면 두번째 이미지와 같이 content-box를 border-box로 수정해주면 된다.)

'오즈코딩스쿨 프론트엔드 10기 > 베이스캠프' 카테고리의 다른 글

비기너 트랙 10 - JavaScript 이론 (0)	2025.02.22
워밍업 칼럼 3 - 아토믹 해빗 (0)	2025.02.20
비기너 트랙 8 - CSS 이론 (1) (0)	2025.02.16
비기너 트랙 7 - HTML 이론 (0)	2025.02.15
비기너 트랙 6 - Git과 GitHub (0)	2025.02.14

hykim

비기너 트랙 9 - CSS 이론 (2)

'오즈코딩스쿨 프론트엔드 10기 > 베이스캠프' 카테고리의 다른 글

티스토리툴바

비기너 트랙 9 - CSS 이론 (2)

'오즈코딩스쿨 프론트엔드 10기 > 베이스캠프' 카테고리의 다른 글

'오즈코딩스쿨 프론트엔드 10기/베이스캠프' Related Articles

티스토리툴바