Baby-gin Game

24 Feb 2019 | Algorithm

문제

각 카드는 0에서 9까지의 숫자가 쓰여져 있다.
6장의 카드를 받는다.
임의의 카드 6장 중, 3장의 카드가 연속적인 번호를 갖는 경우를 run이라 하며, 3장의 카드가 동일한 번호를 갖는 경우를 triplet 이라고 한다.
6장의 카드가 run과 triplet로만 구성된 경우를 baby-gin으로 부른다.
901은 run이 아니다.
예시)
- 667767은 두 개의 triplet이므로 baby-gin이다. (666,777)
- 054060은 한 개의 run과 한 개의 triplet이므로 역시 baby-gin이다. (456, 000)
- 101123은 한 개의 triplet가 존재하나, 023이 run이 아니므로 baby-gin이 아니다.
- (123을 run으로 사용하더라도 011이 run이나 triplet가 아님)

나의 코드

333333 같은 테스트 케이스의 경우 triple이 2개이므로 baby-jin이 되어야하나, 카운팅 배열 내에 갯수가 3개이상인지만 검증하고 그다음 숫자로 넘어가는 바람에 테스트 케이스를 만족하지 못하였다.
그래서 continue를 사용하여 while문 처음으로 돌아가는 코드를 추가했다.

Data = list(map(int, input("입력하세요: ").split()))
N = len(Data)
cnt_lst = [0] * 12

for i in range(N):
    cnt_lst[Data[i]] += 1

result = run = triple = i = 0

while True:
    if cnt_lst[i] + cnt_lst[i + 1] + cnt_lst[i + 2] == 3:
        cnt_lst[i] -= 1
        cnt_lst[i + 1] -= 1
        cnt_lst[i + 2] -= 1
        run += 1
        continue

    if cnt_lst[i] >= 3:
        cnt_lst[i] -= 3
        triple += 1
        continue

    i += 1

    if i == 10:
        break

if run + triple == 2:
    print("baby jin")

else:
    print("failed")

Comment Read more

SWEA 1206 - View

24 Feb 2019 | Algorithm SWEA

문제

SWEA 1206 - [S/W 문제해결 기본] 1일차 - View
문제링크
문제의 저작권은 SW Expert Academy에 있습니다.

나의 코드

def GetMax(i):
    max_floor = floor[i-2]
    if max_floor < floor[i-1]:
        max_floor = floor[i-1]
    if max_floor < floor[i+1]:
        max_floor = floor[i+1]
    if max_floor < floor[i+2]:
        max_floor = floor[i+2]

    return max_floor

TC = 10
for tc in range(1, TC+1):
    N = int(input())
    floor = list(map(int, input().split()))
    result = 0

    for i in range(2, N-2):
        side = GetMax(i)
        if side < floor[i]:
            result += floor[i] - side

    print(f'#{tc} {result}')

Comment Read more

버블 정렬, 카운팅 정렬

23 Feb 2019 | Algorithm 정렬

버블 정렬 (Bubble Sort)

인접한 두개의 원소를 비교하여 자리를 계속 교환하는 방식

수열을 정렬하는 알고리즘 중 하나

시간 복잡도: O(n^2)

정렬 과정

저울이 있다고 가정, 배열의 길이는 N
저울의 왼쪽/오른쪽에 배열의 첫번째 숫자와 인접한 숫자(두번째 숫자)를 올려 크기를 비교함
- 두번째 숫자가 작을 경우, 서로 위치를 바꿈
저울의 왼쪽/오른쪽에 배열의 두번째 숫자와 세번째 숫자를 올려 크기를 비교함
동일한 방법으로 배열의 끝(N)까지 숫자를 비교할 경우, 배열의 처음에는 가장 작은 숫자가 위치하게 됨.
2번째 Pass에는 배열의 두번째 숫자부터 다시 비교
정렬이 완료 될 때 까지 위의 과정을 반복함

나의 코드

주석처리한 print 함수를 이용하면 정렬되는 과정을 알 수 있음.

Data = [55, 7, 78, 12, 42]
N = len(Data)

