국비 지원 IT(웹앱개발) 취업반 강의 32일차 (HTML, CSS, JS)

어제 만들었던 것을 이어서 보자 css를 약간 고쳤다.

body {
  background-color: black;
  text-align: center;
}
nav {
    letter-spacing:10px;
}
nav > div:first-child {
  background-color: white;
}
div.b {
  width: 50px;
  height: 50px;
  background-color: grey;
  display: inline-block;
}
div.a {
  margin-top: 300px;
  width: 50px;
  height: 50px;
  background-color: grey;
  display: inline-block;
  border-radius: 50%;
}
div.b.c:hover,
div.a.c:hover{
  width: 50px;
  height: 50px;
  background-color: white;
  display: inline-block;
  cursor:pointer;
}

다음으로 이런 개념을 배웠는데 뭐냐면.
자주 쓰느 div나 section 등은 inherit(상속)이 기본이다. 대상은 body. 하지만 예외로 상속 받지 않는 것들도 있다.


코드로 하나하나 살펴보고 결과를 내렸다.

body
<section>
  section
  <div>div</div>
</section>

body, section, div {
  border:10px solid red;
  padding: 10px;
  margin: 10px;
}
section {
  border-color: blue;
}

div {
  border-color: green;
}
body {
  font-size: 100px; /* inherit */
  font-weight: 100; /* inherit */
  letter-spacing: 19px; /* inherit */
  color: orange; /* inherit */
  background-color: grey; /* transparent */
  width: 100px; /* auto */
  height:100px; /* auto */
  margin:100px; /* 0 */
  padding: 100px;/* 0 */
  display: inline-block; /* block */
  border: 30px solid orange; /* none */
  border-radius: 50%; /* 0 */
  cursor: pointer; /* auto */
  text-align: center; /* inherit */
  text-decoration: underline dotted; /* inherit */
}

디폴트 값이 뭔지 각주로 달았다. https://developer.mozilla.org/en-US/ <- 사이트 같은 곳에 검색하면 다 나온다.

• a 노말라이즈

a {
  color: inherit;
  text-decoration: none;
}

모든 작업의 최상단에는 a 태그의 특색을 죽이기 위한 작업이 필요하다. 노말라이즈 작업이라고도 한다.

문제를 풀었는데 일단 내가 할 수 있는 만큼은 따라해서 만들었다. 태그를 어떻게 떨어뜨려야 좋을지 몰라서 일단은 내가 구현한 곳 까지 올려보면

<section>
  <div class = "a">아이템 1</div>
  <div class = "b">아이템 2</div>
  <div class = "c">아이템 3</div>
  <div class = "d">아이템 4</div>
</section>

body {
  text-align: center;
}
section {
  background-color: grey;
  display: inline-block;
  border-radius: 10px;
  width: 400px;
  height: 70px;
}
div {
  font-weight: bold;
  display: inline-block;
  width: 70px;
  height: 70px;
  text-align: center;
  line-height: 70px;
}
div:hover {
  background-color: black;
  color: white;
  cursor: pointer;
}

난 이렇게 했고, 강사님은 이렇게 만드셨다.

<nav> <!-- 메뉴 박스 -->
  <section> <!-- 메뉴 -->
    <div> <!-- 메뉴 아이템 -->
      <a href="#">아이템 1</a> <!-- 메뉴 아이템 텍스트 -->
      </div>
    <div><a href="#">아이템 2</a></div>
    <div><a href="#">아이템 3</a></div>
    <div><a href="#">아이템 4</a></div>
  </section>
</nav>

a {
  color:inherit;
  text-decoration:none;
}
nav {
  text-align:center;
}

nav > section {
  background-color:#afafaf;
  display:inline-block;
  padding:0 20px; /* 상하 좌우 */
  border-radius:10px;
}

nav > section > div {
  display:inline-block;
}

nav > section > div > a {
  display:block;
  padding:20px;
  font-weight:bold;
}

nav > section > div:hover > a {
  color:white;
  background-color:black;
}

난 애초에 a태그를 쓰지 않아서 떨어뜨리는 조건이 너무 까다로웠다.

뭔가를 만들 때, 큰 것 부터 손을 대면서 나가는게 좋다고 하셨다.
목표는 저걸 만들 때 3분 안에 메뉴를 구현할 수 있어야한다는 것이 일단은 목표.

계속 반복해서 연습하다보니까 빠르게 되긴한다.

일단 한번 집고 넘어가야될게 padding과 margin의 차이가 잘 이해가 안되서 한번 더 써본다.

• Margin: Object와 화면과의 여백(외부여백)
• Padding: Object 내의 내부여백

margin은 외부까지에까지 영향을 받는 것이고 padding은 태그 내에서 영향을 주는 것이다.

• body 노말라이즈.

body {
  margin: 0; /* body 노말라이즈 */
}

제일 모서리에 공간이 약간 남는데 이 영역을 지워준다.

문제 : 모든 태그를 div로 변경해주세요. 클래스 사용가능

<div class="menuBox">
  <div class="menu">
    <div class="menuItem">
      <div class= "menuItemText">아이템 1</div>
    </div>
    <div class="menuItem">
      <div class= "menuItemText">아이템 2</div>
    </div>
    <div class="menuItem">
      <div class= "menuItemText">아이템 3</div>
    </div>
    <div class="menuItem">
      <div class= "menuItemText">아이템 4</div>
    </div>
  </div>
