CSS / Flex / align-items

  • align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 예를 들어 flex-direction의 값이 row인 경우 수직 정렬을 정합니다. 아래는 flex-direction: row일 때의 예제입니다.
  • 기본값은 stretch로, 콘테이너의 높이에 맞게 늘립니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        margin: 0px;
        font-family: Consolas, monospace;
      }
      .jb-container {
        height: 100vh;
        background-color: #01579b;
        display: flex;
        align-items: stretch;
      }
      .jb-item {
        padding: 10px;
      }
      .jb-item:nth-child(1) {
        background-color: #e3f2fd;
      }
      .jb-item:nth-child(2) {
        background-color: #bbdefb;
        font-size: 2em;
      }
      .jb-item:nth-child(3) {
        background-color: #90caf9;
        font-size: 3em;
      }
    </style>
  </head>
  <body>
    <div class="jb-container">
      <div class="jb-item">Item 1</div>
      <div class="jb-item">Item 2</div>
      <div class="jb-item">Item 3</div>
    </div>
  </body>
</html>

  • align-items의 값을 flex-start로 정하면, 위쪽에 맞춥니다.
.jb-container {
  height: 100vh;
  background-color: #01579b;
  display: flex;
  align-items: flex-start;
}

  • align-items의 값을 flex-end로 정하면, 아래쪽에 맞춥니다.
.jb-container {
  height: 100vh;
  background-color: #01579b;
  display: flex;
  align-items: flex-end;
}

  • align-items의 값을 center로 정하면, 중간에 맞춥니다.
.jb-container {
  height: 100vh;
  background-color: #01579b;
  display: flex;
  align-items: center;
}

  • align-items의 값을 baseline으로 정하면, 글자의 베이스라인에 맞춥니다.
.jb-container {
  height: 100vh;
  background-color: #01579b;
  display: flex;
  align-items: baseline;
}

같은 카테고리의 다른 글
CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

개요 empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성이다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 empty-cells: show | hide | initial | inherit show : 빈 셀의 테두리를 보여준다. hide : 빈 셀의 테두리를 숨긴다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. 예제 첫 번째 표는 빈 셀의 테두리를 표시한다. 두 ...

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이

CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정합니다. em - 상위 요소 기준 em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다. 예를 들어 font-size: 1.5em; 은 글자 크기를 상위 요소 크기의 1.5배로 하겠다는 뜻입니다. 간단한 예제를 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / radial-gradient - 원형 그라데이션 효과 만들기

CSS / radial-gradient - 원형 그라데이션 효과 만들기

radial-gradient radial-gradient로 원형 그라데이션 효과를 만들 수 있습니다. CSS3에서 추가된 것으로,인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 문법 radial-gradient( shape size at position, color1, color2, ..., color3 ) shape : 원 모양인지 타원 모양인지 정합니다. size : 크기를 정합니다. position : 중심의 위치를 정합니다. color : 색을 정합니다. 아래의 예제로 하나씩 알아보겠습니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div.jb { margin: ...

CSS / 링크 꾸미기

CSS / 링크 꾸미기

선택자 링크는 <a> 태그로 만듭니다. 따라서 <a> 태그를 선택하여 꾸밉니다. 예를 들어 a { color: red; } 는 링크의 색을 빨간색으로 만듭니다. 가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다. a:link - 방문하지 않은 링크 a:visited - 방문했던 링크 a:hover - 마우스가 올려진 링크 a:active - 클릭하는 순간 링크 주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고, a:active는 ...

CSS / CSS를 HTML에 적용시키는 방법

CSS / CSS를 HTML에 적용시키는 방법

HTML에 CSS를 적용시키는 방법은 세가지가 있다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 선태한다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는다. Internal Style Sheet HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결한다. 보통 여러 문서에 적용되는 스타일은 Linking Style Sheet으로 만들고, 특정 ...

CSS / border-radius / 테두리 둥글게 만드는 속성

CSS / border-radius / 테두리 둥글게 만드는 속성

border-radius border-radius는 테두리를 둥글게 만드는 속성입니다. CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법) 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다. 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { box-sizing: border-box; width: 200px; height: 200px; margin: 20px auto; background-color: orange; } </style> </head> <body> <div class="jb"></div> </body> </html> 문법 1 border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 속성의 ...

CSS / 선택자(Selector)

CSS / 선택자(Selector)

전체 선택자(Universal Selector) 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 다음은 모든 요소의 색을 파란색으로 만듭니다. * { color: blue; } 다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉, 다음 두 줄은 같은 결과를 만듭니다. *.abc { color: blue; } .abc { color: blue; } 타입 선택자(Type Selector) 타입 선택자(Type Selector)는 h1, p, ...

CSS / 문법

CSS / 문법

문법 다음은 가장 간단한 CSS 코드이다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 한다. 선택자(selector) : 무엇을 꾸밀지 정한다. h1은 h1 요소를 꾸미겠다는 뜻이다. 속성(property) : 어떤 모양을 꾸밀지 정한다. color는 색을 꾸미겠다는 뜻이다. 값(value) : 어떻게 꾸밀지 정한다. red는 빨간색으로 만들겠다는 뜻이다. 즉, CSS 코드는 다음처럼 구성된다. selector ...

CSS / 표(table) 꾸미기 / 배경색 만들기

CSS / 표(table) 꾸미기 / 배경색 만들기

배경색을 만드는 속성 배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 기본 모양 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS / 표(table) 꾸미기 / 테두리 만들기

CSS / 표(table) 꾸미기 / 테두리 만들기

테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...