선택n집중

블럭 요소의 수직 마진 공유 특성. 중첩되는 수직 마진은 서로 상쇄되어 하나의 마진으로 공유된다.수직마진이 서로 다른 경우 중첩되어 상쇄되는 특징으로 인해,마진이 큰 쪽으로 수렴되어 통합된다.부모요소와 자식관계의 수직 마진을 지정시에부모요소 안에 자식 요소안에 배치되는데 수직 마진이 서로 닿지 않는 경우서로 공유 되지 않았음을 확인 할 수 있다.point ! 블럭 요소의 마진이 서로 맞닿는가 ?  2) 경우 두 박스를 동일 마진을 줌으로써 , 중간에 맞닿은 마진 부분이 상쇄되어 마진이 10px 20px 10px 로 보이는 것이 아닌10px 10px 10px 로 변경됨을 볼 수 있음. 3 )경우 두 박스를 다른 마진을 줌으로써,중간에 맞닿은 마진이 상쇄되면서 , 마진이 큰 쪽으로 수렴됨.20px 30px ..

box Model개별 컨텐츠 요소를 감싸고 있는 사각 박스 형태.브라우저 화면에 영역을 차지하면서 , 표시되는 컨텐트 호함하는 전체 영역을 의미한다.컨텐트(content) - 패딩(padding) - 보더(border) - 마진 (margin) 으로 구성된다.또한 보더(border)의 바깥에 표시되는 아웃라인 (outline) 을 추가로 구성이 가능하다. content : 실제 내용이 표시 되는 영역.유일하게 영역에 대한 너비와 높이 지정이 가능하다.(width / height ) padding : 테두리와 컨텐츠 사이의 안쪽 여백. border : 테두리.외각 테두리 라인을 표시하는 영역으로 마진과 패딩사이에 표시된다. margin : 바깥쪽 여백.다른 요소와 공간적으로 분리 되며 , 빈 공간인 최 외..

viewport 를 알아보기 이전에 블럭 레벨 요소 와 % 단위의 특성을 한번 더 확인하고 가자. 블럭 레벨 요소는 높이는 내부컨텐트에 의해 결정되나 , 너비는 수평영역 전체를 차지. % 는 부모 요소를 기준으로 부모 요소의 컨텐트 영역 내에서 상대적 백분율 적용. p태그는 블럭 레벨 요소이다. 부모요소에 별도의 높이가 결정되지 않는 이상, p 태그의 높이에 대한 100% 지정은 부모 요소내에서 그 크기가 상대적으로 결정되는 % 단위의 특성과 내부 컨텐트의 크기에 의하여 높이가 결정되는 body 와 html등의 블럭 요소 특성이 서로 상쇄되어 의미 없는 높이 지정에 불과하다. p{ height: 100%; /*바보 코딩*/ } 부모의 컨텐트 영역 내에서 상대적 비율이 적용되는 % 단위의 특성으로 인해 p..