nth-child

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

div {
  width:15%; /* 부모 엘리먼트 너비 기준 */
  height:100px;
  background-color:red;
  display:inline-block;
}

div:first-child {
  background-color:blue;
}

div:nth-child(2) {
  background-color:gold;
}

div:last-child {
  background-color:green;
}

div:nth-last-child(2) {
  background-color:pink;
}

실행 화면

 

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

section > div {
  width:9%;
  height:100px;
  background-color:green;
  display:inline-block;
}

section > :nth-child(5n + 1) {
  background-color:gold;
}

section > :nth-child(5n + 3) {
  background-color:pink;
}

실행 화면

 

<!-- section>div*70 -->
<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

section {
  text-align:center;
}

section > div {
  width:13%;
  height:100px;
  background-color:red;
  display:inline-block;
}

section > div:nth-child(7n + 2) {
  background-color:orange;
}

section > div:nth-child(7n + 3) {
  background-color:yellow;
}

section > div:nth-child(7n + 4) {
  background-color:green;
}

section > div:nth-child(7n + 5) {
  background-color:blue;
}

section > div:nth-child(7n + 6) {
  background-color:navy;
}

section > div:nth-child(7n + 7) {
  background-color:purple;
}

실행 화면

 

console.clear();

// v1
/*
let a사람__이름 = "홍길동";
let a사람__성별 = "남자";
let a사람__age = 20;

console.log(a사람);
*/

// v2
/*
let a사람 = {};
a사람.이름 = "홍길동";
a사람.성별 = "남자";
a사람.나이 = 22;

console.log(a사람);
*/

// v3
/*
let a사람 = {};
a사람["이름"] = "홍길동";
a사람["성별"] = "남자";
a사람["나이"] = 22;

console.log(a사람);
*/

// v4

function 자기소개(a사람) {
  console.log("== 자기소개 시작 ==");
  console.log("이름 : " + a사람.이름);
  console.log("성별 : " + a사람.성별);
  console.log("나이 : " + a사람.나이);
  console.log("키 : " + a사람.키);
}

let a사람1 = {
  이름:"홍길동",
  성별:"남자",
  나이:22,
};
a사람1.키 = 178;
a사람1.이름 = "홍길순";

let a사람2 = {
  이름:"임꺽정",
  성별:"남자",
  나이:25,
  키:188
};

자기소개(a사람1);
자기소개(a사람2);

실행 화면

 

console.clear();

let a사람1 = {};
a사람1.이름 = "임꺽정";
a사람1.자기소개 = function() {
  console.log("안녕하세요. 저는 " + this.이름 + " 입니다.");
};

let a사람2 = {};
a사람2.이름 = "김철수";
a사람2.자기소개 = function() {
  console.log("안녕하세요. 저는 " + this.이름 + " 입니다.");
};

a사람1.자기소개();
a사람2.자기소개();

실행 화면