body의 노말라이즈와 클래스 선택자 그리고 BEM

<div>ㅋㅋ</div>

/* body 노말라이즈, 아래 부분을 지워보세요. */
body {
  margin:0;
}

div {
  background-color:red;
}

실행 화면

 

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<!-- 아래 엘러먼트는 별명이 2개 입니다.(.d, .black) -->
<div class="d black"></div>
<!-- 아래 엘러먼트는 별명이 2개 입니다.(.b, .black) -->
<div class="b black"></div>
<div class="f"></div>

body {
  text-align:center;
}

div {
  width:30%;
  display:inline-block;
  height:100px;
  background-color:red;
  margin:10px;
}

/* div 이면서 동시에 a 클래스를 가지고 있는 */
div.a {
  background-color:green;
}

/* 클래스 b 인 엘리먼트 */
.b {
  background-color:blue;
}

.black {
  background-color:black;
}

/* d 라는 클래스를 가진 동시에 black 이라는 클래스도 가진 엘리먼트 */
.d.black {
  background-color:#565656;
}

실행 화면

 

<div class="popup">
    <div class="popup__head">
        
    </div>
    
    <div class="popup__body">
        
    </div>
</div>

<div class="popup">
    <div class="popup__head">
        
    </div>
    
    <div class="popup__body popup__body--bg-pink">
        
    </div>
</div>

.popup {
    width:200px;
    height:200px;
    border:10px solid black;
}

.popup__head {
    height:30px;
    background-color:#afafaf;
}

.popup__body {
    height:calc(100% - 30px);
    background-color:red;
}

.popup__body--bg-pink {
    background-color:pink;
}

실행 화면

 

<!-- nav>section>div*4>a[href=#]{메뉴 아이템 $} -->

<!-- 메뉴 박스(메뉴를 감싸는 부모) -->
<div class="menu-box">
  <!-- 메뉴 -->
  <div class="menu">
    <!-- 메뉴 아이템 -->
    <div class="menu-item">
      <!-- 메뉴 아이템 텍스트 -->
      <div class="menu-item-text">메뉴 아이템 1</div>
    </div>
    <div class="menu-item">
      <!-- 메뉴 아이템 텍스트 -->
      <div class="menu-item-text">메뉴 아이템 2</div>
    </div>
    <div class="menu-item">
      <!-- 메뉴 아이템 텍스트 -->
      <div class="menu-item-text">메뉴 아이템 3</div>
    </div>
    <div class="menu-item">
      <!-- 메뉴 아이템 텍스트 -->
      <div class="menu-item-text">메뉴 아이템 4</div>
    </div>
  </div>
</div>

/* 노말라이즈 */
a {
  color:inherit;
  text-decoration:none;
}

/* 커스텀 */

/* 메뉴박스 */
.menu-box {
  text-align:center;
}

/* 메뉴 */
.menu-box > .menu {
  /* 메뉴에는 배경색이 있다. */
  background-color:#dfdfdf;
  /* 메뉴는 너비가 최대한 줄어든다. */
  display:inline-block;
  border-radius:5px;
  padding:0 10px;
}

/* 메뉴 아이템 */
.menu-box > .menu > .menu-item {
  /* 메뉴 아이템은 너비가 최대한 줄어들고 한줄에 여러개 나온다. */
  display:inline-block;
}

/* 메뉴 아이템 텍스트 */
.menu-box > .menu > .menu-item > .menu-item-text {
  padding:20px;
  /* 커서를 포인터로 바꿈 */
  cursor:pointer;
}

/* 마우스가 올려진 메뉴 아이템의 자식인 텍스트 */
.menu-box > .menu > .menu-item:hover > .menu-item-text {
  background-color:black;
  color:white;
}

실행 화면

 

<!-- nav>section>div*4>a[href=#]{메뉴 아이템 $} -->

<!-- 메뉴 박스(메뉴를 감싸는 부모) -->
<div class="menu-box">
  <!-- 메뉴 -->
  <div>
    <!-- 메뉴 아이템 -->
    <div>
      <!-- 메뉴 아이템 텍스트 -->
      <div>메뉴 아이템 1</div>
    </div>
    <div>
      <!-- 메뉴 아이템 텍스트 -->
      <div>메뉴 아이템 2</div>
    </div>
    <div>
      <!-- 메뉴 아이템 텍스트 -->
      <div>메뉴 아이템 3</div>
    </div>
    <div>
      <!-- 메뉴 아이템 텍스트 -->
      <div>메뉴 아이템 4</div>
    </div>
  </div>
</div>

/* 노말라이즈 */
a {
  color:inherit;
  text-decoration:none;
}

/* 커스텀 */

/* 메뉴박스 */
.menu-box {
  text-align:center;
}

/* 메뉴 */
.menu-box > div {
  /* 메뉴에는 배경색이 있다. */
  background-color:#dfdfdf;
  /* 메뉴는 너비가 최대한 줄어든다. */
  display:inline-block;
  border-radius:5px;
  padding:0 10px;
}

/* 메뉴 아이템 */
.menu-box > div > div {
  /* 메뉴 아이템은 너비가 최대한 줄어들고 한줄에 여러개 나온다. */
  display:inline-block;
}

/* 메뉴 아이템 텍스트 */
.menu-box > div > div > div {
  padding:10px;
  /* 커서를 포인터로 바꿈 */
  cursor:pointer;
}

/* 마우스가 올려진 메뉴 아이템의 자식인 텍스트 */
.menu-box > div > div:hover > div {
  background-color:black;
  color:white;
}

실행 화면

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<button>버튼</button>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

section {
  text-align:center;
}

section > div {
  width:10%;
  height:100px;
  border:10px solid black;
  display:inline-block;
}

function changeColors() {
  $('section > div:nth-child(1)').css('background-color', 'red');
  $('section > div:nth-child(2)').css('background-color', 'orange');
  $('section > div:nth-child(3)').css('background-color', 'yellow');
  $('section > div:nth-child(4)').css('background-color', 'green');
  $('section > div:nth-child(5)').css('background-color', 'blue');
  $('section > div:nth-child(6)').css('background-color', 'navy');
  $('section > div:nth-child(7)').css('background-color', 'purple');
}

function changeColors2() {
  $('section > div').eq(0).css('background-color', 'red');
  $('section > div').eq(1).css('background-color', 'orange');
  $('section > div').eq(2).css('background-color', 'yellow');
  $('section > div').eq(3).css('background-color', 'green');
  $('section > div').eq(4).css('background-color', 'blue');
  $('section > div').eq(5).css('background-color', 'navy');
  $('section > div').eq(6).css('background-color', 'purple');
}

$('button').click(changeColors2);

실행 화면