#앞에서 부터 정렬
for i in range(N-1):
    for j in range(i, N-1):
        #print(Data)
        if Data[j] > Data[j+1]:
            Data[j], Data[j+1] = Data[j+1], Data[j]
        #print(Data)
    #print(Data)

    
#뒤에서 부터 정렬
for i in range(N-1, 0, -1):
    for j in range(0, i):
        #print(Data)
        if Data[j] > Data[j+1]:
            Data[j], Data[j+1] = Data[j+1], Data[j]
        #print(Data)
    #print(Data)

카운팅 정렬(counting Sort)

항목들의 순서를 결정하기 위해 집합에 각 항목이 몇개씩 있는지 세는 작업을 하여, 선형시간에 정렬하는 효율적인 알고리즘으로, 속도가 빠르며 안정적임.

제한 사항

정수나 정수로 표현 할 수 있는 자료에만 적용 가능 (각 항목의 발생 횟수를 기록하기 위해 정수 항목으로 인덱스 되는 카운트들의 배열을 사용하기 때문)

카운트들을 위한 충분한 공간을 할당하려면 집합 내 가장 큰 정수를 알아야함

시간 복잡도: O(n+k) - n은 리스트의 길이, k는 정수의 최대 값

배열내 숫자를 카운팅 배열 내 인덱스로 접근하여 발생 횟수를 증가시키는 개념이 사실 직관적으로 이해하는데 많은 시간이 걸렸다.
YABOONG님의 블로그에 친절한 설명이 적힌 슬라이드를 발견하였다. 참조해보자! 동작방식 링크

나의 코드

Data = [1,0,3,1,3,1]
N = len(Data)

#인덱스 값 + 발생횟수 저장할 리스트 생성.
#인덱스는 0부터 시작하므로 정수의 최대값 +1 값 적용
counting_lst = [0] * (max(Data)+1)
#최종 정렬 리스트
sorted_lst = [0] * N

#각 숫자의 갯수를 계산하여, count 리스트의 인덱스에 발생횟수를 증가시킨다.
for i in range(N):
    counting_lst[Data[i]] += 1

#누적합 계산
for i in range(len(counting_lst)-1):
    counting_lst[i+1] += counting_lst[i]


#기본 리스트의 끝에서부터 역으로 계산하기 위해 range(N-1, -1, -1) 적용
for i in range(N-1, -1, -1):
    #누적합을 -1 해주면, 그 값이 바로 최종 리스트의 위치가 됨.
    counting_lst[Data[i]] -= 1
    sorted_lst[counting_lst[Data[i]]] = Data[i]
    print(sorted_lst)

Comment Read more

Web 08 - Bootstrap Components

18 Feb 2019 | Web HTML CSS Bootstrap

Component

1. Alerts

bootstrap에서 제공하는 기본적인 박스. 블록 속성을 가짐.
배경,테두리,글자 색을 추가로 적용 할 수 있음.

<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
</div>

예)

alerts

2. Badge

Alert와 달리, Inline-block 속성을 적용하고 싶은 단어에 적용

<!-- Alert -->
<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
</div>

<!-- Badge  -->
<h1>Example heading <span class="badge badge-secondary">New</span></h1>

예)

badges

3. Buttons

<!--Default: 배경에 색이 적용되어 있음 -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- outline: 배경은 투명, 윤곽선에 색 적용  -->
<button type="button" class="btn btn-outline-secondary">Secondary</button>

<!-- btn-lg/sm: 버튼 크기 크게/작게-->
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

<!-- btn-block: Display에 블럭 속성 적용(줄 전체에 버튼 적용) -->
<button type="button" class="btn btn-block">Block level button</button>

<!-- disabled: 클릭이 안되게, diabled하게 적용 -->
<button type="button" class="btn btn-lg" disabled>Button</button>

4. Button group

<!-- default -->
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>
<!-- btn-group-lg: 버튼 그룹 크기 크게 -->
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>
<!--vertical: 버튼 그룹 세로로 -->
<div class="btn-group-vertical" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>

예)

5. Card

<div class="container">
    <div class="row">
        <div class="col-4">
            <div class="card">
                <img src="../images/mino.JPG" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example....</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>
</div>

예)

6. Carousel - With indicators

