WebDevelop 수업 - Day12 FLEX

김지원·2022년 6월 26일
0

WebDevelop2

목록 보기
11/34

개발자 도구

  • element : html/css 의 구성이 어떻게 되어있는가
  • console : javascript ( 기능 구현 )
  • network : 서버에 대한 것. 통신방법, 응답코드는 무엇인지..

  • 요소가 어디에 있는지 하이라이트 해준다.

  • 어떤 css 속성이 적용이 되어있는지 확인 할 수 있고, 변경도 해볼 수 있다.
  • html 삭제도 가능하다.

유동적인 레이아웃을 위한 속성

  • 안에 들어있는 요소들의 display 속성이 무엇이든지 가로/세로 정렬을 해준다.
  • 높이가 다 달라도 세로 방향으로 가운데 정렬을 해준다.
  • 중요한점 ! 정렬된 컨테이너에 속성을 줘야한다.
  • 커다란 박스 flex:1을 주면 / 왼쪽오른쪽박스는 가져야할 크기만 주고 알아서 붙는다
    flex만 쓰면 그 안의 요소들의 display속성을 무시하고 가로로, 세로로 정렬시킬 수 있다. /
    /
    레이아웃을 잡기 위해 flex를 많이 사용한다. 상단 nav를 양방향 끝에 위치하고 싶을 때,
    중간 요소에 flex 1을 주면 알아서 공간을 다 차지하게 된다. 가로 세로 길이 값을 주지 않아도 된다는 것. */ -->

FLEX

: 해당 선택자에 의해 선택되는 요소가 가지는 자식요소의 정렬을 쉽게 할 수 있음.

<style>
        body > .flex-container > .s {
            width: 100px;   
            height: 100px;
            background-color: rgb(249, 176, 148);
        }
        body > .flex-container > .r{
            width: 50px;
            height: 50px;
            background-color: rgb(50, 100, 200);
            border-radius: 50%;
        }
        body > .flex-container > .d{
            width: 150px;
            height: 200px;
            background-color: rgb(75, 200, 100);
            transform: rotate(45deg);
        }
</style>
<body>
    <div class="flex-container">
        <div class="s"></div>
        <div class="r"></div>
        <div class="d"></div>
    </div>
</body>


  • div의 기본값이 display:block 이라서
    오른쪽 영역을 다 차지하는 것을 확인 할 수 있다.
  • 얘네3개를 유동적으로 하려면 감싸고 있는 박스에 display: flex; 준다.
    (rotate는 지웠음)
body > .flex-container {
                top: 50%;
                width: 100%;
                display: flex;
                position: absolute;
                transform: translateY(-50%);
}

  • display: flex;을 적용하니 display:block; 속성이 사라지고
    유동적으로 옆으로 쌓이는 걸 확인 할 수 있다.
 body > .flex-container {
            top: 50%;
            left: 0;
            width: 100%;
            position: absolute;
            background-color: rgb(255, 214, 254);
            transform: translateY(-50%);
            display: flex;
}

  • 이걸 기본 style속성으로 가지고 여기에 속성들을 추가하면서 설명하겠음.

flex-direction

: 내부 자식 FLEX 방향

flex-direction : row;

: 가로방향으로

  • flex-direction: row; 적용
  • 변화가 없는 걸 확인할 수 있는데 flex-direction의 기본값은 row이기 때문이다.

flex-direction : column;

: 세로 방향으로

  • flex-direction: column; 을 적용하니 세로정렬이 된 것을 확인 할 수 있다.
  • 이 박스 하나가 한줄을 다 차지하지 않고 자기 자신만 차지하게 되는 것을 볼 수 있다. 즉 display:block 속성이 사라진 것.

row-reverse

: 가로 역방향으로

  • flex-direction: row-reverse;
    첫번째의 박스가 맨 오른쪽으로 붙는 것을 확인 할 수 있다.

column-reverse

: 세로 역방향으로

  • flex-direction: column-reverse;
    첫번째의 박스가 맨 아래에 붙는 것을 확인 할 수 있다.

justify-content

: flex-direction과 수평한 방향에 대한 정렬

  • 정렬축과 flex-direction 이 수평하다 라고 이해하자.
  • !! reverse와 다르다 !!
    flex-start은 왼쪽 정렬자체를 끝에 하는것이다.

flex-start

: 시작점 정렬

center

: 가운데 정렬

flex-end

:끝점 정렬

  • flex-direction: row; , justify-content: flex-end;
    row로 인해 가로로 정렬이 되었고 flex-end로 인해 row와 수평하게 끝점 정렬이 되었다.

  • flex-direction: column;, justify-content: flex-end;

align-items

: flex-direction과 수직한 방향에 대한 정렬

flex-start

: 시작점 정렬

center

: 가운데 정렬

flex-end

:끝점 정렬

stretch

: align-items 방향으로 늘인다.

  • 각 도형의 div에 높이를 없애면 원래는 사라져야하는데 stretch을 사용하면 사라지지 않고 align-items 의 방향으로 늘어난다.


flex-grow: 1;
flex-shrink: 1;

/ flex-shrink 와 flex-grow 의 기본값은 0.
3개의 div 중 중간 div에만 shrink 와 grow 값을 1 주게 되면 간격이 벌어진다.

  • flex-direction: row;, justify-content: center;, align-items: center;

1개에 대한 요소 가운데 정렬
top : 50%, left : 50%, transform : translate(-50%, -50%)
2개 부터는 가운데 정렬
display:flex justify-content align-items 을 잘 사용해야한다.

profile
Software Developer : -)

0개의 댓글