Post

web 공부 2024.04.19

Posted
css 로고 img
css 로고 img
By Jiwoon
14 min read

플랙스박스

쓰는 이유

  1. 레이아웃을 쉽게 구성: Flexbox는 요소들을 수평적 또는 수직적으로 정렬하는 데 매우 효과적. 이는 복잡한 레이아웃을 구성하는 데 도움이 됨, 수평 정렬된 메뉴 바나 수직 정렬된 사이드바 등을 만들 때 유용.

  2. 유연성과 반응성: Flexbox를 사용하면 다양한 화면 크기와 장치에 대응하여 유연하고 반응적인 레이아웃을 만들 수 있다. 이는 모바일 장치와 데스크탑 화면에서 모두 일관된 사용자 경험을 제공하는 데 도움이 된다.

  3. 정렬 및 정렬 조작: Flexbox를 사용하면 요소들을 정렬하고 간격을 조정할 수 있다. 예를 들어, 요소들 사이의 간격을 일정하게 유지하거나, 요소들을 가운데 정렬하거나, 끝에 정렬하는 등의 작업을 수행할 때 유용하다.

  4. 복잡한 레이아웃의 관리: Flexbox는 복잡한 레이아웃을 관리하기 위한 도구.다양한 요소들을 효율적으로 배치하고 공간을 관리할 수 있다.

Flexbox를 사용함으로써 CSS의 레이아웃을 관리하는 것이 훨씬 간편해지며, 코드의 가독성과 유지보수성을 높일 수 있다.

