Input 스타일 CSS로 제어하기

[fusion_builder_container type=”flex” hundred_percent=”no” hundred_percent_height=”no” min_height_medium=”” min_height_small=”” min_height=”” hundred_percent_height_scroll=”no” align_content=”stretch” flex_align_items=”flex-start” flex_justify_content=”flex-start” flex_column_spacing=”” hundred_percent_height_center_content=”yes” equal_height_columns=”no” container_tag=”div” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” spacing_medium=”” margin_top_medium=”” margin_bottom_medium=”” spacing_small=”” margin_top_small=”” margin_bottom_small=”” margin_top=”” margin_bottom=”” padding_dimensions_medium=”” padding_top_medium=”” padding_right_medium=”” padding_bottom_medium=”” padding_left_medium=”” padding_dimensions_small=”” padding_top_small=”” padding_right_small=”” padding_bottom_small=”” padding_left_small=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” link_color=”” link_hover_color=”” border_sizes=”” border_sizes_top=”” border_sizes_right=”” border_sizes_bottom=”” border_sizes_left=”” border_color=”” border_style=”solid” box_shadow=”no” box_shadow_vertical=”” box_shadow_horizontal=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” z_index=”” overflow=”” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ background_color=”” background_image=”” skip_lazy_load=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” pattern_bg=”none” pattern_custom_bg=”” pattern_bg_color=”” pattern_bg_style=”default” pattern_bg_opacity=”100″ pattern_bg_size=”” pattern_bg_blend_mode=”normal” mask_bg=”none” mask_custom_bg=”” mask_bg_color=”” mask_bg_accent_color=”” mask_bg_style=”default” mask_bg_opacity=”100″ mask_bg_transform=”left” mask_bg_blend_mode=”normal” render_logics=”” absolute=”off” absolute_devices=”small,medium,large” sticky=”off” sticky_devices=”small-visibility,medium-visibility,large-visibility” sticky_background_color=”” sticky_height=”” sticky_offset=”” sticky_transition_offset=”0″ scroll_offset=”0″ animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ admin_label=”back_button_container” admin_toggled=”yes”][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ align_self=”auto” content_layout=”column” align_content=”flex-start” valign_content=”flex-start” content_wrap=”wrap” spacing=”” center_content=”no” column_tag=”div” link=”” target=”_self” link_description=”” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” type_medium=”” type_small=”” order_medium=”0″ order_small=”0″ dimension_spacing_medium=”” dimension_spacing_small=”” dimension_spacing=”” dimension_margin_medium=”” dimension_margin_small=”” margin_top=”” margin_bottom=”” padding_medium=”” padding_small=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” hover_type=”none” border_sizes=”” border_color=”” border_style=”solid” border_radius=”” box_shadow=”no” dimension_box_shadow=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” z_index_subgroup=”regular” z_index=”” z_index_hover=”” overflow=”” background_type=”single” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ background_color=”” background_image=”” background_image_id=”” lazy_load=”none” skip_lazy_load=”” background_position=”left top” background_repeat=”no-repeat” background_blend_mode=”none” render_logics=”” sticky=”off” sticky_devices=”small-visibility,medium-visibility,large-visibility” sticky_offset=”” filter_type=”regular” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ transform_type=”regular” transform_scale_x=”1″ transform_scale_y=”1″ transform_translate_x=”0″ transform_translate_y=”0″ transform_rotate=”0″ transform_skew_x=”0″ transform_skew_y=”0″ transform_scale_x_hover=”1″ transform_scale_y_hover=”1″ transform_translate_x_hover=”0″ transform_translate_y_hover=”0″ transform_rotate_hover=”0″ transform_skew_x_hover=”0″ transform_skew_y_hover=”0″ transform_origin=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” border_position=”all” first=”true”][fusion_code]PGEgaHJlZj0iIyIgY2xhc3M9ImJhY2tfYnRfc3R5bGUiIG9uY2xpY2s9Imhpc3RvcnkuYmFjaygtMSk7IHJldHVybiBmYWxzZTsiPkJBQ0s8L2E+[/fusion_code][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container type=”flex” hundred_percent=”no” hundred_percent_height=”no” min_height=”” hundred_percent_height_scroll=”no” align_content=”stretch” flex_align_items=”flex-start” flex_justify_content=”flex-start” flex_column_spacing=”” hundred_percent_height_center_content=”yes” equal_height_columns=”no” container_tag=”div” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” link_color=”” link_hover_color=”” border_sizes=”” border_sizes_top=”” border_sizes_right=”” border_sizes_bottom=”” border_sizes_left=”” border_color=”” border_style=”solid” spacing_medium=”” margin_top_medium=”” margin_bottom_medium=”” spacing_small=”” margin_top_small=”” margin_bottom_small=”” margin_top=”” margin_bottom=”” padding_dimensions_medium=”” padding_top_medium=”” padding_right_medium=”” padding_bottom_medium=”” padding_left_medium=”” padding_dimensions_small=”” padding_top_small=”” padding_right_small=”” padding_bottom_small=”” padding_left_small=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” box_shadow=”no” box_shadow_vertical=”” box_shadow_horizontal=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” z_index=”” overflow=”” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” absolute=”off” absolute_devices=”small,medium,large” sticky=”off” sticky_devices=”small-visibility,medium-visibility,large-visibility” sticky_background_color=”” sticky_height=”” sticky_offset=”” sticky_transition_offset=”0″ scroll_offset=”0″ animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ align_self=”auto” content_layout=”column” align_content=”flex-start” content_wrap=”wrap” spacing=”” center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” type_medium=”” type_small=”” order_medium=”0″ order_small=”0″ dimension_spacing_medium=”” dimension_spacing_small=”” dimension_spacing=”” dimension_margin_medium=”” dimension_margin_small=”” margin_top=”” margin_bottom=”” padding_medium=”” padding_small=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” hover_type=”none” border_sizes=”” border_color=”” border_style=”solid” border_radius=”” box_shadow=”no” dimension_box_shadow=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” background_type=”single” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ background_color=”” background_image=”” background_image_id=”” background_position=”left top” background_repeat=”no-repeat” background_blend_mode=”none” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_type=”regular” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ last=”true” border_position=”all” first=”true”][fusion_title title_type=”text” marquee_direction=”left” marquee_speed=”15000″ rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” title_link=”off” link_url=”” link_target=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” content_align_medium=”” content_align_small=”” content_align=”left” size=”3″ animated_font_size=”” fusion_font_family_title_font=”” fusion_font_variant_title_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” hue=”” saturation=”” lightness=”” alpha=”” animated_text_color=”” text_shadow=”no” text_shadow_vertical=”” text_shadow_horizontal=”” text_shadow_blur=”0″ text_shadow_color=”” text_stroke=”no” text_stroke_size=”1″ text_stroke_color=”” text_overflow=”none” margin_top_medium=”” margin_right_medium=”” margin_bottom_medium=”” margin_left_medium=”” margin_top_small=”” margin_right_small=”” margin_bottom_small=”” margin_left_small=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” margin_top_mobile=”” margin_bottom_mobile=”” gradient_font=”no” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ highlight_color=”” style_type=”default” sep_color=”” link_color=”” link_hover_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=””]

