[CSS] CSS 박스 모델

MINJEE·2024년 1월 22일
CSS

SMHRD_4_HTML/CSS

목록 보기
5/8
post-thumbnail

목차

  • 박스 모델 속성
    • width : 박스 모델 너비 지정
    • height : 박스 모델 높이 지정
    • box-sizing : 박스 모델 크기 계산하는 기준 지정
    • box-shadow : 박스 모델에 그림자 효과 추가
  • 테두리 속성
    • border-style : 테두리 스타일 지정
    • border-위치-style : top, right, bottom, left 중에 선택해서 특정 위치의 테두리 스타일만 지정
    • border-width : 테두리 두께 지정
    • border-위치-width : top, right, bottom, left 중에 선택해서 특정 위치의 테두리 두께 지정
    • border-color : 테두리 색상 지정
    • border-위치-color : top, right, bottom, left 중에 선택해서 특정 위치의 테두리 색상 지정
    • border-radius : 꼭지점을 둥글게
    • border-위치-radius : top-left, top-right, bottom-right, bottom-left 등 선택해서 특정 꼭지점만 둥글게
    • border : 테두리 두께, 색상, 스타일 한번에 적용
    • border-위치 : top, right, bottom, left 중에 선택해서 특정 위치의 테두리 두께, 색상, 스타일 한번에 적용
  • 여백 속성
    • margin : 마진 지정
    • margin-위치 : top, right, bottom, left 중에 선택해서 특정 위치의 마진 지정
    • padding : 패딩 지정
    • padding-위치 : top, right, bottom, left 중에 선택해서 특정 위치의 패딩 지정
  • 레이아웃 속성
    • display : 화면에서 요소를 배치 방법 지정 (block, inline, inline-block, none 등)
    • float : 웹 요소를 왼쪽이나 오른쪽에 배치 (float 를 적용한 요소는 clear속성으로 해제하지 않으면 뒤에 오는 요소도 계속 왼쪽이나 오른쪽으로 연결해서 배치됨)
  • 위치 지정 속성
    • left, right, top, bottom : 기준 위치와 요소 사이에 상하좌우 얼마나 떨어져 있는지 지정
    • position : 웹 요소의 위치를 지정 (static, relative, absolute, fixed)

박스 모델

블록 라벨 요소 & 인라인 라벨 요소

박스 모델은 블록 라벨 요소인지 인라인 라벨 요소인지에 따라 나열 방법이 달라짐

  • 블록 라벨(block-label) 요소 : 한 줄을 차지하는 요소
    • 한 줄을 차지하는 것 = 해당 요소의 너비가 100%
    • 블록 라벨 요소의 왼쪽/오른쪽에 다른 요소가 올 수 없음
    • ex. <h1>, <div>, <p> 등
  • 인라인 라벨(inline-label) 요소 : 콘텐츠만큼만 영역을 차지하는 요소
    • 나머지 공간에 다른 요소가 올 수 있음
    • 한 줄에 인라인 라벨 요소를 여러 개 표시 가능
    • ex. <span>, <img>, <strong> 등

박스 모델의 기본 구성

박스 모델은 콘텐츠 영역, 패딩, 테두리, 마진 등의 요소로 구성됨

  • 박스 모델(box model) 요소 : 블록 라벨 요소와 같이 박스 형태인 요소

  • 콘텐츠 영역
  • 패딩(padding) : 박스와 콘텐츠 영역 사이의 여백
  • 박스의 테두리
  • 마진(margin) : 여러 박스 모델 사이의 여백

박스 모델의 방향

박스 모델은 상하좌우 4개의 방향이 있음
테두리, 마진, 패딩 등 지정할 때, 한꺼번에 똑같은 값으로 지정하거나, 모두 다르게 지정 가능

  • 방향은 시계 방향으로 top → right → bottom → left

박스 모델 속성

박스 모델 속성

  • width : 박스 모델의 콘텐츠 영역의 너비 지정
  • height : 박스 모델의 콘텐츠 영역의 높이 지정
    width: 콘텐츠너비 | auto;
