반응형 코드스피츠3 [CSS Rendering] Box Model & Absolute Position CSS Rendering - 2_고전 레이아웃 코드스피츠 유투브 강의 (고전)Box Model - 하나의 element 는 4단계의 box를 갖고있다. margin은 무조건 투명하며, 아직까지 색깔을 넣을 수 있는 기능은 없다. 투명하지만 실체를 확보하고 있는 공간이다. Border 도 외곽'선'이지만, 끝없는 영역 차지가 가능하기 때문에 하나의 property라고 볼 수 있다. 현재 Draft 중 border background 또한 줄 수 있기도 하다. Padding은 Border 과 Contents를 띄워주는 역할을 한다. Box-sizing - 박스 사이즈를 여러가지 관점에서 볼 수 있다. 기본값 : Contents-Box를 기준으로 되어있다. 하지만 padding-box(파이어폭스에서만 지원)나.. 2019. 10. 29. [CSS Rendering] 고전 레이아웃 CSS Rendering - 1 정리 blog 코드스피츠 유투브강의-2 Float ( left, right, none, inherit) New BFC Float over normal flow text, inline guard - float는 inline 요소의 가드로 작동한다. Line Box - BFC, IFC에 따라 그려지는것이 아니라, Line Box에 따라 그려진다. New BFC - Normal Flow + Float Model See the Pen QWWgVaJ by YunJeong (@melangyun) on CodePen. 두번째 div에서 float를 지정해주는 즉시 이전까지의 BFC를 파기하고 새로운 BFC영역이 시작된다. - 새로운 BFC영역은 inline (영역)공간의 차지하는 끝까.. 2019. 10. 27. [CSS Rendering] 배경설명, 고전레이아웃 코드스피츠 유투브강의-1 css를 배우는것은, css의 속성, 값이 발현될때 어떠한 식으로 계산되고 표현되는지 이해하는 데에 있다. Graphics system 그래픽 시스템은 근본적으로 x, y, width, height, column로 이루어져있다. Fixed Number로 범용성있는 Graphics System구축을 위해서는 여러 문제가 발생한다. Sreen size Chrome size Hierarchy 이에 따라서 여러가지 (계산법)이 등장하였다. - 실제로 화면에 그려질 때 환경을 인식해서 숫자로 변환해줌. 함수이자 공식! 실제 그림이 그려지는 순간마다 함수를 돌려 숫자를 얻어(계산해) 그림을 얻게됨. % Left InLine Float ...... 이러한 체계를 추상화된 계산된 체계라고 하여.. 2019. 10. 27. 이전 1 다음 728x90 반응형
