[CSS] position/flex

Front-End/HTML + CSS

[CSS] position/flex

2jin2 2024. 1. 9. 15:28

[공부 내용 정리]

form 관련 가상 클래스 선택자

:enabeld, :disabled

활성화 /비활성화 상태일때

: read-only, :read-write

사용자가 편집할수 없는/있는 상태일 때

: checked

input checkbox radio 유형일때 선택된 상태

: requited

필수입력값일 경우

: : placeholder

입력에 대한 추가 정보가 있을 경우

position

position이란?

이름에서처럼, position이란 HTML 태그의 위치를 지정해주는 속성.

. position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있음.

position의 종류

1) static : 기본적으로 따로 position 속성값을 주지 않았다면 static 값을 가짐.

즉 html에 쓴 태그 순으로 정상적인 흐름에 따라 위치가 지정되게 됨.

2) relative : 단어 자체의 뜻처럼 상대적인 속성을 가지고 있음.

‘원래 자신이 있어야 하는 위치에 상대적’ 따라서 본인이 원래 있던 자리에서 움직임.

position 속성이 있는 박스가 속성이 없는 박스를 가리게 됨.

3) absolute : absolute의 특징은 ‘myway’.

하지만 부모 요소의 눈치를 봄(직계 부모 또는 조상). absolute는 static을 제외한 position 속성값을 가진 가장 가까운 부모의 박스 내를 기준으로 위치하게됨.

똑같이 position: absolute; 의 속성을 가지고 있어도, 상위 엘리먼트가 position 속성값을 가졌는지 아닌지에 따라 서로 다른 위치 결과가 나타남.

4) fixed : 스크롤을 올리거나 내릴 때, 특정 박스를 고정시켜 움직이지 않게 하고 싶을 때 사용함.

fixed는 현재 사용자가 보고 있는 브라우저 화면(뷰포트)를 기준으로 마치 화면에 붙은 것처럼 그 자리에 계속해서 위치할 것임.

페이지가 스크롤 되어도 중요한 정보(네비게이션 같은)를 화면에 계속 노출 시켜주기 위해 많이 사용하는 속성.

5) sticky

조상에 스크롤이 있다면 가장 가까운 부모 요소(직계부)의 컨텐츠 영역에 달라붙음.

6) z-index

position을 통해 요소의 위치를 변경하다보면 요소와 요소가 겹쳐보이는 일이 발생함. 이때 어떤 요소가 더 위로 나타나게 할지 결정할때 사용하는게 바로 z-index 속성.

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

또한 부모가 z-index를 높여 자식 앞으로 나올 수 없다. 자식은 z-index를 낮춰 부모 뒤로 가는 것은 가능하다.

flex

display:flex
자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정하는 방법임.
부모 요소를 flex-container 자식 요소를 flex-item 이라고 부름
1차원적 레이아웃(x축, 혹은 y축)을 위해 주로 사용함.

flex-direction : 컨테이너 내 아이템을 배치할 때 정렬할 방향을 지정함.

row : 기본값. 왼쪽에서 오른쪽 (정렬이 행 방향)
column: 위에서 아래 방향 (정렬이 열 방향)
row-reverse: 행을 뒤집어서 정렬.
column-reverse: 열을 뒤집어서 정렬.

justify-content : flex 요소들을 가로선 상에서 정렬함.

flex-start : 가로선 상의 시작점으로.
flex-end : 가로선 상의 끝나는점으로.
center : 가로선 상의 가운데로 정렬.
space-between : 가로선 상에서 아이템들이 가장 넓게 공간이 나뉨.
space-around : 가로선 상에서 아이템 간의 간격이 조금 줄어듦.
space-evenly : 가로선 상에서 아이템들 사이의 간격이 똑같음.

align-items, align-content : flex 요소를 세로선 상에서 정렬함.

align-items: 세로 선을 기준으로 정렬함.
align-content: 컨테이너의 세로선의 아이템들이 여러 줄일때 사용 가능.
- flex-wrap:wrap 인 상태에서 사용해야 함.

+) 퀴즈

