3. 상세 디자인(버튼, 인풋 태그)

Jan 07, 2026

Contents

1. button 태그 디자인 1️⃣ button 태그 기본 특징 2️⃣ 기본 스타일 초기화 (중요 ⭐)3️⃣ 가장 기본적인 버튼 디자인 4️⃣ hover / active 상태 (필수 ⭐⭐⭐)5️⃣ disabled 상태 처리 6️⃣ 버튼 종류별 디자인 패턴 ⭐7️⃣ 아이콘 버튼 (실무에서 매우 흔함)8️⃣ 버튼 정렬 & 크기 9️⃣ transition으로 부드럽게 ⭐🔟 실습 2. input 태그 디자인 1️⃣ input 기본 특징 2️⃣ 기본 스타일 초기화 (중요 ⭐)3️⃣ 가장 기본적인 input 디자인 4️⃣ focus 상태 디자인 (필수 ⭐⭐⭐)5️⃣ placeholder 스타일링 6️⃣ disabled / readonly 상태 7️⃣ 에러 상태 디자인 (실무 중요 ⭐)8️⃣ input 크기 변형 패턴 9️⃣ 아이콘이 있는 input (실무에서 매우 흔함)🔟 실습 ※ 폰트어썸(Font Awesome) 사용방법

1. `button` 태그 디자인

1️⃣ button 태그 기본 특징


<button>버튼</button>

기본적으로 inline-block

클릭 가능

키보드 접근성 좋음 (Enter / Space)

form 안에서는 기본 타입이 submit

➡️ 디자인 전엔 브라우저 기본 스타일이 있음

2️⃣ 기본 스타일 초기화 (중요 ⭐)

브라우저마다 버튼 모양이 달라서 초기화부터 하는 게 정석


button {
	all: unset;        /* 모든 기본 스타일 제거 */
	cursor: pointer;
}

또는 (조금 더 안전한 방식)


button {
	background: none;
	border: none;
	padding:0;
	cursor: pointer;
}

3️⃣ 가장 기본적인 버튼 디자인


<button class="btn">확인</button>


.btn {
	padding: 10px 16px;
	background-color: #007bff;
	color: white;
	border-radius: 6px;
	font-size: 14px;
}

➡️ 이게 버튼 디자인의 출발점

4️⃣ hover / active 상태 (필수 ⭐⭐⭐)

1) hover (마우스 올렸을 때)


.btn:hover {
	background-color:#0056b3;
}

2) active (누르는 순간)


.btn:active {
	transform:scale(0.98);
}

➡️ 눌리는 느낌이 UX를 살림

5️⃣ disabled 상태 처리


<button class="btn" disabled>비활성</button>


.btn:disabled {
	background:#ccc;
	cursor: not-allowed;
	opacity:0.7;
}

➡️ 클릭 안 되는 게 시각적으로 명확해야 함

6️⃣ 버튼 종류별 디자인 패턴 ⭐

1) 기본 버튼


.btn-primary {
	background:#007bff;
	color: white;
}

2) 보조 버튼


.btn-secondary {
	background:#6c757d;
	color: white;
}

3) 테두리 버튼


.btn-outline {
	background: white;
	border:1px solid#007bff;
	color:#007bff;
}
.btn-outline:hover {
	background:#007bff;
	color: white;
}

7️⃣ 아이콘 버튼 (실무에서 매우 흔함)


<button class="btn icon-btn">
<i class="fa-solid fa-download"></i>
  다운로드
</button>


.icon-btn {
	display: inline-flex;
	align-items: center;
	gap:6px;
}

8️⃣ 버튼 정렬 & 크기

1) 가운데 정렬


button {
	display: block;
	margin:0 auto;
}

2) 전체 너비 버튼


.btn {
	width:100%;
}

9️⃣ transition으로 부드럽게 ⭐


.btn {
	transition: background-color0.2s, transform0.1s;
}

➡️ hover/active가 자연스러워짐

🔟 실습

