[CSS] 생활코딩 box model : block, inline, div, span, grid

*주석 : /* */

*element = tag

 

태그 별로 화면에서 차지하는 크기에 따라 기본값 구분

1. block

화면 전체를 차지

2. inline

필요한 자신의 부피만 차지

display	block	변경
	inline
	none	숨기기

 

 

---

타이핑 줄이기

• 같은 내용의 스타일 적용 : 콤마로 잇기
• 같은 속성의 세부 옵션 : 속성 뒤에 순서없이 작성

 

 

 

---

주요 CSS 속성

border	테두리
padding	안쪽 여백
margin	바깥 여백
width	크기
display	화면 차지 공간

 

 

---

div

• division
• 무색무취, 아무런 용도 없이 디자인 용도로만 사용
• block : 화면 전체 사용, 줄바꿈

 

span

• div와 같이 디자인 용도
• inline level element

 

---

grid

display: gird;
gird-templete-columns : px 1fr

*fr : 화면 전체를 사용하도록 조절되는 단위

최신기술이어서 웹브라우저에서 사용가능한지 확인 필요

-> http://caniuse.com : 초록은 사용 가능