매일 땡기는 마라 코딩

[인프런] 맛집지도 만들기 (3) 본문

클론코딩

[인프런] 맛집지도 만들기 (3)

cmkoi1 2023. 1. 27. 02:27

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

 

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지 - 인프런 | 강

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다., - 강의 소개 | 인프런...

www.inflearn.com

 

 

 

CSS Flex box

레이아웃을 설정할 때 사용하는 속성.

컨테이너는 무언가를 담는 그릇이며, 아이템은 그 그릇 안에 담긴 것.

 

html

<div class="container">
    <div class="itme">플렉스 아이템 1</div>
    <div class="itme">플렉스 아이템 2</div>
</div>

 

css

.container {
    /*컨테이너 클래스를 가진 태그 플렉스박스로 사용, 태그 안의 아이템도 플렉스 아이템이 됨*/
    display: flex;
    /*주축을 정함*/
    flex-direction row;
}

 

flex-direction: row;

 

flex-direction: column;

 

flex-direction

 

주축은 flex-direction으로 지정돼 있는 방향이며, 교차축은 주축의 수직 방향.

주축의 방향에 따라 Flex Container의 item이 정렬된다. 기본 값은 row이다.

flex-direction을 column으로 설정하면 주축이 열방향, 교차축은 행방향이 된다.

 

flex-direction: row; /*설정 안 해도 기본값으로 row*/

 

 

  • 플렉스.html, 플렉스.css 파일 생성

플렉스.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="플렉스.css" />
</head>
<body>
    <div class="container">
        <div class="item">item-1</div>
        <div class="item">item-2</div>
        <div class="item">item-3</div>
    </div>
</body>
</html>

 

플렉스.css

.container {
    width: 350px;
    height: 500px;
    background-color: gray;
}

.item {
    width: 100px;
    height: 100px;
    background-color: red;
    border: 1px solid black; 
}

 

 

 

.container에 flex 속성 값을 걸어 주면.

 

플렉스.css

display: flex;

 

 

justify-content

 

주축 방향으로 아이템 정렬 방식 설정.

기본 값은 주축이 시작되는 flex-start. 주축이 끝나는 부분은 flex-end.

 

.container에 justify-content 속성 설정.

 

플렉스.css

justify-content: flex-center;

 

 

flex-start, flex-center, flex-end 외의 속성.

  • space-around: start와 첫 번째 요소, end와 마지막 요소의 간격은 적당히, 나머지 간격은 동일.
  • space-between: 첫 번째와 마지막 요소를 각각 start, end에 맞추고, 동일한 간격을 둬 아이템 배치. margin, padding을 활용하여 간격을 떨어뜨리면 편함.
  • space-evenly: 모든 사이 간격을 동일하게 정렬.

 

 

align-items

 

교차축 방향으로 아이템 정렬 방식 설정. 기본 값은 stretch으로, 아이템의 높이를 플렉스박스의 높이와 같게 설정.

start, center, end 속성 값이 있음.

 

.container에 align-items 속성 설정.

 

플렉스.css

align-items: stretch;

 

.item의 width와 height를 주석처리하면.

 

 

게임을 통해 flex를 배울 수 있는 사이트

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

 

Flexbox Froggy 정답

Flexbox froggy! 혹시 도움이 될지몰라 포스팅을 한다. CSS에서 태그의 정렬기능을 담당하는 flex를 쉽게 학습하고 실습할 수 있는 학습게임사이트다. 개구리가 정해진 수련잎으로 이동하면 다음단계

hj-tilblog.tistory.com

 

728x90

'클론코딩' 카테고리의 다른 글

[인프런] 맛집지도 만들기 (4)  (0) 2023.01.27
[인프런] 맛집지도 만들기 - 퀴즈 3  (0) 2023.01.27
[인프런] 맛집지도 만들기 - 퀴즈 2  (0) 2023.01.27
[인프런] 맛집지도 만들기 (2)  (0) 2023.01.26
[인프런] 맛집지도 만들기 - 퀴즈 1  (0) 2023.01.25
'클론코딩' Related Articles more