주어진 코드를 가지고 flex 속성을 추가해 아래와 같은 이미지로 배치해 보세요!

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap{
            display: flex;
            width: 500px;
            height: 500px;
            background-color: lightgray;
            justify-content: space-between;
        }

        .blue, .green, .yellow{
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            /*text-align: center;*/
            /*line-height: 50px;*/

        }
        .blue{
            background-color: royalblue;
        }
        .green{
            background-color: teal;
        }
        .yellow{
            background-color: yellowgreen;
        }

        .left_side, .center, .right_side{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .right_side{
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>
<article class="wrap">
    <div class="left_side">
        <div class="blue">A</div>
        <div class="green">B</div>
        <div class="yellow">C</div>
    </div>
    <div class="center">
        <div class="blue">D</div>
        <div class="yellow">E</div>
    </div>
    <div class="right_side">
        <div class="blue">F</div>
        <div class="green">G</div>
        <div class="yellow">H</div>
    </div>
</article>
</body>
</html>

+) 퀴즈

파란 상자를 이미지와 같이 위치시켜보세요!

<!--추가-->
.wrap{
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
}

order

- flex 요소의 순서를 지정함.
내용은 변경하지 않고 출력 순서만 바꾸고 싶을 때 사용.

gap

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

gap: 10px;

flex-wrap

한 줄에 배치되게 할 것인지, 가능한 영역 내에서 여러 행으로 나누어 표현할 것인지 결정함.
- nowrap : 모든 요소들을 한 줄에 정렬함.
- wrap : 요소들을 여러 줄에 걸쳐 정렬함. -> 공간을 더 사용할 수 있다!
- wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬함.

flex-flow

이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받음. (flex-direction과 flex-wrap이 자주 같이 사용되기 때문.)
- flex-flow: row wrap; -> 이렇게 row와 wrap을 한번에 사용할 수 있음.

flow-item에 사용하는 속성

flex-basis

flex-item의 초기 크기를 설정.
width, height와 다른 점은 축의 방향에 따라 달라진다는 것과 내부 콘텐츠에 따라 유연한 크기를 가진다는 것임.
auto 기본값
flex-basis 값이 적용되어있다면 row일 경우 width 값이 무시, column일 경우 height 값이 무시됨.

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

flex-grow

아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도를 지정.
형제 요소인 아이템들이 모두 같은 flex-grow 값을 가지면, 내부에서 동일한 공간을 할당받음.
값을 0을 줄 경우 늘어나지 않음.
flex-grow : 1 → 자식 요소들이 모두 동일한 크기의 공간을 할당받음.
flex-grow : 2(2이상의 수) → 특정한 하나의 자식에게만 줄 경우 다른 자식요소보다 두배(배수로)의 여백 공간을 할당받음. 만약 자식요소들의 컨텐츠 크기가 존재한다면 그 컨텐츠의 넓이에 따라 할당받는 값이 달라짐.
basis 보다 커지게 해라

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

flex-shrink

아이템의 크기를 고정하거나 축소할 때 사용함.
값을 0을 줄 경우 줄어들지 않음.
basis 보다 작아지게 해라

align-self

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

flex

단축속성
flex-grow flex-shrink flex-basis

flex: 1 1 100px;

+) 추가내용

transform

transform: translate(-50%, -50%);

박스를 가운데로 고정함. position fixed; 와 함께 쓰면 페이지 크기가 아무리 바뀌어도 가운데에 고정됨.

https://flexboxfroggy.com/#ko

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

flex 연습하는 개구리 게임 ~ 복습한 후 풀어보기

-> 자습 때 복습하다가 앞에만 깨봐야지 하고 시작했는데 재밌어서 다 깨버렸다. 재밌다 ~~~ 귀여운 개구리들

저작자표시

'Front-End > HTML + CSS' 카테고리의 다른 글

[CSS] 선택자/스타일/상속/boxmodel (1)	2024.01.08
[HTML] 태그/method/table (1)	2024.01.05
[HTML] 기본 문서 구조/태그 (3)	2024.01.04

현재글[CSS] position/flex

2jin2story