<section>
<div></div>
<div></div>
<div></div>
</section>div {
width:100px;
height:100px;
margin-left:0; /* 이 코드는 사실 쓸 필요는 없다. 왜냐하면 원래 0 이니까 */
background-color:red;
}
div:nth-child(2) {
background-color:gold;
margin-left:auto;
margin-right:auto;
}
div:nth-child(3) {
background-color:green;
margin-right:0;
margin-left:auto;
}
section {
border:5px dotted gray;
}실행 화면
<div></div>
<div></div>
<div></div>div {
width:100px;
height:100px;
background-color:red;
}
div:nth-child(2) {
margin-left:auto;
margin-right:auto;
}
div:nth-child(3) {
margin-left:auto;
}실행 화면
<a href="http://to2.kr/bTn">bmx main</a><br>
<div>
<img src="https://picsum.photos/id/10/850/500" alt="">
<br><br>
<img src="https://picsum.photos/id/11/400/400" alt="">
<img src="https://picsum.photos/id/12/200/200" alt="">
<img src="https://picsum.photos/id/13/200/200" alt="">
</div>div {
text-align:center;
}실행 화면
<body><!-- 코드팬(현재 에디터) 생략가능 -->
<div>
<img src="https://picsum.photos/id/10/850/500" alt="">
</div>
<div>
<img src="https://picsum.photos/id/11/400/400" alt="">
<img src="https://picsum.photos/id/12/200/200" alt="">
<img src="https://picsum.photos/id/13/200/200" alt="">
</div>
</body><!-- 코드팬(현재 에디터) 생략가능 -->div {
text-align:center;
}
/* div 이면서 동시에 누군가의 2번째 자식인 엘리먼트 */
div:nth-child(2) {
/* 박스 위로 10px 여백을 둔다. */
margin-top:20px;
}
div:nth-child(2) > img {
margin-left:8px;
margin-right:8px;
}실행 화면
<div>
<img src="https://picsum.photos/id/10/850/500" alt="">
</div>
<img src="https://picsum.photos/id/11/400/400" alt="">
<img src="https://picsum.photos/id/12/200/200" alt="">
<img src="https://picsum.photos/id/13/200/200" alt="">body {
text-align:center;
}
div {
margin-bottom:20px;
}
body > img:nth-child(3) {
margin-left:17px;
margin-right:17px;
}실행 화면
<img src="https://picsum.photos/id/10/850/500" alt="">
<img src="https://picsum.photos/id/11/400/400" alt="">
<img src="https://picsum.photos/id/12/200/200" alt="">
<img src="https://picsum.photos/id/13/200/200" alt="">img:first-child {
display:block;
margin:0 auto;
/*
margin-left:auto;
margin-right:auto;
*/
}
body {
text-align:center;
}
body > img:nth-child(1) {
margin-bottom:20px;
}
body > img:nth-child(3) {
margin:0 17px;
}실행 화면
<div class="a">1</div>
<div id="a">2</div>
<div class="a">3</div>
<div class="a b">4</div>
<section class="a b">4</section>body {
font-size:4rem;
}
/* tag 가 a 인 엘리먼트 선택 */
a {
}
/* class 가 a 인 엘리먼트 선택 */
.a {
color:red;
}
/* id가 a 인 엘리먼트 선택 */
#a {
color:blue;
}
/* class a와 b를 동시에 가지고 있는 엘리먼트 선택 */
.a.b {
color:gold;
}
/* 태그가 section이고 class a와 b를 동시에 가지고 있는 엘리먼트 선택 */
section.a.b {
color:green;
}실행 화면
<div></div>
<div>
<section></section>
</div>html {
border:10px solid red;
}
html > body {
border:10px solid blue;
}
html > body > div {
border:10px solid gold;
margin:10px;
height:100px;
}실행 화면
console.clear();
let ages = [];
ages.push(22); // 0
ages.push(32); // 1
ages.push(42); // 2
ages[3] = 55;
console.log(ages);
console.log(ages[0]);
console.log(ages[1]);
console.log(ages[2]);
console.log(ages.length);실행 화면
console.clear();
let ages = [10, 20, 30, 40];
let agesSum = 0;
for ( let i = 0; i < ages.length; i++ ) {
agesSum += ages[i];
}
console.log("나이 총합 : " + agesSum);
console.log("나이 평균 : " + agesSum / ages.length);실행 화면
