Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

기초공사 (html,css,javascript)

css-우선순위 .w-300보다 .header-menu-item.w-300이 더 높다. 본문

academy/html

css-우선순위 .w-300보다 .header-menu-item.w-300이 더 높다.

에스프레소라떼 2024. 2. 29. 16:17 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>idclass선택자</title>

    <!-- 
        태그 선택자
        html 파일 안에 지정한 모든 요소 선택
        ex)
            p(요소명) {

            }
            div {

            }
            
            
            id, class 선택자 
                HTML 파일 안에 특정 고유 ID 혹은 특정 class속성을 지닌 요소를 선택
                ex)
                    #menu-item(#아이디명) {
                        ...CSS 문법
                    }

                    .manu-list(.클래스명) {
                        ...CSS 문법
                    }

            단, class는 한 요소에 중복 부여가 가능하다.
    -->

    <style>
      #header {
        height: 48px;
        background-color: yellow;
      }

      .header-menu {
        display: flex;
        justify-content: space-between;
      }

      .header-menu-item {
        background-color: pink;
      }

      .header-menu-item.w-300 {
        background-color: yellowgreen;
      }

      .w-300 {
        width: 300px;
        background-color: blue;
      }

      .menu-active {
        color: red;
      }
      /* 중복된 class에서는 나중에 나온것이 기존에 있떤 것을 덮어 씌운다 */
      /* 중복된 class에서는 여러 css속성을 부여하기 위함 뿐 아니라 
        동적으로 class추가 - javascript로..*/
    </style>
  </head>
  <body>
    <!-- 아이디.div입력후 #입력하고 header를 입력하면 아래처럼 자동완성된다. -->

    <div id="header">
      <menu class="header-menu">
        <div class="header-menu-item menu-active">아침메뉴</div>
        <div class="header-menu-item">점심메뉴</div>
        <div class="header-menu-item">저녁메뉴</div>
      </menu>
      <menu class="header-menu">
        <div class="header-menu-item w-300">아침메뉴w300</div>
        <div class="header-menu-item">점심메뉴</div>
        <div class="header-menu-item">저녁메뉴</div>
      </menu>

      <!-- class속성은 여러 요소를 선택하여 중복하여 CSS를 줄때 
            class =  w-300 flex-between font-red --- 공통되는 CSS 재사용 (어디에서나)

            어떤 특정한 CSS속성을 부여할 떄 사용
            header-menu-item 은 모두 이러한 CSS를 가지고 있어야 한다. (특정그룹)

            재사용의 여부는 디자이너와 협엽하는 것이 굉장히 중요하다.
            개발자가 아무런 소통을 하지 않는다면 힘든것은 개발자(최종생산자)
        -->

      <nav></nav>
    </div>

    <div id="main"></div>
    <div id="footer"></div>
  </body>
</html>

위의코드에서 우선순위를 알아볼때

 

 .header-menu-item {
        background-color: pink;
      }

      .header-menu-item.w-300 {
        background-color: yellowgreen;
      }

      .w-300 {
        width: 300px;
        background-color: blue;
      }

에서 제일 끝에 있는 .w-300 : blue 가 높아야 하는데.

.header-menu-item.w-300 : yellowgreen 이 더 높다.

 

저작자표시

'academy > html' 카테고리의 다른 글

0302-html구조짜면서-padding이 높이  (0) 2024.03.02
html구조- 나누기-section과 article  (0) 2024.02.29
css-우선순위  (0) 2024.02.25
2.23_htmm-iframe  (0) 2024.02.24
2.23_html구조  (0) 2024.02.24
'academy/html' Related Articles more