html“select”요소의 옵션 스타일을 지정하는 방법은 무엇입니까?
내 HTML은 다음과 같습니다.
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
CSS 만 사용하여 제품 이름 (예 : 'Product1', 'Product2'등)을 굵게 표시하고 범주 (전자 제품, 스포츠 등)를 기울임 꼴로 표시하고 싶습니다. HTML과 CSS를 사용하는 것이 불가능하다고 언급 한 오래된 질문을 찾았지만 지금은 해결책이 있기를 바랍니다.
<option>요소에 적용 할 수있는 몇 가지 스타일 속성 만 있습니다 .
이는이 유형의 요소가 "대체 된 요소"의 예이기 때문입니다. OS에 따라 다르며 HTML / 브라우저의 일부가 아닙니다. 를 통해 스타일을 지정할 수 없습니다 CSS.
대체 플러그인 / 라이브러리처럼 <select>보이지만 실제로 스타일을 지정할 수 있는 일반 HTML요소 로 구성되어 있습니다.
아니요, 이러한 요소의 스타일은 사용자의 OS에서 처리되므로 불가능합니다. MSDN은 여기에 귀하의 질문에 답변합니다 :
를 제외
background-color하고color, 옵션 요소에 대한 스타일 개체를 통해 적용된 스타일 설정은 무시됩니다.
옵션 요소의 스타일을 어느 정도 지정할 수 있습니다.
* CSS 태그를 사용하면 시스템에서 그린 상자 안의 옵션 스타일을 지정할 수 있습니다.
예:
#ddlProducts *
{
border-radius:15px;
background-color:red;
}
다음과 같이 보일 것입니다 :
나는 발견하고 모든 당신 want.Here가있다 선택 선택 스타일링의 좋은 예를 사용하여 options.You이 함께 할 수있는 바이올린
html
<select id="selectbox1">
<option value="">Select an option…</option>
<option value="aye">Aye</option>
<option value="eh">Eh</option>
<option value="ooh">Ooh</option>
<option value="whoop">Whoop</option>
</select>
<select id="selectbox2">
<option value="">Month…</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
CSS
body {
padding:50px;
background-color:white;
}
.s-hidden {
visibility:hidden;
padding-right:10px;
}
.select {
cursor:pointer;
display:inline-block;
position:relative;
font:normal 11px/22px Arial, Sans-Serif;
color:black;
border:1px solid #ccc;
}
.styledSelect {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:white;
padding:0 10px;
font-weight:bold;
}
.styledSelect:after {
content:"";
width:0;
height:0;
border:5px solid transparent;
border-color:black transparent transparent transparent;
position:absolute;
top:9px;
right:6px;
}
.styledSelect:active, .styledSelect.active {
background-color:#eee;
}
.options {
display:none;
position:absolute;
top:100%;
right:0;
left:0;
z-index:999;
margin:0 0;
padding:0 0;
list-style:none;
border:1px solid #ccc;
background-color:white;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}
.options li {
padding:0 6px;
margin:0 0;
padding:0 10px;
}
.options li:hover {
background-color:#39f;
color:white;
}
JS
// Iterate over each select element
$('select').each(function () {
// Cache the number of options
var $this = $(this),
numberOfOptions = $(this).children('option').length;
// Hides the select element
$this.addClass('s-hidden');
// Wrap the select element in a div
$this.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
$this.after('<div class="styledSelect"></div>');
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
// Insert an unordered list after the styled div and also cache the list
var $list = $('<ul />', {
'class': 'options'
}).insertAfter($styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
// Cache the list items
var $listItems = $list.children('li');
// Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
$styledSelect.click(function (e) {
e.stopPropagation();
$('div.styledSelect.active').each(function () {
$(this).removeClass('active').next('ul.options').hide();
});
$(this).toggleClass('active').next('ul.options').toggle();
});
// Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
// Updates the select element to have the value of the equivalent option
$listItems.click(function (e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
/* alert($this.val()); Uncomment this for demonstration! */
});
// Hides the unordered list when clicking outside of it
$(document).click(function () {
$styledSelect.removeClass('active');
$list.hide();
});
});
selectChrome에서 CSS를 직접 설정할 수있는 것 같습니다 . 아래에 제공된 CSS 및 HTML 코드 :
.boldoption {
font-weight: bold;
}<select>
<option>Some normal-font option</option>
<option>Another normal-font option</option>
<option class="boldoption">Some bold option</option>
</select>
부트 스트랩 및 / 또는 jquery를 사용 <option>하는 <select>경우 스타일 을 지정하는 몇 가지 방법이 있습니다 . 나는 이것이 원래 포스터가 요구하는 것이 아니라는 것을 이해하지만이 질문에 걸려 넘어지는 다른 사람들을 도울 수 있다고 생각했습니다.
각 스타일을 <option>개별적 으로 스타일링한다는 목표를 달성 할 수 있지만 스타일을 적용해야 할 수도 <select>있습니다. 내가 가장 좋아하는 것은 아래 언급 된 "Bootstrap Select"라이브러리입니다.
부트 스트랩 선택 라이브러리 (jquery)
부트 스트랩을 이미 사용중인 경우 부트 스트랩 테마가 있으므로 부트 스트랩 선택 라이브러리 또는 아래의 라이브러리를 사용해보십시오 .
전체 select요소 또는 option요소를 개별적 으로 스타일링 할 수 있습니다.
예 :
종속성 : jQuery v1.9.1 +, Bootstrap , Bootstrap의 dropdown.js 구성 요소 및 Bootstrap의 CSS가 필요합니다.
호환성 : 확실하지 않지만 부트 스트랩에 따르면 "모든 주요 브라우저 및 플랫폼의 최신 안정 릴리스를 지원합니다"
데모 : https://developer.snapappointments.com/bootstrap-select/examples/
.special {
font-weight: bold !important;
color: #fff !important;
background: #bc0000 !important;
text-transform: uppercase;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
<select class="selectpicker">
<option>Mustard</option>
<option class="special">Ketchup</option>
<option style="background: #5cb85c; color: #fff;">Relish</option>
</select>Select2 (JS 라이브러리)
Select2 라는 라이브러리를 사용할 수 있습니다 .
종속성 : 라이브러리는 JS + CSS + HTML 전용입니다 (JQuery가 필요하지 않음).
호환성 : IE 8 이상, Chrome 8 이상, Firefox 10 이상, Safari 3 이상, Opera 10.6 이상
데모 : https://select2.org/getting-started/basic-usage
도있다 부트 스트랩 테마 가능합니다.
부트 스트랩 없음 예 :
$(function() {
var $select = $('.select2');
$select.select2({
theme: 'paper'
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<select class="select2 form-control" placeholder="Country">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>부트 스트랩 예 :
$(function() {
var $select = $('.select2');
$select.select2({
theme: 'paper'
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<select class="select2 form-control" placeholder="Country">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>MDBootstrap ($ 및 부트 스트랩 및 JQuery)
추가 돈이 있다면 프리미엄 라이브러리 MDBootstrap을 사용할 수 있습니다 . (이것은 전체 UI 키트 이므로 가볍지 않습니다)
머티리얼 디자인을 사용하여 선택 및 옵션 요소의 스타일을 지정할 수 있습니다 .
무료 버전이 있지만 귀여운 머티리얼 디자인을 사용할 수 없습니다!
종속성 : Bootstrap 4 , JQuery,
호환성 : "모든 주요 브라우저 및 플랫폼의 안정적인 최신 릴리스를 지원합니다."
데모 : https://mdbootstrap.com/docs/jquery/forms/select/#color
이미 언급했듯이 유일한 <select>기능 은 기능 을 대체하는 플러그인을 사용하는 것입니다.
jQuery 플러그인 목록 : http://plugins.jquery.com/tag/select/
Select2플러그인을 사용하여 예제를 살펴보십시오 . http://jsfiddle.net/swsLokfj/23/
부트 스트랩을 사용하면 데이터 내용을 통해 스타일을 사용할 수 있습니다.
<select class="selectpicker">
<option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>
예 : https://silviomoreto.github.io/bootstrap-select/examples/
테이블에서 클래스 토글을 사용하여 빠른 대안을 여기에 남겨 둡니다. 이 동작은 선택과 매우 유사하지만 각 하위 요소를 개별적으로 전환, 필터 및 색상으로 스타일 지정할 수 있습니다.
function toggleSelect(){
if (store.classList[0] === "hidden"){
store.classList = "viewfull"
}
else {
store.classList = "hidden"
}
}#store {
overflow-y: scroll;
max-height: 110px;
max-width: 50%
}
.hidden {
display: none
}
.viewfull {
display: block
}
#store :nth-child(4) {
background-color: lime;
}
span {font-size:2rem;cursor:pointer}<span onclick="toggleSelect()">⮋</span>
<div id="store" class="hidden">
<ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul>
</div>실제로 : before 및 : after를 추가하고 스타일을 지정할 수 있습니다. 적어도 뭔가
option{
font-size:18px;
background-color:#ffffff;
}
option:before{
content: ">";
font-size:20px;
display:none;
padding-right:10px;
padding-left:5px;
color:#fff;
}
option:hover:before{
display:inline;
}2017 년이며 특정 선택 옵션을 타겟팅 할 수 있습니다. 내 프로젝트에는 class = "variations" 테이블이 있고 select 옵션은 td = "value" 테이블 셀에 있으며 select는 ID가 select # pa_color 입니다. 옵션 요소에는 클래스 옵션 = "첨부" (다른 클래스 태그 중)도 있습니다. 사용자가 도매 고객으로 로그인 한 경우 모든 색상 옵션을 볼 수 있습니다. 그러나 소매 고객은 2 가지 색상 옵션을 구매할 수 없으므로 사용하지 않도록 설정했습니다.
<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>
약간의 논리가 필요했지만 다음은 비활성화 된 선택 옵션을 대상으로 한 방법입니다.
CSS
table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}
이를 통해 색상 옵션은 도매 고객에게만 표시됩니다.
이 요소는 HTML이 아닌 OS에 의해 렌더링됩니다. CSS를 통해 스타일을 지정할 수 없습니다.
$(function() {
var clicky;
var t=0;
$(document).mousedown(function(e) {
clicky = $(e.target);
});
$(document).mouseup(function(e) {
clicky = null;
});
$("select").focusout(function(e) {
if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) {
$(this).parents().children("span.selected").html(clicky.html());
$(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true);
}
$(this).parents().children("span.lists").html('');
});
$('select > option').text(function(i, text) {
var attr = $(this).attr('selected');
if (typeof attr !== typeof undefined && attr !== false) {
$(this).parents().parents().children("span.selected").html(text);
}
});
$("select").focusin(function(){
$(this).children('option').text(function(i, text) {
$(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>");
});
});
});select {
width: 0px;
height: 0px;
overflow:hidden;
outline: none;
border: none;
appearance:none;
-moz-appearance: none;
}
label{
display: inline-block;
padding: 5px 10px;
position: relative;
width: 100px;
height: 20px;
background-color:#ccc;
}
label .selected{
display: inline-block;
overflow: hidden;
width: 100%;
height: 100%;
}
label span.lists{
width: 100%;
display: inline-block;
position: absolute;
top: 100%;
left: 0px;
box-shadow: 0px 0px 2px 0px #ccc;
background-color:#fff;
z-index: 9;
}
label span.item{
display: inline-block;
width: 100%;
border-bottom: 1px solid #ccc;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="?" method="GET">
<label><span class="selected">select..</span> <span class="lists"></span>
<select name="test">
<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
<option value="2" selected>item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
</select>
</label><br>
<label><span class="selected">select..</span> <span class="lists"></span>
<select name="test2">
<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
<option value="2">item 2</option>
<option value="3" selected>item 3</option>
<option value="4">item 4</option>
</select>
</label><br>
<button>Submit</button>
</form>
</body>
</html>이것을 시도하면 도움이 될 수 있습니다.
[ https://codepen.io/venu9l/pen/jeNXzY][1]
확실히 작동합니다. select 옵션은 html이 아닌 OS에 의해 렌더링됩니다 . 이것이 CSS 스타일이 효과가없는 이유입니다. 일반적으로 option{font-size : value ; background-color:colorCode; border-radius:value; }
이것이 작동하지만 패딩, 여백 등을 사용자 정의 할 수는 없습니다.
아래 코드 100 %는 이 예제 에서 가져온 선택 태그를 사용자 정의합니다.
var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < selElmnt.length; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
for (k = 0; k < y.length; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
for (i = 0; i < y.length; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);/*the container must be positioned relative:*/
.custom-select {
position: relative;
font-family: Arial;
}
.custom-select select {
display: none; /*hide original SELECT element:*/
}
.select-selected {
background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
}
/*style items (options):*/
.select-items {
position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}<div class="custom-select" style="width:200px;">
<select>
<option value="0">Select car:</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>
</div><option>태그에 대해 일부 속성을 스타일 지정할 수 있습니다 .
font-familycolorfont-*background-color
또한 개별 <option>태그에 맞춤 글꼴을 사용할 수 있습니다 ( 예 : google font , Material Icons 또는 icomoon 등의 기타 아이콘 글꼴) . (글꼴 선택기 등에 유용 할 수 있습니다.)
이를 고려하여 글꼴 모음을 만들고 <option>태그에 아이콘을 삽입 할 수 있습니다 ( 예 :
<select>
<option style="font-family: 'Icons', 'Roboto', sans-serif;">a ★★★</option>
<option style="font-family: 'Icons', 'Roboto', sans-serif;">b ★★★★</option>
</select>
어디에서 ★가져온 Icons것이고 나머지는에서 온 것 Roboto입니다.
사용자 정의 글꼴은 모바일 선택에서 작동하지 않습니다.
인라인 스타일을 사용하여 <option>태그에 사용자 정의 스타일을 추가 할 수 있습니다 .
예를 들어 : <option style="font-weight:bold;color:#09C;">Option 1</option>이것은이 특정 <option>요소에만 스타일을 적용합니다 .
그런 다음 약간의 자바 스크립트 마법을 사용하여 인라인 스타일을 태그 <option>내의 모든 요소 에 적용 할 수 있습니다 <select>.
var select = $(document).getElementById('#select-element-id')
var option = select.children('#option-element-id')
option.css('font-weight', 'bold')
option.css('font-size', '24px')
<option value="" disabled> <br> </option>옵션 사이에 줄 바꿈을 추가 할 수도 있습니다.
클래스를 추가하고 font-weight : 700을 제공 할 수 있습니다. 옵션으로. 그러나 이것을 사용하면 모든 텍스트가 굵게 표시됩니다.
위에서 언급했듯이 실제로는 불가능합니다. 그러나 사용자가 필드와 상호 작용하기 전에 '제품 선택 ...'옵션과 같은 초기 상태의 스타일을 지정하려면 다음과 같이 할 수 있습니다.
아래 예제는 첫 번째 옵션을 빨간색으로 표시하고 사용자가 상호 작용하면 해당 옵션 (value = "defaultValue"가 설정 됨)을 제거하고 선택에 적용된 클래스를 제거합니다. 색상 이외의 다른 옵션도 적용 할 수 있지만 목록보기가 아닌 변경 한 필드에만 영향을줍니다.
CSS
.default-value{
color: red;
}
jQuery
$("select").addClass('default-value');
$("select").bind("focus", function () {
$(this).children('option[value="defaultValue"]').remove();
$(this).removeClass('default-value');
});
참고 URL : https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element
'IT' 카테고리의 다른 글
| ng-repeat의 마지막 요소에 대한 다른 클래스 (0) | 2020.06.13 |
|---|---|
| 파이썬의 인쇄 기능을 "해킹"할 수 있습니까? (0) | 2020.06.13 |
| ASP.NET Identity의 기본 암호 해셔-어떻게 작동하며 안전합니까? (0) | 2020.06.13 |
| 반복하는 동안 HashMap에서 키를 제거하는 방법은 무엇입니까? (0) | 2020.06.13 |
| 도커 컨테이너를 실행할 때 서비스를 자동으로 시작하는 방법은 무엇입니까? (0) | 2020.06.13 |