Q. position의 네 가지 값(static·relative·absolute·fixed)의 배치 기준은 각각 무엇인가?
position
static
relative
absolute
fixed
Q. position: static인 요소에 top: 30px을 주면 어떻게 되나?
position: static
top: 30px
top
right
bottom
left
Q. position: relative; left: 30px;일 때 요소와 주변 요소는 어떻게 되나?
position: relative; left: 30px;
Q. position: absolute 요소는 무엇을 기준으로 배치되나? 기준이 될 조상이 없으면?
position: absolute
<body>
Q. 자식 요소를 부모 영역 안에서 좌표로 배치하려 한다. 부모·자식에 어떤 position을 주나?
position: relative
#container { position: relative; } #two { position: absolute; top: 30px; left: 30px; }
Q. position: fixed의 특징은? 어떤 UI에 쓰나?
position: fixed
#topbar { position: fixed; top: 0; right: 0; }
Q. Grid 레이아웃을 시작하고 3개의 균등한 열을 만들려면?
display: grid
grid-template-columns
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
1fr
repeat(3, 1fr)
Q. grid로 모바일 1단 / 태블릿 2단 / 데스크톱 3단 반응형을 만들려면?
.grid { grid-template-columns: 1fr; } @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
Q. float: left를 이미지에 주면 어떤 효과가 나나?
float: left
img { float: left; margin-right: 40px; }
Q. float 때문에 레이아웃이 무너질 때(다음 요소가 파고들 때) 해결하는 속성은?
float
clear
.clear { clear: both; }
both
div
Q. 로고(왼쪽) + 메뉴(오른쪽) 헤더를 float 방식과 position 방식으로 만들 때 차이는?
#logo {float:left}
#top_menu {float:right}
#header {position:relative}
#top_menu {position:absolute; right:20px}
Q. 유튜브 영상을 페이지에 삽입할 때 쓰는 태그와 주의점은? video와는 어떻게 다른가?
video
<iframe>
/embed/
<iframe width="400" height="300" src="https://www.youtube.com/embed/ID" allowfullscreen></iframe>
<video>