아이템의 순서 정하는 속성

CSS
Created 2020-11-28 Last Modified 2020-11-28

Flex로 아이템을 배치할 때, 입력한 순서대로 출력됩니다.

<!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;
      }
      .jb-item {
        padding: 20px;
      }
      .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>

만약 내용을 변경하지 않고 출력 순서만 바꾸고 싶다면 order 속성을 사용합니다.
기본값은 0이고, 작은 값이 있는 요소부터 출력합니다. 값이 같다면 입력한 순서대로 출력합니다.

.jb-item:nth-child(1) {
  background-color: #e3f2fd;
  order: 2;
}
.jb-item:nth-child(2) {
  background-color: #bbdefb;
  font-size: 2em;
  order: 3;
}
.jb-item:nth-child(3) {
  background-color: #90caf9;
  font-size: 3em;
  order: 1;
}

order 속성의 값으로 음수도 가능합니다. 특정 아이템을 앞으로 옮기고 싶을 때 유용합니다.

.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;
  order: -1;
}

CSS

CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 이렇게 정한 정렬은 콘테이너 안의 모든 아이템에 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / Flex / align-content

CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

가상 요소(Pseudo-elements)를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1:before ...

CSS / 기초 / !important

CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다. property: value !important; 예를 들어 다음은, 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만듭니다. p { color: red; } p { ...

CSS / border-collapse / 표의 테두리와 셀의 테두리 사이의 간격 처리 방식 정하는 속성

개요 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정한다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-collapse: separate | collapse | initial | inherit separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둔다. collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앤다. 겹치는 부분은 한 줄로 나타낸다. initial : 기본값으로 ...

CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성

개요 background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit repeat : 가로 방향, 세로 방향으로 반복합니다. repeat-x : 가로 방향으로 반복합니다. repeat-y : 세로 방향으로 반복합니다. no-repeat : 반복하지 않습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> ...

CSS / Flex / flex-wrap

개요 flex-wrap은 아이템들의 가로 크기 합이 콘테이너의 가로 크기를 넘어갈 때 어떻게 처리할지를 정한다. 문법 flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit nowrap : 기본값으로, 넘기지 않는다. wrap : 넘긴다. wrap-reverse : 역순으로 넘긴다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속 받는다. 예제 - nowrap 기본값은 nowrap으로... <!doctype html> <html lang="ko"> <head> ...

CSS / 도형 만들기 / 원, 타원

CSS의 border-radius 속성으로 원을 만들 수 있다. 원 만들기 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만든다. <div class="circle"></div> 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣는다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .circle { ...

CSS / opacity / 요소를 투명하게 만드는 속성

개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 숫자가 작을수록 투명해집니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Reference ...

CSS / font-size / 글자 크기 정하는 속성