<CSS> 생활코딩_박스모델

https://www.youtube.com/watch?v=MLjCVUspcDo&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=8 

* CC BY 생활코딩

 

 

• 줄 전체를 쓰는 태그를 block level element
• 자신의 부피 만큼 가지는 태그 inline element 

 

block 태그도 inline 태그 처럼 자신의 부피 만큼 쓰게 할수 있음.

display : inline; 입력하면 아래와 같이 영역이 바뀜

 

팁 : CSS 주석 표시 하려면   ---> /*  */ 사용 하면 된다

 

 

inline 태그 또한 

display : block; 입력하면 아래와 같이 영역이 바뀜

즉, block level element, inline element 는

display 속성의 기본값, CSS를 이용해서 언제든지 바꿀수 있음.

팁, display:none; 해주면 화면에서 태그가 사라짐

 

 

h1,a는 안에 있는 중복이기 때문에 압축 필요.

콤마(,) 라는 선택자를 통해서 코드의 양을 줄임.

중복 제거 과정

 

컨탠트와 테두리 사이 간격 지정 하려면

padding 속성 입력 ( 외투 패딩 생각하면 외우기 쉬움ㅎ)

 

테두리와 테두리 사이 간격 조절 하려면

magin 속성 입력 (장사하려면 마진남아야한다로 외우면 외우기 쉬움ㅎ)

magin 0 and 20px 값 비교

 

 

 

h1이라는 태그는 block level element 가 생략 되어 있는 상태.

줄전체가 아닌 부분을 바꾸고 싶다면 width값으로 크기 조절 가능

 

 

* 참고

추천검색어 css box model

웹페이지 오른쪽 클릭 후 검사 화면 들어가면 부피감에 대해 자세히 볼수 있음.

padding과 magin 비교