컨텐츠 영역에 boder까지를 포함시키는 box-sizing속성

    -------------------------------------------------
    css box모델을 계산할때 보통 넓이 width + (padding*2) + (boder*2) + (margin*)
    이런 공식으로 계산을 하지만, box-sizing속성을 이용하면 
    padding영역과 boder영역을 컨텐츠 영역(width/height)안에 포함시켜준다. 
    
    <속성값>
    -box-sizing : content-box;
        :기본값으로 padding과 boder를 컨텐츠 영역에 포함시키지 않는다. 

    -box-sizing : boder-box; ★
        :컨텐츠 영역안에 padding과 boder를 포함시킴. 
        
        
        

위의 값을 주고, 적용시켰을 때 con1은 값을 계산해야하지만, con2는 box-sizing를 적용해 넓비값 안에 들어갔으므로 굳이 계산값을 구하지 않아도 됨.

con2가 찌그러진 이우는 안에 패딩과 보더가 같이 컨텐츠 영역 안으로 들어갔으므로 실제 영역이 더 좁아짐.

만약에 내가 텍스트를 중앙으로 보내고 싶으면 라인-하이트를 추가하여 바꿔줄 수 있음.

이렇게 변화를 줄 수 있음.

※만약에 두 줄 이상이 br h1 p태그가 들어가면 라인하이트로 조절 안 됨
그럴때 패딩을 이용하면 된다.

svg를 다운받아 적용시키기

우선 다운받고, 비쥬얼 이름 바꾼다음에
이미지 파일 이름 바꿔서 넣어주기 !! 꼭!
-> 이미지 갖고 와서 폴더 안에 넣어주기 !

부모 박스 안에 자식 박스를 늘 가운데 정렬하게 만드려면 ! ★

margin: 0px auto;

적용시키기! = 0px자리-상하, auto ->좌우

좌우가 중요함! 좌우로 중간을 유지할 수 있는거이기 때문.

그리고

자식박스에 적용해야함 무조건

!

인라인블록 이었던 이미지가 블록속성만 갖게 되어 텍스트 처럼 취급 됨.

box실습

예시) 따라해볼거임 !
1. 더 가깝게가 제목 h4
2. 무료로 여는 제목2 h2
3. 귀퉁이 모양
4. 톡 안의 두 번째 매장과 컨텐츠 사이의 여백 100px
5. 해시태그 p4, 색 맞추기

//////////

선-은 논으로 해도 되지만!( 내맘!!!!!!)
이미지-0px에 auto라서 100%로 적용했을때 예에에쁘게 표현 됨.앤드
넓이를 100%로 해놓으면 부모컨텐츠의 100%를 차지하게 됨.

overflow는 패스파인더라고 생각하면 됨.
부모컨텐츠가 넓이 값을 가지면 자식 컨텐츠의 규격이 숨겨짐 .

컨텐츠끼리 떨어지게 하고 싶을때는 마진이용