margin, padding과 inline vs inline-block

<!-- 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줄과 의미가 같다. */
}

실행 화면

 

<div>안녕하세요.</div>
<section>잘가세요.</section>

div {
    background-color:red;
    display:inline-block;
    /* 박스의 안쪽 여백, 상하좌우 */
    padding:100px;
    /* 박스의 바깥족 여백 */
    margin-right:100px;
}
section {
    background-color:blue;
    display:inline-block;
    margin-left:100px;
}

div, section {
    color:gold;
    font-weight:bold;
    font-size:3rem;
}

실행 화면

 

<!-- img, a, span 은 기본적으로 display가 inline 이다. -->

display:inline-block인 경우
<section>
    <a href="#">안녕</a>
    <a href="#">잘가</a>
</section>

display:inline인 경우
<div>
    <a href="#">안녕</a>
    <a href="#">잘가</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;
}

실행 화면

 

<a href="#">안녕하세요.</a>
<a href="#">안녕하세요.</a>

a {
    background-color:red;
    /* 작동 안한다, display:inline; 이니까 */
    width:1000px;
    height:1000px;
}

실행 화면

 

<div>
    <section>
        <img src="https://picsum.photos/id/11/600/600" alt="">
        <img src="https://picsum.photos/id/12/300/300" alt="">
        <img src="https://picsum.photos/id/13/300/300" alt="">
    </section>
    <section>
        <img src="https://picsum.photos/id/14/600/600" alt="">
        <img src="https://picsum.photos/id/15/300/300" alt="">
        <img src="https://picsum.photos/id/16/300/300" alt="">
    </section>
</div>

div {
    text-align:center;
}

div img {
    width:200px;
    margin:25px;
}

실행 화면

 

<div>
    <section><img src="https://picsum.photos/id/11/600/600" alt=""></section>
    <section><img src="https://picsum.photos/id/12/300/300" alt=""></section>
    <section><img src="https://picsum.photos/id/13/300/300" alt=""></section>
</div>
<div>
    <section><img src="https://picsum.photos/id/14/600/600" alt=""></section>
    <section><img src="https://picsum.photos/id/15/300/300" alt=""></section>
    <section><img src="https://picsum.photos/id/16/300/300" alt=""></section>
</div>

div {
    text-align:center;
}
div > section {
    display:inline-block;
    padding:30px;
}
div > section > img {
    width:200px;
}

실행 화면

 

console.clear();

function plus(a, b) {
  return a + b;
};

let plusRs = plus(1, 2);
console.log(plusRs);

function minus(a, b) {
  return a - b;
}

let minusRs = minus(5, 10);
console.log(minusRs);

function multi(a, b) {
  return a * b;
}

let multiRs = multi(5, 10);
console.log(multiRs);

function divide(a, b) {
  return a / b;
}

let divideRs = divide(5, 10);
console.log(divideRs);

실행 화면

 

console.clear();

function print1To100() {
  for ( let i = 1; i <= 100; i++ ) {
    console.log(i);
  }
}

//print1To100();

function print1ToN(n) {
  for ( let i = 1; i <= n; i++ ) {
    console.log(i);
  }
}

//print1ToN(3);

function printNToM(n, m) {
  for ( let i = n; i <= m; i++ ) {
    console.log(i);
  }
}

//printNToM(3, 5);

function get1To3Sum() {
  let s = 0;
  
  for ( let i = 1; i <= 3; i++ ) {
    s += i;
  }
  
  return s;
}

//console.log(get1To3Sum());

function get1ToNSum(n) {
  let s = 0;
  
  for ( let i = 1; i <= n; i++ ) {
    s += i;
  }
  
  return s;
}

//console.log(get1ToNSum(10));

function getNToMSum(n, m) {
  let s = 0;
  
  for ( let i = n; i <= m; i++ ) {
    s += i;
  }
  
  return s;
}

//console.log(getNToMSum(-10, -1));

function getNToMEvenSum(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));

실행 화면