일반적인 HTML 및 CSS 인터뷰 질문 및 답변

1. 의미론적 요소와 빈 HTML 요소 이해

의미론적 HTML 요소는 웹페이지 구조와 SEO를 향상시킵니다. 이는 콘텐츠에 의미를 부여하여 브라우저 해석과 코드 가독성을 모두 향상시킵니다. 예를 들면 <header></header>, <footer></footer>, <article></article>, <section></section>, <nav></nav>, <aside></aside>, <main></main> 등이 있습니다.

빈 요소(void 요소라고도 함)에는 여는 태그와 닫는 태그 사이에 내용이 없습니다. 페이지 레이아웃을 효율적으로 제어합니다. 예를 들면 <img alt="일반적인 HTML 및 CSS 인터뷰 질문 및 답변" >, <br>, <hr>, <meta>, <link>, <source></source>

등이 있습니다.

2. div 및 HTML의 span

<div> 요소는 블록 수준 요소로, 웹페이지 레이아웃 내에서 별개의 블록이나 섹션을 만듭니다. 이는 종종 단락, 이미지 및 기타 요소를 포함하는 페이지 구조의 기초입니다. CSS를 사용하여 스타일을 지정하는 경우도 많습니다. <p><code><span></span> 요소는 한 줄 내 텍스트의 특정 부분에 스타일을 지정하는 데 사용되는 인라인 요소입니다. <div>과 달리 줄 바꿈을 만들지 않습니다. 주로 CSS와 함께 글꼴이나 색상 변경과 같이 텍스트 부분에 스타일을 적용하는 데 사용됩니다. <p><strong>3. HTML 양식의 GET과 POST</strong></p> <p>GET 및 POST 방식 모두 서버에 데이터를 보냅니다. GET은 URL에 데이터를 추가하여 데이터 크기(일반적으로 2048자)를 제한하고 잠재적으로 민감한 정보를 노출시킵니다. 브라우저와 서버는 종종 GET 요청을 캐시합니다.</p> <p>POST는 URL과 별도로 데이터를 전송하여 특히 로그인 자격 증명과 같은 민감한 데이터의 보안을 강화합니다. 각 POST 제출은 고유한 URL을 생성하여 북마크를 방지합니다.</p> <p><strong>4. 로컬 스토리지와 세션 스토리지</strong></p> <p>로컬 저장소는 브라우저를 닫았다가 다시 연 후에도 사용자 브라우저에 데이터를 유지합니다. 웹사이트 도메인과 관련된 키-값 쌍으로 저장됩니다.</p> <p>세션 저장은 비슷하지만 일시적입니다. 브라우저 탭이나 창을 닫으면 데이터가 지워집니다. 도메인별로도 다릅니다.</p> <p><strong>5. CSS의 Z-index 속성</strong></p> <p><code>z-index 속성은 HTML 요소가 겹쳐지는 순서를 제어합니다. z-index 값이 더 높은 요소는 값이 더 낮은 요소 위에 표시됩니다. 이는 복잡한 웹 디자인에서 시각적 레이어링을 관리하는 데 중요합니다.

6. CSS 로딩 최적화

CSS 로딩 최적화:

• 중요한 CSS를 섹션에 배치합니다.
• CSS 파일을 축소 및 압축하여 크기를 줄입니다.
• 큰 CSS 파일을 더 작고 관리하기 쉬운 모듈로 분할하고 중요하지 않은 스타일시트를 지연 로딩합니다.

7. CSS 박스 모델

CSS 상자 모델은 페이지에서 요소가 렌더링되는 방식을 정의하는 기본 개념입니다. 각 요소는 콘텐츠(요소의 실제 콘텐츠), 패딩(콘텐츠와 테두리 사이의 공간), 테두리(요소의 테두리), 여백(요소의 테두리와 다른 요소 사이의 공간)의 네 가지 주요 구성요소가 있는 직사각형 상자로 처리됩니다. . 이러한 속성은 요소의 크기와 간격을 제어합니다.

8. CSS 의사 클래스 및 의사 요소

유사 클래스는 요소의 상태(예: :hover, :active, :visited, :focus)에 따라 선택기를 수정합니다. 의사 클래스 이름 앞에 콜론(:)을 사용하여 선택기에 추가됩니다.

유사 요소는 추가 HTML을 요구하지 않고 요소의 특정 부분에 스타일을 적용합니다(예: ::before, ::after). 의사 요소 이름 앞에 이중 콜론(::)을 사용합니다.

9. CSS 스프라이트

CSS 스프라이트는 여러 이미지를 단일 이미지 파일로 결합합니다. 이렇게 하면 HTTP 요청 수가 줄어들어 페이지 로드 시간과 성능이 향상됩니다. 그런 다음 CSS background-position를 사용하여 개별 이미지를 선택하여 스프라이트의 올바른 부분을 표시합니다.

10. CSS 미디어 쿼리

미디어 쿼리를 통해 개발자는 기기의 특성(화면 크기, 방향, 해상도 등)에 따라 다양한 스타일을 적용할 수 있습니다. 이를 통해 웹사이트의 레이아웃과 모양을 다양한 화면 크기와 장치에 맞게 조정하는 반응형 웹 디자인이 가능합니다.