.final__clip-image-1 {
     -webkit-clip-path: circle(50% at 50% 50%);
             clip-path: circle(50% at 50% 50%);
   }


   .final__clip-image-2 {
     -webkit-clip-path: polygon(0% 0%,
                                100% 0%,
                                100% 75%,
                                75% 75%,
                                75% 100%,
                                50% 75%,
                                0% 75%);
             clip-path: polygon(0% 0%,
                                100% 0%,
                                100% 75%,
                                75% 75%,
                                75% 100%,
                                50% 75%,
                                0% 75%);
   }


   .final__clip-image-3 {
     -webkit-clip-path: polygon(20% 0%,
                                0% 20%,
                                30% 50%,
                                0% 80%,
                                20% 100%,
                                50% 70%,
                                80% 100%,
                                100% 80%,
                                70% 50%,
                                100% 20%,
                                80% 0%,
                                50% 30%);
             clip-path: polygon(20% 0%,
                                0% 20%,
                                30% 50%,
                                0% 80%,
                                20% 100%,
                                50% 70%,
                                80% 100%,
                                100% 80%,
                                70% 50%,
                                100% 20%,
                                80% 0%,
                                50% 30%);
   }


   .final__clip-image-4 {
     -webkit-clip-path: polygon(0% 20%,
                                40% 20%,
                                40% 0%,
                                100% 50%,
                                40% 100%,
                                40% 80%,
                                0% 80%);
             clip-path: polygon(0% 20%,
                                40% 20%,
                                40% 0%,
                                100% 50%,
                                40% 100%,
                                40% 80%,
                                0% 80%);
   }

.shadow-typo {
        position: relative;
        display: inline-block;
        font-size: 4em;
        text-transform: uppercase;
        color: #00b3b4;
        text-shadow: 3px 3px 0px #e7eef1, 8px 8px 0px rgba(0, 0, 0, 0.1);
   }

   .threedee-typo {
        font-size: 4em;
        text-transform: uppercase;
        color: #f2395a;
        -webkit-transform: skew(-5deg, -5deg) rotate(5deg);
                transform: skew(-5deg, -5deg) rotate(5deg);
        -webkit-transform-origin: center center;
                transform-origin: center center;
        text-shadow: 1px 1px #d10e31,
                    2px 2px #d10e31,
                    3px 3px #d10e31,
                    4px 4px #d10e31,
                    5px 5px #d10e31,
                    6px 6px #d10e31,
                    7px 7px #d10e31,
                    8px 8px #890920,
                    9px 9px #890920,
                    10px 10px #890920,
                    11px 11px 15px rgba(0,0,0,0.5);
  }

Day2

Sexy Typograping

 

'스터디 > WEB' 카테고리의 다른 글

Clipping CSS - Day3  (0) 2019.05.22
Css next grid 클론 ( 1 ~ 5 )  (0) 2018.11.17
PostCSS 스터디 정리 ( 2주차 )  (0) 2018.11.12
Web 디자인시 유의 할 점 정리  (0) 2018.11.09
CSS Next 정리 ( 부산 1주차 HTML + CSS 스터디 )  (0) 2018.11.07

CSS Next grid 클론 ( 1 ~ 5 )

부산에서 매주 진행되는 CSS 초중급 스터디입니다.

더 많은 스터디는 네이버 카페에서 확인 부탁드립니다.

이 내용은 니콜라스님의 CSS 마스터 클래스를 공부하고 정리한 글입니다.

이번주는 1 ~ 5번 페이지까지 공부했습니다. 

Github 소스

1

img

2

1542443044415

3

1542443152744

4

1542443329569

5

1542443350752

'스터디 > WEB' 카테고리의 다른 글

Clipping CSS - Day3  (0) 2019.05.22
Sexy Typograping - Day2  (0) 2019.05.19
PostCSS 스터디 정리 ( 2주차 )  (0) 2018.11.12
Web 디자인시 유의 할 점 정리  (0) 2018.11.09
CSS Next 정리 ( 부산 1주차 HTML + CSS 스터디 )  (0) 2018.11.07


