ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 9. CSS 기본 문법3
      개발자 수업/HTML5 2021. 12. 20. 12:46

      1. CSS3 Flexible Box (정렬) - 1차원 레이아웃
          1) 1차원이라는 개념은
              - 수직은 y축, 수평은 x축
              - 수직정렬, 수평정렬에서 x축과 y축처럼 하나의 축을 1차원이라고 함
          2) Flex Container
              - display
                  - Flex Container의 화면 출력(보여짐) 특성
                      - flex : 블록 요소와 같이 Flex container 정의
                      - inline-flex : 인라인 요소와 같이 Flex container 정의
              - flex-direction
                  - 주축을 설정
                      - row (행축 : 좌 -> 우) (default)
                      - row-reverse (행축 : 우 -> 좌)
                      - column (열축 : 위 -> 아래)
                      - column-reverse (열축 : 아래 -> 위)
              - align-items
                  - 교차축의 한 줄 정렬 방법
                      - stretch : Flex items를 교차 축으로 늘림
                      - flex-start : Flex items를 각 줄의 시작점으로 정렬
                      - flex-end : Flex items를 각 줄의 끝점으로 정렬
                      - center : Flex items를 각 줄의 가운데 정렬

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="flex.css">
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>
      .container{
    background-color: royalblue;
    display: flex;
    width: 400px;
    height: 200px;
}

.container .item{
    width: 100px;
    height: 100px;
    border: 3px dashed red;
    background-color: orange;
}

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="flex.css">
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>
      .container{
    background-color: royalblue;
    display: flex;
    width: 400px;
    height: 200px;
    flex-direction: column;
}

.container .item{
    width: 100px;
    height: 100px;
    border: 3px dashed red;
    background-color: orange;
}

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="flex.css">
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>
      .container{
    background-color: royalblue;
    display: flex;
    width: 500px;
    height: 300px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.container .item{
    width: 100px;
    height: 100px;
    border: 3px dashed red;
    background-color: orange;
}

      저작자표시 비영리 변경금지

      '개발자 수업 > HTML5' 카테고리의 다른 글

      8. SB  (0) 2021.11.05
      7. BS (웹스톰)  (0) 2021.11.04
      6. CSS 기본 문법2  (0) 2021.11.02
      HTML5/src/main/webapp/lab03  (0) 2021.11.02
      5. CSS 기본 문법  (0) 2021.11.01

      관련글 관련글 더보기

      댓글

    티스토리툴바