<!-- carousel: 슬라이드 형태로 사진을 넘기는 기능 -->
<div class="container">
    <div id="carouselExampleIndicators" class="carousel slide" data-			ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" 				class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1">				</li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2">				</li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="../images/1.JPG" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="../images/2.JPG" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="../images/3.JPG" class="d-block w-100" alt="...">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 				role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" 				role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
</div>

예)

collapse

7. collapse

컨텐츠를 숨기고 보이는 플러그인.

<p>
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" 	      role="button" aria-expanded="false" aria-controls="collapseExample">
        Link with href
    </a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-			  target="#collapseExample" aria-expanded="false" aria-        					controls="collapseExample"> Button with data-target
    </button>
</p>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus 		 terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer 			labore wes anderson cred nesciunt sapiente ea proident.
    </div>
</div>

예)

collapse

8. Forms

아이디 / 패스워드 로그인 창과 같은 Form을 생성.

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-			describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share 			your email with anyone else.</small>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" 			placeholder="Password">
    </div>
    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me 				  out</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

예)

9. Input group

input들의 묶음 예) button + input tag

10. Media object

<div class="media">
    <img src="../images/mino.JPG" class="mr-3" alt="...">
    <div class="media-body">
        <h5 class="mt-0">Mino Seo</h5>
        	Cras sit amet nibh libero, in gravida nulla. Nulla vel metus 				scelerisque ante sollicitudin. Cras purus odio, vestibulum in 				vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi 			vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
</div>

예)

media object

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-				target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-		 labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-l						   abel="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                모달 안의 내용을 적는 칸.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-								dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save 									changes</button>
            </div>
        </div>
    </div>
</div>

예)

Modal

12. Progress

<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 50%;" 	aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%
    </div>
</div>

예)

progress

13. Spinners

<span class="sr-only">Loading...</span> 부분을 빼도 정상적으로 작동을 함.
그러나, 움직이는 이미지나 사진 등을 보지 못하는 유저를 위해 sr-only(screen reader) 클래스 입력하여 이미지가 무엇인지 컴퓨터가 인식할 수 있음. (비슷한 예. alt=value)

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

예)

spinner

https://bootstrapcreative.com/resources/bootstrap-4-css-classes-index/

웹 페이지의 상단에 Navigation을 만드는 기능

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" 			data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-			  label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">					(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" 									id="navbarDropdown" role="button" data-										toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-												labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else 							here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-						disabled="true">Disabled</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" 								   placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" 								type="submit">Search</button>
            </form>
        </div>
    </nav>

예)

15. Pagination

페이지 이동/넘기기 버튼 적용

<div class="container">
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            
            <-- disabled: 페이지 비활성화 -->
            <li class="page-item disabled"><a class="page-link" 							href="#">Previous</a></li>
                
            <li class="page-item"><a class="page-link" href="#">1</a></li>
                
            <-- disabled: 해당 버튼 활성화 -->
            <li class="page-item active" aria-current="page">
                <a class="page-link" href="#">2 <span class="sr-only">(current)					  </span></a>
            </li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
    </nav>
</div>

예)

<div class="container"> 을 쓰면 페이지 양 끝에 빈 공간이 생김!

16. break point

Bootstrap의 break point를 활용하여 view port의 width에 따라 컬럼 갯수를 다르게 설정할 수 있음.

576px보다 작을 때: col-12 조건 적용 => 한줄에 12칸을 차지하는 박스 생성 (총 12줄)
576px보다 클때: col-sm-6 조건 적용 => 한줄에 6칸을 차지하는 박스 생성 (총 6줄)
768px보다 클때: col-md-4 조건 적용 => 한줄에 4칸을 차지하는 박스 생성 (총 4줄)
992px보다 클때: col-lg-3 조건 적용 => 한줄에 3칸을 차지하는 박스 생성 (총 3줄)
1200px 보다 클때: col-xl-2 조건 적용 => 한줄에 2칸을 차지하는 박스 생성 (총 2줄)

상기 조건을 활용하여, view point에 따라 박스를 숨기는 등의 추가적인 속성도 적용 가능

view port가 small(576px ~ 768px) 일 경우, 마지막 박스는 숨겨짐

