HTTP status codes

HTTP 상태 코드

The first digit distinguishes success, redirection, client errors, and server errors.

···
html
<div class="n-demo"><div class="n-head"><strong>STATUS ROUTER</strong><span>LIVE TRACE</span></div><div class="n-stage"><div class="route-origin n-box mono">GET /item</div><div class="route-grid"><div id="r0" class="n-box">200<br>OK</div><div id="r1" class="n-box">302<br>MOVE</div><div id="r2" class="n-box">404<br>MISSING</div><div id="r3" class="n-box">503<br>UNAVAILABLE</div></div></div><div class="n-foot">tap to step · auto replay</div></div>
css
.n-demo{width:min(94vw,760px);height:min(88vh,324px);padding:clamp(9px,2.2vmin,18px);border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(5px,1.3vmin,10px);font:600 clamp(12px,2.4vmin,16px)/1.3 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;overflow:hidden}.n-head,.n-foot{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}.n-head strong{color:var(--accent)}.n-head span,.n-foot{font-size:12px}.n-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(4px,1vmin,10px)}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.n-box{padding:clamp(5px,1.5vmin,11px);border:1px solid var(--line);border-radius:8px;background:var(--bg);text-align:center}.n-on{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.n-muted{color:var(--muted)}@media(max-width:400px){.n-head span{display:none}}.route-origin{width:32%}.route-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:62%}.route-grid .n-box{padding:6px 2px}
js
let step=0;function advance(){for(let i=0;i<4;i++)document.getElementById('r'+i).classList.toggle('n-on',i===step);step=(step+1)%4}
const clickTarget=document.querySelector('.n-demo');if(clickTarget&&typeof advance==='function'){advance();const timer=setInterval(advance,1050);clickTarget.addEventListener('pointerdown',()=>{clearInterval(timer);advance()})}

HTTP status codes convey the outcome of a request. The 2xx class means success, 3xx redirection, 4xx a client-side issue, and 5xx a server-side issue.

The demo routes one request to four possible outcomes. Before retrying, consider the method semantics and the actual cause, not just the status class.

When to use

Use status classes to design client error handling, redirects, and retry policies.

Open as page ↗