1) 실습 (1)


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      .red_btn {
        background-color: #ff5a5f;
        color: white;
        width: 80px;
        height: 45px;
        border: 0px;
        border-radius: 5px;
        font-size: 15px;
        font-weight: 700;
      }

      .red_shadow_btn {
        background-color: #ff5a5f;
        color: white;
        width: 80px;
        height: 45px;
        border: 0px;
        border-radius: 5px;
        font-size: 15px;
        font-weight: 700;
        box-shadow: 3px 3px 0px 0px rgb(138, 129, 129);
      }

      .red_outline_btn {
        background-color: white;
        color: black;
        width: 80px;
        height: 45px;
        border: 1px solid black;
        border-radius: 5px;
        font-size: 15px;
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <h1>상세 디자인 (버튼, 인풋태그)</h1>
    <hr />
    <button class="red_btn">검색</button>
    <button class="red_shadow_btn">로그인</button>
    <button class="red_outline_btn">회원가입</button>
  </body>
</html>

2) 실습 (2)


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      .red_btn {
        background-color: #ff5a5f;
        color: white;
        width: 80px;
        height: 45px;
        border: 0px;
        border-radius: 5px;
        font-size: 15px;
        font-weight: 700;
      }

      .red_shadow {
        box-shadow: 3px 3px 0px 0px rgb(138, 129, 129);
      }

      .red_outline_btn {
        background-color: white;
        color: black;
        width: 80px;
        height: 45px;
        border: 1px solid black;
        border-radius: 5px;
        font-size: 15px;
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <h1>상세 디자인 (버튼, 인풋태그)</h1>
    <hr />
    <button class="red_btn">검색</button>
    <button class="red_btn red_shadow">로그인</button>
    <button class="red_outline_btn">회원가입</button>
  </body>
</html>

➡️ class에 여러 개를 동시에 넣을 수 있음(문법) → 하지만 비추!

2. `input` 태그 디자인

1️⃣ input 기본 특징


<input type="text" />

기본적으로 inline 요소

브라우저마다 기본 스타일이 다름

디자인 전에 초기화가 중요

2️⃣ 기본 스타일 초기화 (중요 ⭐)


input {
	outline: none;  /* 기본 파란 테두리 제거 */
	border: none;
}

outline은 접근성과 연관되니, 제거했다면 대체 포커스 스타일를 꼭 만들어야 함

3️⃣ 가장 기본적인 input 디자인


<input class="input" type="text" placeholder="아이디 입력" />


.input {
	width:240px;
	padding:10px12px;
	border:1px solid#ccc;
	border-radius:6px;
	font-size:14px;
}

➡️ 실무에서 가장 많이 쓰는 기본형

4️⃣ focus 상태 디자인 (필수 ⭐⭐⭐)


.input:focus {
	border-color:#007bff;
	box-shadow:0002pxrgba(0,123,255,0.2);
}

사용자가 어디에 입력 중인지 명확

UX에서 매우 중요

5️⃣ placeholder 스타일링


.input::placeholder {
	color:#aaa;
	font-size:13px;
}

➡️ 안내 문구는 연하게

6️⃣ disabled / readonly 상태


<input class="input" type="text" disabled />


.input:disabled {
	background:#f5f5f5;
	color:#999;
	cursor: not-allowed;
}


.input[readonly] {
	background:#fafafa;
}

7️⃣ 에러 상태 디자인 (실무 중요 ⭐)


.input.error {
	border-color: red;
}


<input class="input error" />

또는 메시지와 함께


<p class="error-text">필수 입력 항목입니다</p>


.error-text {
	color: red;
	font-size:12px;
	margin-top:4px;
}

8️⃣ input 크기 변형 패턴


.input-sm {padding:6px8px;font-size:12px; }
.input-lg {padding:14px16px;font-size:16px; }

➡️ 버튼과 세트로 맞추는 게 중요

9️⃣ 아이콘이 있는 input (실무에서 매우 흔함)


<div class="input-wrap">
<input class="input" type="text" placeholder="검색" />
</div>


.input-wrap {
	position: relative;
}
.input-wrap::before {
	content:"🔍";
	position: absolute;
	left:10px;
	top:50%;
	transform:translateY(-50%);
}
.input-wrapinput {
	padding-left:32px;
}

🔟 실습

1) 실습 (1)


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    />
    <style>
      .red_btn {
        background-color: #ff5a5f;
        color: white;
        width: 80px;
        height: 45px;
        border: 0px;
        border-radius: 5px;
        font-size: 15px;
        font-weight: 700;
      }

      .red_shadow {
        box-shadow: 3px 3px 0px 0px rgb(138, 129, 129);
      }

      .red_outline_btn {
        background-color: white;
        color: black;
        width: 80px;
        height: 45px;
        border: 1px solid black;
        border-radius: 5px;
        font-size: 15px;
        font-weight: 700;
      }

      .outline_btn {
        width: 180px;
        height: 30px;
        border: 1px solid gray;
        border-radius: 5px;
      }

      .google_btn {
        background-color: white;
        color: black;
        width: 250px;
        height: 40px;
        border: 1px solid black;
        border-radius: 5px;
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <h1>상세 디자인 (버튼, 인풋태그)</h1>
    <hr />
    <button class="red_btn">검색</button>
    <button class="red_btn red_shadow">로그인</button>
    <button class="red_outline_btn">회원가입</button>
    <hr />
    <input class="outline_btn" type="text" placeholder="🔎Search..." />
    <hr />
    <button class="google_btn">
      <i class="fa-brands fa-google"></i> 구글 계정으로 로그인
    </button>
  </body>
</html>

2) 실습 (2)_CSS파일 별도로 만들어서 link로 들고오기


.red_btn {
    background-color: #ff5a5f;
    color: white;
    width: 80px;
    height: 45px;
    border: 0px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 700;
  }

  .red_shadow {
    box-shadow: 3px 3px 0px 0px rgb(138, 129, 129);
  }

  .red_outline_btn {
    background-color: white;
    color: black;
    width: 80px;
    height: 45px;
    border: 1px solid black;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 700;
  }

  .outline_btn {
    width: 180px;
    height: 30px;
    border: 1px solid gray;
    border-radius: 5px;
  }

  .google_btn {
    background-color: white;
    color: black;
    width: 250px;
    height: 40px;
    border: 1px solid black;
    border-radius: 5px;
    font-weight: 700;
  }


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    />
    <link rel="stylesheet" href="2.css" />
  </head>
  <body>
    <h1>상세 디자인 (버튼, 인풋태그)</h1>
    <hr />
    <button class="red_btn">검색</button>
    <button class="red_btn red_shadow">로그인</button>
    <button class="red_outline_btn">회원가입</button>
    <hr />
    <input class="outline_btn" type="text" placeholder="🔎Search..." />
    <hr />
    <button class="google_btn">
      <i class="fa-brands fa-google"></i> 구글 계정으로 로그인
    </button>
  </body>
</html>

결과 동일

※ 폰트어썸(Font Awesome) 사용방법

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

https://fontawesome.com/


<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
/>

➡️ head에 붙여넣기

➡️ 복사해서 body에 붙여넣기

Contents