2025-01-30T01:41:18

docs/04_레이아웃.md

@@ -0,0 +1,137 @@
+# 레이아웃
+
+## display 
+요소가 어떻게 배치되는지를 결정
+* block	: 블록 요소 (새 줄에서 시작)
+* inline :	인라인 요소 (한 줄 안에 배치)
+* inline-block :	인라인처럼 배치되지만 크기 조절 가능
+* none :	요소를 숨김
+* flex :	플렉스 박스 활성화
+* grid :	그리드 시스템 활성화
+```css
+.box {
+  display: flex;
+}
+```
+
+## position
+요소를 정확한 위치에 배치할 때 사용
+* static :	기본값 (HTML 흐름을 따름)
+* relative :	원래 위치 기준으로 이동
+* absolute :	부모 요소 기준으로 절대 위치
+* fixed :	뷰포트 기준으로 고정
+* sticky :	스크롤 시 특정 위치에서 고정
+> absolute는 가까운 position: relative 부모 요소 기준으로 배치됨
+```css
+.box {
+  position: absolute;
+  top: 50px;
+  left: 100px;
+}
+```
+
+## top, right, bottom, left
+* top :	요소를 위에서 아래로 이동
+* right :	요소를 오른쪽에서 왼쪽으로 이동
+* bottom :	요소를 아래에서 위로 이동
+* left :	요소를 왼쪽에서 오른쪽으로 이동
+
+> 이 속성들은 요소의 **position 값이 relative, absolute, fixed, sticky**일 때만 동작해!<br />
+> static일 때는 적용되지 않음!
+
+### relative에서의 사용
+* 요소가 원래 위치를 기준으로 이동
+```css
+.box {
+    position: relative;
+    top: 20px;   /* 원래 위치보다 20px 아래로 이동 */
+    left: 10px;  /* 원래 위치보다 10px 오른쪽으로 이동 */
+}
+```
+### absolute에서의 사용
+* 가장 가까운 position: relative를 가진 부모 요소를 기준으로 이동
+* 부모가 없으면 **뷰포트(브라우저 화면)**를 기준으로 배치됨
+```css
+.parent {
+  position: relative;
+}
+
+.box {
+  position: absolute;
+  top: 50px;
+  right: 20px;
+}
+/* .box는 .parent 기준으로 위에서 50px, 오른쪽에서 20px 떨어진 위치에 배치됨 */
+```
+
+### fixed에서의 사용
+* **브라우저 화면(뷰포트)**을 기준으로 고정
+```css
+.box {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+}
+/* 화면의 오른쪽 하단에 고정됨 (스크롤해도 움직이지 않음) */
+```
+
+### sticky에서의 사용
+* 스크롤에 따라 움직이다가 특정 위치에 고정됨
+```css
+.box {
+  position: sticky;
+  top: 0;
+}
+/* .box는 스크롤되다가 top: 0 위치에 도달하면 고정됨 */
+```
+
+## z-index
+요소의 쌓이는 순서를 결정 (값이 클수록 위에 위치)
+```css
+.box {
+  position: absolute;
+  z-index: 10;
+}
+```
+
+## float
+요소를 왼쪽 또는 오른쪽으로 띄움. 주로 이미지나 텍스트 레이아웃에서 사용.
+```css
+img {
+  float: right;
+  margin: 10px;
+}
+```
+> float을 사용하면 요소가 부모 요소를 빠져나올 수 있기 때문에, `clear: both;`를 이용해 레이아웃을 정리해야 함
+
+## clear
+clear 속성은 float된 요소 옆에 다른 요소가 배치되는 것을 막아줌. 
+float 속성을 사용할 때, 레이아웃이 깨지는 걸 방지하는 용도로 사용됨.
+* none :	기본값 (제거 없음)
+* left :	왼쪽의 float을 해제
+* right :	오른쪽의 float을 해제
+* both :	양쪽 모두 해제
+
+## overflow
+콘텐츠가 부모 요소보다 커질 때 어떻게 처리할지 결정하는 속성!
+* visible :	(기본값) 넘치는 콘텐츠를 그대로 표시
+* hidden :	넘치는 부분을 숨김
+* scroll :	스크롤바 생성 (항상 표시됨)
+* auto :	넘칠 때만 스크롤바 생성
+```css
+.box {
+  width: 100px;
+  height: 50px;
+  overflow: hidden;
+} /* 넘치는 부분이 잘려서 보이지 않음 */
+```
+
+## visibility
+visibility 속성은 요소를 보이거나 숨길 때 사용되며, `display: none;`과의 차이가 있음!
+* visible :	기본값 (요소가 보임)
+* hidden :	요소가 보이지 않지만 공간은 유지
+* collapse :	table-row, table-column을 숨길 때 사용
+
+> * `visibility: hidden;` : 요소가 보이지 않지만 공간은 그대로 유지
+> * `display: none;` : 요소가 완전히 제거됨 (공간도 사라짐)
+