반응형

CSS 의 FLOAT 는 LEFT, RIGHT 로 정해서 설정할수있다

주로 그림에 쓰며 그림과 글이 어울려서 서로 가각의 공간을 차지하면서

표한하기위해 쓴다.

​

clear 는 float의 영향을 안받게할수있다.

float은 left로 설정할경우 공간이 남으면 차곡차곡 쌓이고 없으면 밑으로 떨어진다

clear는 이걸 both,left,right 셋중 하나로 작성하여 float이랑 상관없이 밑으로 떨어지게 할수있다.

​

그리고 border를 할경우 테두리겹침현상이 일어날수있는데 그럴경우 margin 을 -1px 로 사용하면된다

또한 float으로 사용할경우 크기를 고정시킬떄 있는대 그럴경우 크기가 안맞는경우가있는대

boxsizing : boder-box 로 사용하여 크기를 바꿔주면된다.

반응형
저작자표시 비영리 변경금지

'디자인 > CSS' 카테고리의 다른 글

CSS - Transform  (1) 2019.03.05
CSS -background  (0) 2019.03.05
CSS - flex  (0) 2019.03.05
CSS - 타이포그래피  (0) 2019.03.04
CSS - box-sizing  (0) 2019.03.04
반응형

​

시작은 css 의 display의 flex 라고 지정하고선 시작을 한다

flex는 부모태그에 지정을해서 자식태그들이 정렬 되게 한다.

​

​

flex 를 안줬을경우

​

flex를 줬을 경우

​

flex - direction 속성

​

1. flex-direction:row

row 는 기본값으로 flex-direction 이 설정안되도 row 가 기본값으로 들어가있음

row 는 가로를 뜻함 (행) 그래서 item 들이 가로로 정렬

​

​

2. flex-direction:column

column (세로 , 열) 으로 설정하면 item 들이 세로방향으로 정렬됨

​

​

3. flex-direction : column-reverse

column-reverse (세로 , 열) 으로 설정하면 item 들이 세로방향으로 반대로 역? 정렬됨

div의 내용까지 거꾸로 시작하면서 배치됨.

​

4. flex-direction : row-reverse

row-reverse (역가로 , 역행) 으로 설정하면 item 들이 가로방향으로 역방향으로 시작됨

div 내용도 오른쪽부터 순서대로 시작

flex - basis: 속성

​

basis는 기본값이라는 뜻이다 , 하위 엘리먼트들에게 크기값을 설정한다.

flex-direction 속성에 따라 basis(기본의) 의 크기값이 설정된다.

column 일 경우 세로의 크기가 200px

row 일경우 가로의 크기가 200px

내가 설정한 width 또는 height 는 무시되면서 설정된다.

1. flex - grow 속성

자식 엘리먼트에 사용하며 부모의 크기를 균등하게 나눠가진다.

​

flex-grow : 0 일경우

기존 설정된 width와 height 의 크기에 따라 크기가 할당된다

​

​

flex-grow : 1 일경우

각각의 엘리먼트들의 flex-grow:1 이라는 속성이 가지고잇어

1:1:1 비율로 부모의 크기를 차지한다.

​

​

flex-grow : 한엘리먼트만 2일 경우

위그림처럼 2번째 엘리먼트만 grow를 2로 할경우

1:2:1 비율로 크기가 설정이된다.

이경우 width 를 설정할경우 영향을 받고 글씨나 content가 잇을경우 그거에도 영향을 받는거 같은데

확실히 어떻게 영향을 받는지를 모르겟다 다 제거하였을경운 저렇게 깔끔하게 1:2:1 비율이 나온다

​

​

​

​

2. flex - shrink 속성

반응형? 크기를 줄일경우 (부모의 크기지정 x 자식 크기지정 o) 하였을경우 창크기를 줄이면

부모의 크기가 줄어들었다가 부모의크기가 다줄고나선 자식의 크기가 줄어드는데

자식의 크기를 비율로 줄어들게 할 수 있다.

(줄이기전)

(줄이고나서)

이렇게 1:2:1 비율로 빨리 줄어든다

flex-shrink 가 0 일경우 줄어들지 않는다.

​

3. flex - flow 속성

