Q. 요소를 배치하는 방법(relative, fixed, absolute, static) 간의 차이는 무엇인가요?
position 속성: relative, fixed, absolute, static
- static: position의 초기값으로 위치를 지정하지 않을 때와 같다. 혹은 앞에 설정된 position을 무시할 때 사용되기도 한다. 물론 top, bottom, left, right 속성값은 적용되지 않는다.
- relative: 현재 위치를 기준으로 top, bottom, left, right를 설정하여 이동하는 좌표
- absolute: 가장 가까운 상위 요소를 기준으로 (static은 제외) 위치가 결정된다. 즉, 상위요소가 없으면 html을 기준으로 위치를 이동한다.
- fixed: 브라우저 화면의 상대 위치로, 화면이 바뀌더라도 고정된 위치를 설정할 수 있다.
Q. z-index란?
position(relative, fixed, absolute)요소에 대해서만 작동
어느 객체가 앞으로 나오고, 뒤로 배치될지 순서를 정하는 속성
z-index: number <- 배치 순서를 결정, 숫자가 낮을수록 뒤에 배치된다(음수도 가능)
Q. id와 class의 차이점은?
id는 고유한 스타일을 지정할 때 사용, class는 그룹으로 묶어서 스타일을 지정할 때 사용
Q. span와 div의 차이점은?
- 스타일 지정의 범위: span은 원하는 문자열만 선택해서 효과 줄 수 있고, div는 하나 이상의 태그를 묶어서 스타일 지정
- div : span = block : inline
Q. inline-block과 block 차이점은?
inline-block: 두 속성의 짬뽕으로, 기본적으로 inline과 비슷하다.
다만 inline의 단점을 커버하는 것이 inline-block인데,
- width/heigth 적용 가능
- margin/padding-top/bottom 적용 가능
- line-height 적용 가능
(inline은 위 속성 적용 불가능)(중요) inline-block은 div에만 쓸 수 있다(span은 ㄴㄴ, only inline)
Q. Doctype의 용도는?
DOCTYPE html 이란 웹문서가 어떤 버전의 HTML 언어로 작성되었는지 결정하는 기능. DTD(Document Type Declaration)를 통해서 현재의 웹문서가 어떤 버전의 HTML 기술로 작성되었는지 웹브라우저에 전달.
Q. float의 동작 원리는?
HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 설정. 예를 들어, 이미지와 문자열이 함께 inline된 상태에서, 이미지 태그에 float:left를 하게 되면, 이미지 태그가 차지하는 공간만 붕 뜨게 되고 그 외의 공간엔 문자열이 들어올 수 있게 된다.
