CSS / Flex / order / 아이템의 순서 정하는 속성

  • 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;
}

Related Posts

CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성

CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성

개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정합니다. border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> ...

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

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 / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격

CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격

letter-spacing, word-spacing 글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다. 예제 값의 변화에 따른 간격의 변화를 보여주는 예제입니다. 글자 사이의 간격을 변화시키면 단어 사이의 간격도 변합니다. 단어 사이의 간격을 변화시켜도 글자 사이의 간격은 변하지 않습니다. <!doctype html> <html lang="ko"> <head> ...

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

체크박스와 라벨 체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다. 예제 다음은 높이를 조정하는 간단한 예제입니다. 첫 번째 체크박스와 라벨은 아무런 ...

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

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

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

CSS / 짧은 밑줄 만들기

CSS / 짧은 밑줄 만들기

짧은 밑줄 만들기 밑줄은 보통 text-decoration이나 border 속성으로 만듭니다. 그런데 그렇게 만든 밑줄은 선택한 요소 전체에 적용됩니다. 즉, 요소가 길면 밑줄도 길게 만들어지고, 요소가 짧으면 밑줄도 짧게 만들어집니다. 요소보다 짧은 밑줄을 만드는 방법은 :after 선택자를 이용하는 것입니다. 요소 뒤에 선을 만들고 위치와 길이를 정해주면 됩니다. 예를 들어 h1 요소에 짧은 밑줄을 만들고 싶다면 다음과 ...

CSS / background-color / 배경색을 정하는 속성

CSS / background-color / 배경색을 정하는 속성

개요 background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-color: transparent | color | initial | inherit transparent : 배경색이 없습니다. color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta ...

CSS / color / 텍스트 색 정하는 속성

CSS / color / 텍스트 색 정하는 속성

개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기

CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기

웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다. 이 색은 CSS로 바꿀 수 있습니다. 사용하는 선택자는 가상 요소 ::selection입니다. 다음은 텍스트를 선택했을 때 배경은 검은색으로, 글자는 노란색으로 만드는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ::selection { background-color: black; color: yellow; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. ...

CSS / float와 overflow

CSS / float와 overflow

float float는 요소를 왼쪽 또는 오른쪽에 배치할 때 유용한 속성입니다. float 속성을 부여한 요소의 다음 요소는 float 속성을 부여한 요소가 차지하는 위치만 제외하고 나머지 공간을 채우게 됩니다. 사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용합니다. overflow overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. ...

CSS 강좌