flex-flow 속성은 flex item의 flex-direction 속성과 flex-wrap 속성의 값을 한꺼번에 작성할 수 있는 단축 속성입니다.

flex-flow : || // 둘 중 하나 또는 둘을 선언해야 한다.

flex 의 여러 속성들

컨테이너(부모) 적용 속성들

1. flex-wrap

기본값은 nowrap 이며 컨테이너에 쓰며 컨테이너 안의 items 들의 크기가 컨테이너보다 크면

(컨테이너 < items) 일경우 아이템들이 부모컨테이너를 넘지 않고 줄바꿈이 되는것을 말한다

​

flex-wrap : nowrap; // items들이 커도 줄바꿈을 안한다 (defult)

flex-wrap : wrap; // items들이 크면 줄바꿈을 한다

flex-wrap : wrap-reverse; // item들의 배치를 12345 에서 역순으로 54321로 배치한다

​

​

​

2. ALIGN-ITEMS ( 수직 정렬 : 세로 (direction:row일경우))

컨테이너에 쓴다. 기본값은 stretch(뻗다)

컨테이너의 크기에 맞춰 세로크기들이 정렬되거나 커진다.

**direction: column 일경우 수직정렬이아니라 수평정렬로 바뀐다.**

align-items : flex-start // 수직 세로로 윗줄로 items의 크기들에 맞춰서 정렬

align-items : flex-end // 수직 세로로 아랫줄로 items 정렬

align-items : center // 수직 세로로 가운데로 iems 정렬

align-items : baseline // 보이지않는 줄로 item 정렬 @아직도 잘 모르겟닷 이건

align-items : stretch // 부모 컨테이너의 모든공간 차지 (기본값 : default)

​

​

3.JUSIFY-CONTENT (수평 정렬 : 가로 (direction:row일경우))

부모컨테이너 안의 items 들을 가로로 정렬하는것을 말한다.

**direction: column 일경우 수평정렬이아니라 수직정렬로 바뀐다.**

​

justify-content : flex-start // 왼쪽에서부터 차례대로 시작

justify-content : flex-end // 오른쪽에서부터 차례대로시작

justify-content : space-between // items 사이의 간격을 균등하게 띄운다

justify-content : center // items 들을 가운대로 배치

justify-content : space-around // 양 끝에 공간을 주고 items 사이의 공간들을 균등하게 띄운다.

​

​

4.ALIGN-CONTENT (행으로 그룹지어서 수직정렬 (direction:row일경우))

기본값은 stretch 이며 align-items랑 매우 비슷하지만 align-items 들은 안에있는 아이템들을 각각 다

사용하여 정렬하였다면 이 content는 가로 행으로 기준으로 그룹하여 그룹정렬한다

(wrap 가 nowrap 일경운 다 한줄로 나오지만 wrap 일경운 크기에맞춰 items들이 줄바꿈된다)

align-content : stretch // 기본값 각 items들이 모두 공간을 차지

align-content : flex-start // items의 행그룹들이 크기별로 위로 정렬

align-content : flex-end // items의 행그룹들이 크기별로 아래로 정렬

align-content : center // items의 행그룹들이 크기별로 가운데로 정렬

align-content : space-between // items의 행그룹들이 그룹사이에 균등한 공간을 두고 정렬

align-content : space-around // 행그룹들이 컨테이너의 위아래 공간을 두고 행그룹 사이사이 균등공간 정렬

align-content : space-evenly // 부모컨테이너와 행그룹사이사이의 공간을 균등히 정렬

items(자식) 적용 속성

align-self (item개별의 수직 정렬)

items의 각각의 개별 자식들에게 수직정렬을 주고싶을떄 사용

align-self : auto // item 의 자동정렬

align-self : flex-start // item 의 처음부터 정렬

align-self : flex-end // item 의 마지막부터 정렬

align-self : center // item 의 가운데 정렬

align-self : baseline // item 의 가상의 줄을 만들어 정렬 (가상의 줄이 뭔지잘모르겠다)

align-self : stretch // item 의 전체 차지 (단어 뜻은 뻗기)

​

flex (flex를 한줄로 쓰기)

