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

오늘은 프론트엔드 쪽으로 넘어갔다. 우리가 웹 사이트를 볼 때 보이는 화면을 구성하는 것들에 대해 배우는 것이다.

웹페이지를 이루는 3요소

---

HTML -> 배우
CSS -> 스타일리스트

• display
  -block (div,section,nav,article의 기본값)
  -너비 최대화
  -한 줄을 무조건 혼자 씀 -> 레고블럭
  -inline-block
  -너비 최소화 (컨텐츠를 감쌀만큼만)
  -한줄에 최대한 여러개 -> 글자

JS -> 감독

---

div {
  background-color: red;
}

section {
  background-color: green;
}

article {
  background-color: blue;
}

div,
section,
article {
  height: 100px;
  display: block;
}

강사님의 비유를 따라보면 html은 배우고, css는 그 배우를 꾸며줄 스타일리스트 js는 해당 영화의 감독이라는 비유를 하셨다.

일단 우리는 js는 나중에, html과 css 부터 천천히 배워나가기로 했다.

<div></div>                <!--위상이 같으면 같은 것 끼리는 형제 관계 -->
<section></section>
<nav></nav>
<article></article>

<div>                    <!-- 감싸는 쪽이 부모 , nav는 손자-->
  <section></section>    <!-- 감싸짐을 당하는 쪽이 자식 -->
  <section></section>    <!-- 위상이 같으니 형제 (아래가 동생 위가 형) -->
  <section>
     <nav></nav>         <!-- 자식의 자식 div는 할아버지. -->
  </section>
</div>                    <!-- 감싸는 쪽이 부모 -->

div>section <!-- section은 div의 자식이다. -->

div+section <!-- section은 div의 동생이다. -->

<br>         <!-- 강제 줄바꿈, 자식을 가질 수 없다. -->
<hr>         <!-- 줄 하나 긋기, 자식 x -->
<img src="" alt="">     <!-- img 넣기, 자식 x - -->

<a href="www.e?e?e?.com">클릭 하면 이동</a> <!-- a태그 웹사이트 주소 걸기. -->

<a href="www.e?e?e?.com" target="_blank">새창으로 열림</a> <!-- 주소 거는데 새창으로 열림 -->

기본적인 사용법 같은거라고 생각하자.

html과 css는 단순 반복 노가다 같은 느낌이라 챗gpt에게 무언가를 부탁해서 가져와도 된다고 강사님이 말씀하셨다.
원래 화면 구성은 다른 곳에서 가져와서 본인의 입맛에 따라 바꿔서 사용하는 것이 허다하다고 설명하셨다. 하지만 우리가 코드를 읽을 줄 알아야하기 때문에 너무 의존하지 말자고 나는 생각한다.

<table border="1">
  <thead>
    <tr>
      <th>display</th>
      <th>너비</th>
      <th>높이</th>
      <th>한줄 혼자사용</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>block</th>
      <td>지정되지 않으면, 최대한 커진다.</td>
      <td>지정되지 않으면, 최소한으로 줄어든다.</td>
      <td>혼자사용(세로로 나열됨)</td>
    </tr>
    <tr>
      <th>inline-block</th>
      <td>지정되지 않으면, 최소한으로 줄어든다.</td>
      <td>지정되지 않으면, 최소한으로 줄어든다.</td>
      <td>최대한 여럿이 사용(가로로 나열됨)</td>
    </tr>
  </tbody>
</table>

<h1>알아낸 사실</h1>

<ul>
  <li>div, section, nav, article의 display 속성 기본값은 block 이다.</li>
  <li>div, section, nav, article의 width 속성 기본값은 auto 이다.</li>
  <li>div, section, nav, article의 height 속성 기본값은 auto 이다.</li>
</ul>

문제를 보면서 사용법을 익혀보면,

<div>
  <a href="#">네이버</a>
</div>

<section>
  <a href="#">구글</a>
</section>

div > a { /* div의 자식 a ">" */
  color: green;
}
section > a {
  color: red;
}

---

div > a { /* 이런 경우는 조건이 더 까다로운 쪽이 힘이 세다. 따라서 div의 a의 컬러는 green */
  color: green;
}
a { /*그 외의 a 는 red */
  color: red;
}

