Q. <!DOCTYPE html> 선언의 역할은?
A. 이 문서가 HTML5임을 브라우저에 알린다. 표준 모드(Standards Mode)로 렌더링되게 하여 quirks mode 오작동을 방지.
Q. 블록 요소와 인라인 요소의 차이는?
Block: 항상 새 줄 시작, width 100%, height/margin 지정 가능. (div, p, h1)Inline: 줄 안에 배치, 너비·높이 지정 불가. (span, a, strong)
div
p
h1
span
a
strong
Q. href와 src 속성의 차이는?
href (Hypertext Reference): 다른 리소스로 연결. <a>, <link>src (Source): 리소스를 현재 문서에 삽입. <img>, <script>, <iframe>
<a>
<link>
<img>
<script>
<iframe>
Q. id와 class 속성의 차이는?
id: 페이지 내 유일한 식별자. 하나의 요소에만 사용. CSS에서 #id로 참조.class: 여러 요소에 재사용 가능. CSS에서 .class로 참조.
#id
.class
Q. CSS 선택자 우선순위(명시도) 순서는?
인라인 style (1,0,0,0)> id 선택자 (0,1,0,0)> class · 속성 · 가상클래스 (0,0,1,0)> 태그 · 가상요소 (0,0,0,1)
Q. position: relative와 absolute의 차이는?
relative: 원래 위치 기준으로 이동. 문서 흐름 공간 유지.absolute: position이 지정된 가장 가까운 조상 기준. 문서 흐름에서 제거.
position
Q. 가상요소 ::before / ::after 사용 시 필수 속성은?
content 속성이 필수. 값이 없어도 content: ""로 명시해야 렌더링됨.요소의 앞(::before) · 뒤(::after)에 가상 콘텐츠를 삽입.
content
content: ""
Q. display:none과 visibility:hidden 차이는?
display: none: 요소가 완전히 제거됨. 공간도 차지 안 함.visibility: hidden: 보이지 않지만 공간은 유지됨.
display: none
visibility: hidden
Q. Box Model의 4가지 구성 요소는?
안쪽부터: content → padding → border → margincontent: 실제 내용 / padding: 내부 여백 / border: 테두리 / margin: 외부 여백
Q. box-sizing: border-box의 효과는?
지정한 width/height 안에 padding과 border를 포함시켜 계산.기본값(content-box)은 padding·border가 크기에 추가됨 → 레이아웃 계산이 복잡해짐.
width
height
content-box
Q. margin: auto는 언제 사용하나?
블록 요소를 수평 중앙 정렬할 때 사용.width가 지정되어 있어야 하며, 남은 공간을 양쪽 margin에 균등 분배.세로 방향에는 효과 없음.
Q. padding과 margin의 핵심 차이는?
padding: 요소 내부 여백. 배경색이 적용됨. 클릭 영역 포함.margin: 요소 외부 여백. 배경색 미적용. 인접 요소와의 간격 조절.