HTML & CSS

1. Semantic Tag의 개념과 사용하면 좋은 점

• HTML에서 태그 이름만 봐도 그 안에 담긴 내용의 의미나 역할을 알 수 있도록 만든 태그
  Semantic Tag를 사용하면 코드의 의미를 명확하게 표현할 수 있습니다. 단순히 div로만 구성된 구조보다, header나 main, article같은 태그를 사용하면 브라우저나 개발자, 보조기기 모두가 해당 영역의 역할을 명확히 이해할 수 있습니다. 이를 통해 스크린 리더가 영역의 역할을 정확히 파악할 수 있어서 접근성이 높아지고 코드의 가독성과 유지보수성도 향상됩니다. 또한 검색 엔진이 페이지 구조를 더 잘 인식하기 때문에 SEO 측면에서도 유리합니다. 즉 Sematic Tag는 단순히 시각적 구분이 아니라 의미있는 구조와 접근성, 검색 효율성까지 개선하는 요소라고 생각합니다.

2. 메타 태그의 용도는 무엇인가요?

• <meta> 태그는 문서의 메타데이터를 정의하는데 사용하고 문서의 정보를 브라우저나 검색 엔진, 외부 서비스에 전달하는 역할을 합니다.

3. 이미지 태그에서 alt 속성의 중요성은 무엇인가요?

• alt 속성은 이미지가 로드되지 않았을 때 표시되는 대체 텍스트로, 시각 장애인 사용자가 화면 읽기 프로그램을 통해 이미지를 인식할 수 있도록 돕습니다. 또한 검색 엔진은 이미지를 직접 해석할 수 없기 때문에 alt 속성을 참고해 이미지의 의미를 이해합니다. 따라서 올바른 alt 텍스트를 작성하면 접근성을 높이는 동시에 SEO에도 긍정적인 영향을 줍니다.

4. href와 src의 차이점에 대해 설명하세요.

• href는 하이퍼링크 참조로, 페이지 간 이동이나 외부 문서를 연결하기 위해 URL을 지정할 때 사용합니다. 예를 들어 <a>나 <link> 태그에서 사용되어 다른 문서나 리소스로 이동할 수 있도록 합니다.
  반면 src는 source의 약자로, 이미지나 스크립트, 비디오 등 외부 리소스를 현재 문서에 불러와 삽입할 때 사용합니다. 즉, href는 연결(참조) 의 개념이고, src는 불러오기(삽입) 의 개념입니다.

5. margin과 padding이란?

• CSS에서 margin과 padding 모두 요소의 여백을 지정할 때 사용하지만, 적용되는 위치가 다릅니다. margin은 요소의 바깥쪽 여백으로, 요소와 요소 사이의 간격을 조절할 때 사용합니다. 반면 padding은 요소의 안쪽 여백으로, 요소의 콘텐츠와 테두리 사이의 간격을 조정할 때 사용되며 width에 포함되기 때문에 박스 크기에 영향을 줍니다. 즉 margin은 요소 간의 간격을, padding은 요소 내부의 여유 공간을 조절한다고 정리할 수 있습니다.

6. postion이란?

• CSS에서 position은 요소의 위치를 어떻게 배치할지를 지정하는 속성입니다. 즉, 요소가 문서의 흐름에서 어떤 기준으로 배치될지를 결정합니다. postion에는 대표적으로 static, relative, absolute, fixed, sticky 다섯가지가 있습니다. static은 기본값으로 요소가 문서의 일반적인 흐름에 따라 배치됩니다. relative는 요소를 원래 위치를 기준으로 이동시킬 수 있습니다. absolute는 일반 흐름에서 벗어나며, 가장 가까운 position이 지정된 부모 요소를 기준으로 배치됩니다. fixed는 뷰포트를 기준으로 고정되어, 스크롤해도 위치가 변하지 않습니다. sticky는 스크롤 위치에 따라 relative와 fixed가 번갈아 적용되어, 특정 지점에 도달하면 화면에 고정되는 형태로 작동합니다.

7. CSS에서 sass(scss)의 장점

• Sass는 css를 더 효율적으로 작성할 수 있게 도와주는 CSS 전처리기입니다. 일반 CSS보다 구조적이고 재사용성이 높은 코드를 작성할 수 있다는 장점이 있습니다. 대표적인 특징으로는 첫번째, 변수를 사용해 색상, 폰트, 크기 등을 재사용할 수 있고 두번째, 중첩으로 선택자 구조를 직관적으로 표현할 수 있습니다. 세번째, 믹스인과 함수를 활용하면 반복되는 스타일을 재사용할 수 있습니다. 마지막으로, 상속으로 공통 속성을 여러 요소에 쉽게 적용할 수 있습니다.