난 처음에 div와 a에 띄어쓰기를 해서 풀었는데 이건 후손 지정자라고 해서 div의 모든 후손에 적용된다.

div {
    text-align: center; /* 텍스트를 가운데 정렬 */
}

문제를 꽤 많이 풀었는데 핵심 내용만 좀 볼 수 있는 문제만 가져와보면 (문제는 사이트 모양을 보고 그 모양대로 만들어보는 것.)

<div>
  <a href="http://www.bnx.co.kr/16fw/main/main.asp" target="_blank">bnx 사이트</a>
</div>

<nav>
  <a href="http://www.naver.com/" target="_blank">네이버</a>
</nav>

<section>
  <a href="http://www.google.com/" target="_blank">구글</a>
</section>

div {
  text-align: right;
}
div > a {
  font-size: 2rem;
  color: black
}
nav {
  text-align: center;
}
nav > a {
  font-size: 3rem;
  color: red
}
section > a {
  font-size: 5rem;
}

그래도 뭔가를 건드려보면 어디가 반응이 오고, 또 뭐가 바뀌는지 즉각적으로 보이니까 대응이 쉬운 것 같은 느낌이 든다.

div {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: red;
}
div:hover { /* hover는 마우스를 올린 상태를 의미함.*/
  background-color: blue;
}

---

<article>
  <div></div>
  <section></section>
  <nav></nav>
</article>

article > div ~ nav { /* "~" 은 인접동생이 아니여도 동생이라면 선택가능 */
}

article > div + section{ /* "+"는 인접동생만 선택 (인접동생선택자)*/
}

<div>
  <section>
    <nav></nav>
  </section>
  <section>
    <nav></nav>
  </section>
</div>

<div></div>
<section></section>
<nav></nav>

div > section > nav {
}

div + section {
}

div ~ nav {
}

---

&nbsp; <!-- 강제 띄어쓰기 -->

---

다음 문제로 http://bnx.oa.gg/index.html 해당 사이트의 상단을 최대한 비슷하게 만들어보라고 하셨다.

<div>
  BNX
</div>
<section>
  <style>
    .parent {
      letter-spacing: 10px;
      padding: 10px;
    }
    .child {
      letter-spacing: 1px;
      padding: 5px;
    }
  </style>
  <p class="parent">|
  <p class="child">BRAND</a>
  </p>

  <p class="parent">|
  <p class="child">VISUAL</p>
  </p>

  <p class="parent">|
  <p class="child">STYLE</p>
  </p>

  <p class="parent">|
  <p class="child">MEDIA</p>
  </p>

  <p class="parent">|
  <p class="child">NEWS</a>
  </p>

  <p class="parent">|
  <p class="child">STORE</p>
  </p>

  <p class="parent">|
  <p class="child">CUSTOMER</p>
  </p>

  <p class="parent">|
  </p>
</section>

div {
  font-size: 4rem;
  font-weight: bold;
  text-align: center;
}
section {
  text-align: center;
}
section > p {
  display: inline-block;
}

나는 이렇게 만들어봤다. 모양만 신경써서 눈치채지 못했는데 (애초에 비슷하긴하지만 근본적으로 모양도 같지 않다.) 저 배너와 목록들이 클릭이 가능하다는 것을 전혀 생각하지 않고 만들었다.

여하튼 강사님이 보여주신 답은

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

<nav>
  |
  <section>
    <a href="#">BRAND</a>
  </section>
  |
  <section>
    <a href="#">VISUAL</a>
  </section>
  |
  <section>
    <a href="#">STYLE</a>    
  </section>
  |
  <section>
    <a href="#">MEDIA</a>    
  </section>
  |
  <section>
    <a href="#">NEWS</a>    
  </section>
  |
  <section>
    <a href="#">STORE</a>    
  </section>
  |
  <section>
    <a href="#">CUSTOMER</a>    
  </section>
  |
</nav>

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

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

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

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

이렇다.

새로운걸 배우니까 좀 정신이 없는데 자바도 꾸준히 계속 까먹지 않게 JDBC를 반복할 생각이다.