도서 생활코딩 HTML+CSS+자바스크립트

HTML을 공부하며 가장 이해가 안 되던 것이 있다. 사실 지금도 이해는 잘 안간다. 바로 div 태그. 친구들이 네이버같은 사이트에 들어가서 메인 페이지가 어떻게 짜졌는지 보는 것도 공부라고 해서 봤는데 가장 많이 보인 태그 중 하나가 div 태그였다. 문제는 이 div 태그가 대체 뭔지 모르겠다는 것이다. 기본적으로 우리가 쓰는 태그는 다 그 의미와 역할이 정해져있다. 예를 들어 h1태그라면 제목을 나타내는 tag이면서 모든 h태그중 가장 글자 사이즈가 크다던가, 이런 식이다. div는 (지금까지 이해한 것으로 볼 때) 이런게 정해져있지 않은 태그다. 만능태그랄까.
예를 들어 책을 산다고 해보자. 보통의 책은 다 제목과 내용이 이미 써져있다. 따라서 우리는 그 책을 사서 정해진 내용을 읽기만 하면 된다. 이게 일반 태그다. 그런데 div 태그는 그냥 무제공책을 사는 것과 같다. 어떤 용도로 쓰일지 정해져있지 않고 그때, 그때 우리가 필요한 내용을 기록하면 된다. 쓰고 나니 굉장히 와닿지 않는 예시다.
다른 용도를 이야기 해볼까. 서랍같은 것. 우리가 신발장을 사면 그 신발장은 용도가 정해져있다. 신발을 보관하는 서랍 정도다. 특별한 일이 없는 한 우리는 그 안에 신발을 보관할 것이다. div 태그는 그냥 큰 박스를 하나 사는 것이다. 어떤 용도로 쓰게 될지는 모른다. 우리가 필요할 때 필요한 용도, 어제는 책을 담았다가 오늘은 기타를 담았다가 할 수 있다. 역시 와닿지 않는 예시다. 예시는 포기하자.

우선 <생활코딩! HTML+CSS+자바스크립트> 책에 나오는 기본 코드와 화면을 확인해보자.

위와 같다. 특별할 것 없는 화면이다. 책에서는 각 단어에 테두리를 주고 나란히 배치까지 해보자고 이야기를 한다. 만약 우리가 테두리를 준다면 NAVIGATION ARTICLE 전체 글자에 테두리가 들어가겠지만 그것이 아니고 NAVIGATION에 테두리 하나, ARTICLE에 테두리 하나를 주고 연결되게 배치를 해보는 것이다. 그렇다면 이 두 단어를 하나로 묶어주어야 하는데 다른 태그는 사용할 수가 없다. P태그는 내용으로 받아들여질 것이고 <h1, h2...>등의 태그는 제목으로 인식할 것이다. 우리는 이런 인식 없이 오로지 '각 단어에 테두리를 주고 연결하여 배치'만 하고 싶은 것이다. 이럴 때 쓰는 것이 div 태그다. div는 정말 이름표 역할만 한다. 이 태그에 어떤 효과나 내용을 정할 것인지는 우리의 마음이다.
-------------------------
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div>NAVIGATION</div>
        <div>ARTICLE</div>
    </body>
</html>
--------------------------
이렇게 코드를 수정하니 화면은 다음과 같이 나온다.

좀 더 정확히 알아보기 위해서 테두리를 표시해보고 색깔을 넣어보자.
-------------------------
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            div{
              border: 5px solid gray;
            }
        </style>
        <title></title>
    </head>
    <body>
        <div>NAVIGATION</div>
        <div>ARTICLE</div>
    </body>
</html>
--------------------------

위와 같이 테두리가 표시가 되었다. 즉 단어 하나가 한 줄 전체를 차지하고 있는 상황이다. 저 단어 두개를 한 줄로 만들기 위해서는 그리드라는 것을 써야 한다. 우선 저 두개의 단어를 하나로 묶어줄 수 있는 태그가 필요하다. 이 태그 또한 div다. 이제 왜 네이버 홈페이지 코드에 div가 넘쳐나는지 알 것 같다.
-------------------------
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #grid{
              border: 5px solid pink;
            }
            div{
              border: 5px solid gray;
            }
        </style>
        <title></title>
    </head>
    <body>
      <div id=grid>
        <div>NAVIGATION</div>
        <div>ARTICLE</div>
      </div>
    </body>
</html>
--------------------------

이 경우 안쪽 각각의 단어에 회색 테두리가 생기고 전체를 둘러싸는 분홍색 테두리가 보이게 된다. 이제 이 안에 있는 요소를 연결되게 배치만 하면 된다. 책의 내용은 다음과 같다.
--------------------------
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #grid{
              border: 5px solid pink;
              display: grid;
              grid-template-columns: 150px 1fr;
            }
            div{
              border: 5px solid gray;
            }
        </style>
        <title></title>
    </head>
    <body>
      <div id=grid>
        <div>NAVIGATION</div>
        <div>ARTICLE</div>
      </div>
    </body>
</html>
--------------------------

안타까운 일은 나는 왜 저기에
display: grid;
grid-template-columns: 150px 1fr;
이런 내용이 들어가는지 모르겠다. 왜 display를 grid로 해야하는 것일까. 단순한 약속일까. 일단 이럴 때는 그냥 외우는게 낫다. grid-template-columns: 를 쓰기 위해서는 그 이전에 display: grid를 꼭 넣어주기. 애초에 둘은 관계가 없을 수도 있지만 그냥 외워두고 하다보면 이해가 될 때가 있다. 끝.

저작자표시

'코딩' 카테고리의 다른 글

도서 생활코딩 HTML+CSS+자바스크립트 - <미디어 쿼리> (0)	2020.12.15
도서 생활코딩 HTML+CSS+자바스크립트 - <border, padding, margin> (0)	2020.12.03
도서 생활코딩 HTML+CSS+자바스크립트 - <style 태그, style 속성> (0)	2020.12.02

THming's Days

도서 생활코딩 HTML+CSS+자바스크립트 - <div 태그>

'코딩' 카테고리의 다른 글

댓글

티스토리툴바

도서 생활코딩 HTML+CSS+자바스크립트 - <div 태그>

'코딩' 카테고리의 다른 글

관련글

댓글

티스토리툴바