CSS / Flex / display

display: flex

  • Flex로 요소를 배열하고 싶을 때 Container에 display: flex;를 추가합니다.
  • 아래와 같은 문서에...
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .jb-container {
        padding: 10px;
        background-color: #01579b;
      }
      .jb-item {
        margin: 10px;
        padding: 20px;
        background-color: #29b6f6;
      }
    </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 class="jb-item">Item 4</div>
    </div>
  </body>
</html>

  • display: flex;를 추가하는 것만으로 배열이 바뀝니다.
.jb-container {
  padding: 10px;
  background-color: #01579b;
  display: flex;
}

  • Container의 높이를 늘리면 Item의 높이도 같이 변경됩니다.
.jb-container {
  height: 400px;
  padding: 10px;
  background-color: #01579b;
  display: flex;
}

display: inline-flex;

  • flex 대신 inline-flex를 사용하면 가로폭이 내용에 맞게 줄어듭니다.
.jb-container {
  height: 400px;
  padding: 10px;
  background-color: #01579b;
  display: inline-flex;
}

Related Posts

CSS / 고정형 레이아웃 만들기

CSS / 고정형 레이아웃 만들기

레이아웃을 만드는 방법 웹사이트의 레이아웃을 만드는 방법은 크게 두가지가 있습니다. 첫번째는 표(<table>)을 이용하는 것이고, 두번째는 CSS를 이용하는 것입니다. 2000년대 초까지만해도 CSS 보다는 <table>을 주로 사용했습니다. 하지만 <table>을 이용하는 것은 컨텐츠와 디자인의 분리 원칙에도 맞지 않고, 사이드바의 위치를 바꾸는 등 수정을 해야 할 때 편집해야할 코드가 많다는 단점이 있어 요즘에는 거의 사용하지 않습니다. 레이아웃을 ...

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 / 애니메이션 / animation

CSS / 애니메이션 / animation

예제 다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다. 코드는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 링크 꾸미기

CSS / 링크 꾸미기

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

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

개요 background-size로 배경 이미지의 가로 크기와 세로 크기를 정할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 background-size: auto | length | cover | contain | initial | inherit auto : 이미지 크기를 유지합니다. length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 ...

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 / 구글 웹폰트 사용하는 방법

CSS / 구글 웹폰트 사용하는 방법

구글에서 많은 웹폰트를 제공하고 있습니다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아보겠습니다. 글꼴 선택하고 코드 얻기 구글 웹폰트에 접속합니다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정합니다. + 버튼을 클릭하여 글꼴을 선택합니다. 여러 개를 선택해도 됩니다. 아래에 있는 검은 색 바를 클릭합니다. 구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 ...

CSS / content / 요소 앞 또는 뒤에 문자열 등 콘텐트 만들기

CSS / content / 요소 앞 또는 뒤에 문자열 등 콘텐트 만들기

content 속성은 선택한 요소의 내용 앞이나 뒤에 콘텐트를 붙입니다. 예를 들어 p 요소 내용 앞에 콘텐트를 넣으려면 p:before { content: xxx; } 와 같이 하고, 뒤에 붙이려면 p:after { content: xxx; } 와 같이 합니다. content 속성을 이용하여 XXX라는 문자열을 넣으려면 다음과 같이 합니다. p:before { content: "XXX"; } 이미지를 넣고 싶다면 다음과 같이 합니다. p:before { content: ...

CSS / 애니메이션 / transform / rotate - 2D 회전시키기

CSS / 애니메이션 / transform / rotate - 2D 회전시키기

transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 평면에서의 회전입니다. IE는 버전 10부터 지원합니다. 문법 transform: rotate( angle ) angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, turn 등을 사용합니다. turn은 1회전, 즉 360deg를 의미합니다. 예제 마우스를 올렸을 때 회전합니다. 회전하는 과정을 보기 위해 transition 속성을 추가했습니다. 각이 양수인 경우 시계방향으로 회전합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb { width: 100px; height: 100px; margin: 60px auto; background-color: orange; transition: ...

CSS / max-width, height로 반응형 웹디자인을 위한 이미지 스타일링 하기

CSS / max-width, height로 반응형 웹디자인을 위한 이미지 스타일링 하기

반응형 웹디자인은 웹브라우저의 가로폭에 따라 레이아웃이 변하고, 그에 따라 각 요소의 가로폭도 변합니다. 텍스트는 일반적으로 바뀐 폭에 맞추어 줄바꿈이 되지만, 이미지는 줄바꿈이라는 게 없기 때문에 문제가 생깁니다. 어떤 문제가 발생하는지 살펴보고 해결책을 찾아보겠습니다. 이미지 크기를 정하지 않은 경우 이미지의 크기를 정하지 않으면 부모 요소보다 큰 이미지는 부모 요소를 벗어나서 나타납니다. <!doctype html> <html lang="ko"> <head> ...

CSS 강좌