BMX 사이트의 상단바 따라만들기

<h1>div 태그만 사용하여, 사과의 색만 변경해주세요.</h1>
<div>[사과]</div> [당근] [양파] <div>[사과]</div> [오렌지] [귤]

div {
  color:red;
  display:inline-block;
}

실행 화면

 

<a href="#">BMX</a>

<div>
  |
  &nbsp;
  &nbsp;
  BRAND
  &nbsp;
  &nbsp;
  |
  &nbsp;
  &nbsp;
  VISUAL
  &nbsp;
  &nbsp;
  |
  &nbsp;
  &nbsp;
  STYLE
  &nbsp;
  &nbsp;
  |
  &nbsp;
  &nbsp;
  MEDIA
  &nbsp;
  &nbsp;
  |
  &nbsp;
  &nbsp;
  NEWS
  &nbsp;
  &nbsp;
  |
  &nbsp;
  &nbsp;
  STORE
  &nbsp;
  &nbsp;
  |
  &nbsp;
  &nbsp;
  CUSTOMER
  &nbsp;
  &nbsp;
  |
</div>

a {
  font-weight:bold;
  font-size:3rem;
  color:black;
  text-decoration:none; /* 하단 밑줄 제거 */
  text-align:center;
  display:block;
}

div {
  text-align:center;
  font-weight:bold;
}

실행 화면

 

<h1>문제 : 각 아이템 사이의 너비가 동일하게 해주세요.</h1>
<h2>힌트</h2>
<ul>
  <li>width</li>
</ul>

<div>
  BMX
</div>

<section>
  <nav>|</nav>
  BRAND
  <nav>|</nav>
  VISUAL
  <nav>|</nav>
  STYLE
  <nav>|</nav>
  MEDIA
  <nav>|</nav>
  NEWS
  <nav>|</nav>
  STORE
  <nav>|</nav>
  CUSTOMER
  <nav>|</nav>
</section>

div {
  text-align:center;
  font-weight:bold;
  font-size:5rem;
  letter-spacing:-7px;
}

section {
  text-align:center;
  font-weight:bold;
}

nav {
  display:inline-block;
  width:30px;
}

실행 화면

 

<h1>문제 : 각 아이템의 너비가 동일하게 해주세요.</h1>
<h2>힌트</h2>
<ul>
  <li>width</li>
</ul>

<div>
  BMX
</div>

<section>
  |
  <nav>BRAND</nav>
  |
  <nav>VISUAL</nav>
  |
  <nav>STYLE</nav>
  |
  <nav>MEDIA</nav>
  |
  <nav>NEWS</nav>
  |
  <nav>STORE</nav>
  |
  <nav>CUSTOMER</nav>
  |
</section>

div {
  text-align:center;
  font-weight:bold;
  font-size:5rem;
  letter-spacing:-7px;
}

section {
  text-align:center;
  font-weight:bold;
}

nav {
  display:inline-block;
  width:120px;
}

실행 화면

 

console.clear();

let i = 0;

// v2, 1부터 10까지, 우아한 방법
while ( i <= 10 ) {
  console.log(i); // 1, 2, 3
  i = i + 1;
}

// v1, 1부터 10까지, 무식한 방법
/*
console.log(i);
i = i + 1;

console.log(i);
i = i + 1;

console.log(i);
i = i + 1;

console.log(i);
i = i + 1;

console.log(i);
i = i + 1;

console.log(i);
i = i + 1;

console.log(i);
i = i + 1;

console.log(i);
i = i + 1;

console.log(i);
i = i + 1;

console.log(i);
i = i + 1;
*/

실행 화면

 

console.clear();

console.log("== while로 반복 ==");
let j = 1;
while ( j <= 10 ) {
  console.log(j);
  j++;
}

console.log("== for로 반복 ==");
for ( let i = 1; i <= 10; i++ ) {
  console.log(i);
}

실행 화면