web2 css 이어서 box, div, grid

농사일 하고왓더니 죽겟다

 

 

-css text size property
폰트사이즈 바꾸기, 가운데 정렬
    h1 {
      font-size: 45px; text-align: center;
         }

https://www.youtube.com/watch?v=8-rCMmamtDE&t=224s

-css를 지배하는 두 가지 중요한 토대
1 효과 2 선택자;css selector
보통 마지막 선택자 명령대로 이행되는데 
.보다 #이 더 강해서 #을 선행
태그선택자<클래스 선택자. <ID 선택자 #
id값은 단한번만 등장해야한다

.box model
element= tag
/*   */ css의 주석
block level element 화면 전체를 쓰는 태그들
inline element 자기 부피만큼 쓰는 태그
그러나 이 둘은 기본값일뿐 display: inline;과 display:block;을 통해 바꿀수있다 + display:none; 하면 화면에서 사라진다

-content(네모박스)의 width 폭 height 높이
컨텐트와 바깥 테두리의 간격 padding 테두리와 테두리 사이 
margin content 사이의 간격
-페이지 우클릭>검사> 어떤 css의 영향을 받는지 보여주는 개발자 도구
디자인의 핵심적요소 


<<<<< 다시>
-<div>태그 ;block 아무의미없이 디자인의 용도
<span> ;inline
디자인을 위한 tag : "div", "span" (block vs inline)
- 같은 block 내 columns에 크기를 지정하여 배치 :
display :grid;
grid-template-columns : 크기지정1 크기지정2 ...;
- web browser 기술 채택 통계 사이트 : caniuse.com