PostCSS 공부 ( 부산 스터디 2주차 ) 정리

부산에서 매주 진행되는 CSS 초중급 스터디입니다.

더 많은 스터디는 네이버 카페에서 확인 부탁드립니다.

이 내용은 니콜라스님의 CSS 마스터 클래스를 공부하고 정리한 글입니다.

Github 소스링크

저번 시간에는 CSS Next 에 대해서 정리를 했었다.

이번 스터디는 PostCSS 에 대해서 공부 하도록 한다.

공부할 내용은 아래와 같다.

  • Parcel

  • PostCSS & Parcel

  • pseudo class

  • Css Variables

  • @custom media and media query ranges

  • color-mod, gray(), System-ui

  • Nesting Rules

  • 기타 추천 사이트들

Parcel

코드를 압축,변환등을 해주는 툴이다. CSS 를 컴파일해서 어디든 사용할 수 있는 CSS로 바꿀수 있다.

공식 홈페이지는 https://parceljs.org/ 이다.

우선 디펜시즈를 설치를 하자. 노드를 사용할 예정이다.

npm install -g parcel-bundler

그럼 index.html 을 컴파일해서 변경시

parcel index.html
body {
   background-color: blue;
}

package.json

{
 "name": "web_css",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "start": "parcel index.html"
},
 "author": "",
 "license": "ISC"
}
npm run start
$ npm run start

> web_css@1.0.0 start G:\workspace_study\web_css
> parcel index.html

Server running at http://localhost:1234
√ Built in 2.73s.

서버가 실행되는 걸 볼 수 있다.

그럼 이걸 이용해서 최신 CSS를 어떻게 사용할 수 있는지 살펴보도록 하자.

PostCSS & PostCSS Preset Env

PostCSS 는 플러그인으로 좀 더 편하게 CSS 개발을 할 수 있도록 도와주는 역할을 한다.

자바스크립트로 말하면 타입스크립트 같은 ...

자세한 설명은 링크를 참고하도록 하자.

플러그인으로 할수 있는게 상당히 다양하다고 한다.

우리가 이용할건 PostCSS preset env 를 이용할 것이다.

특이한 점은 stage 0~3 까지 나뉘어져 있으며 단계별로 사용할 수 있는 게 다르다.

https://preset-env.cssdb.org/

https://preset-env.cssdb.org/features#all-property

npm install postcss-preset-env

package.json

  "postcss": {
  "plugins":{
    "postcss-preset-env": {
      "stage":0
    }
  }
}

style.css

@custom-media --viewport-medium (width <= 50rem);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:root {
 --fontSize: 1rem;
 --mainColor: #12345678;
 --secondaryColor: lab(32.5 38.5 -47.6 / 90%);
}

html {
 overflow: hidden auto;
}

@media (--viewport-medium) {
 body {
   color: var(--mainColor);
   font-family: system-ui;
   font-size: var(--fontSize);
   line-height: calc(var(--fontSize) * 1.5);
   overflow-wrap: break-word;
   padding-inline: calc(var(--fontSize) / 2 + 1px);
}
}

:--heading {
 margin-block: 0;
}

.hero:matches(main, .main) {
 background-image: image-set("img/background.jpg" 1x, "img/background-2x.jpg" 2x);
}

a {
 color: rgb(0 0 100% / 90%);

&:hover {
   color: rebeccapurple;
}
}

실행시 보기 편한 CSS로 컴파일 되서 나오는 걸 볼수 있다.

:root {
 --fontSize: 1rem;
 --mainColor: rgba(18,52,86,0.47059);
 --secondaryColor: rgba(102, 51, 153, 0.9);
}

html {
 overflow-x: hidden;
 overflow-y: auto;
 overflow: hidden auto;
}

