코딩연습 WEB2 CSS - 8,9,10 BOX MODEL, GRID

 

 

1. 태그 중에 어떤 태그는 ( h1 같은 제목 테그들은 )

태그 자체만으로 그 부피를 갖고 있어서 줄 바꿈이 자동으로 이루어지는데

 

2. 어떤 태그는 ( a href = "" 링크 걸기 ) 태그를 걸어도

줄바꿈 없이 라인 자체 유지하는 경우가 있음

 

 

그래서 1번 같은 경우를 BLOCK LEVEL ELEMENT 라고 부르고

2번 같은 경우를 INLINE ELEMENT 부름

 

 

<style>

h1{

border-width:5px; 

... }

 

a{ }

 

로 묶어서 그 라인 확인 가능하고

 

block 을 inline 으로 또 반대로도 변환 가능

display:inline; or block;

 

 

 

 

 

 

 

-10 grid

 

 

div = block 

span = inline 

 

 

caniuse.com/

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

 

gird 등 사용하면 다른 사용자 또는 어느 브라우저에서 어디까지 적용되는지 여부 확인할 수 있는 사이트

 

 

 

 

 

 

 

 

 

그리드 사용방법

만약 태그1  태그2 로 만들고 싶으면 

 

 

<style>

#grid {

  display: grid;
  grid-template-columns: 1fr 1fr;

}

</style>

 

 

 

<div id="gird">

태그1

 

<div>

태그2

</div>

</div>