.item { flex: flex-grow [flex-shrink] [flex-basis];

이렇게 flex를 한줄로 줄여서 쓸수있다.

flex : 1 0 100%;

첫번쨰 프로퍼티는 grow , 2번쨰는 shrink , 3번째는 basis가 된다.

​

order (items 의 순서)

.item1 { order : 1;}

.item2 { order : 2;}

.item3 { order : 3;}

.item4 { order : 4;}

이렇게 정렬 하면 정렬 순서대로 item 들이 배치가된다

1
2
3
4
5
6
7
8
9
10

본 필자의 내용정리는 이고잉 자바스크립트를 보고 공부한것을 적은것이다.

아래 주소는 생활코딩 홈페이지에서 가져온 예제 작동? 예제들이다.

https://codepen.io/enxaneta/pen/adLPwv

flex layout

flex로 레이아웃을 짜보자. 먼저 가장 대표적이고 많이 사용되는 레이아웃을 소개하겠다.

flex holy grail layout (성배레이아웃) 이다.

사람들이 레이아웃을 여러가지방법으로 짜면서 가장 많이쓰고 화두되는 레이아웃 방법이다.

​

​

​

주로 이런식의 레이아웃으로 짠다

아래는 소스코딩과 브라우저 띄운 모습이다.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, consectetur! Quam, id debitis repudiandae illo accusamus voluptatum iure eaque, sapiente expedita non nulla doloremque voluptatibus natus, atque eos aperiam velit. Omnis officiis voluptates id itaque ad ducimus quisquam sunt! Fugiat iusto explicabo atque eaque fuga error harum facere ad repellat eius? Eum cumque velit tenetur voluptate at quia architecto odio? Amet dignissimos architecto atque libero quibusdam animi, aut, iure sunt blanditiis consequatur recusandae modi, cumque enim et placeat ipsa eveniet quod necessitatibus explicabo dolorem omnis natus cum! Iure, quisquam beatae. Architecto quod dolor pariatur ex omnis rerum dignissimos inventore possimus quis at ipsum aut sunt fugit dolores facilis, perspiciatis ducimus repellat quas alias ea! Possimus eum nam vel alias atque. Quis, repellat corporis. Recusandae aspernatur nemo facilis quos vitae facere provident asperiores porro labore quae ullam consequuntur eum minima ipsa soluta beatae maiores at minus, aperiam temporibus libero dicta. Corrupti. Pariatur aliquam ipsam vero beatae. Quaerat a ea iusto nisi quo eum, tempore dolorem. Eius, libero ipsa. Soluta facilis libero, non magni quo quod reiciendis modi! Nam id quaerat tempora!

CopyLight 아빠@꼬릿말

​

여기까지 보시느라 수고하셨습니다.

그러면 게임을 통해 숙련을 해봅시다.

이건 유명한게임이라 잘알고 계실 겁니다.

개구리를 색깔 맞춰 잎파리에 놓는겁니다.

http://flexboxfroggy.com/#ko


반응형

'디자인 > CSS' 카테고리의 다른 글

CSS -background  (0) 2019.03.05
CSS - FLOAT  (0) 2019.03.05
CSS - 타이포그래피  (0) 2019.03.04
CSS - box-sizing  (0) 2019.03.04
CSS - GRID  (0) 2019.03.04
반응형

개요

​

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다.

기본값 : content-box

상속 : No

애니메이션 : No

버전 : CSS Level 3

문법

box-sizing: content-box | border-box | initial | inherit

content-box : 콘텐트 영역을 기준으로 크기를 정합니다. // 기본값 박스 width , height 크기가 컨텐츠 기준

border-box : 테두리를 기준으로 크기를 정합니다. // 박스 width , height 크기가 border 까지 포함

initial : 기본값으로 설정합니다.

inherit : 부모 요소의 속성값을 상속받습니다.

​

//content-box 는 기본값이라 안써도되지만 content-box 일경우 width의 크기와height 크기가 content

//border-box 는 border,padding,content의 크기까지 포함하여서 width 와 height 크기가 지정된다

예제

<!doctype html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>CSS</title>

<style>

body {

margin: 0px;

}

div {

margin: 20px;

padding: 20px;

border: 20px solid #dddddd;

width: 500px;

}

.cb {

box-sizing: content-box;

}

bb {

box-sizing: border-box;

}

</style>

</head>

<body>

<div class="cb">

<p>content-box</p>

</div>

<div class="bb">

<p>border-box</p>

</div>

</body></html>



둘 다 width 값을 500px로 정하였으나, box-sizing 속성값에 따라 크기기 달라집니다. 첫번째 박스는 콘텐트 영역이 500px이고 테두리를 포함한 크기는 580px입니다.



두번째 박스는 테두리를 포함한 크기가 500px이고, 콘텐트 영역의 크기는 420px입니다.


브라우저 지원

Chrome : 10.0+ (4.0 -webkit-)

Firefox : 29.0+ (2.0 -moz-)

Internet Explorer : 8.0+

Opera : 9.5+

Safari : 5.1+ (3.2 -webkit-)


반응형

'디자인 > CSS' 카테고리의 다른 글

CSS - flex  (0) 2019.03.05
CSS - 타이포그래피  (0) 2019.03.04
CSS - GRID  (0) 2019.03.04
CSS - multi-column (다단)  (0) 2019.03.03
CSS - margin 겹침  (0) 2019.03.03
반응형

GRID - FLEXBOX랑 쓰는 방법은 비슷하지만

FLEXBOX의 한계점을 보완한다

​

justify-content : space-around;

flex-wrap : wrap;

같이 햇을경우 떨어지는것들에 대해서 조정하기가 어렵다.

등등 많은이유가 있지만 grid가 젤 많이쓰이고 다루기가 쉽다.

grid 는 flex 처럼 display : grid 라고 지정하고 시작한다.

l grid-template-columns : 50px | 1fr | 50rem // 자식들간의 세로 간격

l grid-template-row : 50px | 1fr | 50rem // 가로 간격

l grid-gap : 20px // 자식들간의 간격

◎ grid-template-columns 속성

▼ 내용

자식들의 column 의 갯수와 각각의 크기를 지정할수있다.

​

◎ grid-template-row 속성

▼ 내용

자식들의 row의 수와 각각의 크기를 지정할수 있다.

​

◎ grid-gap 속성

▼ 내용

자식들의 간격을 지정할수 있다.



.father{ display: grid; //grid라 설정해야 쓸 수 있다. grid-template-columns: 30px 50px 1fr; //column 은 3개 각각의 크기에 맞게끔 설정 grid-template-rows: 30px 2fr 1fr; //row 은 3개 각각의 크기에 맞게끔 설정 //fr 은 현재의 크기에 맞춰서 설정 30px : 2 : 1 비율 grid-gap: 20px; // 각 자식들과의 간격 height : 100vh; // 현재 부모 컨테이노의 높이는 보이는화면 100% } .son { background-color: blue; color: white; font-size: 25px; }

​

​

l grid-auto-columns: 50px || 1fr

l grid-auto-rows : 50px || 1fr n

l grid-auto-flow: row || column // 기본값은 row

◎ grid-auto-columns 속성

▼ 내용

위에 grid-template-columns 에서 크기를 지정하지 않은 자식 item들에 대헤서

자동으로 크기를 부여한다 row 크기는 설정한 크기를 따라간다.

grid-auto-columns 와 grid-auto-row 중 하나만 사용가능.

◎ grid-auto-row 속성

▼ 내용

위에 grid-template-rows 에서 크기를 지정하지 않은 자식 item들에 대헤서

자동으로 크기를 부여한다 column 크기는 설정한 크기를 따라간다.

grid-auto-columns 와 grid-auto-row 중 하나만 사용가능.

◎ grid-auto-flow 속성

▼ 내용

grid-template-columns , grid-template-rows 에서 설정한 갯수 외에 자식 엘리먼트 들은

추가적으로 초과될경우 row에 붙을지 column에 붙을지 설정한다

row에 붙을경우 추가된 엘리먼트들은 row 에 붙고 column일경우 추가된 엘리먼트들은

column에 붙는다.




<html> <head> <style> .father{ display: grid; grid-template-columns: 80px 100px; grid-template-rows: 30px 50px; grid-auto-rows: 100px; /* 위에 설정한 갯수를 초과한 엘리먼트들은 위 사진처럼 추가된다 */ grid-auto-flow: row; /* row 는 기본값이고 column 으로 설정할경우 추가엘리먼트들은 열로 추가된다 */ grid-gap: 20px; height : 100vh; } .son { background-color: blue; color: white; font-size: 25px; } </style> </head> <body> <div class="father"> <div class="son">1</div> <div class="son">2</div> <div class="son">3</div> <div class="son">4</div> <div class="son">5</div> <div class="son">6</div> <div class="son">7</div> <div class="son">8</div> <div class="son">9</div> </div> </body> </html>

​

반응형 단위

l fr : m // px와 같은 단위 fraction의 준말 분수,부분,일부 라는뜻

l repeat : (갯수,단위) // rows , columns 단위로 사용할수있다

l minmax : (최소값,최대값) // item의 크기의 최소값과 최대값을 정할수있다.

l min-content : // 사용할수있는 최소의 단위로 item의 크기를 지정

l max-content : // 사용할수있는 최대의 크기로 item의 크기를 지정

l auto-fit : // fit : 적당한

l auto-fill : // fill : 가득 넣다

◎ 단위 fr

▼ 내용

화면크기에 맞춰서 각각의 엘리먼트들이 설정한 비율에 맞게끔 된다.

grid-template-rows: 3fr 2fr 1fr; grid-template-columns: 1fr 2fr 3fr;



​

◎ 단위 repeat 함수 repeat:(갯수 , 단위)

▼ 내용

grid-template-row 와 grid-template-columns 의 단위로 사용할수있다.

반복을 정해서 써준다.

grid-template-row 에서 4개의 엘리먼트의 1fr을 써주고싶으면

1fr 1fr 1fr 1fr; 은 비효율적이니 repeat(4,1fr); 이렇게 써서 반복을 몇번할지 정해준다

grid-template-rows: 1fr 1fr repeat(2,4fr) 1fr; grid-template-columns: 1fr 2fr ;



​

​

◎ minmax , min-content , max-content

▼ 내용

max-content 를 쓰면 1개의 노드가 가질수 있는 최대의 크기를 가지며 차지한다

min-content 를 쓰면 1개의 노드가 가질수 있는 최소의 크기만을 가진다

minmax (최소값,최대값) 창을 줄일경우 최소값만큼의 크기는 유지하며.

창이 클경우 최대값 만큼의 크기를 가진다

grid 에서 이런 값을 쓰면서 padding 이나 margin 같은걸 따로 설정할필요 없이

알아서 잡아줘서 편하다.

최소값 , 최대값 , 최소값 200px , 1fr


최소값 , 최대값 , 최대값 1fr , 1fr

display: grid; grid-gap: 10px; grid-template-rows: repeat(2,1fr); grid-template-columns: min-content max-content minmax(200px,1fr) 1fr;}

​

◎ auto-fit , auto-fill

▼ 내용

auto-fit 투명 grid를 안만들고 현재 있는 box로 조절한다

auto-fill 를 쓰면 1개의 노드가 가질수 있는 최소의 크기만을 가진다

보통 크기 고정값인 px일 경우엔 큰 의미는 없으며 minmax 를 사용할경우 효과가보인다

grid-template-columns: repeat(auto-fit,minmax(50px,2fr));} //auto-fit 은 투명 grid를 안만들며 창크기에 맞춰서 박스크기들을 늘리지만 grid-template-columns: repeat(auto-fill,minmax(50px,2fr));} //auto-fill 은 투명 grid를 만들어 최소의 크기로 최대한 많은 박스들을 넣는다