height: 콘텐츠높이 | auto;
    • 너비, 높이는 px이나 em단위로 크기를 지정하거나 박스 모델을 포함하는 부모 요소 기준으로 백분율로 지정
    • auto(기본값) : 너비와 높이를 콘텐츠 양에 따라 자동으로 결정
  • box-sizing : 박스 모델 크기 계산하는 기준 지정
    box-sizing: border-box | content-box;
    • border-box : 테두리까지 포함해서 너비값 지정
    • content-box(기본값) : 콘텐츠 영역만 너비값 지정
  • box-shadow : 박스 모델에 그림자 효과 추가
    box-shadow: 수평거리 수직거리 흐림정도 번짐정도 색상 inset;
    • 수평거리, 수직거리 : 그림자가 가로/세로로 얼마나 떨어져 있는지 나타냄, 양수이면 오른쪽/위쪽으로, 음수이면 왼쪽/아래쪽으로 그림자 표시(필수 속성)
    • 흐림정도 : 기본값 0(진한 그림자), 값이 커질수록 부드러운 그림자
    • 번짐정도 : 기본값 0, 양수이면 모든 방향으로 퍼지고, 음수이면 모든 방향으로 축소
    • 색상 : 기본값 검정색, 한 가지만 지정할 수도 있고, 공백을 사용하여 여러 색상 지정도 가능
    • inset : 안쪽 그림자로 표시

테두리 속성

  • border-style : 테두리 스타일 지정
  • border-위치-style : top, right, bottom, left 중에 선택해서 특정 위치의 테두리 스타일만 지정
    border-style: none | hidden | solid | dotted | sashed | double | groove | inset | outset | ridge;
    • none(기본값) : 테두리 없음
      (테두리 색상, 두께를 지정하더라도 none이면 표시되지 않음)
    • hidden : 테두리 감춤
      (표 스타일 속성이 border-collapse: collapse일 경우 다른 테두리도 표시되지 않음)
    • solid : 실선
    • dotted : 점선
    • dashed : 짧은 직선
    • double : 이중선 (두 선 사이 간격이 border-width값)
    • groove : 테두리를 창에 조각한 것처럼 표시 (파인 모양)
    • ridge : 테두리를 창에서 튀어나온 것처럼 표시 (튀어나온 모양)
    • inset : 콘텐츠 영역까지 파인 모양
      • 표 스타일 속성이 border-collapse: seperate일 경우 전체 박스 테두리가 창에 박혀 있는 것처럼 표시되고, border-collapse: collapse인 경우 groove와 동일하게 표시
    • outset : 콘텐츠 영역까지 튀어나온 모양
      • 표 스타일 속성이 border-collapse: seperate일 경우 전체 박스 테두리가 창에서 튀어나온 것처럼 표시되고, border-collapse: collapse인 경우 ridge와 동일하게 표시
  • border-width : 테두리 두께 지정
  • border-위치-width : top, right, bottom, left 중에 선택해서 특정 위치의 테두리 두께 지정
    border-width: 크기 | thin | medium | thick;
    • 크기 : px와 같은 단위로 두께 지정
    • 예약어 사용 : thin < medium < thick
    border-width: 4방향크기;
border-width: 위아래크기 좌우크기;
border-width: 위크기 우크기 아래크기; /*좌크기는 마주보는 우크기와 동일하게*/
border-width: 위크기 우크기 아래크기 좌크기;
  • border-color : 테두리 색상 지정
  • border-위치-color : top, right, bottom, left 중에 선택해서 특정 위치의 테두리 색상 지정
    border-color: 색상;
  • border-radius : 꼭지점을 둥글게
  • border-위치-radius : top-left, top-right, bottom-right, bottom-left 등 선택해서 특정 꼭지점만 둥글게
    border-radius: 크기 | 백분율;
border-radius: 가로반지름 / 세로반지름;
    • 단위(px, em 등)나 백분율(현재 요소 크기 기준)을 사용하여 지정
    • 원 형태로 만드는 방법 : 너비, 높이를 똑같이 만든 후, 50%로 지정
    • 타원 형태 만드는 방법 : 슬래시(/)로 구분하여 가로 반지름과 세로 반지름 지정
  • border : 테두리 두께, 색상, 스타일 한번에 적용 (순서 상관 없음)
  • border-위치 : top, right, bottom, left 중에 선택해서 특정 위치의 테두리 두께, 색상, 스타일 한번에 적용 (순서 상관 없음)
    border: 3px dotted blue; /*모든 테두리를 3px 파란색 점선*/
