IT_susu

마진병합이란 부모와 자식 혹은 자식간에 서로 마진이 겹치면서 하나만 적용되는 현상을 일컫는다.이는 버그가 아니라 애초에 의도된 것이다.자식과 자식간의 간격이 일정하길 바라기 때문에 위의 자식과 아래에 있는 자식 사이에 마진은 하나만 적용되는 것이 자연스러우나 부모와 자식간의 마진은 우리가 원하는 바가 아니라서 당황스러울 때가 많다. 의도된 마진병합 현상이 발생하는 조건은 아래 2가지를 충족했을 때이며 의도하지 않은 마진병합이라면 이 조건을 피해감으로써 해결할 수 있다. 마진병합현상이 발생하는 조건1) 서로 block 요소일 것2) 서로 간의 마진 사이에 경계를 지을만한 요소가 하나도 없을 것 마진 병합 해결방안[해결1] 안보이는 어떤 요소를 만들어준다.padding: 1px;, border: 1px so..

css 위에 예시처럼 같은 html요소를 가리키고 명령이 서로 충돌되는 경우, 브라우저는 어느 한 쪽의 편을 들어 명령을 적용해야겠죠?이럴때 시시비비를 가리는 것이 css우선순위다.구체적인 계산법이 존재하지만 실제로 그걸 일일이 계산까지 해가며 하는 것은 의미가 없다.구체적으로 선택자를 지정할수록 우선순위가 높다고 생각하면 되며, 우선순위간의 위계는 아래와 같다. 우선순위의 위계1. !important (급할때 유용하나 위계질서를 깨버리기 때문에 가급적 사용을 안해야 한다.)2. inline css (html 태그에 style속성으로 css 적용하는 것)3. id selector4. class selector5. type selector (태그명으로 선택자를 사용)

display 속성은 요소를 어떻게 보여줄 지 결정하는 속성이다.요소의 성격과 역할이 정해지기 때문에 매우 중요한 속성이고, 깊은 이해가 필요하다. 1. blockdisplay: block은 다른 요소와 어울리지 않고 나만의 고유한 영역을 가질 때 사용한다.좀 더 쉽게 말해 같은 줄에 다른 요소가 오지 못하도록 부모의 width값을 그대로 상속받는다.따라서 그 줄에 해당요소만 있어야 하거나 레이아웃을 짤 때 많이 사용된다.(요즘에는 display: flex를 이용하여 레이아웃을 짜기도 하지만 아직 크로스브라우징 문제가 있으므로 여기서는 논외로 한다.) 1-1) widthdefault value : auto마음대로 조절 가능하며 명시적으로 width를 지정하지 않는다면 부모의 width값만큼 상속받는다. ..