13주차 학습 — DevFlash

position 속성 개요

position은 요소를 어떤 기준으로 배치할지 정하는 속성입니다. top·right·bottom·left 값과 함께 사용하며, 어떤 position 값이냐에 따라 이 좌표값의 기준이 달라집니다.

값	기준	문서 흐름
`static`	기본값 — 배치 안 함	그대로 따름
`relative`	자기 원래 위치	원래 자리 차지(공간 유지)
`absolute`	가장 가까운 positioned 조상	흐름에서 빠짐(공간 사라짐)
`fixed`	브라우저 화면(뷰포트)	흐름에서 빠짐, 스크롤해도 고정

static · relative

static은 모든 요소의 기본값으로, top/left 값을 줘도 무시됩니다. 일반적인 문서 흐름대로 위에서 아래로 쌓입니다.

relative는 자기가 원래 있던 자리를 기준으로 이동합니다. 중요한 점은 원래 자리는 그대로 차지한다는 것 — 옆 요소들은 밀려나지 않습니다.

static (기본)

#two {
  background: yellow;
}
/* top/left 줘도 무시.
   원래 흐름대로 배치 */

relative

#two {
  position: relative;
  left: 30px;   /* 원래 위치에서
                   오른쪽으로 30px */
}

            relative의 또 다른 핵심 용도: 자식 요소의 absolute 배치 기준점이 됩니다.
            부모에 position: relative를 주면, 그 안의 absolute 자식은 부모를 기준으로 배치됩니다.
          

absolute

absolute는 문서의 일반 흐름에서 완전히 빠져나옵니다(원래 자리가 사라져 다른 요소가 그 공간을 채움). 기준점은 가장 가까운 positioned 조상(static이 아닌 조상)이며, 그런 조상이 없으면 <body>(문서 전체)가 기준이 됩니다.

/* 부모에 relative → 기준점이 됨 */
#container {
  position: relative;   /* 기준 컨테이너 */
  width: 600px;
}
/* 자식은 부모(#container) 기준으로 배치 */
#two {
  position: absolute;
  top: 30px;
  left: 30px;
}

            "relative 부모 + absolute 자식"은 가장 많이 쓰는 짝입니다.
            부모에 relative만 선언하고(좌표는 안 줌), 자식을 absolute로 부모 안에서 자유 배치하는 패턴입니다.
            만약 부모에 relative가 없으면 자식은 화면(body) 기준으로 엉뚱한 곳에 갑니다.
          

fixed

fixed는 브라우저 화면(뷰포트)을 기준으로 고정됩니다. 페이지를 스크롤해도 항상 같은 위치에 머무릅니다. 상단 고정 헤더, "맨 위로" 버튼, 떠 있는 채팅 버튼 등에 사용됩니다.

#topbar {
  position: fixed;
  top: 0;
  right: 0;       /* 화면 우측 상단에 고정 */
  background: yellow;
}
/* 스크롤을 내려도 항상 같은 자리에 보임 */

	relative	absolute	fixed
기준	자기 원래 위치	positioned 조상	뷰포트(화면)
원래 공간	유지	사라짐	사라짐
스크롤 시	같이 이동	같이 이동	고정

grid 레이아웃

Grid는 행(row)과 열(column)의 2차원 격자로 배치하는 레이아웃 시스템입니다. 컨테이너에 display: grid를 주고, grid-template-columns로 열의 개수·너비를 정합니다.

.grid {
  display: grid;
  gap: 20px;
}

/* 모바일: 1단 */
.grid { grid-template-columns: 1fr; }

/* 태블릿(768px+): 2단 */
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* 데스크톱(1024px+): 3단 */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

표현	의미
`1fr`	남은 공간을 비율(fraction)로 나눔 — 1칸
`repeat(3, 1fr)`	`1fr 1fr 1fr` — 3등분 열
`gap: 20px`	행·열 사이 간격

            flex vs grid:
            Flex는 한 방향(가로 또는 세로)의 1차원 배치 ·
            Grid는 행과 열을 동시에 다루는 2차원 배치. 카드 갤러리처럼 격자형 레이아웃엔 grid가 편리합니다.
          

float 속성

float은 요소를 왼쪽 또는 오른쪽으로 띄워, 그 주변(특히 텍스트)이 요소를 감싸 흐르게 합니다. 원래는 신문처럼 이미지 옆으로 글자를 흐르게 하는 용도였습니다.

img {
  float: left;        /* 이미지를 왼쪽으로 띄움 */
  margin-right: 40px; /* 글자와의 간격 */
}
/* → 뒤따르는 <p> 텍스트가 이미지 오른쪽을 감싸며 흐름 */

float된 요소는 일반 흐름에서 빠지므로, 부모의 높이가 0이 되거나 다음 요소가 밑으로 파고드는 문제가 생깁니다. 이를 clear로 해제합니다.

.clear { clear: both; }  /* 좌우 float 모두 해제 */

<div id="logo">...</div>     <!-- float: left -->
<ul id="top_menu">...</ul>   <!-- float: right -->
<div class="clear"></div>    <!-- float 흐름 끊기 -->

float 메뉴 vs position 메뉴

같은 헤더(로고 왼쪽 + 메뉴 오른쪽)를 두 가지 방식으로 만들 수 있습니다.

float 방식

#logo    { float: left; }
#top_menu { float: right; }
#top_menu li { display: inline; }
.clear   { clear: both; }

position 방식

#header  { position: relative; }
#logo    { position: relative;
           top: 30px; left: 30px; }
#top_menu { position: absolute;
            top: 40px; right: 20px; }

            핵심 차이:
            float 방식은 흐름을 따라 좌·우로 밀어내고 clear가 필요 ·
            position 방식은 #header를 relative 기준으로 삼고
            메뉴를 absolute로 좌표 지정해 정밀하게 고정합니다.
          

iframe 삽입 — 동영상 · 지도

<iframe>은 현재 페이지 안에 다른 웹 페이지를 끼워 넣는 인라인 프레임입니다. 유튜브 영상, 구글 지도 등 외부 콘텐츠를 임베드할 때 사용합니다.

<!-- 유튜브 영상 삽입 -->
<iframe width="400" height="300"
  src="https://www.youtube.com/embed/영상ID"
  frameborder="0" allowfullscreen></iframe>

유튜브는 일반 시청 주소(watch?v=)가 아니라 임베드 주소(/embed/)를 써야 합니다. 구글 지도도 [공유 → 지도 퍼가기]에서 제공하는 iframe 코드를 붙여넣습니다.

<!-- 내 서버의 동영상 파일은 <video> 사용 -->
<video src="./src/test.mp4" controls
  width="400" height="300"></video>

태그	용도
`<iframe>`	외부 페이지 임베드 (유튜브, 구글 지도)
`<video>`	내 서버에 있는 동영상 파일 재생
`allowfullscreen`	전체화면 버튼 허용 속성

퀴즈로 복습하기

13주차 퀴즈 풀기 →