예시 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        .line {
            border: 2px solid red;
            width: 400px;
            height: 100px;
            /* 안에 있는 item들을 플랙스로 가로정렬을 만들었음 */
            display: inline-flex;
            /* 다시 세로로 만들수있음 부모안에 딱 맞게 들어감 */
            flex-direction: row;
            /* 방향에 따라 달라져서 오른쪽 왼쪽이 아님 */
            justify-content: space-evenly;
            /* 기본값은 스트래치. 컨테이너 높이에 맞게 늘림 */
            /* align-items: stretch; */
            /* 스타트는 앞으로 정렬 */
            align-items: center;
            flex-wrap: nowrap;
        }

        .item {
            border: 2px solid blue;
            width: 100px;
            /* height: 50px; */
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="line">
        <div class="item">아이템1</div>
        <div class="item">아이템2</div>
        <div class="item">아이템3</div>
        <div class="item">아이템1</div>
        <div class="item">아이템2</div>
        <div class="item">아이템3</div>
        <div class="item">아이템1</div>
        <div class="item">아이템2</div>
        <div class="item">아이템3</div>
        <div class="item">아이템1</div>
        <div class="item">아이템2</div>
        <div class="item">아이템3</div>
        <div class="item">아이템1</div>
        <div class="item">아이템2</div>
        <div class="item">아이템3</div>
    </div>
    <div class="line">
        <div class="item">아이템1</div>
        <div class="item">아이템2</div>
        <div class="item">아이템3</div>
    </div>
    <div class="line">
        <div class="item">아이템1</div>
        <div class="item">아이템2</div>
        <div class="item">아이템3</div>
    </div>
</body>
</html>

space-between vs space-around vs space-evenly

  1. space-between:
    • 이 속성값은 첫 번째 항목을 컨테이너의 시작점에, 마지막 항목을 끝점에 배치.
    • 나머지 항목들은 동일한 간격으로 서로 사이에 배치.
    • 결과적으로 첫 번째와 마지막 항목 사이의 간격은 동일하나, 컨테이너의 가장자리와 첫 번째 및 마지막 항목 사이에는 간격이 없다.
  2. space-around:
    • 각 항목의 양쪽에 동일한 간격을 주어 배치.
    • 이 간격은 항목 수에 따라 조정되며, 각 항목은 자신의 주위에 동일하지 않은 간격을 갖는다.
    • 컨테이너 가장자리와 인접한 항목 사이의 간격은 다른 항목들 사이의 간격의 절반 크기.
  3. space-evenly:
    • 모든 항목 사이의 간격뿐만 아니라 컨테이너의 경계와 항목 사이의 간격도 동일하게 배분.
    • 이 속성은 가장 공평한 간격 배분을 제공하여 시각적으로 균일한 느낌을 준다.

각각의 정렬 방식은 상황에 따라 선택할 수 있으며, 디자인의 요구와 레이아웃의 목적에 따라 가장 적합한 속성값을 사용하는 것이 좋다.

display: inline-flex

CSS의 display: inline-flex;는 flexbox 모델을 인라인 레벨의 컨테이너로 설정. 이 속성은 display: flex;와 유사한 방식으로 내부 요소를 배치하지만, 컨테이너 자체의 행동 방식에서 차이가 있다.

  1. 인라인 레벨 컨테이너:
    • display: inline-flex;를 사용하면, 해당 컨테이너는 인라인 요소처럼 다루어짐. 즉, 다른 인라인 요소들과 같은 줄에 배치될 수 있으며, 블록 요소처럼 새 줄을 시작하지 않는다.
  2. Flexbox 특성 유지:
    • 컨테이너 내부의 요소들은 flexbox의 특성을 따른다. 즉, flex 항목들은 flex 컨테이너 내에서 유연하게 배치, 정렬, 그리고 크기 조정이 가능.
  3. 크기와 정렬:
    • inline-flex 컨테이너는 그 자체의 크기가 내용에 따라 결정된다. 또한 다른 인라인 요소들과 같이 수직 정렬을 vertical-align 속성으로 조절할 수 있다.

display: inline-flex;는 특히 여러 개의 작은 컴포넌트나 버튼을 한 줄에 배치하면서 각 요소 내부에서 복잡한 레이아웃을 구현할 때 유용하다. 이를 통해 텍스트나 다른 인라인 요소들과 함께 복잡한 구성을 쉽게 처리할 수 있다.

flex-wrap: no-wrap vs flex-wrap: wrap

CSS의 flex-wrap 속성은 Flexbox 레이아웃에서 컨테이너 내의 항목들이 한 줄에 모두 배치되어야 하는지, 아니면 필요에 따라 여러 줄로 나뉘어야 하는지를 결정. 주요 값으로는 nowrap과 wrap이 있다.

  1. nowrap:
    • flex-wrap: nowrap; 설정은 모든 flex 항목들이 하나의 단일 줄에 배치되도록 한다.
    • 컨테이너의 너비를 초과하는 경우에도 항목들은 줄바꿈 되지 않고, 필요하다면 축소되거나 서로 겹치게 배치된다.
    • 이 설정은 컨테이너가 항목들을 강제로 한 줄에 유지하려 할 때 사용.
  2. wrap:
    • flex-wrap: wrap; 설정은 컨테이너의 너비를 초과하는 항목들이 새로운 줄로 넘어가도록 허용.
    • 이 방식은 항목들이 충분한 공간을 갖고 표시되게 하여 더 깔끔하고 읽기 쉬운 레이아웃을 제공.
    • 일반적으로 반응형 레이아웃에 적합하며, 화면 크기가 변할 때 컨텐츠가 자연스럽게 조정되도록 도와준다.

nowrap과 wrap 각각의 사용은 레이아웃의 요구와 디자인 목표에 따라 달라진다. nowrap은 항목들이 겹치거나 축소되는 것을 허용하면서도 한 줄에 유지하고자 할 때, wrap은 공간이 부족할 때 다음 줄로 항목을 자동으로 넘기고자 할 때 유용하다.

css 작성 규칙

  1. 명확성과 간결성:
    • 가능한 한 간결하고 명확하게 코드를 작성. 불필요한 중복을 피하고, 간단명료하게 요소를 선택하는 것이 좋다.
  2. 주석 사용:
    • 코드에 주석을 추가하여 각 스타일 블록이 어떤 목적을 가지고 있는지 설명. 이는 나중에 코드를 검토하거나 다른 개발자가 작업을 이어갈 때 매우 유용하다.
  3. 일관된 네이밍 규칙:
    • 클래스와 ID의 이름을 일관되고 명확하게 지정. 일반적으로 케밥 케이스(예: menu-item)를 사용하는 것이 좋다.
  4. 캐스캐이딩 및 상속 이해하기:
    • CSS의 “Cascading” 성질을 이해하고 효과적으로 활용. 글로벌 스타일을 설정하고, 필요한 경우만 더 구체적인 스타일을 적용하기.
  5. 모바일 우선 설계:
    • 반응형 디자인을 염두에 두고, 모바일 우선 방식으로 스타일을 작성하기. 이는 뷰포트의 크기가 작은 디바이스에서 먼저 최적화하고, 큰 화면으로 갈수록 스타일을 확장하는 방식.
  6. 셀렉터의 특이성 관리:
    • CSS 셀렉터의 특이성이 너무 높으면 스타일을 오버라이드하기 어려워질 수 있다. 가능한 한 특이성을 낮게 유지하고, 복잡한 셀렉터는 피하는 것이 좋다.
  7. 재사용 가능한 컴포넌트:
    • 재사용 가능한 컴포넌트를 만들어 코드의 재사용성을 높이기. 이는 유지 보수를 쉽게 하고, 일관된 디자인을 유지하는 데 도움이 된다.
  8. 외부 스타일 시트 사용:
    • HTML 파일 내에 스타일을 직접 작성하기보다는 외부 스타일 시트를 사용하기. 이는 콘텐츠와 스타일을 분리하여 사이트의 로딩 시간을 개선하고, 스타일 시트를 여러 페이지에 걸쳐 재사용할 수 있게 함.
  9. CSS 전처리기 고려:
    • CSS 전처리기(Sass, Less 등)를 사용하면 변수, 믹스인, 함수 등을 활용하여 보다 효율적이고 관리하기 쉬운 스타일시트를 작성할 수 있다.
  10. 테스트 및 검증:
    • 다양한 브라우저와 장치에서 CSS가 제대로 작동하는지 광범위하게 테스트하기. CSS 검증 도구를 사용하여 코드의 오류를 찾고 수정.

css 프레임워크

부트스트랩 간소화버전 같은 느낌 : 피코

  • 사용예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
    />
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <article>
        <form>
          <fieldset>
            <label>
              First name
              <input
                name="first_name"
                placeholder="First name"
                autocomplete="given-name"
              />
            </label>
            <label>
              Email
              <input
                type="email"
                name="email"
                placeholder="Email"
                autocomplete="email"
              />
            </label>
          </fieldset>

          <input type="submit" value="Subscribe" class="contrast"/>
        </form>
      </article>
    </main>
  </body>
</html>

과제

깃허브 링크

폴리텍, web
html css
This post is licensed under CC BY 4.0 by the author.