코드스피츠 css rendering 6회차 (step 48)

1. display (레이아웃)

display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정

display 속성 키워드

1) outside : 요소의 외부 디스플레이 유형 설정
2) inside : 요소의 내부 디스플레이 유형 설정
3) listitem : 요소가 콘텐츠 블록 박스 생성
4) internal
5) box : 요소의 디스플레이 박스 생성하는지 지정
6) legacy

display : contents 속성

해당 태그부분을 손자일 경우 자식으로 승격된다.
=> display:contents 부분의 태그가 없어지는 효과

display : contents 예시

1) display : contents 주지 않았을 때

<!DOCTYPE html>
<meta charset="utf-8">
<title>헤더 요소</title>
<style>
    .nested{
        background-color:green;
    }
    .box{
        background-color:skyblue;
    }
    .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
}
</style>
<body>
<div class="wrapper">
  <div class="box box1">
    <div class="nested">a</div>
    <div class="nested">b</div>
    <div class="nested">c</div>
  </div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>
</body>

2) display : contents 주었을때

<!DOCTYPE html>
<meta charset="utf-8">
<title>헤더 요소</title>
<style>
    .nested{
        background-color:green;
    }
    .box{
        background-color:skyblue;
    }
    .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  display: contents;
}
</style>
<body>
<div class="wrapper">
  <div class="box box1">
    <div class="nested">a</div>
    <div class="nested">b</div>
    <div class="nested">c</div>
  </div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>
</body>

마치 <div class="box box1"> 태그 부분이 사라져 같은 층이
a,b,c,Two,Three,Four,Five 태그 부분이 공통되게 적용된다.

overflow : hidden / display : flow-root

1) display : hidden


<body>
    <div style ="height:200px;width:200px;background:red;opacity:.5;float:left"></div>
    <div style="background-color:blue; overflow:hidden"> abc</div>
</body>

2) display : flow-root


<body>
    <div style ="height:200px;width:200px;background:red;opacity:.5;float:left"></div>
    <div style="background-color:blue; display:flow-root"> abc</div>
</body>

둘다 같은 결과로 새로운 BFC가 만들어진다.

2. FlexBox

display : flex
display : inline-flex

flex-item들이 나타나고 부모가 flex이므로 직계자식만 flex-item이 된다.

1) Flex-Direction

1) Default
2) Row-reverse : 오른쪽에서 왼쪽으로
3) column : 위에서 아래로
4) column-reverse : 아래에서 위로

중요 : 해당 Flex-Direction에 의해 Main-Axis, Cross-Axis 등과 같은 다른 모든 속성에 영향을 준다.

Flex 관련 내용

기본적으로 default일때 왼쪽에서 오른쪽으로 위에서 아래이다.

1) Flex-Line : 아이템들이 비치되는 가상의 선
2) main-Axis : 기본적 배치되는 선의 방향 (메인축)
3) cross-Axis : main-Axis에 직교하는 축

2) Justify-content 속성 (default 기준)

메인축 기준으로 정렬

1) Flex-start : 왼쪽 정렬
2) Flex-end : 오른쪽 정렬
3) center : 좌우 중앙 정렬
4) space-between : 사이에만 여백
5) space-around : 사이 + 양쪽 끝도 여백

3) Align-items 속성 (직교하는 축 = cross-axis 속성 지정 , default 기준 위에서 아래)

1) Flex-start : 위로 정렬
2) Flex-end : 아래로 정렬
3) center : 위아래의 중앙 정렬
4) stretch : 꽉 채운다 (기본값)
5) baseline : 글자따라 정렬

아이템 단위의 정렬

4) Flex-wrap 속성 (Flex-item이 한줄이 될지 여러줄로 될지 지정)

1) nowrap : 부모 컨텐츠 사이즈보다 자식의 합이 더 커도 부모 안에서 다음 줄로 가지않고 사이즈를 맞춰서 처리한다 ( 기본값 : 억지로 틀에 맞춰)
2) wrap : 부모 컨텐츠 사이즈에 맞춰서 사이즈가 모자라면 다음 줄에서 다시 그린다.
3) wrap-reverse

5) align-content 속성 ( 여러줄에서 적용 )

flex-wrap 에 적용되는 속성
wrapping 할 때 flex-line 을 어떻게 정렬할 것이냐

1) Flex-start : 위로 정렬
2) Flex-end : 아래로 정렬
3) center : 위아래의 중앙 정렬
4) space-between : 맨 위와 아래 공백만 없이 각각 여분존재
5) space-around : 맨 위와 아래 공백 포함 각각 여분존재
6) stretch : 꽉 채운다

6) order 속성

    <div style="display: flex">
    <div style="order:2">a</div>
    <div style="order:1">b</div>
    </div>

해당 내용은 b a 형태로 order의 순서에 의해 나타나는데
이는 정렬할 때 js를 통해 order를 조절하면 눈에 보이는 순서를 바꿀 수 있다.

즉, Flex-box의 그림그리는 방식은 Dom-rendering이 아닌 post-process이다. => GPU 사용 => 빠르다.

출처

display

코드스피츠

Author And Source

이 문제에 관하여(코드스피츠 css rendering 6회차 (step 48) - display , flexbox), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@khw970421/코드스피츠-css-rendering-6회차-step-48

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

코드스피츠 css rendering 6회차 (step 48) - display , flexbox