{CSS 3} 박스 모델과 그리드

일단 박스 모델을 이해하기 위해 준비과정이 필요하다.

box.html 기본파일을 만들어준다.

아무 문자 두 개를 적고, 하나는 <h1>태그 나머지는 <a>태그를 걸어준다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  
  <body>
    <h1>나의강점</h1>
    <br>
    <a href="https://www.gallup.com/cliftonstrengths/en/home.aspx" target="_blank" title="갤럽강점검사 사이트">Gallup Organization</a>에서 실시한 StrengthsFinder(강점발견)결과를 토대로 작성한 내용입니다.
    2022년 1월 12일에 검사를 완료했으며, 측정된 34개의 특성 중 가장 높은 특성 3개에 대하여 서술하였습니다.
  </body>
  
</html>

여기에서 우리는 h1태그가 화면 전체를 쓰고있고, a태그는 줄바꿈이 되지 않고 다른 텍스트와 함께 같은 라인에 존재 있다는 것을 알 수 있다. 이런 차이가 왜 존재할까?

제목 태그는 화면 전체를 쓰는게 기본적으로 더 편하기 때문이고, 링크가 화면 전체를 써서 앞뒤 컨텐츠가 줄바꿈이 된다면 상당히 불편하기 때문에 링크는 자기 컨텐츠 크기 만큼만 쓴다.

이를 시각적으로 확인하기 위해, h1태그와 a태그에 테두리를 그려 부피감을 확인해보자.

style 태그에 h1과 a의 테두리 굵기, 색, style을 지정한다.

<style>
      h1{
        border-width:5px;
        border-color:red;
        border-style:solid;
      }
      a{
        border-width:5px;
        border-color:red;
        border-style:solid;
      }
</style>

이렇게 화면 전체를 쓰는 태그를 block level element

자신의 부피만큼, 컨텐츠 크기 만큼만 쓰는 태그를 inline element라고 한다.

제목 태그를 inline element처럼 쓰게 만들 수 있다.

<style>
      h1{
        border-width:5px;
        border-color:red;
        border-style:solid;
        
        display: inline;
      }
      a{
        border-width:5px;
        border-color:red;
        border-style:solid;
      }
</style>

반대로 링크 태그에 display: block;을 주게 되면 block level elemet처럼 쓸 수 있다.

따라서 이 block level element, lnline element는 display의 기본값일 뿐 css를 이용해서 언제든지 바꿀 수 있다.

팁으로 display: none;을 사용하게 되면 태그를 안 보이게 할 수 있다. (화면에서 사라져버림..)

<css주석 사용하는 법>

/* 이렇게 쓰지요 */

근데, 이 코드는 반복이 되는 부분이 많기 때문에 좋은 코드라고 할 수 없다.

<style>
      h1{
       border: 5px, solid, red;
      }
      
      a{
       border: 5px, solid, red;
      }
</style>

border 뒤에 오는 순서는 중요하지 않다.

여기서 더 중복을 줄이는 방법!

<style>
      h1, a{
       border: 5px, solid, red;
      }
</style>

이제 박스 모델 설명 시작 하기 위해 h1태그만 남겨두고 다 지운다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
     h1{
      border: 5px solid red;
      }
    </style>
  </head>
  
  <body>
    <h1>나의강점</h1>
  </body>  
</html>

이렇게 하면 컨텐츠와 테두리 사이의 공간이 없다. 간격을 만들어 주기 위해서는 (겨울에 입는 패딩 생각하자)

padding: 20px;

이걸 복제한다.

테두리 1번과 테두리 2번 사이의 간격이 있다. 이를 조절해 주기 위해서는 (장사하면 '마진'을 남겨야한다)

margin: 0; (예시)

다시 margin: 20px;로 바꾸고,

여기에서는 display: block;이 기본적으로 쓰여서 생략되어있는 상태인데, block level element를 바꾸기 위해 width를 사용한다.

width: 100px;

padding이나 margin, width 이런 속성들은 외우지 않아도 css box model을 검색하면 알 수 있다. 또 하나는 웹페이지에서 '오른쪽 클릭 - 검사' 를 누른 후 원하는 태그를 선택하면 색깔이 입혀진다. 그리고 스타일이라고 되어있는 탭이 있는데, 선택한 태그가 어떤 css스타일에 영향을 받고 있는지 일목요연하게 보여준다. 이후 html과 css가 복잡해졌을 때 어떠한 태그가 어떠한 영향을 받게 되는지 볼 수 있도록 도움을 주는 개발자 도구이다.

<박스 모델 이해하기 결과물>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>

      /*block level element*/h1{
        border: 5px solid red;
        padding:20px;
        margin:20px;
        width:100px

      }
      /*inline element*/a{
        border: 5px solid red;
      }


    </style>
  </head>
  <body>
    <h1>나의강점</h1>
    <h1>나의강점</h1>
    <br>
    <a href="https://www.gallup.com/cliftonstrengths/en/home.aspx" target="_blank" title="갤럽강점검사 사이트">Gallup Organization</a>에서 실시한 StrengthsFinder(강점발견)결과를 토대로 작성한 내용입니다.
    2022년 1월 12일에 검사를 완료했으며, 측정된 34개의 특성 중 가장 높은 특성 3개에 대하여 서술하였습니다.
  </body>