border-bottom: 3px solid gray; /*아래쪽 테두리 3px 회색 실선*/

예시

<style>
  .box{
      width:100px;
      height: 100px;
      background-color: tomato;
      border-radius: 10px;
  }
  div{
      width: 70px;
      height: 40px;
      background-color: #9999cc;
      /* rgb값 또는 색상코드(rgb값을 16진수로 변환한 것) 로 생상 줄 수 있음 */
      margin: 10px;
      border-width: 5px;

  }
  .solid{
      border-style: solid; /* 단선 */
  }
  .double{
      border-style: double; /* 이중선 (border두께는 동일) */
  }
  .dotted{
      border-style: dotted; /* 점선 */
  }
  .dashed{
      border-style: dashed; /* 파선 */
  }
  .groove{
      border-style: groove; /* 테두리가 파인 모양 */
  }
  .ridge{
      border-style: ridge; /* 테두리가 튀어나온 모양 */
  }
  .inset{
      border-style: inset; /* contents까지 파인 모양 */
  }
  .outset{
      border-style: outset; /* contents까지 튀어나온 모양 */
  }
  .underline{
      background-color: skyblue;

      text-align: center;
      line-height: 40px;
      /* contents높이만큼 line-height를 설정하면 내용이 위아래 가운데정렬 */

      border-bottom-style: double;
      border-left-style: dashed;
      border-right-style: dotted;
      border-top-style: inset;
      border-top-width: 10px;
  }
</style>
...
<div class="box"></div>
<div class="solid"></div>
<div class="double"></div>
<div class="dotted"></div>
<div class="dashed"></div>
<div class="groove"></div>
<div class="ridge"></div>
<div class="inset"></div>
<div class="outset"></div>
<div class="underline">밑줄</div>

여백 속성

  • margin : 마진 지정

  • margin-위치 : top, right, bottom, left 중에 선택해서 특정 위치의 마진 지정

    margin: 크기 | 백분율 | auto;
    • 크기(px등의 단위)나 백분율(박스 모델을 포함한 부모 요소 기준)을 사용하여 margin크기 지정
    • auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정
    margin: 4방향동일크기;
margin: 위아래크기 좌우크기;
margin: 위크기 우크기 아래크기; /*좌크기는 우크기와 동일하게*/
margin: 위크기 우크기 아래크기 좌크기;

    웹 문서를 가운데 정렬하는 방법 :

    • 우선, 배치할 요소의 너비값이 정해져 있어야 한다.
    • margin-left와 margin-right의 속성값을 auto로 지정한다.
    • 위의 두 항목처럼 지정하면, 웹 브라우저 화면 너비에서 웹 요소 너비값을 뺀 나머지 영역을 좌우 마진으로 자동 계산된다.

    마진 중첩 (margin overlap) :
    요소를 세로로 배치할 때, 위 마진과 아래 마진이 서로 만나면서 큰 마진값으로 합쳐지는 것
    (오른쪽 마진과 왼쪽 마진이 만날 때는 중첩되지 않음)

  • padding : 패딩 지정

  • padding-위치 : top, right, bottom, left 중에 선택해서 특정 위치의 패딩 지정

    padding: 크기 | 백분율 | auto;
    padding: 4방향동일크기;
padding: 위아래크기 좌우크기;
padding: 위크기 우크기 아래크기; /*좌크기는 우크기와 동일하게*/
padding: 위크기 우크기 아래크기 좌크기;

레이아웃 속성

  • display : 화면에서 요소를 배치 방법 지정 (block, inline, inline-block, none 등)

    display: block | inline | inline-block | none;
    • block : 인라인 레벨 요소를 블록 레벨 요소로 만듦
    • inline : 블록 레벨 요소를 인라인 레벨 요소로 만듦
    • inline-block : 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩 지정 가능
    • none : 해당 요소를 화면에 표시 안함

    disply속성은 주로 웹 문서의 내비게이션의 메뉴 항목을 가로로 배치할 때와 이미지를 표 형태로 배치하는 데 주로 사용

예시 : 수평 내비게이션 만들기

