24.01.31

Position

HTML 태그의 위치를 지정해 주는 속성 (페이지의 레이아웃을 결정할 수 있음)

1. static = 따로 position 속성값을 주지 않았다면 static 값을 가짐, html에 쓴 태그 순으로 정상적인 흐름(normal flow)에 따라 위치가 지정되게 됨

2. relative = 원래 자신이 있어야 하는 위치에 상대적, 자신이 원래 있던 자리를 기억함

원래의 자리를 인식하지만 left, right, top, bottom 속성을 이용해서 움직일 때는 다른 콘텐츠들의 레이아웃에 영향을 미치지 않음

3. absolute = 부모 요소 내부에 속박되지 않고 독립된 배치 문맥 (my way), absolute는 static을 제외한 position 속성값을 가진 가장 가까운 부모의 박스 내를 기준으로 위치

4. fixed = 스크롤을 올리거나 내릴 때, 특정 박스가 고정되어 움직이지 않기 위해 사용, fixed는 현재 사용자가 보고 있는 브라우저 화면 (뷰포트)를 기준으로 마치 화면에 붙은 것처럼 그 자리에 계속해서 위치 시킴

5. sticky = 속성값이 적용된 요소는 조상에 스크롤이 있다면 가장 가까운 부모 요소의 콘텐츠 영역에 달라붙음

(왼쪽부터 오른쪽으로 static / relative / absolute)

 

 

+ z-index

position을 통해 요소의 위치를 변경하다 보면 요소와 요소가 겹쳐 보이는 일이 발생

= 어떤 요소가 더 위로 나타나게 할지 결정할때 사용하는 게 바로 z-index 속성

static을 제외한 position 속성값이 적용된 요소의 Z 축 순서를 결정할 수 있고, z-index 값이 더 큰 요소가 값이 작은 요소의 위를 덮어버리게 됨

부모가 z-index를 높여 자식 앞으로 나올 수 없음, 자식은 z-index를 낮춰 부모 뒤로 가는 것은 가능

 

 

Flex

flex-container에 사용하는 속성

display : flex

자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정하는 방법

부모 요소를 flex-container 자식 요소를 flex-item이라 부름

1차원적 레이아웃 (x축, 혹은 y축)을 위해 주로 사용

 

 

1. flex-direction
컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정
row : 기본값. 왼쪽에서 오른쪽 (주축이 행 방향)
column : 위에서 아래 방향 (주축이 열 방향)
row-reverse : 오른쪽에서 왼쪽
column-reverse : 아래에서 위 방향

 

2. justify-content

주축을 기준으로 배열의 위치를 조절하거나 아이템 간의 간격을 설정을 할 수 있음

flex-start / flex-end / center / space-between / space-around / space-evenly

 

3. align-items, align-content

align-items : 교차 축을 기준으로 정렬

align-conten t: 컨테이너의 교차 축의 아이템들이 여러 줄일 때 사용 가능

flex-wrap:wrap 인 상태에서 사용해야 함

 

4. gap

아이템 사이의 간격을 설정할 때 사용 할 수 있는 속성

gap: 10px;

 

5. flex-wrap

한 줄에 배치되게 할 것인지 가능한 영역 내에서 여러 행으로 나누어 표현할 것인지 결정

 

6. flex-flow

flex-direction flex-wrap 단축속성

flex-flow: row wrap;

 

flex-item에 사용하는 속성

1. flex-basis

flex-item의 초기 크기를 설정

width, height와 다른 점은 축의 방향에 따라 달라진다는 것과 내부 콘텐츠에 따라 유연한 크기를 가진다는 것

auto 기본값

flex-basis 값이 적용되어있다면 row일 경우 width 값이 무시, column일 경우 height 값이 무시됨

= 기본적으로 px이나 em 등의 단위값을 사용하며 0 외에 다른 상숫값을 사용할 수 없음

 

2. flex-grow

아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도를 지정

형제 요소인 아이템들이 모두 같은 flex-grow 값을 가지면 내부에서 동일한 공간을 할당받음

값을 0을 줄 경우 늘어나지 않음

flex-grow (1의 경우) : 자식 요소들이 모두 동일한 크기의 공간을 할당받음

flex-grow (2 이상의 경우) : 특정한 하나의 자식에게만 줄 경우 다른 자식요소보다 두 배 (배수)의 여백 공간을 할당받음

만약 자식요소들의 콘텐츠 크기가 존재한다면 그 콘텐츠의 넓이에 따라 할당받는 값이 달라짐

= flex-basis : 0을 주게 되면 여백 공간이 아니라 전체 공간을 분할

 

3. flex-shrink

아이템의 크기를 고정하거나 축소할 때 사용

값을 0을 줄 경우 줄어들지 않음

4. align-self

부모의 align-items 속성을 덮어 flex-item에게 개별적인 align-items 속성을 부여

기본값 stretch

 

5. flex

단축 속성

flex-grow / flex-shrink / flex-basis

flex: 1 1 100px;

 

 

/* 첫 번째 사진 */
.wrap, 
.wrap > div {
    display:flex;
    justify-content:space-between;
}
.left-side, .center {
    flex-direction:column;
}
.right-side {
    flex-direction:column-reverse;
}

/* 두 번째 사진 */
.wrap {
    display:flex;
    flex-direction:row-reverse;
    align-items:center;
}

 

마지막으로 위니브 UI를 보고 로그인화면을 구현한 실습 사진을 올리고 마치겠습니다.

자세한 코드는 GitHub에 올라와있으니 참고 바랍니다 :)

 

 

https://github.com/soohyun020812/ormcamp

GitHub - soohyun020812/ormcamp: 오름캠프 교육에서 활용한 실습 내용들 정리