<div>
  The brown fox jumps over the lazy dog
</div>
div {
  background-color: orange;
  font-size: 30px;
  padding: 20px;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

확인

 

필터 처리 방법

div {
  background-color: orange;
  font-size: 30px;
  padding: 20px;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  border: 4px solid red;
  box-sizing: border-box;
/*  흐림 처리, 배경을 회색으로  */
  backdrop-filter: blur(4px) grayscale();
  
}

확인

관련 문서

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

 

white-space - CSS: Cascading Style Sheets | MDN

The white-space CSS property sets how white space inside an element is handled.

developer.mozilla.org

 

 

'프론트엔드 > CSS' 카테고리의 다른 글

오버워치 영웅 선택 화면 실습  (0) 2021.04.29
CSS 변환 효과 (요소의 변환 효과)  (0) 2021.04.28
전환 효과  (0) 2021.04.28
요소의 정렬(플렉스)  (0) 2021.04.26
요소의 배치  (0) 2021.04.25

출처: GitHub - ParkYoungWoong/overwatch-hero-selector-vanilla

 

ParkYoungWoong/overwatch-hero-selector-vanilla

Contribute to ParkYoungWoong/overwatch-hero-selector-vanilla development by creating an account on GitHub.

github.com

css 초기화: www.jsdelivr.com/package/npm/reset-css

 

jsDelivr - A free, fast, and reliable CDN for Open Source

Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use.

www.jsdelivr.com

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overwatch</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    
    <div class="container">
        <div class="heroes">
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
            <div class="hero">
                <div class="image"></div>
            </div>
        </div>
        <div class="logo">
            <img src="https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/logo_overwatch.png" alt="Overwatch">
        </div>
    </div>
</body>
</html>
body {
    width: auto;
    height: 100vh;  /*화면에 보이는 전체 영역*/
    /*배경이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/bg.jpg");
    background-size: cover; /*더 넓은 너비에 맞게 이미지 출력*/
    background-repeat: no-repeat; /*반복 안함*/
    background-attachment: fixed; /*배경이미지 고정*/
}
.container {
    padding: 50px 0;  /*밑으로 이동*/
}

.container .heroes {
    display: flex;  /*수평으로 정렬*/
    flex-wrap: wrap;  /*줄바꿈 처리*/
    justify-content: center; /*아이템 요소 가운데 정렬*/
    max-width: 700px; /*최대 가로 넓이 지정*/
    margin: 0 auto;   /* 가운데 정렬 */
    padding: 40px 20px;
}

.container .heroes .hero {
    width: 80px;
    height: 84px;
    margin: 4px;                /*각각 나눠보이게 하기 위해서*/
    border: 3px solid #fff;
    border-radius: 10px;        /*모서리 둥글게*/
    box-sizing: border-box;     /*border 사이즈 포함해서 전체 사이즈 고정*/
    background-color: #555;
    overflow: hidden;           /*넘치는 부분 잘라내기*/
    transform: skewX(-14deg);  /*기울기*/
    transition: 
        transform .1s,        /*바뀌는(요소가 커지는) 속도 조절*/
        background-color .6s; /*바뀌는(배경색 변하는) 속도 조절*/
}

/*마우스를 올렸을때 이벤트 처리*/
.container .heroes .hero:hover {
    background-color: #ff9c00;
    transform: scale(1.3) skewX(-14deg);  /*기존의 속성 삭제됨*/
    z-index: 1; /*쌓임 순서 지정(겹쳐지는 문제 해결)*/
}
.container .heroes .hero .image{
    width: 140%;    /*부모요소의 맞춰서 크기 조절하기위해 % 사용*/
    height: 100%;
    background-position: center;    /*이미지를 가운데 배치*/
    background-size: 90px;          /*가로 넓이 축소*/
    background-repeat: no-repeat;   /*이미지 반복 안함*/
    transform: skew(14deg)          /*안의 있는 내용 기울기 해제*/
               translateX(-16px);   /*이미지를 왼쪽으로 당겨옴*/
}

/*첫번째 자식요소*/
.container .heroes .hero:nth-child(1) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero1.png");
}
.container .heroes .hero:nth-child(2) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero2.png");
}
.container .heroes .hero:nth-child(3) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero3.png");
}
.container .heroes .hero:nth-child(4) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero4.png");
}
.container .heroes .hero:nth-child(5) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero5.png");
}
.container .heroes .hero:nth-child(6) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero6.png");
}
.container .heroes .hero:nth-child(7) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero7.png");
}
.container .heroes .hero:nth-child(8) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero8.png");
}
.container .heroes .hero:nth-child(9) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero9.png");
}
.container .heroes .hero:nth-child(10) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero10.png");
}
.container .heroes .hero:nth-child(11) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero11.png");
}
.container .heroes .hero:nth-child(12) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero12.png");
}
.container .heroes .hero:nth-child(13) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero13.png");
}
.container .heroes .hero:nth-child(14) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero14.png");
}
.container .heroes .hero:nth-child(15) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero15.png");
}
.container .heroes .hero:nth-child(16) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero16.png");
}
.container .heroes .hero:nth-child(17) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero17.png");
}
.container .heroes .hero:nth-child(18) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero18.png");
}
.container .heroes .hero:nth-child(19) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero19.png");
}
.container .heroes .hero:nth-child(20) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero20.png");
}
.container .heroes .hero:nth-child(21) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero21.png");
}
.container .heroes .hero:nth-child(22) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero22.png");
}
.container .heroes .hero:nth-child(23) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero23.png");
}
.container .heroes .hero:nth-child(24) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero24.png");
}
.container .heroes .hero:nth-child(25) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero25.png");
}
.container .heroes .hero:nth-child(26) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero26.png");
}
.container .heroes .hero:nth-child(27) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero27.png");
}
.container .heroes .hero:nth-child(28) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero28.png");
}
.container .heroes .hero:nth-child(29) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero29.png");
}
.container .heroes .hero:nth-child(30) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero30.png");
}
.container .heroes .hero:nth-child(31) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero31.png");
}
.container .heroes .hero:nth-child(32) .image{
    /*이미지 가져오기*/
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero32.png");
}

