반응형

태그 2

a 태그의 링크 상태와 LVHA 법칙

a 태그의 링크 상태에 따라 다른 스타일을 적용할 수 있는 의사 클래스(pseudo-class)이다. 1. 각 상태의 의미의사 클래스설명a:link한 번도 방문하지 않은 링크에 적용a:visited이미 방문한 링크에 적용a:hover마우스를 올렸을 때 적용a:active클릭했을 때(마우스를 눌렀을 때) 적용 2. 정확한 적용 순서 (LVHA 법칙)CSS의 우선순위 때문에 적용 순서가 중요하다.올바른 순서는 LVHA(Link → Visited → Hover → Active)이다. ✅ 순서 (무조건 이 순서로 써야 함)a:link { color: blue; } /* 방문 전 기본 링크 색 */a:visited { color: purple; } /* 방문한 링크 색 */a:hover { color..

[HTML] HTML 문서에서 <style>과 <script> 태그가 렌더링 순서에 미치는 영향

브라우저가 HTML 문서를 로드하고 렌더링할 때, CSS와 JavaScript의 위치와 로딩 방식에 따라 렌더링 순서와 성능이 달라진다.HTML 문서에서  ✅ CSS를 빠르게 로드할 수 있어 렌더링이 최적화됨.✅ FOUC 방지: CSS가 먼저 로드되므로 스타일이 적용되지 않은 화면이 깜빡이는 현상을 방지.  (2) 내부에  ⚠️ 스타일이 늦게 적용되면, 이미 화면에 표시된 요소가 다시 그려져 FOUC 발생 가능.⚠️ 리플로우(Reflow) 발생: 스타일 변경으로 인해 레이아웃이 다시 계산됨. ➡ 따라서 CSS는  ⚠️ 문제점 • 스크립트 실행이 끝날 때까지 HTML 파싱이 멈추므로 렌더링 지연 발생. • 사용자가 빈 화면을 보게 될 가능성이 있음. 2) JavaScript 실행 최적화 방법렌더링을 최적..

반응형