@media (max-width: 50rem) {
 body {
   color: rgba(18,52,86,0.47059);
   color: var(--mainColor);
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
   font-size: 1rem;
   font-size: var(--fontSize);
   line-height: calc(1rem * 1.5);
   line-height: calc(var(--fontSize) * 1.5);
   word-wrap: break-word;
   padding-left: calc(1rem / 2 + 1px);
   padding-right: calc(1rem / 2 + 1px);
   padding-left: calc(var(--fontSize) / 2 + 1px);
   padding-right: calc(var(--fontSize) / 2 + 1px);
}
}

h1,h2,h3,h4,h5,h6 {
 margin-top: 0;
 margin-bottom: 0;
}

main.hero, .hero.main {
 background-image: img/background.jpg;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

main.hero, .hero.main {
 background-image: img/background-2x.jpg;
}
}

main.hero, .hero.main {
 background-image: -webkit-image-set(url("img/background.jpg") 1x, url("img/background-2x.jpg") 2x);
 background-image: image-set("img/background.jpg" 1x, "img/background-2x.jpg" 2x);
}

a {
 color: rgba(0, 0, 255, 0.9)
}

a:hover {
   color: #639;
}

Pseudo-classes

    <nav>
       <ul>
           <li><a href="">Link</a></li>
           <li><a href="">Link</a></li>
           <li class="target"><a href="">Link</a></li>
           <li><a href="">Link</a></li>
           <li><a href="">Link</a></li>
       </ul>
   </nav>
li:matches(:nth-child(even), .target) {
   background-color: blue;
}
  • li태그에 대해서 짝수번째만 선택 하고 , target 클래스가 있는걸 동시에 배경을 변경하도록 한다.

빨간 박스는 target 이어서 선택이 된것을 볼 수 있다.

not 태그

exclude 한 태그들을 선택가능하다.

li:not(.target) {
   background-color: blue;
}

CSS Variables

css에 변수를 지정해서 할당하는 것도 가능하다.

  • 여러번 반복되는 복사, 붙여넣기할때 유용하다.

:root {
   --awesomeColor:red;
}

li:first-child a{
   color:var(--awesomeColor);
}

Custom Selector

@custom-selector :--headers h1,h2,h3,h4,h5;

:--headers {
   color: blue;
}

Custom media & range

850px width 밑으로는 배경색을 red 로 지정

@custom-media --ipad-size (max-width: 850px);

@media(--ipad-size) {
   body {
       background-color: red;
  }
}

range

@custom-media --ipad-size (450px < width <= 850px);

@media(--ipad-size) {
   body {
       background-color: red;
  }
}

컴파일 되서 나오는 결과는 아래와 같이 나온다.

@media(min-width: 451px) and (max-width: 850px) {
   body {
       background-color: red;
  }
}

color mod

