AR삽질러

CSS - Flexbox(5) 본문

WEB/HTML, CSS

CSS - Flexbox(5)

아랑팡팡 2023. 12. 10. 00:52
728x90

 

CSS - Flexbox

 

1. Flexbox

 - flex-direction의 디폴트는 row

 - inline block의 문제점을 해결하기위해 flexbox

flexbox사용규칙

1) 자식에게 어떤것도 명시하지 않고 부모엘리먼트에게 명시한다.

flex-direction, justify-content, align-items를 적용하고 싶다면 먼저 부모를 display:flex로 만든다.

2) flex컨테이너는 주 축(main axis)수평 와 교차축(cross axis)수 Flex Container는 두개의 축을 가지고 있다.

 

주요 Flexbox의 속성

flex-direction 주 축(main axis)를 정의한다.
row
row-reverse
column
column-reverse
justify-content 주 축을 따라 flex 아이템들을 정렬한다.
flex-start
flex-end
center
space-between
space-around
align-items 교차 축(cross axis)를 따라 flex아이템들을 정렬한다.
flex-start
flex-end
center
baseline
stretch
flex-wrap 아이템들이 여러 줄로 래핑될지 여부를 결정한다.
nowrap
wrap
wrap-reverse
align-content 여러 줄의 아이템들을 교차 축에 따라 어떻게 정렬할지 결정한다.
flex-tart
flex-end
center
space-between
space-around
stretch

 

3) vh : ViewPort Height (스크린에 따라 크기가 달라진다.)

 

<!DOCTYPE html>
<html lang="kr">

<head>
    <link rel="shortcut icon" href="https://assets.nflxext.com/en_us/layout/ecweb/netflix-app-icon_152.jpg" />
    <meta charset="UTF-8">
    <title>HTML 연습</title>
    <link rel="stylesheet" href="styles.css" />
    <style>
        body {
            height: 100vh;
            margin: 20px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        div {
            width: 50px;
            height: 50px;
            background-color: teal;
        }

        #second {
            background-color: wheat;
        }
    </style>
</head>

<body>
    <div></div>
    <div id="second"></div>
    <div></div>

</html>

 

Body

 - height : 100vh : 뷰포트 높이의 100%로 body의 높이를 설정

 - margin : 20px : body주변의 20px의 마진을 추가

 - display : flex : Flexbox레이아웃을 정의

 - jusify-content : space-evenly : Flex항목들을 가로축에서 균등한 간격으로 배치

 - align-items : center : Flex항목들을 세로축에서 가운데에 위치하도록 배치

Div

 - width : 50px : height : 50px : 모든 div요소의 너비와 높이를 50px로 설정

 

2. Flexbox

main axis, cross axis의 기본 값을 바꾸기 위해서 flex-direction을 사용한다.

flex-direction이 column이면 주 축은 수직이 되고 교추 축은 수평이 된다.

 

<!DOCTYPE html>
<html lang="kr">

<head>
    <link rel="shortcut icon" href="https://assets.nflxext.com/en_us/layout/ecweb/netflix-app-icon_152.jpg" />
    <meta charset="UTF-8">
    <title>HTML 연습</title>
    <link rel="stylesheet" href="styles.css" />
    <style>
        body {
            height: 100vh;
            margin: 20px;
            display: flex;
            justify-content: space-evenly;
            flex-direction: column;
            align-items: center;
            flex-direction: column-reverse;
        }

        div {
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            width: 300px;
            height: 300px;
            background-color: teal;
        }

        #second {
            background-color: wheat;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div id="second">2</div>
    <div>3</div>

</html>

 

Body

 - display : flex : Flexbox레이아웃 활성화

 - justify-content : space-evenly : flex항목들의 간격을 균등하게

 - flex-direction : column-reverse : flex항목들을 수직방향 역순으로 배치

 - align-items : center : flex항목들을 수평축에서 가운데에 배치

Div

 - display : flex : div요소도 flex컨테이너로 생성

 - justify-content : center, align-items : center : div 내부의 콘텐츠를 수평 수직에서 가운데 정렬

3. Position

 Position속성은 레이아웃보다는 위치를 아주 조금 위로 아주 조금 오른쪽으로 옮기고 싶을 때 사용한다. 

요소의 배치 방식을 정의하고 요소가 페이지에 대해 어떻게 위치할지 결정한다.

<!DOCTYPE html>
<html lang="kr">

<head>
    <link rel="shortcut icon" href="https://assets.nflxext.com/en_us/layout/ecweb/netflix-app-icon_152.jpg" />
    <meta charset="UTF-8">
    <title>HTML 연습</title>
    <link rel="stylesheet" href="styles.css" />
    <style>
        body {
            height: 1000vh;
            margin: 20px;
        }

        div {
            width: 300px;
            height: 300px;
            color: white;
        }

        #green {
            background-color: teal;
            position: fixed;
            opacity: 0.2;
        }

        #different {
            background-color: wheat;
        }
    </style>
</head>

<body>
    <div id="green"></div>
    <div id="different"></div>
</html>

 

Position속성

 - Fixed Positioning position : fixed

 헤더나 네이게이션바를 페이지 상단에 항상 보이도록 고정할 때 사용한다.

 - Static Positioning

 position : static : 요소가 배치되는 기본값

 

 

728x90
반응형
LIST
저작자표시 비영리 동일조건

'WEB > HTML, CSS' 카테고리의 다른 글

CSS - Classes, inline Block(4)  (0) 2023.12.09
CSS Margin, Padding, Border - (3)  (0) 2023.10.16
CSS box - (2)  (0) 2023.10.16
CSS - How to Add CSS to HTML (1)  (0) 2023.10.15
HTML Form Tags - (2)  (0) 2023.10.11
'WEB/HTML, CSS' Related Articles more