🌵시멘틱 태그란?
(HTML5) : div + 의미를 담고있는 태그
종류 = (header), (nav), (footer), …
🌵상대적 단위와 절대단위에 대하여 설명하시오.
상대적 단위 : %, vh(view height), px
절대적 단위 : cm, km, inch
🌵display 속성 5가지에 대하여 예를 들어 설명 하시오.
none
: 요소를 렌더링하지 않도록 설정한다.
visibility속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않는다.
block
: div, p, h, #, li 태그 등이 해당된다.
기본적으로 가로영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보인다. width, height 속성을 지정할 수 있으며, block요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링 된다.
inline
: span, b, i, a 태그 등이 해당된다.
block과 달리 줄 바꿈이 되지않고, width와 height를 지정할 수 없다. 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있다. inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시 된다.
inline-block
: block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정할 수 있다.
Internet Explorer 7 이하에서는 사용할 수 없다.
flex
: 아직 배우지 않았다.
🌵마진과 패딩의 차이는?
margin(=외부)
padding(=내부)
🌵박스모델에 대하여 설명하시오.
css에서는 각 요소를 박스 형태로 나타내며 이를 박스모델(box model)이라 한다. 문서의 레이아웃을 계산할 때, 브라우저는 css 기본 박스 모델에 따라 각 요소를 사각형 박스로 표현한다.
마진(margin) : 바깥 여백을 나타낸다.
테두리(border) : 마진과 패딩 사이의 테두리 영역을 나타낸다.
패딩(padding) : 안쪽 여백 영역을 나타낸다.
콘텐츠(content) : 실제 텍스트나 이미지가 들어가는 영역이다.