l grid-template-areas: "name name name ~~" "name name ~"

◎ grid-template-areas 속성

▼ 내용

위에 grid-template-areas 에서 이름을 할당해주고 " " 로 구역 을 나눠주고나서

자식 엘리먼트들에게 grid-area: "name"; 이렇게 이름 할당을 하면

ares의 설정한 이름에 맞게 구역에 맞게 알아서 배치된다.

배치할떄 gap의 크기까지 같이 들어갈수도 있다. 반응형으로 적용된다.

--P/S 까추가적으로 grid-area : 1/4/5/-1; 이렇게 적을수도있다.

grid-area : rowstart / columnstart / rowend / columnend

--- 또는 grid-area : span 4 / span 3 (row /clumn) 이렇게 사용할수도 있다.

(왼) 개발자도구로 grid의 구역을 잘보여준다 ------------------------------------- (오)일반모습

​

<style> .father{ display: grid; grid-gap: 10px; grid-auto-rows: 50px; grid-template-areas: "header header header" "content content sidebar" "content content sidebar" "footer footer footer";} /*" " 로 묶은 것이 1row가 된다 이렇게 묶고 자식엘리먼트에게 grid-area: name 을 써주면 grid적용이 알아서 적용되며 크기도 맞춰준다*/ .son {background-color: blue; color: white;font-size: 25px;} .a{background-color: red; grid-area: header;} .b{background-color: yellow; grid-area: content;} .c{background-color: green; grid-area: sidebar;} .d{background-color: black; grid-area: footer;} .e{background-color: pink;} .f{background-color: blue;} .g{background-color: purple;} .h{background-color: skyblue;} .i{background-color: peru;} </style> </head> <body> <div class="father"> <div class="son a">1</div> <div class="son b">2</div> <div class="son c">3</div> <div class="son d">4</div> <div class="son e">5</div> <div class="son f">6</div> <div class="son g">7</div> <div class="son h">8</div> <div class="son i">9</div> </div> </body>