Input 스타일 CSS로 제어하기

[/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

input 코드로 구성된 입력창을 클릭했을 때 보여지는 테두리를 CSS로 제어하는 방법은 다양합니다. 일반적으로는 :focus 가상 클래스를 사용하여 테두리 스타일을 지정할 수 있습니다. 아래는 간단한 예시 코드입니다:

[/fusion_text][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

input 코드를 활용하여 button 또는 입력폼을 구축하였을때 해당 오브젝트를 클릭시에 나타나는 테두리를 숨기거나 다른 색상으로 변경하기

input:focus {outline:none;}

/* css 코드를 적용시 해당 오브젝트의 테두리가 나타는 부분을 없앨수 있음*/

※ 다른 색상 적용하기

input:focus {outline:2px solid #d50000;}

/*input 박스를 클릭 했을떄 나오는 테두리 색상 변경하기*/

위의 코드에서 input박스 요소에 기본적인 스타일을 적용합니다. 그리고 input:focus는 해당 박스가 포커스를 받았을 때의 스타일을 지정합니다. 위의 예시에서는 클릭 시 테두리 색상을 파란색으로 변경하도록 설정했습니다.

만약 다른 효과나 스타일을 적용하고 싶다면 :focus 가상 클래스를 사용하여 원하는 스타일을 지정하면 됩니다. 이렇게 설정하면 박스를 클릭했을 때 원하는 효과를 얻을 수 있습니다.

[/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_1″ layout=”1_1″ align_self=”auto” content_layout=”column” align_content=”flex-start” content_wrap=”wrap” spacing=”” center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” type_medium=”” type_small=”” order_medium=”0″ order_small=”0″ dimension_spacing_medium=”” dimension_spacing_small=”” dimension_spacing=”” dimension_margin_medium=”” dimension_margin_small=”” margin_top=”” margin_bottom=”” padding_medium=”” padding_small=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” hover_type=”none” border_sizes=”” border_color=”” border_style=”solid” border_radius=”” box_shadow=”no” dimension_box_shadow=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” background_type=”single” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ background_color=”” background_image=”” background_image_id=”” background_position=”left top” background_repeat=”no-repeat” background_blend_mode=”none” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_type=”regular” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ last=”true” border_position=”all” first=”true”][fusion_title title_type=”text” marquee_direction=”left” marquee_speed=”15000″ rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” title_link=”off” link_url=”” link_target=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” content_align_medium=”” content_align_small=”” content_align=”left” size=”3″ animated_font_size=”” fusion_font_family_title_font=”” fusion_font_variant_title_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” hue=”” saturation=”” lightness=”” alpha=”” animated_text_color=”” text_shadow=”no” text_shadow_vertical=”” text_shadow_horizontal=”” text_shadow_blur=”0″ text_shadow_color=”” text_stroke=”no” text_stroke_size=”1″ text_stroke_color=”” text_overflow=”none” margin_top_medium=”” margin_right_medium=”” margin_bottom_medium=”” margin_left_medium=”” margin_top_small=”” margin_right_small=”” margin_bottom_small=”” margin_left_small=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” margin_top_mobile=”” margin_bottom_mobile=”” gradient_font=”no” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ highlight_color=”” style_type=”default” sep_color=”” link_color=”” link_hover_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=””]

CSS 이외에 다른 방법으로도 테두리를 제어할 수 있을까요?

네, CSS 이외에도 JavaScript를 사용하여 테두리를 제어할 수 있습니다. JavaScript를 사용하면 동적으로 요소의 스타일을 변경할 수 있으므로, 특정 이벤트(예: 클릭)가 발생했을 때 테두리를 제어할 수 있습니다.

아래는 JavaScript를 사용하여 테두리를 제어하는 예시 코드입니다:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>
<script>
function addBorder() {
  var box = document.getElementById("box");
  box.style.borderColor = "blue";
}

function removeBorder() {
  var box = document.getElementById("box");
  box.style.borderColor = "#ccc";
}
</script>
</head>
<body>
<div id="box" class="box" onclick="addBorder()" onblur="removeBorder()">클릭해서 테두리를 변경해보세요.</div>
</body>
</html>

위의 코드에서 addBorder() 함수는 박스를 클릭했을 때 테두리 색상을 파란색으로 변경하고, removeBorder() 함수는 포커스가 해제됐을 때 테두리 색상을 기본 색상으로 변경합니다. 이를 위해 JavaScript의 getElementById() 메서드를 사용하여 해당 요소를 선택하고, style 속성을 통해 테두리 색상을 변경합니다.

JavaScript를 사용하면 더 다양한 동적인 효과를 적용할 수 있으므로, 상황에 맞게 활용할 수 있습니다.

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

Working Times

New Posts