안녕하세요! 오늘은 html 태그 중, select box의 스타일을 바꾸는 방법에 대해서 포스팅해보려고 합니다.
태그 생성부터 차근차근 진행해 볼 테니 포스팅을 보며 따라 해 보셔도 좋을것 같아요~
우선 html에 select 태그를 하나 생성해서 결과를 확인해 보겠습니다.
[html]
<html>
<body>
<select>
<option value="selectOption1" selected="selected">선택 옵션1</option>
<option value="selectOption2">선택 옵션2</option>
</select>
</body>
</html>
위와 같이 익숙하게 봐왔던 select box 하나를 만들어 보았습니다. 그런데 이렇게 만든 select box의 크기나 세부 옵션의 길이, 색상 또는 화살표 이미지를 내가 원하는 모양으로 변경하고 싶을 때가 있는데 직접 태그의 스타일을 바꾸기에는 많은 제한이 있습니다.
그래서 ul과 li 태그를 이용하여 select box를 자유롭게 수정할 수 있는 형식으로 만들고 select box의 옵션을 변경해 줄 수 있도록 기능을 부여한 후, 스타일 변경이 힘든 셀렉트 박스는 숨기는 방법을 사용해 select menu를 만들어 보려 합니다. 그럼 하나씩 만들어 볼까요?
1. reset.css 적용과 jquery import
[html]
<html>
<head>
<link rel="stylesheet" href="reset.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
</body>
<html>
먼저 ul과 li 태그를 내가 원하는 스타일로 변경하기 위해 브라우저의 기본 속성은 초기화해주겠습니다.
자세한 내용은 아래 링크를 확인해 보시면 더 잘 이해할 수 있습니다.
https://frontendstory.tistory.com/2
CSS 초기화 (Reset CSS)
안녕하세요! 오늘은 CSS 초기화에 대한 내용을 정리해 보려 합니다. 웹페이지를 만들며 자주 사용하는 태그가 있으신가요? 기본적으로 사용하는 태그들을 나열하여 페이지를 하나 만들어 보겠습
frontendstory.tistory.com
또한 jquery 사용을 위해 3.6.0버전의 jquery를 cdn을 이용하여 추가해 주었습니다.
2. ul 과 li 태그를 이용하여 select 영역과 option 영역 만들기
[html]
<html>
<head>
<link rel="stylesheet" href="reset.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="area-custom-select">
<div class="custom-select" tabindex="0">
<span class="custom-select-text">선택 옵션1</span>
<img src="select_arrow.png" class="custom-select-arrow">
</div>
<ul class="custom-select-list" style="display:none;">
<li value="selectOption1" class="custom-select-option">선택 옵션1</li>
<li value="selectOption2" class="custom-select-option">선택 옵션2</li>
</ul>
<select class="select-origin">
<option value="selectOption1" selected="selected">선택 옵션1</option>
<option value="selectOption2">선택 옵션2</option>
</select>
</div>
</body>
<html>
스타일 변경을 위한 영역을 ul과 li 태그를 이용해 만들어 주었습니다.
custom-select 클래스 이름으로 선택이 완료되었을 때 표시할 영역을 만들어 주고 span 태그와 img 태그를 이용하여 선택 완료된 텍스트와 화살표 이미지를 추가해 주었습니다. 변경하고 싶은 셀렉트 박스의 화살표 이미지를 준비하여 select_arrow.png 이름으로 추가해 주었습니다. tabindex 속성의 경우 마우스가 포커스 되어있는지 아닌지를 구분하기 위한 속성입니다.
ul과 li 태그를 이용해 세부 옵션 영역을 만들어 줍니다. 초기에는 보이지 않아야 하므로 style="display:none;" 속성을 추가해 가려주었습니다.
select-origin 클래스 이름을 갖는 select 태그는 이후 select 내부 값을 변경하고 가려줄 예정입니다.
3. 만든 html 태그에 css를 이용해 style 주기
[css]
.area-custom-select {
position: relative;
width: 400px;
height: 150px;
margin: 50px auto;
}
.custom-select {
display: inline-block;
width: 260px;
height: 48px;
border: solid 1px #c4ccd8;
background-color: #ffffff;
box-sizing: border-box;
font-size: 18px;
cursor: pointer;
position: relative;
outline: 0px;
}
.select-origin {
position: absolute;
right: 10px;
}
.custom-select-text {
position: absolute;
top: 14px;
left: 15px;
}
.custom-select-arrow {
position: absolute;
top: 20px;
right: 15px;
}
.custom-select-list {
position: absolute;
font-size: 18px;
width: 260px;
height: 96px;
z-index: 15;
border: solid 1px #c4ccd8;
background-color: #ffffff;
text-align: left;
margin-top: -3px;
box-sizing: border-box;
}
.custom-select-option {
height: 48px;
line-height: 48px;
padding-left: 15px;
cursor: pointer;
box-sizing: border-box;
}
.custom-select-option:hover {
color: #ffffff;
background-color: #1172c4;
box-sizing: border-box;
}
이제 만들어진 태그에 css를 이용해 스타일을 줘 보겠습니다. select 태그에 직접 스타일을 줄 때 보다 div 태그나 ul, li 태그의 속성을 변경하면 쉽게 스타일 변경이 가능합니다. 각자 영역을 잡아주고 크기와 색상, 배경색을 바꿔 줍니다. 세부 옵션의 경우 :hover 선택자를 사용하여 마우스가 올라갔을 때의 색상을 변경하였습니다.
4. jquery를 이용하여 이벤트 추가
[js]
let selectFlag;
$('.custom-select').on('click', function() {
$(this).toggleClass('selected');
if($(this).hasClass('selected')) {
$('.custom-select-list').show();
} else {
$('.custom-select-list').hide();
}
})
$('.custom-select').on('focusin', function() {
$('.custom-select-list').show();
});
$('.custom-select').on('focusout', function() {
if(!selectFlag) {
$('.custom-select-list').hide();
}
$(this).removeClass('selected');
});
$('.custom-select-option').on('mouseenter', function() {
selectFlag = true;
});
$('.custom-select-option').on('mouseout', function() {
selectFlag = false;
});
$('.custom-select-option').on('click', function() {
let value = $(this).attr('value');
$('.custom-select-text').text($(this).text());
$('.select-origin').val(value);
$('.custom-select-list').hide();
$('.select-origin').find('option').each(function(index, el) {
if($(el).attr('value') == value) {
$(el).attr('selected', 'selected');
} else {
$(el).removeAttr('selected');
}
});
});
custom-select 영역에 tabindex="0" 속성을 사용할 경우 현재 마우스 커서가 포커스 되었는지 아닌지 구분할 수 있는 focusin / focusout 이벤트를 사용할 수 있습니다.
focusin의 경우 세부 옵션을 보여주고 focusout의 경우 세부 옵션을 가려주었습니다.
세부 옵션에는 mouseenter / mouseout 이벤트를 사용하여 현재 마우스가 세부 옵션 영역 위인지 영역 밖인지를 구분하였습니다. 옵션 영역 위일 경우와 아닌 경우를 구분하여 selectFlag 값을 변경해 주었습니다.
selectFlag 값에 따라 영역 밖을 클릭했을 때 세부 옵션을 가릴지를 결정합니다.
custom-select-option 클래스를 가지는 세부 옵션을 클릭했을 때 select-origin 클래스 이름을 가진, 원래 셀렉트 박스 내부 값을 변경해 줍니다. 결과 화면을 확인해 볼까요?
위와 같이 왼쪽은 div, ul, li 태그를 이용하여 스타일 변경이 쉬운 custom select 영역을 만들었습니다.
여기에 이벤트를 부여하여 선택한 옵션 값으로 오른쪽의 진짜 select 태그 내부의 속성과 값을 바꿔준 후
마지막으로 select 태그를 style="display:none;" 속성으로 가려 주면 됩니다.
오늘은 select box 스타일을 변경하는 방법에 대해 알아보았습니다. 그럼 다음에 또 다른 내용으로 찾아오겠습니다. 그럼 이만!
댓글