​

정렬

l align-content : start || end || center || space-arround || space-between

l justify-content : start || end || center || space-arround || space-between

l place-content : 는 align-content justify-content 를 한번에 사용할수 있다.

l align-items: start || end || center || stretch (기본값)

l justify-items: start || end || center || stretch (기본값)

l place-items : 는 align-items justify-items 를 한번에 사용할수 있다.

l line-naming 기술 : grid에 모든 line 에는 line 이름을 새길수 있따.

l order 기술 : flex의 order 처럼 순서를 정해줄수있다.

************** flex-start , flex-end 값도 사용되는대 왜 되는지 모르겠다***************

​

◎ align-content , justify-content , place-content 속성

▼ 내용

flex 의 내용하고 매우 비슷하다

flex에서 자세히 설명하였으니 각각의 값들의 속성을 볼려면

( https://blog.naver.com/dydals56789/221463967438 참조)

align-content 는 vertical (수직정렬) 을 조종할수 있다.

justify-content 는 horizontal (수평정렬) 을 조종할 수 있다.

place-content 는 첫번쨰 argument 는 align-content 두번쨰 argument justify-content 을 조종할 수 있다.




.father{ box-sizing: border-box; display: grid; grid-gap: 10px; grid-auto-rows: 100px; place-content: space-between center; height: 100vh; grid-template-columns: repeat(5,minmax(50px,100px)); } // place-content 로 justifu-content 는 이고 center // align-content 는 spacebetween 라서 수직은 가운데 수평은 양끝

​

◎ grid-column , grid-row 속성

▼ 내용

grid-column , grid-row 둘다 부모 content가 아닌 자식 box 에 사용한다.

(flex 의 align-self 랑 비슷해보임)

​

grid-column 는 {grid-column : 1 / 5 } 이런식으로 표기하며 1번쨰라인부터 5번째라인 전

까지 Column을 표시한다 라는 뜻이다. 한줄로 grid를 다채우고싶으면 end에 -1일 주면된다.

​

grid-row 는 grid - column 에서 열이 행으로 바뀐것 뿐이지 똑같이 사용한다.

​

P.S 1 : grid-column : 1 / 5 대신 grid-column-start : 1; grid-column-end: 5; 이렇게 나눌수 있다.

P.S 2 : grid-column-start : 5; grid-column-end: 2; 이렇게사용하여 거꾸로 사용할수도 있다.

P.S 3 : grid-column-start : 5 end 없이 start만 쓸경우 1열만 사용된다.

P.S 4 : grid-column-start 양수는 왼쪾 라인 기준으로 1234 지만 음수는 우측에서부터시작한다.

P.S 5: grid-column : span 5 // span을 쓰면 첫번째부터 5번쨰 박스까지 차지한다. (양수만가능)



.a{ grid-row : 1/5; } .b{ grid-column-start: 3; grid-column-end: 5;}

​

◎ line naming 속성

▼ 내용

모든 line 에는 nameing 을 할수있다.

line에 nameing을 하여서 row-grid 나 column-grid 에 사용할수 있다.



<html> <head> <style> .father{ box-sizing: border-box; display: grid; grid-gap: 10px; grid-auto-rows: 100px; height: 100vh; grid-template-columns: [a-line] 1fr [b-line] 2fr [c-line] 1fr [d-line]; grid-template-rows: [ra-line] 1fr [rb-line] 2fr [rc-line] 3fr [rd-line] 1fr [re-line]; } .son {font-weight: 600px; text-align: center; font-size: 25px; display: flex; justify-content: center; align-items: center; color: white;} .a{background-color: red; grid-column: b-line/d-line;} .b{background-color: blue;} .c{background-color: green; grid-row: rb-line / re-line;} .d{background-color: black;} .e{background-color: pink;} .f{background-color: yellow;} .g{background-color: purple;} .h{background-color: skyblue;} .i{background-color: peru;} </style> </head> <body> <div class="father"> <div class="son a">1</div> <div class="son b">2</div> <div class="son c">3</div> <div class="son d">4</div> <div class="son e">5</div> <div class="son f">6</div> <div class="son g">7</div> <div class="son h">8</div> <div class="son i">9</div> </div> </body> </html>

​

◎ grid-auto-flow 속성

▼ 내용

위의 그림처럼 빈칸으로 생긴 grid 를 채우는 속성이다.

grid의 순서를 row로 오름차순할지 column 으로 오름차순할지 정할수있다.

값으로 dense 로 사용할경우 빈칸이 다찬다.

.father{ grid-auto-flow: dense; }

◎ justify-self , align-self , place-self 속성

▼ 내용

justify-self 한item에서 content 를 수평 조종

align-self 한item에서 content 를 수직 조종

place-self 한item에서 content 를 수직,수평 사용



.son:nth-child(4){background-color: black; place-self: center center;} .son:nth-child(5){background-color: pink; justify-self: center;} .son:nth-child(6){background-color: yellow; align-self: center;}

​

grid 연습하기!

http://cssgridgarden.com/#ko

​

https://caniuse.com/

최신기술 css-grid 같은 신기술들이 브라우저에서 어느버전까지 지원하는지를 알려준다.

 
Can I use... Support tables for HTML5, CSS3, etc

HTML5 accept attribute for file input Attributes for form submission Audio element Audio Tracks Autofocus attribute Canvas (basic support) Canvas blend modes classList (DOMTokenList) Color input type contenteditable attribute (basic support) Custom Elements v0 Custom Elements v1 Custom protocol hand...

caniuse.com



빨간색 : 사용불가

초록색 : 사용가능

노란색 : 부분적으로 지원

​


반응형

'디자인 > CSS' 카테고리의 다른 글

CSS - 타이포그래피  (0) 2019.03.04
CSS - box-sizing  (0) 2019.03.04
CSS - multi-column (다단)  (0) 2019.03.03
CSS - margin 겹침  (0) 2019.03.03
CSS - 우선순위 cascading(캐스캐이딩)  (0) 2019.03.02
반응형

CSS 의 약자는

Cascadin Style Sheet (종속형 시트)

cascading : 폭포같은 , 계속되는 , 연속적인

이다.

​우선순위는

​

1. 태그의 인라인 Style 속성

<div style="color : red;"> 테스트 </div>

​

2. id 선택자

#id{ color : "red"; }

​

3. class 선택자

.class{ color : "red"; }

​

4. 태그 선택자

div{ color : "red"; }

​

​

순으로 CSS의 우선순위가 적용된다. 하지만 이것들을 다 무시하고

젤 우선시로 적용하는 CSS 가있다. !important 다

div{ color : "red" !important; }


반응형

'디자인 > CSS' 카테고리의 다른 글

CSS - multi-column (다단)  (0) 2019.03.03
CSS - margin 겹침  (0) 2019.03.03
CSS - 가상클래스(pseudo)  (0) 2019.03.02
CSS - display 속성  (0) 2019.03.02
CSS - 선택자(selector)  (0) 2019.03.02

+ Recent posts

티스토리툴바