<div class="container">
    <div class="row">
        <div class="d-sm-none col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">01</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">02</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">03</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">04</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">05</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">06</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">07</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">08</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">09</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">10</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">11</div>
        <div class="d-sm-none col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">12</div>
    </div>
</div>

Bootstrap의 breakpoint

Comment Read more

Web 07 - Bootstrap Utilities(2) - Grid System, Flex

17 Feb 2019 | Web HTML CSS Bootstrap

8. Grid System

일련의 컨테이너, 행 및 열을 사용하여 내용을 정렬하고 구성하는 시스템.
12개의 열(Column)으로 기본적으로 나뉘어져 있음.
- 열이 12개인 이유? 12개가 활용도가 제일 높음 / 약수 多
기본적인 구성: container > row > col-4
- Grid System은 열(Column) 을 기준으로만 나뉘어져있음. 그러므로, 다른 행에 대해서 다른 Grid를 적용하기 위해, row 를 넣어줌.

<div class="container">
  <div class="row">
    <div class="col-4 border border-primary">

GRID SYSTEM EXAMPLE

아래의 예시는 4칸씩 3개의 열을 구성함.

<div class="container">
  <div class="row">
    <div class="col-4 border border-primary">
      One of three columns
    </div>
    <div class="col-4 border border-primary">
      One of three columns
    </div>
    <div class="col-4 border border-primary">
      One of three columns
    </div>
  </div>
</div>

offset 값을 추가로 입력하면, 컬럼 사이에 빈 공간을 만들 수 있음
Grid system은 12칸이 Maximum으로 12칸을 초과하면 다음 줄로 넘어감

<div class="container">
  <div class="row">
    <div class="col-4 border border-primary">
      One of three columns
    </div>
    <div class="offset-3 col-4 border border-primary">
      One of three columns
    </div>
    <div class="col-4 border border-primary">
      One of three columns
    </div>
  </div>
</div>

구분된 컬럼안에 또다시 컬럼을 세분화 하는 것도 가능함.

<div class="container">
  <div class="row">
    <div class="col-3 border border-primary">
        <div class="row">
            <div class="col-4 border border-danger">1</div>
            <div class="col-4 border border-danger">2</div>
            <div class="col-4 border border-danger">3</div>
        </div>
      One of three columns
    </div>
  </div>
</div>

break point를 활용하여 화면크기에 따라 컬럼 갯수를 다르게 설정할 수 있음.
- 기본 설정: col-4 (4칸씩 3개의 박스가 2줄 생김)
- 창이 768 px을 초과시, 컬럼을 2개씩 차지하는 것으로 변경 (2칸씩 6개의 박스가 생김 => 1줄)

<div class="container mb-5">
    <div class="row">
        <div class="col-4 col-md-2 border border-success">1</div>
        <div class="col-4 col-md-2 border border-success">3</div>
        <div class="col-4 col-md-2 border border-success">2</div>
        <div class="col-4 col-md-2 border border-success">4</div>
        <div class="col-4 col-md-2 border border-success">5</div>
        <div class="col-4 col-md-2 border border-success">6</div>
    </div>
</div>

Bootstrap의 breakpoint

9. Flex

Flexbox Layout은, 새롭게 CSS3 명세에 반영된 레이아웃 모듈로서, 요소들이 수용된 공간을 어떻게 효과적으로 채워나갈지에 대한 아이디어에서 시작된 새로운 레이아웃 방식
- 어떠한 박스가 있을 때, 박스들을 어떻게 정렬/배치 할지?
Flexbox는 유연한 요소( item ), 그리고 그요소를 담을 그릇(container)으로 이루어짐. 그릇과 내용물 모두에게 이것이 Flexbox라는 일종의 고유한 선언을 해줘야함.

Flex의 속성

1) display

그릇에 해당하는 부모 요소(이하, container라 칭함)에 display: flex 혹은 display: inline-flex 로 flexbox임을 선언 할 수 있음.

.container { display: flex }

2) justify-content

Flex의 요소를 가로선상에서 정렬
- flex-start : 요소들을 컨테이너의 왼쪽으로 정렬
- flex-end : 요소들을 컨테이너의 오른쪽으로 정렬
- center : 요소들을 컨테이너의 가운데로 정렬
- space-between : 요소들 사이에 동일한 간격 삽입
- space-around : 요소들 주위에 동일한 간격 삽입

