[CSS] 버튼 CSS 효과 (입력 input 칸, 드롭다운 dropdown 메뉴 꾸미기)

 

 

 

 

 

 

 

 

프로그래밍 세계를 탐구합시다.

 

 

 

 

 

 

 

 

CSS 효과 (입력 input 칸, 버튼, 드롭다운 dropdown 메뉴 꾸미기)

 

 

CSS 효과를 활용하여 입력 칸, 버튼, 드롭다운 메뉴를 꾸밀 수 있습니다.

 

 

 

 

구현 화면

 

 

입력 칸에 1955년~2070년 사이의 연도만 입력하실 수 있습니다.를 placeholder로 기본으로 나타나게 했습니다.

입력 칸을 클릭할 시 문구가 사라지고 그림자 효과와 함께 언더바 색이 진하게 변하도록 했습니다.

 

드롭다운또한 선택했을 때 색이 변하도록 하였으며, 확인 버튼은 마우스를 올렸을 때 hover효과가 나타나도록 구현했습니다.

 

 

 

 

 

 

 

 

 

 

 

작성 코드

 

 

powerprice.html

 

  <div id="powerprice-container">
    <div id="input-container">
      <input type="number" id="powerprice-yearInput" min="0" placeholder="1955년~2070년 사이의 연도만 입력하실 수 있습니다." />
      <select class="year-dropdown" id="year-dropdown" onchange="updateYearInput()">
        <script>
          for (let i = 1955; i <= 2070; i++) {
            document.write('<option value="' + i + '">' + i + '</option>');
          }
        </script>
      </select>
    </div>
    <button onclick="getPowerPrice()">확인</button>
  </div>
  <p id="powerprice-result"></p> <!-- 여기에 결과를 표시합니다. -->

 

 

 

powerprice.css

 

.year-dropdown {
  /* 변경하고자 하는 스타일 추가 */
  font-size: 16px;
  /* 글자 크기를 크게 설정 */
  border: 2px solid #ce295b30;
  /* 테두리를 초록색으로 설정 */
  padding: 0.7rem;
  /* 내부 여백 설정 */
}

.year-dropdown:focus {
  border-color: #ce295b;
  /* 클릭했을 때 테두리 색을 변경 */
}

#powerprice-result {
  min-height: 3rem;
}

/* 결과값이 나와도 차트가 움직이지 않도록 */

#powerprice-container {
  display: flex;
  flex-direction: row;
  /* 추가: 아이템들을 수직으로 배열 */
  align-items: center;
  /* 변경: 아이템들을 가운데로 정렬 */
  justify-content: center;
  /* 추가: 수평 방향으로 가운데 정렬 */
  min-width: 70rem;
}

#input-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44%;
  /* 추가: 부모 요소의 전체 너비를 차지하도록 설정 */
}

#powerprice-yearInput {
  height: 2.5rem;
  width: 25rem;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 3px solid #ce295b30;
  padding-left: 1rem;
  margin-bottom: 3rem;
  font-family: "GongGothicLight", sans-serif;
  font-size: 0.9rem;
  margin-top: 3rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  /* 클릭 시 테두리 색상과 그림자 부드럽게 변경 */
}

#powerprice-yearInput::placeholder {
  font-family: "GongGothicLight", sans-serif;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.329);
}

#powerprice-yearInput:focus::placeholder {
  color: white;
  /* padding-left: 2rem; */
}

#powerprice-yearInput:focus {
  outline: none;
  /* 기본 테두리 제거 */
  border-color: #ce295b;
  /* 클릭 시 테두리 색상 변경 */
  box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
  /* 클릭 시 내부 그림자 효과 */
  padding-left: 1rem;
  caret-color: #ce295b9f;
}

button {
  background-color: #ff69b47a;
  /* 분홍색으로 버튼 색상 설정 */
  color: white;
  /* 버튼 내용(텍스트)을 흰색으로 설정 */
  border: none;
  /* 테두리 제거 */
  padding: 0.72rem 1rem;
  /* 내부 여백 설정 */
  text-align: center;
  /* 텍스트를 중앙으로 정렬 */
  display: inline-block;
  font-size: 16px;
  transition: all 0.5s;
  /* 효과를 부드럽게 만들기 위해 transition 속성 추가 */
  cursor: pointer;
  /* 마우스를 올렸을 때 커서 모양 변경 */
}

button:hover {
  background-color: #ce295b;
  /* 마우스를 올렸을 때의 버튼 색상 변경 */
  color: white;
  /* 마우스를 올렸을 때의 텍스트 색상 설정 */
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
  /* 마우스를 올렸을 때 그림자 효과 추가 */
}

 

 

 

 

 

구현 화면을 더 상세히 확인하고 싶다면 아래 사이트 참고 바랍니다.

 

 

https://ityrannosaurus.github.io/power/

내일의 전기세