0415 | HTML & CSS (4)// 콘텐츠블록 position 종류, flex레이아웃, flex-grow

[1] 콘텐츠 블록과 좌표

 

1-1) 절대좌표 position: absolute

: 해당 블럭의 기본값 (상속값)이 사라지면서 별도로 빠지고, 컨텐츠 만큼의 범위만 가지게 된다

: 이때 빈 블럭의 자리를 다른 상속값들이 채우게 된다

@import url(reset.css);

#s1 li:nth-child(1){
    background: red;
}

#s1 li:nth-child(2){ <!-- n개의 자손중에 2번째-->
    background: green;
    position: absolute; <!-- 사용자가 지정한 절대 위치. static은 기본값 -->
    left:100px;
    top: 100px; <!-- 포지셔닝에 따라 다른 값들과 겹칠 수 있다-->
}
<!-- 세번째 코드는 1과 동일 -->

 

2번이 있던 자리를 3번이 채움

 

 

1-2) 상대좌표 position: relative

: 백그라운드로 지정된 조상 넓이 내에서만 움직일 수 있다.

: 어느 블럭이 빠지면, 해당위치는 공란으로 남게된다. 다른 블럭이 채우기 불가

#s1 ul{
    background:yellow;
    height: 300px;
    position:relative; <!-- 조상 포지션을 relative로 설정-->
    left: 50px; <!-- 어디에 있든 자신이 있던 곳으로부터 움직임 -->
    right: 50px;
}

#s1 li:nth-child(1){
    background: red;
    position: relative; <!-- 자손 포지션 변경-->
    left:50px; <!--빨간박스 자체 움직임-->
    top: 30px;
}

노란박스 안에서 빨간박스가 움직이므로 노란박스가 움직인만큼 함께 움직임 (offset위치 유지)

 

1-3) 고정위치 position : fixed

: 스크롤을 움직였을때에도 해당위치에 계속 떠있음

: 다른 자손블록들은 absolute와 동일하게 해당 블록이 빠져나간 공간을 채운다

#s1 ul{
    background:yellow;
}

#s1 li:nth-child(2){
    background: green;
    position:fixed;
    left:100px;
    top: 50px;
    height:30px;
    width: 50%
}

 

✔ absolute와의 차이점

👉 absolute는 문서를 기준으로 붙어있다면, fixed는 사용자가 보는 화면을 기준으로 해당 위치에 붙어있다.

👉 absolute는 조상 포지션이 relative일 경우 그 안에서 구현 가능하지만 fixed는 조상 포지션과 상관없이 지정된 곳에서 항상 떠있다

 

 

1-4) 붙임위치 position: sticky

: 헤더의 포지션이 fixed일 경우, 해당 위치에 고정은 되지만 기존 내용물이 위로 올라가면서, 가려지게 된다.

#header{
    height: 70px;
    background: skyblue;
    position:sticky;
    width:100%
    top: 0px; <!-- top을 꼭 설정해주어야 기존 위치도 뺏기지 않고 블럭도 움직일 수 있다-->
}

 

 

* sticky에 대한 세부 적용방법

[HTML/CSS] Position sticky 적용 방법

 

 

[2] Flex 레이아웃과 용어

Flex Terminology - flex container - flex item	Flexibility - flex - flex-grow - flex-shrink - flex-basis	Flex Lines - flex-direction - flex-wrap - flex-flow
	Ordering - order	Alignment - justify-content - align-items - align-self

 

2-1) Flexibility

✔ display: inline-flex

: flex박스 안에 있는 태그들이 인라인 태그일 때

 

✔  display: flex

: flex박스 안에 있는 태그들이 블록일 때

.s1 ul{
    display:flex;
    flex-direction: row; <!-- column, row로 블록들이 정렬될 방향 제시-->
    background-color: grey;
}

.s1 li:nth-child(1){
    background:red;
    --width: 100px; <!-- 단순 높이, 폭 지정-->
    flex-basis:30px; <!-- flex-direction을 기준으로 확장방향이 정해진다 -->
}

float기능없이도 블록을 가로로 놓을수 있게 됨

 

2-2) flex-grow (아이템에 부여하는 설정)

: 아이템들이 여백 나눠가지기 👉 컨텐츠 배경에 조상의 남는 부분(회색영역)이 없이, 아이템들이 폭을 나눠가짐

: 만약 그룹에 flex-grow가 설정되지않고 개별아이템에 flex-grow가 설정된다면, 해당 아이템이 남는 영역을 모두 가진다

.s1 ul{ <!-- 박스에 부여하는 설정 -->
    display: flex;
    flex-direction: row;
    background-color: grey;
}

.s1 li{ <!-- 아이템들을 묶어서 class s1로 지정. 아이템에 부여하는 설정 -->
    flex-basis:100px; <!-- 남는부분을 아이템들끼리 1:1로 모두 나눠가짐 -->
    flex-grow: 1;
}

----
.s1 li:nth-child(1){
    background:red;
    flex-grow: 3; <!-- 해당 컨텐츠만 다른블록 대비 3을 가진다 -->
}

 

flex-grow:1만 지정되었을때

nth-child(1)만 flex-grow: 3;이 추가되었을 때