I'm a Fig, Not a Pig

1. CSS Box Model의 HTML요소를 설명하기 모든 HTML요소는 박스 모양으로 구성이 되고, 이것을 박스모델이라고 한다. 박스모델의 html 요소는 콘텐츠, 패딩, 보더, 마진 4가지가 있다. 먼저 콘텐츠는 텍스트나 이미지와 같은 박스의 실질적인 내용을 담당하는 부분이고, 패딩은 콘텐츠와 보더 사이의 간격을 말한다. 보더는 콘텐츠와 패딩 주변을 감싸는 테두리이며 마진은 테두리와 다른 요소 사이의 간격을 말한다. 2. .class > a와 .class a의 차이점 설명하기 전자는 .class는 직계 자식인 a태그를 선택하는 반면에 후자는 .class의 모든 a태그를 선택한다. 3. .text의 글자색이 흰색으로 변경되지 않은 이유 설명하기 Codeit css 공부 #header > .text{ ..

1. class와 id의 차이점 설명하기 id는 유일한 요소에 적용할 때, css는 복수의 요소에 적용할 때 사용한다. 또한 하나의 id는 하나의 요소에서 한 번만 사용이 가능하지만 class는 동일한 클래스를 여러 요소에서 사용이 가능하다. *추가 질문: 우선순위는 id와 class 중에 어떤 것이 더 높은가? id가 더 높다 2. padding과 margin의 차이점 설명하기 margin은 대상의 외부 여백을 의미하고, padding은 대상의 내부 여백을 의미한다. 3. display: block과 display: inline의 차이점 설명하기 display: block 은 위에서부터 아래로 배치되고 너비와 높이를 지정할 수 있다. 반면 display: inline 은 평소에 글 쓰는 방향으로 줄이 ..

1. width:auto; 과 width:100%; 의 차이점에 대해 설명하기 width: auto는 내용물(자식 요소)의 크기에 맞춰 자동으로 크기가 조절된다. 하지만 display: block인 경우에 width: auto를 설정할 경우 내용물 크기가 아닌 부모 요소의 크기만큼 조절된다. 결론적으로 태그의 요소 성질(block, inline-block, inline)에 맞춰 자동설정 된다. width: 100%는 부모 요소 크기만큼 크기가 조절된다. 따라서 margin을 추가하면 부모의 영역을 벗어나는 것을 볼 수 있다.