div {
width:15%; /* 부모 엘리먼트 너비 기준 */height:100px;
background-color:red;
display:inline-block;
/* 모서리 50px를 둥글게 처리 */border-radius:50px;
/* border-radius:50%; */
}
body {
background-color:black;
}
nav {
text-align:center;
}
nav > div {
width:20px;
height:20px;
background-color:rgba(255,255,255,0.5);
display:inline-block;
border-radius:5px;
cursor:pointer;
}
nav > div:first-child, nav > div:hover {
background-color:rgba(255,255,255,1);
}
div {
width:200px; /* 부모 엘리먼트 너비 기준 */height:200px;
background-color:gold;
display:inline-block;
/* 모서리 50px를 둥글게 처리 */border-radius:50%;
}
실행 화면
<!-- inherit : 부모를 따라한다. --><body><!-- body 의 텍스트 -->
Hello
<section><!-- section 의 텍스트 -->
하하
<div><!-- div 의 텍스트 -->
안녕
</div><div>
하세요
</div><div>
ㅋㅋㅋ
</div></section></body>
body {
color:red;
}
section {
/* section의 기본 컬러 속성 : inherit */color:blue;
}
div:last-child {
color:green;
}
실행 화면
<!-- inherit : 부모를 따라한다. --><body><!-- body 의 텍스트 -->
Hello
<section><!-- section 의 텍스트 -->
하하
<div><!-- div 의 텍스트 -->
안녕
</div><div>
하세요
</div><div>
ㅋㅋㅋ
</div></section></body>
body {
/* 모든 엘리먼트는 아래 속성의 기본값이 모두 inherit 이다. */color:red;
font-family:"돋움";
font-weight:bold;
text-align:center;
font-size:2rem;
letter-spacing:10px;
/* 아래 속성은 상속되지 않는다., 물론 상속되게 할 수 도 있다. */border:10px solid green;
}
section {
/* 이렇게 하면 section은 body의 border 속성을 따라한다. */border:inherit;
}
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 {
text-align:center;
}
/* div 이면서 동시에 누군가의 2번째 자식인 엘리먼트 */div:nth-child(2) {
/* 박스 위로 10px 여백을 둔다. */margin-top:20px;
}
div:nth-child(2) > img {
margin-left:8px;
margin-right:8px;
}
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;
}
<!-- lorem 글자 생성 --><!-- div*5>lorem --><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi eveniet obcaecati dignissimos ipsum, numquam sapiente rem quia voluptate ut consectetur eaque in mollitia quisquam at, rerum explicabo aliquid sit blanditiis.</div><div>Vel animi doloremque maxime, quo ut aliquid at, maiores iusto neque officiis, consectetur aliquam veritatis quaerat adipisci placeat. Assumenda iste sed nostrum dolore eos, vitae labore dicta consectetur nam totam?</div><div>Cupiditate similique modi vero a exercitationem sit veniam quisquam itaque repudiandae nostrum nam culpa voluptas, sapiente non quae illo iusto sunt minus, cumque voluptate animi, maxime consectetur mollitia consequuntur! Laudantium.</div><div>Eveniet suscipit fugiat eum consequatur nihil deserunt at facere molestiae ullam rerum autem reprehenderit animi rem iure fugit modi, voluptate nesciunt mollitia incidunt sint esse. Illo ducimus dolorum ipsam iste.</div><div>Reiciendis atque sit repudiandae dolore aperiam! Autem sit saepe exercitationem asperiores? Corporis error similique laboriosam doloribus quibusdam non? Minus praesentium cumque animi excepturi architecto ipsam, nulla porro hic enim alias!</div>
div {
width:300px;
height:300px;
background-color:red;
vertical-align:top; /* 나중에 설명 */display:inline-block;
/* 박스의 바깥쪽 여백 */margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
margin: 10px; /* 위 4줄과 의미가 같다. *//* 박스의 안쪽 여백 */padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
padding:10px; /* 위 4줄과 의미가 같다. */
}
<!-- img, a, span 은 기본적으로 display가 inline 이다. -->
display:inline-block인 경우
<section><ahref="#">안녕</a><ahref="#">잘가</a></section>
display:inline인 경우
<div><ahref="#">안녕</a><ahref="#">잘가</a></div>
a {
background-color:red;
}
/* section, div => section, div 둘다 */section, div {
margin:50px;
background-color:gray;
}
section > a {
display:inline-block;
}
a {
width:100px;
padding:10px;
}
div {
text-align:center;
}
div > section {
display:inline-block;
padding:30px;
}
div > section > img {
width:200px;
}
실행 화면
console.clear();
functionplus(a, b) {
return a + b;
};
let plusRs = plus(1, 2);
console.log(plusRs);
functionminus(a, b) {
return a - b;
}
let minusRs = minus(5, 10);
console.log(minusRs);
functionmulti(a, b) {
return a * b;
}
let multiRs = multi(5, 10);
console.log(multiRs);
functiondivide(a, b) {
return a / b;
}
let divideRs = divide(5, 10);
console.log(divideRs);
실행 화면
console.clear();
functionprint1To100() {
for ( let i = 1; i <= 100; i++ ) {
console.log(i);
}
}
//print1To100();functionprint1ToN(n) {
for ( let i = 1; i <= n; i++ ) {
console.log(i);
}
}
//print1ToN(3);functionprintNToM(n, m) {
for ( let i = n; i <= m; i++ ) {
console.log(i);
}
}
//printNToM(3, 5);functionget1To3Sum() {
let s = 0;
for ( let i = 1; i <= 3; i++ ) {
s += i;
}
return s;
}
//console.log(get1To3Sum());functionget1ToNSum(n) {
let s = 0;
for ( let i = 1; i <= n; i++ ) {
s += i;
}
return s;
}
//console.log(get1ToNSum(10));functiongetNToMSum(n, m) {
let s = 0;
for ( let i = n; i <= m; i++ ) {
s += i;
}
return s;
}
//console.log(getNToMSum(-10, -1));functiongetNToMEvenSum(n, m) {
let s = 0;
for ( let i = n; i <= m; i++ ) {
if ( i % 2 == 0 ) {
s += i;
}
}
return s;
}
console.log(getNToMEvenSum(1, 4));