8. Cascading

• CSS의 Cascading은 여러 스타일이 한 요소에 적용될 때, 우선순위에 따라 단계적으로 적용되는 방식을 의미합니다. 3가지 기준으로 어떤 스타일이 최총적으로 적용될지를 결정합니다. 먼저, 명시도 선택자의 구체적인 정도이며 두번째, 소스 순서 같은 우선순위일경우, 나중에 선언된 스타일이 적용됩니다. 마지막으로 중요도, !important가 붙은 스타일은 최우선으로 적용이 됩니다. 이런 과정을 통해 여러 스타일이 충돌하더라도 일관된 규칙에 따라 최종 스타일이 결정되는것이 Cascading입니다.

9. Flexbox와 Grid의 차이

• Flexbox와 Grid는 모두 CSS의 레이아웃을 구성하기 위한 방법이지만, 가장 큰 차이점은 배치의 차원에 있습니다. Flexbox는 1차원 레이아웃으로, 요소를 가로 또는 세로 한 방향으로 정렬할 때 사용합니다. 주로 버튼 그룹, 네비게이션 바처럼 일렬 정렬이 필요한 경우에 적합합니다. 반면 Grid는 2차원 레이아웃으로, 행과 열 모두를 동시에 제어할 수 있습니다. 페이지 전체 레이아웃처럼 복잡한 구조를 만들 때 유용합니다. 즉, Flexbox는 한 줄 정렬 중심, Grid는 행과 열이 있는 2D 구조 중심으로 구분할 수 있습니다.

10. CSS의 박스 모델에 대해 설명하세요.

• CSS의 박스 모델은 모든 HTML 요소를 하나의 사각형 박스로 보고, 이 박스를 구성하는 영역들의 관계를 정의한 개념입니다. 박스 모델은 안쪽부터 content, padding, border, margin의 영역으로 구성됩니다. content는 실제 내용이 표시되는 영역이고, padding은 콘텐츠와 테두리 사이의 여백, border는 요소의 테두리, margin은 요소와 다른 요소 사이의 바깥 여백을 의미합니다. 요소의 전체 크기는 content + padding + borer + margin으로 계산되며, box-sizing:border-box 속성을 사용하면 padding과 border가 width 안에 포함되어 크기 계산이 달라집니다.

11. box-sizing을 border-box로 설정하면 어떤 차이가 생길까?

• CSS에서 box-sizing을 border-box로 설정하면, 요소의 width와 height 계산 방식이 달라집니다. 기본값인 content-box에서는 width가 콘텐츠 영역만을 의미하기 때문에 paddig이나 border를 추가하면 실제 요소의 전체 크기가 커집니다. 반면 border-box를 사용하면 padding과 border가 width와 height에 포함되어 계산됩니다. 즉 요소의 총 크기가 늘어나지 않고, 지정한 width 안에서 내부 여백과 테두리가 함께 계산됩니다. 이 방식은 레이아웃을 잡을 때 크기 계산을 단순하게 만들어 예상치 못한 오버플로우나 깨짐을 방지할 수 있습니다.

12. display: block과 display: inline의 차이점은 무엇인가요?

• block와 inline은 요소가 화면에 배치되는 방식을 결정하는 속성입니다. block 요소는 항상 새로운 줄에서 시작하며, 기본적으로 부모 요소의 가로 너비를 전부 차지합니다. width, height, margin, padding 속서을 자유롭게 적용할 수 있습니다. 대표적인 예로는 <div>, <p>, <section>등이 있습니다. 반면 inline 요소는 같은 줄 안에 배치되며, 콘텐츠의 크기만큼만 공간을 차지합니다. weight와 height 속성은 적용되지 않고 margin과 padding은 좌우 방향만 부분적으로 적용됩니다. 대표적인 예로는 <span>, <a>, <strong> 등이 있습니다. 즉, block은 한 줄 전체를 차지하는 박스, inline은 내용만큼 차지하는 인라인 요소로 구분할 수 있습니다.

13. CSS와 HTML5를 비교설명해 보세요

• HTML5와 CSS는 모두 웹페이지를 구성하는 핵심 기술이지만, 역할이 다릅니다. HTML5는 웹 페이지의 구조와 내용을 정의하는 언어입니다. 반면 CSS는 HTML로 구성된 구조에 디자인과 레이아웃을 적용하는 스타일 언어입니다. 즉 HTML5는 웹의 뼈대(구조)를 만들고, CSS는 그 위에 살(디자인)을 입히는 역할을 한다고 볼 수 있습니다.