.container .logo {
    max-width: 300px;   /*로고 최대 크기 지정*/
    margin: 0 auto;       /*수평 가운데 조절*/
    padding: 0 20px;
}
.container .logo img {
    width: 100%;        /*부모요소의 맞게 이미지 크기 지정*/
    
}

 

결과

 

 

SCSS 사용으로 코드 반복을 줄인 결과

 

SCSS 코드

이미지를 가져오는 URL을 변수로 저장

중첩 기능 사용

상위 선택자 참조 기능 사용

반복적으로 이미지를 가져오는 코드를 반복문을 이용하여 처리하였다.

$url: "https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images";

body {
  height: 100vh;
  background-image: url("#{$url}/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.container {
  padding: 50px 0;

  .heroes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 660px;
    margin: 0 auto;
    padding: 40px 20px;

    .hero {
      width: 80px;
      height: 84px;
      margin: 4px;
      border: 3px solid #fff;
      border-radius: 10px;
      box-sizing: border-box;
      overflow: hidden;
      background-color: #555;
      transform: skewX(-14deg);
      transition:
        transform .1s,
        background-color .6s;

      &:hover {
        background-color: #ff9c00;
        transform: skewX(-14deg) scale(1.3);
        z-index: 1;
      }

      .image {
        width: 140%;
        height: 100%;
        transform: translateX(-16px) skewX(14deg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 90px;
      }
      // 반복문 처리
      @for $i from 1 through 32 {
        // .hero
        &:nth-child(#{$i}) .image {
          background-image: url("#{$url}/hero#{$i}.png");
        }
        // & .image {
        //   background-color: red;
        // }
      }
    }
  }
  .logo {
    max-width: 300px;
    margin: 0 auto;
    padding: 0 20px;
    img {
      width: 100%;
    }
  }
}

 

실행 결과는 동일

'프론트엔드 > CSS' 카테고리의 다른 글

특정 영역의 문자를 ... 으로 표현하는 방법  (0) 2021.09.16
CSS 변환 효과 (요소의 변환 효과)  (0) 2021.04.28
전환 효과  (0) 2021.04.28
요소의 정렬(플렉스)  (0) 2021.04.26
요소의 배치  (0) 2021.04.25

transform: 변환함수1 변환함수2 변환함수3 .... ;

transform: 원근법 이동 크기 회전 기울임;

 

2D 변환 함수

  • translate(x,y): 이동(x축, y축)
  • translateX(x): 이동(x축)
  • translateY(y): 이동(y축)
  • scale(x,y): 크기(x축, y축)
  • scaleX(x): 크기(x축)
  • scaleY(y): 크기(y축)
  • rotate(degree): 회전(각도) ex) 45deg
  • skew(x,y): 기울임(x축, y축)
  • skewX(x): 기울임(x축)
  • skewY(y): 기울임(y축)
  • matrix(n,n,n,n,n,n): 2차원 변환 효과