</html>

생활코딩 강의에서는 박스 모델 배운 다음 바로 웹페이지에 적용하지만, 여기에서는 박스모델과 그리드를 묶어서 공부하고 다음 포스팅에서 한꺼번에 적용하기로 한다.

여기 웹페이지를 기획했을 때의 사진을 다시 보면 카테고리와 본문을 나란히 두어야 한다.

이를 적용하는 방법 중 하나인 그리드를 사용해보도록 한다.

최근에 등장한 방법이다.

그리드를 이해하기위해

두 개의 문자(NAVIGATION / ARTICLE)를 써준다음 각자의 문자에 테두리를 주고, 나란히 배치시킬 것이다.

grid.html 기본파일을 만든 다음 두 개의 문자(NAVIGATION / ARTICLE)를 써준다. 그리고 태그를 써줘야 하는데, 이 때 사용하는 태그는 디자인만을 위한 태그를 사용한다.

<div>태그 인데 div는 division의 약자로 디자인만을 위해 어떠한 의미도 갖고있지 않는 태그이다. div태그는 block level element이기 때문에 화면 전체를 쓴다. 때문에 div태그를 사용하면 자동으로 줄바꿈이 된다. 같은 목적의 <span>태그는 inline element이기 때문에 줄바꿈을 하지 않는다. 여기에선 div태그를 사용한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body>
      <div>NAVIGATION</div>
      <div>ARTICLE</div>
  </body>

</html>

이 문자들의 부피감을 보기 쉽게 하기 위해 style태그에 border를 추가 한다.

<style>
     div{
       border:5px solid gray;
     }
</style>

그리고 ^①div태그들은 div태그로 감싼다. 그리고 id값을 지정해주어서 ^②style에서 외부 박스와 색을 구분짓는다

/* ① */
<div id="what">
     <div>NAVIGATION</div>
     <div>ARTICLE</div>
</div>

/* ② */
#what{
      border:5px solid pink;
      }

이제 준비는 끝났다.

앞서 display를 사용했었는데, 어떤 태그가 표시되는 방법을 완전히 바꾸는 중요한 속성이다.

display: grid;

를 사용해서 grid속성으로 바꾸어준다. 그러면 아무런 변화는 없는 것이 정상이다!

두 문자를 하나의 컬럼 안에 쓰고, 첫번째 NAVIGATION문자에는 150px의 공간을 주고 ARTICLE문자에는 나머지 공간을 다 쓴다.

#what{
        border:5px solid pink;
        display: grid;
        grid-template-columns: 150px 1fr;
      }

여기있는 fr의 뜻은 화면 전체를 쓸 수 있게끔 자동으로 조절하는 단위이다.

grid-template-columns: 1fr 1fr;

이건 화면을 반반 나누어 가지게 됨

grid-template-columns: 2fr 1fr;
이건 화면을 2:1로 나누어 가지게 됨

<그리드 이해하기 결과물>

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #what{
        border:5px solid pink;
        display: grid;
        grid-template-columns: 150px 1fr;

      }
      div{
        border:5px solid gray;
      }
    </style>
  </head>

  <body>
    <div id="what">
      <div>NAVIGATION</div>
      <div>ARTICLE</div>
    </div>
  </body>

</html>

꼭 알고있어야하는 사이트가 있다. https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

여러 html, css, javascript의 기술들 중에서 현재 웹브라우저에서 이 기술을 얼마나 채택하고 있는지 보여주는 서비스이다. 빨간색으로 되어있는건 작동이 안 된다는 뜻이고, 연두색은 부분적으로 작동된다는 뜻이다.

'grid-template-columns'이 ATOM에서 작동하지 않을 때가 있는데, 그럴 때는 ATOM을 완전히 껐다가 키면 정상적으로 작동한다.

저작자표시 변경금지

'Skill Tree🌲 > html & css' 카테고리의 다른 글

{CSS4} 박스 모델과 그리드 적용하기 (0)	2022.02.27
{CSS 2} class속성과 id속성, 선택자의 우선순위 (0)	2022.02.19
{CSS 1} CSS를 배우는 이유 / CSS 기본 문법 - style태그, 밑줄 없애고 만들기, 글자 크기, 가운데 정렬 (0)	2022.02.18
생활코딩 html 공부한 내용 & 깃허브로 웹페이지 만들기 (0)	2022.02.16
[html 개괄] 맛보기 필수내용 빠르게 훑어보기 (0)	2022.02.05

공부하는 블로그

{CSS 3} 박스 모델과 그리드

'Skill Tree🌲 > html & css' 카테고리의 다른 글

티스토리툴바

{CSS 3} 박스 모델과 그리드

'Skill Tree🌲 > html & css' 카테고리의 다른 글

'Skill Tree🌲/html & css' Related Articles

티스토리툴바