HTML과 CSS만을 사용하여 다양한 입력 박스 UI를 디자인하는 예제 코드를 소개합니다. 세로형 및 가로형 입력 박스를 중앙 또는 좌측 정렬로 배치하고, 텍스트와 입력란을 깔끔하게 정렬하는 방법을 다룹니다. 실용적이고 가독성 높은 UI 디자인을 위한 코드 예제 모음입니다.
<div style="display: flex; align-items: center; margin-left: 20px;">
<label for="inputName" style="font-size: 16px; margin-right: 16px; color: #333; width: 60px; text-align: left;">입력명</label>
<div style="flex: 1; display: flex; align-items: center; justify-content: center;">
<input type="text" id="inputName" placeholder="입력명을 입력하세요" style="width: 200px; border: 1px solid #ccc; border-radius: 4px; padding: 5px; font-size: 16px; color: #333; outline: none;"> <!-- 여기서 입력 상자의 너비를 조정합니다. -->
<span style="margin-left: 8px; font-size: 16px; color: #333;">단위</span> <!-- 단위 또는 추가 설명 -->
</div>
</div>코드 설명
<div style="display: flex; align-items: center; margin-left: 20px;"> <div> 요소는 flex 레이아웃을 사용하여 자식 요소들을 가로로 정렬합니다.align-items: center;를 통해 자식 요소들이 세로 가운데 정렬됩니다.margin-left: 20px;로 외부 여백을 추가하여 왼쪽에 20px 간격을 둡니다.<label for="inputName" style="font-size: 16px; margin-right: 16px; color: #333; width: 60px; text-align: left;">입력명</label> label 요소는 입력란에 대한 설명을 제공합니다. for 속성은 연결된 입력 필드(id="inputName")를 참조합니다.font-size: 16px;으로 글자 크기를 설정하고, color: #333;으로 글자 색상을 진회색으로 설정합니다.margin-right: 16px;으로 오른쪽 여백을 주어 입력란과의 간격을 만듭니다.width: 60px;로 너비를 고정하고, text-align: left;로 텍스트를 왼쪽 정렬합니다.<div style="flex: 1; display: flex; align-items: center; justify-content: center;"> <div>는 입력란과 설명 텍스트를 포함하며, flex: 1;을 사용해 부모 <div>의 남은 너비를 차지합니다.display: flex;로 가로 정렬하며, align-items: center;로 세로 가운데 정렬합니다.justify-content: center;로 입력란과 설명 텍스트가 가운데 정렬되도록 합니다.<input type="text" id="inputName" placeholder="입력명을 입력하세요" style="width: 200px; border: 1px solid #ccc; border-radius: 4px; padding: 5px; font-size: 16px; color: #333; outline: none;"> input 요소는 텍스트 입력란을 생성합니다.id="inputName"으로 label과 연결되며, placeholder="입력명을 입력하세요"로 안내 문구를 제공합니다.style 속성에서 width: 200px;로 너비를 설정하고, border: 1px solid #ccc;로 회색 테두리를 추가했습니다.border-radius: 4px;로 모서리를 둥글게, padding: 5px;로 내부 여백을 주어 가독성을 높였습니다.font-size: 16px;으로 텍스트 크기를 설정하고, color: #333;으로 텍스트 색상을 지정했으며, outline: none;으로 클릭 시 외곽선을 제거합니다.<span style="margin-left: 8px; font-size: 16px; color: #333;">단위</span> span 요소는 입력란 옆에 표시되는 추가 설명(예: “단위”)입니다.margin-left: 8px;로 입력란과의 간격을 주었고, font-size: 16px;과 color: #333;으로 글자 크기와 색상을 설정했습니다.이 코드의 구조는 화면에 “입력명” 라벨과 텍스트 입력란, 그리고 입력란 오른쪽에 추가 설명을 보기 좋게 배치합니다.
<div style="display: flex; justify-content: space-around; max-width: 100%; margin: auto; gap: 30px;">
<div style="display: flex; align-items: center; border: 1px solid #ddd; border-radius: 5px; padding: 5px; flex: 1; box-sizing: border-box; justify-content: space-between; max-width: 45%;">
<span style="white-space: nowrap; text-align: left;">전체값</span>
<input type="text" style="flex-grow: 1; margin: 0 10px; text-align: center; border: none; outline: none; font-size: 1em; min-width: 50px;">
<span style="white-space: nowrap; text-align: right;">의</span>
</div>
<div style="display: flex; align-items: center; border: 1px solid #ddd; border-radius: 5px; padding: 5px; flex: 1; box-sizing: border-box; justify-content: space-between; max-width: 45%;">
<span style="white-space: nowrap; text-align: left;">총합</span>
<input type="text" style="flex-grow: 1; margin: 0 10px; text-align: center; border: none; outline: none; font-size: 1em; min-width: 50px;">
<span style="white-space: nowrap; text-align: right;">이</span>
</div>
</div>코드 설명
<div> (컨테이너 요소) display: flex; justify-content: space-around;를 사용하여 두 개의 내부 박스를 화면에 가로로 나란히 배치합니다.gap: 30px;으로 내부 박스들 간의 간격을 30px로 설정해 가독성을 높였습니다.max-width: 100%;와 margin: auto;로 중앙에 배치되도록 설정했습니다.<div> (왼쪽/오른쪽 입력 박스) display: flex; align-items: center;로 세로 가운데 정렬되며, justify-content: space-between;으로 좌우에 요소를 배치해 입력란이 중앙에 위치하게 했습니다.border: 1px solid #ddd;와 border-radius: 5px;로 테두리와 둥근 모서리를 적용하여 카드 형식의 시각적 효과를 주었습니다.padding: 5px;으로 내부 여백을 주어 가독성을 높였고, max-width: 45%;로 각 박스가 전체 너비의 45%를 차지하게 하여 좌우 균형을 맞췄습니다.<span> 요소들 (“전체값”, “의”, “총합”, “이”) white-space: nowrap;을 설정해 텍스트가 줄바꿈 없이 한 줄에 유지되도록 했습니다.text-align: left;와 text-align: right;로 각각의 텍스트를 입력란의 좌우에 고정하여 가독성을 높였습니다.<input> 요소 (텍스트 입력란) flex-grow: 1;로 입력란이 남는 공간을 유연하게 채우도록 설정했습니다.margin: 0 10px;으로 좌우 여백을 추가해 좌우 텍스트와의 간격을 조정했습니다.text-align: center;로 입력 텍스트가 중앙에 정렬되며, min-width: 50px;로 최소 너비를 설정해 입력란이 지나치게 작아지지 않도록 했습니다.border: none; outline: none;으로 기본 테두리와 외곽선을 제거해 깔끔한 디자인을 유지했습니다.이 코드는 좌측과 우측에 텍스트를 두고 중앙에 입력란이 위치한, 가독성이 높은 입력 UI를 구현합니다.
<div style="display: flex; justify-content: space-between; gap: 20px; max-width: 100%; margin: auto; padding: 10px;">
<div style="display: flex; align-items: center; border: 1px solid #ddd; border-radius: 5px; padding: 5px 10px; box-sizing: border-box; flex-grow: 1;">
<span style="white-space: nowrap; text-align: left;">전체값</span>
<input type="text" style="flex-grow: 1; margin: 0 10px; text-align: center; border: none; outline: none; font-size: 1em; min-width: 60px;">
<span style="white-space: nowrap; text-align: right;">의</span>
</div>
<div style="display: flex; align-items: center; border: 1px solid #ddd; border-radius: 5px; padding: 5px 10px; box-sizing: border-box; flex-grow: 1;">
<span style="white-space: nowrap; text-align: left;">총합</span>
<input type="text" style="flex-grow: 1; margin: 0 10px; text-align: center; border: none; outline: none; font-size: 1em; min-width: 60px;">
<span style="white-space: nowrap; text-align: right;">이</span>
</div>
</div>코드 설명
<div> (컨테이너 요소) display: flex; justify-content: space-between;을 사용하여 내부의 두 입력 박스를 좌우에 균형 있게 배치합니다.gap: 20px;으로 내부 박스 간의 간격을 설정해 가독성을 높였습니다.max-width: 100%;로 화면 너비를 최대한 활용하며, margin: auto;로 중앙에 배치합니다.padding: 10px;으로 컨테이너의 내부 여백을 주어 시각적 여유를 더했습니다.<div> (왼쪽/오른쪽 입력 박스) display: flex; align-items: center;로 자식 요소들이 가로로 나란히 정렬되며 세로 중앙에 배치됩니다.border: 1px solid #ddd;와 border-radius: 5px;로 테두리와 둥근 모서리를 적용해 카드 형태의 UI를 제공합니다.padding: 5px 10px;으로 내부 여백을 추가하여 요소들이 너무 붙어 보이지 않도록 했습니다.flex-grow: 1;로 각 박스가 동일한 비율로 너비를 차지하게 했습니다.<span> 요소들 (“전체값”, “의”, “총합”, “이”) white-space: nowrap;으로 텍스트가 줄바꿈 없이 한 줄로 유지됩니다.text-align: left;와 text-align: right;로 각각의 텍스트를 입력란의 좌우에 고정하여 일관성 있는 레이아웃을 유지합니다.<input> 요소 (텍스트 입력란) flex-grow: 1;로 입력란이 남은 공간을 유연하게 채우도록 설정했습니다.margin: 0 10px;으로 좌우에 간격을 두어 텍스트와 입력란 사이가 너무 가까워지지 않도록 했습니다.text-align: center;로 입력 텍스트가 중앙에 정렬되며, min-width: 60px;로 최소 너비를 설정해 가독성을 유지했습니다.border: none; outline: none;으로 기본 테두리와 외곽선을 제거해 깔끔한 디자인을 연출했습니다.이 코드는 좌측과 우측에 텍스트를 배치하고 중앙에 입력란을 배치한 가로형 입력 UI를 구현하여 균형 잡힌 레이아웃과 가독성을 제공합니다.
<div style="display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 500px; margin: auto;">
<div style="display: flex; align-items: center; border: 1px solid #ddd; border-radius: 5px; padding: 5px; width: 100%; box-sizing: border-box; justify-content: space-between;">
<span style="white-space: nowrap; text-align: left;">전체값</span>
<input type="text" style="flex-grow: 1; margin: 0 10px; text-align: center; border: none; outline: none; font-size: 1em; min-width: 50px;">
<span style="white-space: nowrap; text-align: right;">의</span>
</div>
<div style="display: flex; align-items: center; border: 1px solid #ddd; border-radius: 5px; padding: 5px; width: 100%; box-sizing: border-box; justify-content: space-between;">
<span style="white-space: nowrap; text-align: left;">총합</span>
<input type="text" style="flex-grow: 1; margin: 0 10px; text-align: center; border: none; outline: none; font-size: 1em; min-width: 50px;">
<span style="white-space: nowrap; text-align: right;">이</span>
</div>
<!-- 필요에 따라 추가 입력 박스를 복사해서 아래에 붙여 넣으세요 -->
</div>코드 설명
<div> (컨테이너 요소) display: flex; flex-direction: column;을 사용하여 내부 박스들이 세로로 정렬됩니다.align-items: center;로 모든 내부 박스들이 화면 중앙에 정렬됩니다.gap: 20px;으로 각 입력 박스 사이에 20px 간격을 추가해 가독성을 높였습니다.max-width: 500px;로 최대 너비를 제한하여 화면에 적절히 맞도록 했으며, margin: auto;로 수평 중앙에 배치됩니다.<div> (개별 입력 박스) display: flex; align-items: center;로 내부 요소들이 가로로 나란히 정렬되며 세로 중앙에 배치됩니다.border: 1px solid #ddd;와 border-radius: 5px;로 테두리와 둥근 모서리를 적용해 카드 형태의 UI 효과를 줍니다.padding: 5px;으로 내부 여백을 주어 요소들이 여유롭게 표시되도록 했고, width: 100%;로 너비를 컨테이너에 맞춰 채웁니다.justify-content: space-between;으로 좌우 텍스트와 입력란이 균형 있게 배치됩니다.<span> 요소들 (“전체값”, “의”, “총합”, “이”) white-space: nowrap;을 적용해 텍스트가 줄바꿈 없이 한 줄에 표시됩니다.text-align: left;와 text-align: right;로 각각의 텍스트를 입력란의 좌우에 고정해 일관성 있는 레이아웃을 유지합니다.<input> 요소 (텍스트 입력란) flex-grow: 1;로 설정하여 남는 공간을 입력란이 유연하게 채우도록 했습니다.margin: 0 10px;으로 좌우 여백을 추가하여 텍스트와 입력란 간격을 조정했습니다.text-align: center;로 입력 텍스트가 중앙에 정렬되며, min-width: 50px;으로 최소 너비를 설정해 가독성을 유지했습니다.border: none; outline: none;으로 기본 테두리와 외곽선을 제거해 깔끔한 디자인을 제공합니다.추가 설명
필요에 따라 개별 입력 박스를 복사하여 아래에 붙여 넣으면 동일한 스타일로 더 많은 입력 박스를 세로로 추가할 수 있습니다. 이 구조는 가독성이 높고 직관적인 세로형 입력 UI를 구현하는 데 유용합니다.
코드 설명
<div> (컨테이너 요소) display: flex; flex-direction: column;을 사용하여 자식 요소들이 세로로 배치되도록 설정했습니다.align-items: center;로 자식 요소들이 중앙에 정렬됩니다.gap: 20px;으로 각 입력 박스 사이에 20px의 간격을 두어 가독성을 높였습니다.max-width: 500px;으로 전체 너비를 500px로 제한하여 화면에 적절히 맞도록 설정하고, margin: auto;로 수평 중앙에 배치했습니다.<div> (개별 입력 박스) display: flex; align-items: center;로 내부 요소들을 가로로 정렬하고 세로 가운데에 배치했습니다.border: 1px solid #ddd;와 border-radius: 5px;로 테두리와 둥근 모서리를 적용하여 카드 형태의 시각적 효과를 주었습니다.padding: 5px;으로 내부 여백을 주어 요소들이 여유롭게 배치되도록 했으며, width: 100%;로 너비를 컨테이너에 맞췄습니다.justify-content: space-between;으로 좌우 텍스트와 입력란이 균형 있게 배치되도록 했습니다.<span> 요소들 (“전체값”, “의”, “총합”, “이”) white-space: nowrap;을 설정해 텍스트가 줄바꿈 없이 한 줄로 유지되도록 했습니다.text-align: left;와 text-align: right;로 각각의 텍스트를 입력란의 좌우에 고정하여 일관성 있는 레이아웃을 유지했습니다.<input> 요소 (텍스트 입력란) flex-grow: 1;을 사용하여 입력란이 남는 공간을 유연하게 채우도록 설정했습니다.margin: 0 10px;으로 좌우 여백을 추가해 좌우 텍스트와의 간격을 조정했습니다.text-align: center;로 입력 텍스트가 중앙에 정렬되며, min-width: 50px;으로 최소 너비를 설정해 가독성을 유지했습니다.border: none; outline: none;으로 기본 테두리와 외곽선을 제거해 깔끔한 디자인을 제공합니다.이 코드 구조는 세로로 정렬된 입력 박스 형태로, 각 박스가 화면 중앙에 정렬되며 가독성이 좋은 UI를 구성합니다. 필요에 따라 추가 입력 박스를 복사하여 쉽게 확장할 수 있습니다.
사람마다 성격은 모두 다르지만, 별자리로 출생일에 따른 성격 특성을 파악할 수 있습니다. 별자리는 서양 점성학에서…