<div class="container">
  <div class="item">AB</div>
</div>
body {
  padding: 100px;
}
div {
  width: 100px;
  height: 100px;
  background-color: royalblue;
  transition: 
    1s .5s;
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform: rotate(45deg) 
    scale(1.3);
}

결과

 

3D 변환 함수

  • translateZ(z): 이동(z축)
  • translate3d(x,y,z): 이동(x축, y축, z축)
  • scaleZ(z): 크기(z축)
  • scale3d(x, y, z): 크기 (x축, y축, z축)
  • perspective(n): 원근법(거리)
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n): 3차원 변환 효과
  • rotateX(x): 회전(x축)
  • rotateY(y): 회전(y축)
  • rotateX(z): 회전(z축)
  • rotate3d(x,y,z,a): 회전(x축, y축, z축, 각도)
.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform: translate(40px, 40px);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform: translateX(40px);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform: translateY(40px);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:scale(0.7);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:rotate(45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:rotateX(45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:rotateY(45deg);
}

 

원근법 함수(perspective)는 제일 앞에 작성해야 한다

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:perspective(500px) rotateX(45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:perspective(500px) rotateY(45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:perspective(500px) rotateX(45deg) rotateY(45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:skewX(45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:skewX(-45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:skewY(45deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:perspective(300px) rotateX(45deg)
    translateX(100px);
}

 

perspective: 하위 요소를 관찰하는 원근 거리를 지정

단위: px 등 단위로 지정

 

perspective 함수와 차이점

perspective 속성: 적용대상이 관찰대상의 부모이다, 기준점 설정: perspective-origin, perspective: 600px

perspective 함수: 적용대상이 관찰대상이다, 기준점 설정: transform-origin, transform: perspective(600px)

 

 

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform:perspective(500px) rotateY(45deg);
}

div {
  width: 100px;
  height: 100px;
  background-color: royalblue;
  perspective: 500px;
  transition: 
    1s .5s;
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  
  transform:rotateY(45deg);
}

 

backface-visibility: 3D 변환으로 회전된 요소의 뒷면 숨김 여부

visible: 뒷면 보임(기본값)

hidden: 뒷면 숨김

 

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  font-size: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform:rotateY(180deg);
}

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  font-size: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform:rotateY(180deg);
  backface-visibility: hidden;
}

 

'프론트엔드 > CSS' 카테고리의 다른 글

특정 영역의 문자를 ... 으로 표현하는 방법  (0) 2021.09.16
오버워치 영웅 선택 화면 실습  (0) 2021.04.29
전환 효과  (0) 2021.04.28
요소의 정렬(플렉스)  (0) 2021.04.26
요소의 배치  (0) 2021.04.25

transition: 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성

  • transition-property: 속성명
  • transition-duration: 지속시간 (단축형으로 작성할 때 필수 포함 속성)
  • transition-timing-function: 타이밍함수
  • transition-delay: 대기시간

 

transition-property: 전환 효과를 사용할 속성 이름을 지정

all: 모든 속성에 적용 (기본값)

속성이름: 전환 효과를 사용할 속성 이름 명시

div {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: 
    width .5s,
    background-color 2s;
}

transition-timing-function: 전환 효과의 타이밍(Easing) 함수를 지정

  • ease: 느리게-빠르게-느리게 = cubic-bezier(0.25, 0.1, 0.25, 1) (기본값)
  • linear: 일정하게 = cubic-bezier(0, 0, 1, 1)
  • ease-in: 느리게 - 빠르게 = cubic-bezier(0.42, 0, 1, 1)
  • ease-out: 빠르게 - 느리게 = cubic-bezier(0, 0, 0.58, 1)
  • ease-in-out: 느리게 - 빠르게 - 느리게 = cubic-bezier(0.42, 0, 0.58, 1)
  • ccubic-bezier(n, n, n, n): 자신만의 값을 정의(0~1)
  • steps(n): n번 분할된 애니메이션

참고 사이트

easings.net/ko

 

Easing Functions Cheat Sheet

Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.

easings.net

developer.mozilla.org/en-US/docs/Web/CSS/easing-function

 

- CSS: Cascading Style Sheets | MDN

The CSS data type denotes a mathematical function that describes the rate at which a numerical value changes. This transition between two values may be applied in different situations. It may be used to describe how fast values change during animations. Th

developer.mozilla.org

greensock.com/docs/v2/Easing

 

Docs

Documentation for GreenSock Animation Platform (GSAP)

greensock.com

 

transition-delay: 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정

0s: 대기시간 없음 (기본값)

시간: 대기시간(s)을 지정

div {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: 
    1s .5s;
}

 

'프론트엔드 > CSS' 카테고리의 다른 글

오버워치 영웅 선택 화면 실습  (0) 2021.04.29
CSS 변환 효과 (요소의 변환 효과)  (0) 2021.04.28
요소의 정렬(플렉스)  (0) 2021.04.26
요소의 배치  (0) 2021.04.25
배경 속성  (0) 2021.04.22

display: Flex Container의 화면 출력(보여짐) 특성(block, inline)

flex: 블록 요소와 같이 Flex Container 정의

inline-flex: 인라인 요소와 같이 Flex Container 정의

 

flex-direction: 주 축을 설정

row: 행 축 (좌 => 우)

row-reverse: 행 축 (우 => 좌)

column: 열 축(위 => 아래)

column-reverse: 열 축(아래 => 위)

 

flex-wrap: Flex Items 묶음 (줄 바꿈) 여부

nowrap: 묶음(줄 바꿈)없음 (기본값)

wrap: 여러 줄로 묶음

wrap-reverse: wrap의 반대 방향으로 묶음

 

<div class ="wrap">
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</div>
.container {
  width: 300px;
  background-color: royalblue;
 display: flex;
  flex-wrap: wrap;
}

결과(줄바꿈)

 

Justify-content: 주 축의 정렬 방법(수평정렬)

flex-start: Flex Items를 시작점으로 정렬

flex-end: Flex Items를 끝점으로 정렬

center: Flex Items를 가운데 정렬

space-between: 각 Flex Item 사이를 균등하게 정렬

space-aroud: 각 Flex Item의 외부 여백을 균등하게 정렬

 

align-content: 교차 측의 여러 줄 정렬 방법(수직정렬)

stretch: Flex Items를 시작점으로 정렬 (기본값)

flex-start: Flex Items를 시작점으로 정렬

flex-end: Flex Items를 끝점으로 정렬

center: Flex Items를 가운데 정렬

space-between: 각 Flex Item 사이를 균등하게 정렬

space-around: 각 Flex Item의 외부 여백을 균등하게 정렬

 

사용방법

1. 기본적으로 2줄 이상이어야 함(flex-wrap: wrap; 설정이 되어있어야함)

2. 정렬이 가능한 여백이 존재 해야 함

 

align-items: 교차 축의 한 줄 정렬 방법

stretch: Flex Items를 교차 축으로 늘림 (기본값)

flex-start: Flex Items를 각 줄의 시작점으로 정렬

flex-end: Flex Items를 각 줄의 끝점으로 정렬

center: Flex Items를 각 줄의 가운데 정렬

baseline: Flex Items를 각 줄의 문자 기준선에 정렬

 

<div class ="wrap">
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>
.container {
  width: 500px;
  height: 300px;
  background-color: royalblue;
  display: flex;
  justify-content:center;
  align-items:center;
}

가운데 정렬 결과

order: Flex Item의 순서

0: 순서 없음(기본값)

숫자: 숫자가 작을 수록 순서가 먼저

.container .item:nth-child(2){
  order: -1;

}

 

flex-grow: Flex Item의 증가 너비 비율

0: 증가 비율 없음

숫자: 증가 비율

 

flex-shrink: Flex Item의 감소 너비 비율

1: Flex container 너비에 따라 감소 비율 적용

숫자: 감소 비율

 

flex-basis: Flex Item의 공간 배분 전 기본 너비

auto: 요소의 Content 너비

단위: px, em, rem 등 단위로 지정

 

 

'프론트엔드 > CSS' 카테고리의 다른 글

CSS 변환 효과 (요소의 변환 효과)  (0) 2021.04.28
전환 효과  (0) 2021.04.28
요소의 배치  (0) 2021.04.25
배경 속성  (0) 2021.04.22
문자와 관련된 속성  (0) 2021.04.22

position: 요소의 위치 지정 기준 (기준 -> 위치)

  • static: 기준 없음(기본값)
  • relative: 요소 자신을 기준(실제로 거의 사용되지 않음)
  • absolute: 위치 상 부모 요소를 기준
  • fixed: 뷰포트(브라우저)를 기준
  • sticky: 스크롤 영역 기준

top, bottom, left, right: 요소의 각 방향별 거리 지정

  • auto: 브라우저가 계산(기본값)
  • 단위: px, em, rem등 단위로 지정
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container .item:nth-child(2){
  width: 140px;
  height: 100px;
  position: relative;
  top: 30px;
  left: 200px;
}

relative 결과

.container {
  width: 300px;
  background-color: royalblue;
  position: relative;
}
.container .item:nth-child(2){
  width: 140px;
  height: 100px;
  position: absolute;
  bottom:30px;
  right: 60px;
}

absolute 결과

.container .item:nth-child(2){
  width: 140px;
  height: 100px;
  position: fixed;
  bottom:30px;
  right: 60px;
}

fixed 결과(스크롤을 내려도 항상 그 위치에 고정)

 

요소 쌓임 순서(Stack order): 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 static 제외)

2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임

3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임

 

.container .item:nth-child(1){
  width: 100px;
  height: 100px;
  position: relative;
  z-index: 1;
}
.container .item:nth-child(2){
  width: 140px;
  height: 100px;
  position: absolute;
  top: 50px;
  left:50px;
}
.container .item:nth-child(3){
  width: 70px;
  height: 120px;
  z-index: 9999;

결과

z-index: 요소의 쌓임 정도를 지정

auto: 부모 요소와 동일한 쌓임 정도

숫자: 숫자가 높을 수록 위에 쌓임

 

position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경됨

<span>123</span>
span {
  width: 100px;
  height: 100px;
  background-color: orange;
  font-size: 40px;
  position: absolute;
}

결과

 

'프론트엔드 > CSS' 카테고리의 다른 글

전환 효과  (0) 2021.04.28
요소의 정렬(플렉스)  (0) 2021.04.26
배경 속성  (0) 2021.04.22
문자와 관련된 속성  (0) 2021.04.22
CSS 넘침 제어  (0) 2021.04.18

+ Recent posts

티스토리툴바