h1 {
   color: color-mod(#8e44ad, alpha(50%))
   color: color-mod(#8e44ad, lightness(50%))
}

https://www.w3.org/TR/css-color-4/#modifying-colors

Grey

h1 {
   color: grey(90);
}

System-ui

h1 {
   font-family: system-ui;
}

Nesting Rules

내부적으로 this 개념을 & 을 통해 넣을 수 있다.

index.html

    <main>
      <section>
          <li><a href="#">Hello!</a></li>
      </section>
  </main>

style.css

main {
   background-color: blue;
  & section {
     background-color: red;
     width: 500px;
    & li {
       background-color: yellow;
       width: 400px;
      & a {
         color: black;
        &:hover {
           font-size: 30px;
        }
      }
    }
  }
}

a {
   color: red;
}

기타

여기까지 이론 수업이고 다음에는 실전으로 넘어가서 15개의 사이트를 클론하도록 한다.

이상으로 2주차 스터디 내용을 정리하였다.

참석해주셔서 감사합니다.

'스터디 > WEB' 카테고리의 다른 글

Sexy Typograping - Day2  (0) 2019.05.19
Css next grid 클론 ( 1 ~ 5 )  (0) 2018.11.17
Web 디자인시 유의 할 점 정리  (0) 2018.11.09
CSS Next 정리 ( 부산 1주차 HTML + CSS 스터디 )  (0) 2018.11.07
Flex Css 스터디 정리  (0) 2018.11.06

Web 디자인시 유의 할 점 정리

이 내용은 유데미 강좌를 보고 정리한 글입니다.

요약

  • 대부분의 콘텐츠는 텍스트이므로 멋진 타이포그래피는 멋진 웹 사이트의 핵심 요소입니다.

  • 이미지는 웹 디자인에서 점점 더 중요 해지고 있습니다. 따라서 훌륭한 이미지를 선택하고 그 위에 텍스트를 넣는 것이 작업의 필수적인 부분입니다.

  • 아이콘은 웹 사이트의 친숙한 음색을 설정하는 좋은 방법이지만 신중하게 사용하십시오.

  • 공백을 적절하게 사용하면 전문적으로 디자인 된 웹 사이트가 만들어 지므로 올바른 방법으로 많이 사용하십시오.

  • 콘텐츠의 시각적 계층 구조를 정의하여 레이아웃을 작성하십시오. 공백은 또한 이것을 위해 중요합니다.

  • 웹 사이트는 사용자와 웹 사이트 소유자가 목표를 달성 할 수 있도록 설계해야합니다. 이것은 사용자 경험입니다.

  • 다른 디자이너의 잘 디자인 된 웹 사이트를 연구하여 영감을 얻는 것이 매우 중요합니다.

웹 디자인시 참고할만한 치트 시트

아름다운 타이포그래피

  1. 본문 텍스트에 15 ~ 25 픽셀 사이의 글꼴 크기 사용

  1. 헤드 라인에 (실제로) 큰 글꼴 크기를 사용하십시오.

  1. 글꼴 크기의 120 ~ 150 % 사이의 줄 간격을 사용하십시오

  1. 한 줄당 45-90 자

  1. 좋은 글꼴 사용

  1. 웹 사이트에 대해 원하는 모양과 느낌을 반영하는 글꼴을 선택하십시오.

  1. 하나의 글꼴 만 사용하십시오.

프로처럼 색상 사용하기

  1. 하나의 기본 색상 만 사용하십시오.

  1. 더 많은 색상을 사용하려면 도구를 사용하십시오.

  2. 3.주의를 끌기 위해 색을 사용하십시오.

  1. 디자인에 검정색을 사용하지 마십시오.

  1. 색상을 현명하게 선택하십시오.

이미지 작업

  1. 텍스트를 이미지 위에 직접 놓습니다.

  1. 이미지를 중첩합니다.

  1. 텍스트를 상자에 넣으십시오.

  1. 이미지를 흐리게 처리합니다.

  1. 바닥이 퇴색한다.

아이콘 작업

  1. 아이콘을 사용하여 기능 / 단계를 나열하십시오.

  1. 작업 및 링크에 아이콘 사용

  1. 아이콘은 알아볼 수 있어야합니다.

  1. 아이콘에 레이블을 지정하십시오.

  1. 아이콘이 중심 무대가되어서는 안됩니다.

  1. 가능할 때마다 아이콘 글꼴 사용

간격 및 레이아웃

  1. 요소 사이에 공백 넣기

  1. 요소 그룹 사이에 공백을 넣으십시오.

  1. 웹 사이트 섹션 사이에 공백을 넣으십시오.

  1. 잠재 고객이 가장 먼저 바라는 위치를 정의하십시오.

  1. 귀하의 콘텐츠 메시지에 해당하는 흐름을 수립하십시오

  1. 공백을 사용하여 그 흐름을 만듭니다.


'스터디 > WEB' 카테고리의 다른 글

Sexy Typograping - Day2  (0) 2019.05.19
Css next grid 클론 ( 1 ~ 5 )  (0) 2018.11.17
PostCSS 스터디 정리 ( 2주차 )  (0) 2018.11.12
CSS Next 정리 ( 부산 1주차 HTML + CSS 스터디 )  (0) 2018.11.07
Flex Css 스터디 정리  (0) 2018.11.06

HTML + CSS 스터디 1주차 스터디 정리내용 #2

부산에서 매주 진행되는 CSS 초중급 스터디입니다.

더 많은 스터디는 네이버 카페에서 확인 부탁드립니다.

저번 시간은 Flex 에 대해서 공부했다.

Flex로 화면 배치 하는데 불편함이 다소 있다. 그래서 Css Grid 라는 게 나왔다.

CSS Grid 에 대해서 하나씩 정리해보도록 하겠다.

이 내용은 니콜라스님의 CSS 마스터 클래스를 공부하고 정리한 글이다.


CSS Grid 가 필요한 이유?

우선 FlexBox 가 부족한 부분이 뭔지 살펴보자.

만약 여러개의 박스가 들어올 경우 overflow 되면서 배치가 되기 때문에 보기가 안좋을 수 있다.

CSS Grid System 이라고 하는 테이블같은 걸 쉽게 짤 수 있도록 도와준다.

CSS Grid Basic

Grid 시스템은 가로 세로를 지정해서 가능하다.

예를 들어보자. 하나의 박스를 가로 30px, 세로 30px 으로 지정해서 만들수 있다.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            display: grid;
            grid-template-columns: 30px 50px;
            grid-template-rows: 30px 12px;
        }

        .box {
            background-color: #f1c40f;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

1541517517042

Grid 기능

Grid-template-rows, Grid-template-columns

만약 여러개로 만든다고 하면 다음과 같이 가능하다.

  • 30x30
  • 50x30
  • 30x12
  • 50x12
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            display: grid;
            grid-template-columns: 30px 50px;
            grid-template-rows: 30px 12px;
            grid-gap: 5px;
        }

        .box {
            background-color: #f1c40f;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

1541517898405

Grid-auto-rows

grid-template-columns 에 지정된 수를 초과하는 경우 높이를 지정할 수 있다.

  • Grid-auto-columns 반대되는 의미로 사용가능하다.
        .father {
            display: grid;
            grid-template-columns: 30px 50px;
            grid-template-rows: 30px 12px;
            grid-gap: 5px;
            grid-auto-rows: 60px;
        }

1541518352043

Grid-auto-flow

grid-auto-columns 나 grid-auto-rows 사용시 진행되는 배치를 뜻한다. row 나 column 을 지정 가능하다.

flex-direction 과 비슷한 개념이라고 보면 된다.

Grid-template-ares **

문자열로 템플릿을 정한다음 하위 css에 속성을 하나씩 지정해줌

  • 문자열로 템플릿 구성
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            display: grid;
            grid-auto-rows: 200px;
            grid-gap: 5px;
            grid-template-areas: "header header header"
                "content content sidebar"
                "content content sidebar"
                "footer footer footer"
        }

        .first {
            grid-area: header;
            background-color: #f1c40f;
        }

        .second {
            grid-area: sidebar;
            background-color: #27ae60;
        }

        .third {
            grid-area: footer;
            background-color: #3498db;
        }

        .fourth {
            grid-area: content;
            background-color: #d35400;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="first"></div>
        <div class="second"></div>
        <div class="third"></div>
        <div class="fourth"></div>
    </div>
</body>

</html>

1541520032893

fr and repeate()

fr

fr = fraction : 가능한 최대 넓이를 가지자

반응형을 제작시 계산이 필요하지 않는 경우가 많다. 예를 들어 분할해서 균등하게 넣고 싶다던지 하는..

그럴경우 fr 로 사용 가능하다.

우선 적용전 화면을 살펴보자.

    <style>
        .father {
            display: grid;
            grid-auto-rows: 200px;
            grid-gap: 5px;            
        }

        .first {            
            background-color: #f1c40f;
        }

        .second {            
            background-color: #27ae60;
        }

        .third {            
            background-color: #3498db;
        }

        .fourth {            
            background-color: #d35400;
        }
    </style

1541553452769

위 내용처럼 배치되어있다고 하자. 만약 1,3번째 컬럼을 2,4번째 컬럼보다 2배로 넓었으면 좋을 경우 어떻게 해야 할까?

  • grid-template-columns: 2fr 1fr 2fr 1fr;
        .father {
            display: grid;
            grid-auto-rows: 200px;
            grid-gap: 5px;          
            grid-template-columns: 2fr 1fr 2fr 1fr;  
        }

1541553628023

이런식으로 2배 넓이를 줄 수 있다.

repeat

반복적으로 fr 로 단위를 줄 수 있다.

.father {
    display: grid;
    grid-auto-rows: 200px;
    grid-gap: 5px;          
    grid-template-columns: repeat(4, 1fr);  
}

1541554030641

부가적으로 fr 을 추가적으로 설정도 가능하다.

...
grid-template-columns: repeat(3, 1fr) 4fr;  
...

1541554168503

minmax,max-content,min-content

minmax

minmax 는 object의 maximum과 minimum 크기를 지정해주는 도구

...
grid-template-columns: minmax(400px, 2fr) repeat(3, 1fr);  
...

줄어들더라도 첫번째 콘테이너는 최소로 유지되는 걸 볼수 있다.

1541554446953

maxcontent

내부에 있는 content를 기반으로 최대 크기를 정하는 게 max-content 의 핵심

grid-template-columns: max-content repeat(3, 1fr);  

1541554740448

mincontent

내부에 있는 content를 최소 크기만큼만 확보하는게 mincontent

grid-template-columns: min-content repeat(3, 1fr);  

1541554937072

auto-fill, auto-fit

auto-fit

우선 여러개의 grid를 만들었다고 가정하자.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            display: grid;            
            grid-gap: 10px;
            grid-auto-rows: 100px;          
            grid-template-columns: repeat(4, 1fr);  
        }

        .box:nth-child(even) {
            background-color: #3498db;            
        }

        .box:nth-child(odd) {
            background-color: #34495e;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

</html>

1541555438098

만약 각각의 아이템을 꽉 차게 배치를 하고 싶다고 하면 어떻게 해야 할까?

그럴때 auto-fit 으로 구성할 수 있다.

grid-template-columns: repeat(auto-fit, 1fr);

1541555562298

grid-template-columns: repeat(auto-fit, 50px);

1541555657104

grid-template-columns: repeat(auto-fit, 340px);	

1541555749328

하지만 공간이 부족할 경우 오른쪽 빨간 박스 처럼 빈공간을 보여주고 하단으로 내려가게 된다.

이걸 방지하기 위해 이전에 공부한 minmax 를 적용하면 채울수 있다.

grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

1541555927326

auto-fill

콘텐트가 없다고 해도 레이아웃을 다 채울수 있다. ghost-grid로 나머지 부분을 채우는 걸 뜻한다.

grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));  

