생활코딩 CSS -블록 레벨 엘리먼트, 인라인 엘리먼트, 그리드

블록 레벨 엘리먼트(block level element) : 화면 전체를 쓰는 태그
인라인 엘리먼트(inline element): 자기 자신의 콘텐츠 크기만큼 쓰는 태그

블록 레벨 엘리먼트여도 자신 부피만큼 쓰게 할 수 있다.

display: inline;

인라인엘리먼트에도 이렇게 쓰면 블록 레벨 엘리먼트로 된다.

display: block;

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

CSS부분에서 이렇게 되어있는걸 아주 짧게 쓸 수 있다.
이런식으로

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

콘텐츠와 테두리 사이에 여백 주는건

padding: 20px;

요런식으로 추가해주면 가능하다.

저기 저렇게 여백이 생기는건 margin 때문이다.

margin: 0px

이렇게 넣어주면 저 사이 여백 사라짐.

DIV는 블록 레벨 엘리먼트
SPAN은 인라인 엘리먼트

레이아웃 할때는 그리드라는걸 사용한다.

그리드

    <div id = "grid">
        <div>NAVIGATION</div>
        <div>ARTICLE</div>
    </div>

각자 div로 나눠놓은거에 저렇게 div로 또 감싸주고
id를 부여해준다.
그리고

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

요렇게 style 부분에 넣어준다.
display는 속성값으로 무언가를 정해서
태그가 표시되는 방법을 바꾸게 도와주는 것.