.width()

jQuery Reference

작성일 2024-10-15 최근 수정일 2026-10-25

.width()는 첫 요소의 내용 영역 너비를 픽셀 기준 숫자로 읽거나, 선택한 요소들의 내용 영역 너비를 설정합니다. padding·border·margin을 포함한 전체 너비와는 다릅니다.

문법과 적용 범위

const width = $("#box").width();
$("#box").width(300);
$("#box").width("50%");

숫자를 설정하면 픽셀로 해석하고, 다른 단위가 필요하면 문자열로 지정합니다. 읽기에서는 %로 작성한 CSS도 계산된 내용 너비를 숫자로 얻으며 결과가 소수일 수도 있습니다. box-sizing: border-box에서는 CSS width가 테두리까지 포함해도 .width()는 내용 너비를 반환합니다. .innerWidth()는 padding까지, .outerWidth()는 border까지, .outerWidth(true)는 margin까지 포함합니다.

jQuery 공식 문서의 .width() 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery width 예제</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div id="box" style="box-sizing: border-box; width: 300px; padding: 20px; border: 5px solid #835b00; margin: 10px;">크기 비교</div>
<button id="resize" type="button">내용 너비를 300px로 설정</button>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      function report() {
        $("#output").text("내용: " + $("#box").width() +
          " / padding 포함: " + $("#box").innerWidth() +
          " / border 포함: " + $("#box").outerWidth() +
          " / CSS width: " + $("#box").css("width"));
      }
      report();
      $("#resize").on("click", function () { $("#box").width(300); report(); });
    });
  </script>
</body>
</html>

실행 결과 확인

처음 결과는 내용: 250 / padding 포함: 290 / border 포함: 300 / CSS width: 300px입니다. 버튼을 누르면 내용 영역이 300이 되고, padding과 border를 합친 바깥 너비와 CSS width는 350px이 됩니다. 좌우 margin은 이 숫자들에 포함되지 않습니다.

사용할 때 주의할 점

고정 너비는 좁은 화면에서 넘칠 수 있습니다. 실제 UI에서는 부모 너비와 max-width를 함께 고려하세요. 이 예제는 박스 모델 비교를 위해 숫자를 고정했습니다.
숨겨진 요소의 크기 측정은 신뢰하기 어려울 수 있고, 브라우저 확대·소수 픽셀도 값에 영향을 줍니다. 화면에 배치된 요소에서 확인하고 무조건 정수로 가정하지 마세요.
min-width, max-width 등 제약이 있으면 요청한 값과 실제 측정값이 달라질 수 있습니다. 설정 뒤 다시 읽어 적용 결과를 확인하세요.
window와 document에도 .width()를 사용할 수 있지만 요소의 내용 영역 측정과 대상 의미가 다릅니다. 뷰포트와 문서 너비 중 필요한 값을 구분하세요.

용도를 비교하려면 .css("width")와 반환값 비교을 참고하세요.

jQuery Reference