<style>
  * { box-sizing: border-box; } /*모든 요소에 테두리까지 포함한 너비값 지정*/
  nav ul { list-style: none; } /*불릿이나 숫자 번호 없앰 */
  nav ul li {
    display: inline-block; /*인라인 라벨, 블록 라벨 모두 지정*/
    padding: 20px; /*패당값 20px */
    margin: 0 20px; /* 좌우 마진값 20px */
    border: 1px solid #222; /* 메뉴 테두리 지정 */
  }
</style>
...
<nav>
  <ul>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
    <li>menu4</li>
  </ul>
</nav>

  • float : 웹 요소를 왼쪽이나 오른쪽에 배치 (float 를 적용한 요소는 clear속성으로 해제하지 않으면 뒤에 오는 요소도 계속 왼쪽이나 오른쪽으로 연결해서 배치됨)

    float: left | right | none;
    • left : 해당 요소를 문서 왼쪽에 배치
    • right : 해당 요소를 문서 오른쪽에 배치
    • none(기본값) : 좌우 어느 쪽에도 배치하지 않음

    웹 요소를 떠 있게 만든다는 것 = 요소가 왼쪽 구석이나 오른쪽 구석으로 배치된다는 것

    • <p>는 블록 라벨 요소이므로 이미지와 나란히 한 줄에 배치할 수 없는데, float속성을 사용하여 이미지를 왼쪽 구석으로 표시하고 그 주변에 텍스트가 둘러싸도록 표시 가능

  • clear : float속성 해제

    clear: left | right | both;
    • left : float: left를 해제
    • right : float: right를 해제
    • both : float: left와 float: right를 둘 다 해제

예제 : 레이아웃 만들기

<style>
  body { margin:0; }
  .wrapper {
    width : 500px;
    height : 500px;
  }
  header {
    height : 10%;
    background-color: #ea4335;
  }
  nav {
    height : 10%;
    background-color:#FF5e00;
  }
  .side {
    width : 30%;
    height : 60%;
    background-color: #4285f4;
    float:left;
  }
  .section {
      width : 70%;
      height : 30%;
      float:right;
  }
  .item2 {
      background-color: #fbbc05;
  }
  .item1 {
      background-color: #34a853;
  }
  footer {
      height : 20%;
      background-color: #8a8d92;
      clear: both;
  } 
</style>
...
<div class="wrapper">
  <header>헤더</header>
  <nav>내비게이션</nav>
  <div class="side">사이드바</div>
  <div class="section item1">세션1</div>
  <div class="section item2">세션2</div>
  <footer>푸터</footer>
</div>

위치 지정 속성

  • left, right, top, bottom : 기준 위치와 요소 사이에 상하좌우 얼마나 떨어져 있는지 지정

    left | right | top | bottom: 거리;
    • left : 기준위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정
    • right : 기준위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정
    • top : 기준위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정
    • bottom : 기준위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정

    position속성으로 기준 위치를 정한 뒤, 요소의 위치를 left, right, top, bottom속성에서 선택하여 지정

  • position : 웹 요소의 위치를 지정(배치)

    position: static | relative | absolute | fixed | sticky;
    • static(기본값) : 문서의 흐름에 맞춰 배치
    • relative : 위치값을 지정할 수 있다는 점을 제외하면 static과 동일
    • absolute : relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치
      • 부모 요소에 position: relative 를 지정해야 원하는 대로 지정 가능
      • 만약 부모 요소에 position: relative가 없으면 상위 요소를 찾아보고, 그래도 없으면 더 위의 요소를 찾아봄
    • fixed : 브라우저 창을 기준으로 위치를 지정해 배치
      (웹 브라우저에서 스크롤 해도 항상 같은 위치)
    • sticky : 문서의 흐름에 맞춰 일반적인 위치에 배치된 후, relative값이나 sticky값을 사용한 상위 요소를 기준으로 스크롤 영역에서 스크롤되는 동안에도 상위 요소 내에서 지정한 위치에 고정되어 화면에 유지
      • 상위 요소에서 height속성으로 스크롤 영역의 높이를 설정하고 overflow: auto;를 설정하여 스크롤 동작을 설정하고 사용한다
      • 상위 요소에 높이가 설정되어 있지 않고, overflow속성이 다르게 설정되어 있으면 동작하지 않음
profile
MINJEE
개발, 분석 배운 내용 정리하기!
이전 포스트

[CSS] 텍스트 스타일

다음 포스트

[CSS] 배경 이미지

0개의 댓글