일반적인 HTML 및 CSS 인터뷰 질문 및 답변
- Barbara Streisand원래의
- 2025-01-08 22:27:42755검색
1. 의미론적 요소와 빈 HTML 요소 이해
의미론적 HTML 요소는 웹페이지 구조와 SEO를 향상시킵니다. 이는 콘텐츠에 의미를 부여하여 브라우저 해석과 코드 가독성을 모두 향상시킵니다. 예를 들면 <header>, <footer>, <article>, <section>, <nav>, <aside>, <main> 등이 있습니다.
빈 요소(void 요소라고도 함)에는 여는 태그와 닫는 태그 사이에 내용이 없습니다. 페이지 레이아웃을 효율적으로 제어합니다. 예를 들면 <img>, <br>, <hr>, <meta>, <link>, <source>
2. div 및 HTML의 span
<div> 요소는 블록 수준 요소로, 웹페이지 레이아웃 내에서 별개의 블록이나 섹션을 만듭니다. 이는 종종 단락, 이미지 및 기타 요소를 포함하는 페이지 구조의 기초입니다. CSS를 사용하여 스타일을 지정하는 경우도 많습니다.
<span> 요소는 한 줄 내 텍스트의 특정 부분에 스타일을 지정하는 데 사용되는 인라인 요소입니다. <div>과 달리 줄 바꿈을 만들지 않습니다. 주로 CSS와 함께 글꼴이나 색상 변경과 같이 텍스트 부분에 스타일을 적용하는 데 사용됩니다.
3. HTML 양식의 GET과 POST
GET 및 POST 방식 모두 서버에 데이터를 보냅니다. GET은 URL에 데이터를 추가하여 데이터 크기(일반적으로 2048자)를 제한하고 잠재적으로 민감한 정보를 노출시킵니다. 브라우저와 서버는 종종 GET 요청을 캐시합니다.
POST는 URL과 별도로 데이터를 전송하여 특히 로그인 자격 증명과 같은 민감한 데이터의 보안을 강화합니다. 각 POST 제출은 고유한 URL을 생성하여 북마크를 방지합니다.
4. 로컬 스토리지와 세션 스토리지
로컬 저장소는 브라우저를 닫았다가 다시 연 후에도 사용자 브라우저에 데이터를 유지합니다. 웹사이트 도메인과 관련된 키-값 쌍으로 저장됩니다.
세션 저장은 비슷하지만 일시적입니다. 브라우저 탭이나 창을 닫으면 데이터가 지워집니다. 도메인별로도 다릅니다.
5. CSS의 Z-index 속성
z-index 속성은 HTML 요소가 겹쳐지는 순서를 제어합니다. z-index 값이 더 높은 요소는 값이 더 낮은 요소 위에 표시됩니다. 이는 복잡한 웹 디자인에서 시각적 레이어링을 관리하는 데 중요합니다.
6. CSS 로딩 최적화
CSS 로딩 최적화:
- 중요한 CSS를
<head>섹션에 배치합니다. - CSS 파일을 축소 및 압축하여 크기를 줄입니다.
- 큰 CSS 파일을 더 작고 관리하기 쉬운 모듈로 분할하고 중요하지 않은 스타일시트를 지연 로딩합니다.
7. CSS 박스 모델
CSS 상자 모델은 페이지에서 요소가 렌더링되는 방식을 정의하는 기본 개념입니다. 각 요소는 콘텐츠(요소의 실제 콘텐츠), 패딩(콘텐츠와 테두리 사이의 공간), 테두리(요소의 테두리), 여백(요소의 테두리와 다른 요소 사이의 공간)의 네 가지 주요 구성요소가 있는 직사각형 상자로 처리됩니다. . 이러한 속성은 요소의 크기와 간격을 제어합니다.
8. CSS 의사 클래스 및 의사 요소
유사 클래스는 요소의 상태(예: :hover, :active, :visited, :focus)에 따라 선택기를 수정합니다. 의사 클래스 이름 앞에 콜론(:)을 사용하여 선택기에 추가됩니다.
유사 요소는 추가 HTML을 요구하지 않고 요소의 특정 부분에 스타일을 적용합니다(예: ::before, ::after). 의사 요소 이름 앞에 이중 콜론(::)을 사용합니다.
9. CSS 스프라이트
CSS 스프라이트는 여러 이미지를 단일 이미지 파일로 결합합니다. 이렇게 하면 HTTP 요청 수가 줄어들어 페이지 로드 시간과 성능이 향상됩니다. 그런 다음 CSS background-position를 사용하여 개별 이미지를 선택하여 스프라이트의 올바른 부분을 표시합니다.
10. CSS 미디어 쿼리
미디어 쿼리를 통해 개발자는 기기의 특성(화면 크기, 방향, 해상도 등)에 따라 다양한 스타일을 적용할 수 있습니다. 이를 통해 웹사이트의 레이아웃과 모양을 다양한 화면 크기와 장치에 맞게 조정하는 반응형 웹 디자인이 가능합니다.
위 내용은 일반적인 HTML 및 CSS 인터뷰 질문 및 답변의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!