</div>

a {
  color:inherit;
  text-decoration:inherit;
}

/* 메뉴 박스 */
div.menuBox {
  text-align:center;
}

/* 메뉴 */
div.menuBox > div.menu {
  background-color:#afafaf;
  display:inline-block;
  padding:0 20px;
  border-radius:10px;
}

/* 메뉴 아이템 */
div.menuBox > div.menu > div.menuItem {
  display:inline-block;
}

/* 메뉴 아이템 텍스트 */
div.menuBox > div.menu > div.menuItem > div.menuItemText {
  padding:20px;
  display:block;
  font-weight:bold;
  letter-spacing:-1px;
}

/* 호버된 메뉴 아이템의 텍스트 */
div.menuBox > div.menu > div.menuItem:hover > div.menuItemText {
  background-color:black;
  color:white;
  cursor: pointer;
}

이렇게 했는데 앞에 css에서 div가 빠져도 된다.

다음문제가 최상위 엘리먼트의 클래스 속성을 제외한 나머지는 전부 지워주세요. 인데 내가 문장 자체를 이해를 못해서 기다렸는데 정답을 보니까 이해가 된다..

a {
  color: inherit;
  text-decoration: inherit;
}

/* 메뉴 박스 */
.menu-box {
  text-align: center;
}

/* 메뉴 */
.menu-box > div {
  background-color: #afafaf;
  display: inline-block;
  padding: 0 20px;
  border-radius: 10px;
}

/* 메뉴 아이템 */
.menu-box > div > div {
  display: inline-block;
}

/* 메뉴 아이템 텍스트 */
.menu-box > div > div > div {
  padding: 20px;
  display: block;
  font-weight: bold;
  letter-spacing: -1px;
  cursor: pointer;
}

/* 호버된 메뉴 아이템의 텍스트 */
.menu-box > div > div:hover > div {
  background-color: black;
  color: white;
}

아무튼 이렇게 해도 된다. 맨 첫 클래스를 지정해줬으니 그 다음 자식, 다음 자식을 누군지 판별 가능해서 되는 것 같다.


다음, 메뉴는 ul 태그로 만드는 것이 관례라고 한다.
근데 ul과 li 또한 노말라이즈 해서 사용해야한다.

• list 노말라이즈

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

- h 노말라이즈

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<h7>h7</h7>

h1,h2,h3,h4,h5,h6 {
  margin: 0;
}

웬만하면 이건 맨 위에 써놓고 시작하는 것 같다.

/* 바디 노말라이즈 */
body {
    margin:0;
}

/* ul, li 노말라이즈 */
ul, li {
    margin:0;
    padding:0;
    list-style:none;
}

/* a 노말라이즈 */
a {
    color:inherit;
    text-decoration:none;
}

문제를 풀었는데 메뉴 세개를 만드는 것이다.

<nav class="menuBox-1">
  <ul>
    <li><a href="#">아이템 1</a></li>
    <li><a href="#">아이템 2</a></li>
    <li><a href="#">아이템 3</a></li>
    <li><a href="#">아이템 4</a></li>
  </ul>
</nav>

<nav class="menuBox-1 red">
  <ul>
    <li><a href="#" >아이템 1</a></li>
    <li><a href="#" >아이템 2</a></li>
    <li><a href="#" >아이템 3</a></li>
    <li><a href="#" >아이템 4</a></li>
  </ul>
</nav>

<nav class="menuBox-1 yellow">
  <ul>
    <li><a href="#" >아이템 1</a></li>
    <li><a href="#" >아이템 2</a></li>
    <li><a href="#" >아이템 3</a></li>
    <li><a href="#" >아이템 4</a></li>
  </ul>
</nav>

a {
  color: inherit;
  text-decoration: none;
}
ul, li, body {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menuBox-1 {
  margin-top: 50px;
  text-align: center;
}
.menuBox-1 > ul {
  background-color: #afafaf;
  display: inline-block;
  border-radius: 10px;
  padding: 0 10px;
}
.menuBox-1 > ul > li {
  display: inline-block;
  width: 150px;
}
.menuBox-1 > ul > li > a {
  padding:  10px;
  display: block;
  font-weight: bold;
}
.menuBox-1 > ul > li:hover > a {
  background-color: black;
  color: white;
}
.red > ul > li:hover > a {
  background-color: black;
  color: red;
}
.yellow > ul > li:hover > a {
  background-color: black;
  color: yellow;
}
.red {
  color: red;
}
.yellow {
  color: yellow
}

이게 핵심은 class는 여러개의 속성을 부여할 수 있다는 것이다.

다음 문제는 마우스를 올리면 무언가 나타나게 하는 것이다.

<a href="#">버튼</a>
<div>안녕</div>
<div>잘가</div>

a + div {
    display: none;
}
a:hover + div {
    display: inherit;
}

"+"로 인접동생을 지정해주고 display에 none을 주면서 사라지게 만들고 hover를 사용해서 마우스를 갖다대면 원래 가진 특성을 받아 나타나게 만들었다. 여담으로 강사님은 block을 쓰셨다.

다음으로 문제를 풀다가 수업을 마쳤는데 vertical-align를 쓰는 문제였다 못풀고 수업은 마쳤다.