HTML, CSS Quiz - attribute/property, display, HTML5
1. Box model에 대해 설명해주세요.
- box model은 block box에 적용되는 모델로, content box, padding box, border box, margin box로 구성되어 있습니다.
1.1 box-sizing 속성에서 content-box와 border-box의 차이에 대해 설명해주세요.
- 100px로 지정되어 있을 때 여백이 고정되어 있으면서 content 내용이 줄어듭니다.
2. Attribute와 Property의 차이에 대해 설명해주세요.
- attribute는 HTML의 태그가 갖는 속성이고, property는 DOM 객체가 갖는 속성입니다.
- attribute 값은 문자열만 가능하지만, property 값은 모든 값이 가능합니다.
- attribute 이름은 대소문자를 구분하지 않지만, property 이름은 대소문자를 구분합니다.
3. display 속성에 어떤 것들이 있는지 설명해주세요.
- outer display 속성에는 block, inline이 있습니다.
- inner display 속성에는 flow, table, flex, grid 등이 있습니다.
3.1 block과 inline의 차이에 대해 설명해주세요.
- block 요소는 요소 앞 뒤에 줄바꿈을 생성하는 block 박스를 생성합니다.
- block 요소들은 위에서 아래로 배치됩니다.
- inline 요소는 요소 앞 뒤에 줄 바꿈을 생성하지 않는 inline 박스를 생성합니다.
- inline 요소들은 왼쪽에서 오른쪽으로 배치됩니다.
3.2 flex와 grid의 차이에 대해 설명해주세요.
- flex는 요소들의 1차원 layout을 설정할 때 사용됩니다. flex는 자식 요소들의 크기를 늘이거나 줄일 수 있고, 자식 요소들의 가로 세로 정렬이 쉽습니다.
- grid는 요소들의 2차원 layout을 설정할 때 사용됩니다. grid를 사용하여 요소들을 정확한 위치에 배치할 수 있고, 요소들을 부분적으로 겹치게 할 수 있습니다.
4. CSS 애니메이션과 JS 애니메이션의 차이에 대해 설명해주세요.
- CSS 애니메이션은 선언적인 반면에, JS 애니메이션은 명령적입니다.
- CSS 애니메이션은 요소와 무관하게 애니메이션 자체를 정의하는 반면에, JS 애니메이션은 요소의 스타일을 제어합니다.
- CSS 애니메이션은 compositor thread에 의해 처리되기 때문에, main thread의 비싼 작업에 방해받지 않습니다. 반면에 JS 애니메이션은 main thread에 의해 처리되기 때문에, main thread의 비싼 작업에 의해 지연될 수 있습니다.
5. CSS in JS의 장단점에 대해 설명해주세요.
- CSS in JS의 장점에 대해서 먼저 설명하면, 컴포넌트와 CSS가 동일한 파일 내 존재하기 때문에 수정하고 삭제하기 편합니다. 그리고 컴포넌트 상태를 공유할 수 있습니다. CSS가 컴포넌트에 격리되어 있기 때문에 상속 문제가 없습니다.
- CSS in JS의 단점에 대해 설명하면, 러닝 커브가 존재하고 별도의 라이브러리를 설치해야 하므로 번들 크기가 커집니다. 그리고 인터렉션 페이지의 경우 순수한 CSS에 비해 성능이 느립니다.
6. Semantic markup에 대해 설명해주세요.
- 시맨틱 마크업은 마크업 대상 컨텐츠에 어떤 의미나 목적을 부여하는 것을 말합니다.
6.1 semantic markup의 이점에 대해 설명해주세요.
- SEO 최적화에 유리합니다.
- 웹 접근성에 효율적입니다.
- 코드의 가독성이 좋아집니다.
- 유지보수가 편리해집니다.
6.2 semantic tag의 종류에 대해 아는대로 얘기해주세요.
- header, nav, main, section, article, aside, footer, address, hgroup, figure, figcaption, summary 등이 있습니다.
7. HTML과 HTML5의 차이에 대해 설명해주세요.
- HTML에서는 비디오와 오디오가 지원되지 않지만, HTML5에서는 비디오 및 오디오를 지원합니다.
- HTML은 거의 모든 브라우저에서 호환되는 반면에, HTML5는
대부분의 최신 브라우저에서 지원됩니다.
- HTML은 JavaScript와 브라우저 인터페이스가 동일한 스레드에서 실행되는 반면에, HTML5는 Web Worker API의 도움으로 백그라운드에서 JavaScript를 실행할 수 있으며 다른 스레드에서 실행될 수 있습니다.
- HTML에서 벡터 그래픽은 Silver light, Flash 등의 다른 도구를 사용하여 지원되는 반면에, HTML5에서는 벡터그래픽이 기본적으로 지원되며 캔버스와 SVG가 내장되어 있습니다.
- HTML은 브라우저 캐시 메모리를 임시 저장소로 사용하지만, HTML5는 Web Storage, Indexed DB, Application Cache 등 다양한 저장소 옵션이 있습니다.
- HTML에서 클라이언트와 서버 간의 통신은 스트리밍 및 긴 풀링을 통해 수행되었지만, HTML5에서는 Web Socket을 사용하여 클라이언트와 서버 간 통신을 할 수 있습니다.
- HTML에서는 부정확한 구문 및 기타 오류를 처리할 수 없었지만, HTML5에서는 부정확한 구문 및 기타 오류를 처리할 수 있습니다.
8. script 태그에서 async와 defer의 차이에 대해 설명해주세요.
- async 속성은 JS를 비동기로 다운 받으면서 다운 받은 JS를 즉시 실행하고 이때 HTML 파싱이 중단되는 반면에, defer 속성도 JS를 비동기로 다운 받는데 HTML 파싱이 완료되고 DOM 생성이 된 후에 JS를 실행을 시킵니다.
9. 가상 클래스에 대해 설명해주세요.
- 가상 클래스는 선택자에 추가하는 키워드로 선택한 요소의 특수 상태에 대한 스타일을 지정합니다.
- 가상 클래스는 colon(:)과 가상 클래스 이름으로 구성됩니다.
- 예를 들어 마우스를 호버했을 경우나 요소의 마지막 자식 요소 그리고 요소가 체크되어 있는 경우 등이 있습니다.
9.1 가상 요소에 대해 설명해주세요.
- 가상 요소는 선택자에 추가하는 키워드로 선택한 요소의 특정 부분에 스타일을 지정합니다.
- 가상 요소는 double colon(::)과 가상 요소 이름으로 구성됩니다.
- 예를 들어 요소의 앞 또는 뒤에 특정한 스타일을 넣는 경우가 있습니다.
10. margin 병합에 대해 설명해주세요.
- block의 top margin과 bottom margin이 하나의 가장 큰 margin으로 합쳐지는 행동을 말합니다.
- 인접해 있는 형제 요소들의 margin은 병합됩니다.
- 부모와 자식을 구분하는 컨텐츠가 없을 때 부모의 margin-bottom과 자식의 margin-top이 병합됩니다.
- 빈 block의 경우 margin-top과 marin-bottom이 병합됩니다.
10.1 margin 병합을 없애는 방법에 대해 설명해주세요.
- 요소들 사이에 inline 요소를 삽입하거나, 요소의 display를 inline-block으로 바꿉니다.
참고
