CSS란 무엇이며 사용방법에 대해 알아보자

[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는 Cascading Style Sheets의 약자로, 웹 페이지의 스타일과 레이아웃을 정의하는 데 사용되는 스타일 시트 언어입니다. HTML로 작성된 웹 페이지의 디자인과 표현 방식을 다루는 역할을 합니다.

CSS를 사용하여 웹 페이지에 스타일을 적용하면 다음과 같은 이점을 얻을 수 있습니다:

1. 일관된 디자인: CSS를 사용하면 웹 페이지의 모든 요소에 일관된 스타일을 적용할 수 있습니다. 텍스트 스타일, 색상, 배경, 여백, 폰트 등을 통일된 방식으로 지정할 수 있습니다.
2. 유지 보수 용이성: CSS를 사용하면 스타일을 별도의 스타일 시트 파일에 작성할 수 있습니다. 이렇게 분리된 스타일 시트는 여러 웹 페이지에서 재사용할 수 있으며, 스타일을 수정할 때에도 해당 파일만 수정하면 되므로 유지 보수가 용이합니다.
3. 레이아웃 제어: CSS를 사용하여 웹 페이지의 레이아웃을 정의할 수 있습니다. 여러 요소를 위치시키고 크기를 조정하며, 반응형 디자인을 구현하여 다양한 화면 크기에 대응할 수 있습니다.
4. 접근성 개선: CSS를 사용하여 웹 페이지의 구조와 스타일을 분리하면, 스크린 리더 등의 보조 기술을 사용하는 사용자들에게 웹 페이지의 내용을 더욱 쉽게 접근할 수 있는 환경을 제공할 수 있습니다.

CSS는 선택자와 선언 블록으로 구성되며, 선택자는 스타일을 적용할 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에서 ID와 Class를 선언할 때 유의해야 할 사항이 있습니다.

1. ID 선택자(ID Selectors):
   • ID는 문서 내에서 고유해야 합니다. 따라서 하나의 요소에 대해서만 사용해야 합니다.
   • ID는 #으로 시작하며, 예를 들면 “#my-id”와 같이 표현됩니다.
   • ID 선택자는 특정 요소를 정확하게 식별하고 스타일을 적용하는 데 사용됩니다.
2. Class 선택자(Class Selectors):
   • Class는 여러 요소에 동시에 사용할 수 있습니다.
   • Class는 .으로 시작하며, 예를 들면 “.my-class”와 같이 표현됩니다.
   • Class 선택자는 비슷한 스타일을 여러 요소에 적용하고자 할 때 유용합니다.
3. 우선순위(Priority):
   • ID 선택자는 Class 선택자보다 우선 순위가 높습니다. 즉, 동일한 속성을 가진 ID와 Class가 있을 경우 ID의 스타일이 우선적으로 적용됩니다.
   • 그러나 ID를 남발하여 사용하면 스타일의 관리가 어려워질 수 있으므로 적절하게 사용하는 것이 중요합니다.
4. 스타일 우선순위(Style Specificity):
   • 여러 선택자가 동일한 요소를 선택할 경우, 스타일 우선순위에 따라 스타일이 적용됩니다.
   • ID 선택자의 우선순위가 가장 높고, 그 다음이 Class 선택자입니다.
   • 또한, 스타일 우선순위는 선택자 내에서 나타나는 순서에도 영향을 받습니다. 나중에 선언된 스타일이 이전에 선언된 스타일을 덮어씁니다.
5. ID와 Class의 사용:
   • ID는 주로 고유한 요소에 스타일을 적용할 때 사용합니다. 예를 들어, 특정한 메뉴 항목이나 헤더 등에 스타일을 적용할 때 유용합니다.
   • Class는 비슷한 스타일을 가진 여러 요소에 스타일을 적용할 때 사용합니다. 예를 들어, 여러 개의 버튼이나 링크에 동일한 스타일을 적용할 때 유용합니다.

이러한 유의사항을 기억하면 CSS에서 ID와 Class를 효과적으로 활용하여 웹 페이지를 스타일링할 수 있습니다.

[/fusion_text][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=”default” rule_size=”” rule_color=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” font_size=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” line_height=”” letter_spacing=”” text_color=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

첫번째, CSS 사용시에 ID와 CLASS Name 을 정하여 입력할때 숫자를 사용하게되면 적용되지 않는 현상을 확인할수 있습니다. ID와 CLASS 네임은 정상적으로 보이더라도 실제 CSS Style을 선언시에는 적용되지 않습니다.

ex)
<p class=”01(숫자)선택자”> test</p>

두번째, 실제  혼자서 코딩을 하다보면 그때그때의 상황에 맞춰 class 및 id를 구성하기때문에  css를 제대로 활요하기 위해서는 css 의 우선 순위를 정하고 진행하는 것이 매우 중요하다고  볼 수 있습니다. 기본적으로 id는 class 보다 우선순위를 가지고 있으며 style sheet 상에서 먼저 작성된 css 선언보다는 후에 작성된 형태가 우선시 되는것을 알 수 있습니다.

ex_01)
ID > CLASS (ID 와 CLASS  둘중 ID 가 우선순위에 있다.)