1541556167553

auto-fit 과 auto-fill 차이점은 ghost-grid 가 있는지 없는지이다.

justify content, Align content, Place content

이전에 배운 Flex 에서 비슷한 속성이 있다.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            display: grid;            
            grid-gap: 10px;
            grid-auto-rows: 100px;          
            grid-template-columns: repeat(5, 100px);
            color: white;
        }

        .box:nth-child(even) {
            background-color: #3498db;            
        }

        .box:nth-child(odd) {
            background-color: #34495e;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
    </div>
</body>

</html>

1541556498606

이런 형태가 있다고 하자.

justify content

justify-content: center;

1541556556046

이런식으로 중앙으로 이동을 한다.

start,end 로 설정가능하다.

align content

align-content: center;
height: 100vh;

1541556714026

grid 에서도 justify content 는 가로축을 뜻하며 align conent는 세로축을 뜻한다.

Place content

justify conent 와 align content 두개를 합쳐서 설정할 수 있는 속성이다.

place-content: center end;

1541556905434

즉 첫번째 인자는 align content 가 들어가고 두번째 인자는 justify content 가 들어간다.

justify items, align items, place items

justify items

콘텐트가 아닌 내용을 안에 위치 시킨다.

        .father {
            display: grid;            
            grid-gap: 10px;
            grid-auto-rows: 100px;          
            grid-template-columns: repeat(5, 100px);
            color: white;            
            height: 100vh;
            justify-items: center;
        }

1541557231077

justify-items: center;

1541557284891

주의 할점은 외부적으로 컨테이너가 있고 내부적으로만 움직이는 것이다.

1541557357114

align items

align-items: start;

1541557432232

place items

align items 와 justify items 를 혼합해서 사용 가능하다.

place-items: end center; 

1541557544211

Grid column, Row Start and End

Grid + Flex 혼합해서 사용

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            display: grid;            
            grid-gap: 10px;
            grid-auto-rows: 100px;          
            grid-template-columns: repeat(5,1fr);            
        }

        .box {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .box:nth-child(even) {
            background-color: #3498db;            
        }

        .box:nth-child(odd) {
            background-color: #34495e;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
        <div class="box">10</div>
        <div class="box">11</div>
        <div class="box">12</div>
        <div class="box">13</div>
        <div class="box">14</div>
        <div class="box">15</div>
    </div>
</body>

</html>

1541557844544

위와 같은 이미지에서 만약 1,2 를 합치고 싶은 경우를 생각해보자.

Grid Columns

Row Start / Row End

        .box:first-child {
            grid-column: 1/3;
        }

1541558064324

대체해서 이런식으로도 사용 가능하다.

.box:first-child {
    grid-column-start: 1;
    grid-column-end: 5;
}

1541558243079

end 에 -1 을 적용시 끝까지 적용된다.

grid-column-end: -1;

1541558400329

Line Naming and Grid-auto-flow

Line naming

이전에 배운 grid-column 에 이름을 붙여서 확장이 가능하다.

    <style>
        .father {
            display: grid;            
            grid-gap: 10px;
            grid-auto-rows: 100px;          
            grid-template-columns: 
                [first-line] 1fr 
                [awesome-line] 1fr 
                [sexy-line] 1fr 
                [third-line] 1fr 
                [fourth-line] 1fr 
                [line-line];
        }

        .box {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .box:nth-child(even) {
            background-color: #3498db;            
        }

        .box:nth-child(odd) {
            background-color: #34495e;
        }

        .box:first-child {
            grid-column-start: sexy-line;
            grid-column-end: fourth-line;
        }
    </style>

sexy-line 부터 fourth-line 까지 확장하는 걸 뜻한다.

1541558839383

추가적으로 repeat 를 붙여서 사용도 가능하다.

        .father {
            display: grid;            
            grid-gap: 10px;
            grid-auto-rows: 100px;          
            grid-template-columns: [first-line] repeat(5, 1fr) [last-line];
                
        }

        .box:first-child {
            grid-column-start: first-line;
            grid-column-end: last-line;
        }

1541559027838

grid-auto-flow

1541558839383

보시다 시피 1 번 앞에 2개가 비어 있다. 이럴경우 밑에 3,4번을 위로 올려서 채우길 원할 수 있다.

이럴경우 grid-auto-flow 를 사용할 수 있다.

grid-auto-flow 를 row dense 으로 채울수 있다.

.father {
        display: grid;            
        grid-gap: 10px;
        grid-auto-rows: 100px;  
        grid-auto-flow: row dense;        
        grid-template-columns: 
        [first-line] 1fr 
        [awesome-line] 1fr 
        [sexy-line] 1fr 
        [third-line] 1fr 
        [fourth-line] 1fr 
        [line-line];
}

1541559293713

Grid Row, Row Start and End

만약 start 와 end 를 넣기에 애매한 경우 span 으로 이용가능하다.

        .box:first-child {
            grid-row: span 3;
            grid-column: span 3;
        }
		

1541559704198

화면을 축소해도 1은 유지를 한다.

1541559759753

Grid Area

Grid Area 로 편하게 위치를 지정 할 수 있다.

row startcolumn startrow endcolumn end

        .box:first-child {
            grid-area: 2 / 1 / 4 / -1;
        }

1541560015694

        .box:first-child {
            grid-area: span 4 / span 4;
        }

1541560095334

justify, align, place self

내부적으로 아이템들을 좀 더 다른 위치로 만들고 싶은 경우 사용한다.

어떤건 왼쪽 위로 올라가고 어떤건 하단 오른쪽으로 이동하게 구성

.box:first-child {
    justify-self: center;
    align-self:center;
}

1541560285423

place-self: center 으로도 똑같이 적용가능하다.

이상으로 CSS 공부한 내용이었다. 다음시간에는 PostCSS 를 배워보도록 하자.

참석해주셔서 감사합니다.

'스터디 > WEB' 카테고리의 다른 글

Sexy Typograping - Day2  (0) 2019.05.19
Css next grid 클론 ( 1 ~ 5 )  (0) 2018.11.17
PostCSS 스터디 정리 ( 2주차 )  (0) 2018.11.12
Web 디자인시 유의 할 점 정리  (0) 2018.11.09
Flex Css 스터디 정리  (0) 2018.11.06

HTML + CSS 스터디 1주차 스터디 정리내용

부산에서 매주 진행되는 CSS 초중급 스터디입니다.

목차

  • Flex

    • Flex Basic

    • Main Axis and Cross Axis

    • Flex Wrap and Direction

      • wrap

      • flex-direction

    • Align self

Flex

Flex Basic

컨테이너들을 가로 또는 세로로 정렬을 쉽게 도와준다. .

  • display

  • justify-content

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
       body{
           display: flex;
           justify-content: space-between;
      }
       .box {
          width: 300px;
          height: 300px;
          background-color: red;
          border: 1px solid white;
      }
   </style>
</head>
<body>    
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</body>
</html>

Main Axis and Cross Axis

Main Axisjustify-content, Cross Axisalign-items

Flex 에서는 기본 flex-directionrow (가로) 로 되어 있다.

  • Flex-direaction 가 row 일 경우

  • justify-content 는 가로축

  • align-items는 세로축

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
       .father{
           display: flex;
           flex-direction: column; /* or row */
           justify-content: space-around;
           align-items: center;
           height: 100vh;
      }
       .box {
          width: 300px;
          height: 300px;
          background-color: red;
          border: 1px solid white;
      }
   </style>
</head>
<body>    
   <div class="father">
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
   </div>
</body>
</html>



Flex Wrap And Direction

wrap

화면이 축소될 경우 레이아웃이 커지면서 차지하게 된다. 즉 늘어나게 되는 것이다.


이걸 방지 하기 위해서 wrap 속성을 추가할 수 있다.

기본 옵션은 nowrap이다.

wrap 적용시 나오는 화면은 아래와 같다.



flex-direction

flex-direction을 row-reverse 로 주는 경우 반대 방향으로 바꿀 수 있다.

그럴 경우 justify-content 도 영향을 주니 참고하자.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
       .father{
           display: flex;          
           flex-wrap: wrap;
           justify-content: flex-start;            
           height: 100vh;
           background-color: bisque;
           flex-direction: row-reverse
      }
       .box {
          width: 300px;
          height: 300px;
          background-color: red;
          border: 1px solid white;
          color:white;
          font-size: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
      }
   </style>
</head>
<body>    
   <div class="father">
       <div class="box">1</div>
       <div class="box">2</div>
       <div class="box">3</div>
   </div>
</body>
</html>



Align self

chidren 에게 따로 이동을 줄 수 있는 방법 중 하나.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
       .father{
           display: flex;          
           flex-wrap: wrap;
           justify-content: flex-start;            
           height: 100vh;
           background-color: bisque;            
      }
       .box {
          width: 300px;
          height: 300px;
          background-color: red;
          border: 1px solid white;
          color:white;
          font-size: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
      }

       .box:first-child {
           align-self: flex-end;
      }
   </style>
</head>
<body>    
   <div class="father">
       <div class="box">1</div>
       <div class="box">2</div>
       <div class="box">3</div>
   </div>
</body>
</html>


+ Recent posts