<!-- 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));
'인터넷강의 > 웹 개발 입문' 카테고리의 다른 글
block 요소 정렬 (0) | 2023.01.25 |
---|---|
nth-child (0) | 2023.01.16 |
이미지 (0) | 2023.01.05 |
BMX 사이트의 상단바 따라만들기 (0) | 2023.01.04 |
hover, transition, text-decoration, nbsp (1) | 2023.01.04 |