<p id=”선택자”> test</p>

<p id=”선택자” class=”선택자”> test</p>

ex_02) 동일한 ID값의 선언 중 우선순위는 나중에 작성된 ID 또는 CLASS 값이 우선순위를 가집니다.

선작성(윗줄에 먼저 작성된 부분) < 후작성 ( 아랫줄에 작성된 부분)

이외에도 !important라는 문구로 우선순위를 강제하는 방법도 있습니다.

개인적으로 코딩에 정답은 없지만 기본룰에 맞춰서 한다면 좀더 효율적인 방법으로 성과를 만들수 있습니다.

[/fusion_text][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” font_size=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” line_height=”” letter_spacing=”” text_color=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””][fusion_fontawesome icon=”fa-info-circle fas” size=”24″ flip=”” rotate=”” spin=”no” link=”” linktarget=”_self” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” iconcolor=”” iconcolor_hover=”” circle=”” circlecolor=”” circlecolor_hover=”” circlebordersize=”” circlebordercolor=”” circlebordercolor_hover=”” icon_hover_type=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””][/fusion_fontawesome]css에 대해 더 알아보자[/fusion_text][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=””]

ID와 Class 중 어떤 걸 선언하는 게 더 좋아?

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

ID와 Class 중 어떤 것을 선언하는 것이 좋을지는 사용하는 상황과 목적에 따라 다릅니다.

ID를 선언하는 경우:

• 고유한 요소에 스타일을 적용하고자 할 때 사용합니다. 예를 들어, 특정한 메뉴 항목이나 헤더 등과 같이 문서 내에서 유일한 요소에 스타일을 적용할 때 유용합니다.
• JavaScript와 연동하여 특정 요소를 조작하고 식별하는 데에도 유용합니다.

Class를 선언하는 경우:

• 비슷한 스타일을 가진 여러 요소에 스타일을 적용하고자 할 때 사용합니다. 예를 들어, 여러 개의 버튼이나 링크에 동일한 스타일을 적용하고 싶을 때 유용합니다.
• 여러 요소에 동시에 스타일을 적용할 수 있으므로, 스타일의 재사용성을 높일 수 있습니다.
• JavaScript와 연동하여 특정 요소들을 선택하여 처리하는 데에도 효과적입니다.

일반적으로는 Class를 사용하는 경우가 많습니다. Class를 사용하면 스타일의 재사용성이 높아지고 관리도 용이해집니다. 그러나 특정한 요소에만 스타일을 적용해야 할 경우에는 ID를 사용하는 것이 좋습니다.

따라서, 사용하고자 하는 요소의 특성과 목적에 맞게 ID와 Class를 선택하여 적절하게 사용하시면 됩니다.

[/fusion_text][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에서는 ID와 Class 선택자 외에도 다양한 선택자를 사용할 수 있습니다. 몇 가지 대표적인 선택자를 소개해 보자면 아래와 같습니다.

1. 요소 선택자 (Element Selectors):
   • HTML 요소의 이름을 사용하여 스타일을 적용합니다. 예를 들어, p는 모든 <p> 요소를 선택하는 선택자입니다.
   • 요소 선택자는 모든 해당 요소에 스타일을 적용하고자 할 때 유용합니다.
2. 후손 선택자 (Descendant Selectors):
   • 요소의 하위 요소를 선택하는 선택자입니다. 예를 들어, div p는 <div> 요소 내부의 모든 <p> 요소를 선택하는 선택자입니다.
   • 후손 선택자는 특정 요소의 하위 요소에만 스타일을 적용하고자 할 때 유용합니다.
3. 자식 선택자 (Child Selectors):
   • 요소의 직계 자식 요소를 선택하는 선택자입니다. 예를 들어, ul > li는 <ul> 요소의 직계 자식인 모든 <li> 요소를 선택하는 선택자입니다.
   • 자식 선택자는 특정 요소의 직계 자식에만 스타일을 적용하고자 할 때 유용합니다.
4. 가상 클래스 선택자 (Pseudo-Class Selectors):
   • 특정 상태나 위치에 있는 요소를 선택하는 선택자입니다. 예를 들어, :hover는 마우스가 요소 위에 올라갔을 때의 상태를 선택하는 선택자입니다.
   • 가상 클래스 선택자는 인터랙션과 관련된 스타일을 적용하고자 할 때 유용합니다.
5. 가상 요소 선택자 (Pseudo-Element Selectors):
   • 요소의 특정 부분을 선택하는 선택자입니다. 예를 들어, ::before는 요소의 내용 앞에 가상 요소를 생성하여 스타일을 적용하는 선택자입니다.
   • 가상 요소 선택자는 요소의 특정 부분에 스타일을 추가하고자 할 때 유용합니다.

이 외에도 여러 종류의 선택자가 있으며, 이를 조합하여 더 다양한 선택 규칙을 만들어낼 수 있습니다. 선택자를 적절히 활용하여 원하는 요소를 정확하게 선택하고 스타일을 적용해 보세요.

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