#pond {
	display: flex;
    justify-content: flex-start
}

3) align-items

Flex의 요소를 세로선상에서 정렬
- flex-start : 요소들을 컨테이너의 꼭대기로 정렬
- flex-end : 요소들을 컨테이너의 바닥으로 정렬
- center : 요소들을 컨테이너의 가운데로 정렬
- baseline : 요소들을 컨테이너의 시작 위치에 정렬
- stretch : 요소들을 컨테이너에 맞도록 늘림

#pond {
	display: flex;
    align-items: flex-end;
}

4) flex-direction

Flex의 요소들이 정렬할 방향 지정
- row : 요소들을 텍스트의 방향과 동일하게 정렬
- row-reverse : 요소들을 텍스트의 반대 방향으로 정렬
- column : 요소들을 위에서 아래로 정렬
- column-reverse : 요소들을 아래에서 위로 정렬

#pond {
	display: flex;
    flex-direction: row-reverse;
}

5) order

flex요소의 순서를 지정. 기본 값은 0이며 양수나 음수로 변경 가능

#pond {
    display: flex;
}
.yellow {
    order:1 
}

6) align-self

flex 내 개별 요소에 적용할 수 있는 또 다른 속성.
이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됨.
- flex-start : 특정 요소를 컨테이너의 꼭대기로 정렬
- flex-end : 특정 요소를 컨테이너의 바닥으로 정렬
- center : 특정 요소를 컨테이너의 가운데로 정렬
- baseline : 특정 요소를 컨테이너의 시작 위치에 정렬
- stretch : 특정 요소를 컨테이너에 맞도록 늘림

#pond {
	display: flex;
    align-items: flex-start;
}
.yellow {
    align-self: flex-end 
}

7) flex-wrap

flex요소를 한줄 또는 여러줄에 걸쳐 정렬
- nowrap : 모든요소를 한줄에 정렬
- wrap : 요소들을 여러줄에 걸쳐 정렬
- wrap-reverse : 요소들을 여러줄에 걸쳐 반대로 정렬 (오른쪽 하단부터…)

#pond {
	display: flex;
    flex-wrap: wrap;
}

8) flex-flow

빈번히 사용되는 flex-direction 과 flex-wrap을 축약하여 사용

#pond {
	display: flex;
    flex-flow: column wrap;
}

9) align-content

여러 줄 사이의 간격을 지정
- flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬
- flex-end: 여러 줄들을 컨테이너의 바닥에 정렬
- center: 여러 줄들을 세로선 상의 가운데에 정렬
- space-between: 여러 줄들 사이에 동일한 간격 적용
- space-around: 여러 줄들 주위에 동일한 간격 적용
- stretch: 여러 줄들을 컨테이너에 맞도록 늘림

이 속성을 사용하는 방법이 어려울 수 있습니다. align-content는 여러 줄들 사이의 간격을 지정하며, align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정합니다. 한 줄만 있는 경우, align-content는 효과를 보이지 않습니다.

#pond {
	display: flex;
    flex-wrap: wrap;
	align-content: flex-start
}

Flex 관련 reference

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://www.beautifulcss.com/archives/1263 http://flexboxfroggy.com/#ko

Comment Read more

Older Newer

해리의 데브로그

Baby-gin Game

문제

나의 코드

SWEA 1206 - View

문제

나의 코드

버블 정렬, 카운팅 정렬

버블 정렬 (Bubble Sort)

정렬 과정

나의 코드

카운팅 정렬(counting Sort)

나의 코드

Web 08 - Bootstrap Components

Component

1. Alerts

2. Badge

3. Buttons

4. Button group

5. Card

6. Carousel - With indicators

7. collapse

8. Forms

9. Input group

10. Media object

11. Modal

12. Progress

13. Spinners

14. Navbar

15. Pagination

16. break point

Web 07 - Bootstrap Utilities(2) - Grid System, Flex

8. Grid System

9. Flex

Flex의 속성

1) display

2) justify-content

3) align-items

4) flex-direction

5) order

6) align-self

7) flex-wrap

8) flex-flow

9) align-content

Flex 관련 reference