세로형 및 가로형 입력 박스 UI 디자인 예제 코드 모음

HTML과 CSS만을 사용하여 다양한 입력 박스 UI를 디자인하는 예제 코드를 소개합니다. 세로형 및 가로형 입력 박스를 중앙 또는 좌측 정렬로 배치하고, 텍스트와 입력란을 깔끔하게 정렬하는 방법을 다룹니다. 실용적이고 가독성 높은 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;으로 글자 크기와 색상을 설정했습니다.

독창적인 링크 버튼 디자인 모음: 스타일과 색상으로 돋보이는 UI 구현

이 코드의 구조는 화면에 “입력명” 라벨과 텍스트 입력란, 그리고 입력란 오른쪽에 추가 설명을 보기 좋게 배치합니다.

좌우 배치된 입력 박스 UI 구성 코드

전체값 의

총합 이

<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를 구현합니다.

좌우 균형 잡힌 입력 박스 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를 구현하여 균형 잡힌 레이아웃과 가독성을 제공합니다.

세로형 중앙 정렬 입력 박스 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;으로 기본 테두리와 외곽선을 제거해 깔끔한 디자인을 제공합니다.

독창적인 H2태그 디자인 예제 모음: 가독성과 개성을 높이는 스타일링

추가 설명

필요에 따라 개별 입력 박스를 복사하여 아래에 붙여 넣으면 동일한 스타일로 더 많은 입력 박스를 세로로 추가할 수 있습니다. 이 구조는 가독성이 높고 직관적인 세로형 입력 UI를 구현하는 데 유용합니다.

세로형 좌측 정렬된 입력 박스 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를 구성합니다. 필요에 따라 추가 입력 박스를 복사하여 쉽게 확장할 수 있습니다.

입력란과 라벨을 포함한 가로형 입력 UI 구성 코드

좌우 배치된 입력 박스 UI 구성 코드

좌우 균형 잡힌 입력 박스 UI 구성 코드

세로형 중앙 정렬 입력 박스 UI 구성 코드

세로형 좌측 정렬된 입력 박스 UI 구성 코드

이 글 공유하기:

관련된 글: