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=”no” border_position=”all”][fusion_code]PGEgaHJlZj0iIyIgY2xhc3M9ImJhY2tfYnRfc3R5bGUiIG9uY2xpY2s9Imhpc3RvcnkuYmFjaygtMSk7IHJldHVybiBmYWxzZTsiPkJBQ0s8L2E+[/fusion_code][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” type=”flex”][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ spacing=”” center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_image_id=”” background_position=”left top” background_repeat=”no-repeat” hover_type=”none” border_color=”” border_style=”solid” border_position=”all” border_radius=”” box_shadow=”no” dimension_box_shadow=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” border_sizes_top=”0″ border_sizes_bottom=”0″ border_sizes_left=”0″ border_sizes_right=”0″ 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 선택자란 무엇인가

[/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=””]

CSS 선택자(CSS selector)는 CSS 스타일 규칙을 어떤 HTML 요소에 적용할지를 지정하는 패턴이나 규칙입니다. 선택자는 HTML 문서의 요소를 찾고, 해당 요소에 스타일을 적용하는 데 사용됩니다.

[/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=””]

선택자에 대해 알아봅시자

CSS 선택자는 웹 페이지의 요소와 일치하는 패턴입니다. 해당 선택자와 관련된 스타일 규칙이 선택자 패턴과 일치하는 요소에 적용됩니다.

선택자는 CSS의 가장 중요한 측면 중 하나입니다. 웹 페이지의 특정 요소를 다양한 방식으로 타겟팅하여 스타일을 지정할 수 있습니다.

CSS에서 여러 유형의 선택자를 사용할 수 있습니다.

유니버셜 셀렉터

별표 ( *) 로 표시된 범용 선택기 는 페이지의 모든 단일 요소와 일치합니다.

요소에 다른 조건이있는 경우 범용 선택기를 생략 할 수 있습니다. 이 선택기는 종종 빠른 테스트 목적으로 요소에서 기본 여백과 패딩을 제거하는 데 사용됩니다.

기본적으로 어떻게 작동하는지 이해하기 위해 다음 예제를 시도해 봅시다.

* {
    margin: 0;
    padding: 0;
}

요소 유형 선택기

요소 유형 선택기는 문서에서 요소의 모든 인스턴스를 해당 요소 유형 이름과 일치시킵니다. 실제로 어떻게 작동하는지보기위한 예를 들어 보자.

p {
    color: blue;
}

ID 선택기

id 선택기는 단일 또는 고유 요소에 대한 스타일 규칙을 정의하는 데 사용됩니다 .

id 선택기는 해시 부호 ( #) 로 정의되고 그 뒤에 id 값이옵니다.

#test-text-name {
    color: red;
}

클래스 선택기

클래스 선택기를 사용하여 class속성 이있는 HTML 요소를 선택할 수 있습니다 . 해당 클래스를 가진 모든 요소는 정의 된 규칙에 따라 형식이 지정됩니다.

클래스 선택기는 마침표 ( .)와 클래스 값 바로 뒤에 정의됩니다 .

.color-blue {
    color: blue;
}

위의 스타일 규칙은 class속성이로 설정된 문서의 모든 요소를 ​​텍스트로 파란색으로 렌더링합니다 color-blue. 좀 더 구체적으로 만들 수 있습니다. 예를 들면 다음과 같습니다.

p.color-blue {
    color: blue;
}

선택기 내부의 스타일 규칙 은 속성이로 설정되어 있고 다른 단락에는 영향을 미치지 않는 요소 p.color-blue만 파란색으로 텍스트를 렌더링합니다 .

classcolor-blue

후손 선택기

예를 들어, 모든 앵커 요소를 대상으로하지 않고 순서가없는 목록에 포함 된 앵커 만 대상으로하려는 경우 다른 요소의 하위 요소 인 요소를 선택해야 할 때이 선택기를 사용할 수 있습니다. 그것이 어떻게 작동하는지 봅시다 :

ul.menu li a {
    text-decoration: none;
}
h1 em {
    color: green;
}

선택기 내부의 스타일 규칙 은 클래스가 있는 요소 내부에 포함 된 요소 ul.menu li a에만 적용되며 문서 내의 다른 링크에는 영향을 미치지 않습니다.

.menu 마찬가지로 h1 em선택기 내부의 스타일 규칙은 요소 내에 포함되어 있고 다른 요소 에는 영향을주지 않는 요소 에만 적용됩니다 .

아동 선별기

하위 선택기는 일부 요소의 직계 하위 요소 만 선택하는 데 사용됩니다.

자식 선택기는보다 큼 기호 ( >)로 구분 된 두 개 이상의 선택기로 구성됩니다 . 예를 들어이 선택기를 사용하면 둘 이상의 레벨이있는 ​​중첩 된 목록 내에서 첫 번째 레벨의 목록 요소를 선택할 수 있습니다. 작동 방식을 이해하기 위해 예제를 확인하십시오.

ul > li {
    list-style: square;
}
ul > li ol {
    list-style: none;
}

인접 형제 선택기

인접한 형제 선택기는 형제 요소 (즉, 동일한 레벨의 요소)를 선택하는 데 사용할 수 있습니다. 이 선택기의 구문은 E1 + E2입니다. 여기서 E2는 선택기의 대상입니다.

h1 + p다음 예제 의 선택기 

는 및 요소 가 모두 문서 트리에서 동일한 부모를 공유 하고 요소로 앞에있는 경우에만 요소 를 선택합니다.  즉, 각 제목 바로 다음에 나오는 단락에만 관련 스타일 규칙이 적용됩니다. 이 선택기가 실제로 어떻게 작동하는지 봅시다 :

h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}

일반 형제 선택기

일반 형제 선택기는 인접한 형제 선택기 (E1 + E2)와 유사하지만 덜 엄격합니다. 일반 형제 선택기는 물결표 ( ∼) 문자로 구분 된 두 개의 간단한 선택기로 구성됩니다 . E1 ~ E2와 같이 쓸 수 있습니다. 여기서 E2는 선택기의 대상입니다.

h1 ∼ p아래 예제 의 선택기 는 요소 앞에 오는 모든 요소를 선택합니다.

여기서 모든 요소는 문서 트리에서 동일한 부모를 공유합니다.

h1 ∼ p {
    color: blue;
    font-size: 18px;
}
ul.task ∼ p {
    color: #f0f;
    text-indent: 30px;
}

속성 선택기 , 유사 클래스 , 유사 요소 와 같은보다 정교한 선택기가 있습니다 . 다음 장에서 이러한 선택기에 대해 자세히 설명합니다.

선택기 그룹화

스타일 시트의 여러 선택기가 동일한 스타일 규칙 선언을 공유하는 경우가 종종 있습니다. 스타일 시트에서 코드를 최소화하기 위해 쉼표로 구분 된 목록으로 그룹화 할 수 있습니다. 또한 동일한 스타일 규칙을 반복해서 반복하지 못하게합니다. 한 번 보자:

h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}

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