기억의 DataBase

grid

Zester; — Wed, 8 Apr 2020 20:43:29 +0900

grid

display: grid; (block) / inline-grid;

container와 item으로 구성

행과 열

grid-template-rows: 100px 100px;

grid-template-rows: repeat(2, 100px);

행 2개를 지정하고, 행 2개의 너비 설정

grid-template-columns: 1fr 1fr;

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

fr: 비율을 의미

전체 너비에서 차지하는 비율(2fr 1fr > 전체에서 2:1 )

grid-column: 1/4;

item에 작성하는 속성(firefox로 번호 확인)

1~4까지 확장

grid-row: -1/ -3;

음수도 가능 - 우하단에 고정되는 부분이면 음수사용

.container {

    display: grid;

    
    /* 전체구조를 만들고 각 영역의 크기를 지정 */

    grid-template-rows: repeat(3, 100px);

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



    /* 비우고 싶은 칸이 있으면 .을 사용 */

    grid-template-areas: 

    "header header header"

    "main . aside"

    "footer footer footer";

    

    /* 행과 열사이의 간격 */

    gap: 30px 15px;

    row-gap: 30px;

    column-gap: 15px;

}

.item {

    border: 5px dashed red;

}

.item:nth-child(1) {

    grid-area: header;

}

.item:nth-child(2) {

    grid-area: main;

}

.item:nth-child(3) {

    grid-area: aside;

}

.item:nth-child(4) {

    grid-area: footer;

}

grid-template-area : 이름을 지정하고 템플릿을 생성

*grid-auto-rows와 grid-auto-colums를 사용하여 암시적 행렬 크기 지정

명시적 행렬 : css상에 크기를 지정한 행렬

암시적 행렬 : 크기를 지정하지는 않았지만, css 조작과정에서 추가된 행렬

> container에 grid-auto-rows와 grid-auto-colums를 추가하면 크기가 지정됨

* 음수를 통한 위치조정은 명시적 크기지정이 있어야만 가능

/* row가 기본값으로 생략가능 */

grid-auto-flow: dense;

grid-auto-flow: column/row(흐르는 방향) dense(빈 곳 허용할꺼냐)

행렬 기준으로 빈 곳을 채울 거냐 말꺼냐

grid-template-rows: [first] 100px [second] 200px [third]

각 grid선에 이름을 지정할 수 있음(중요한 선이름 위주로 명시)

grid-area: 행 시작/ 열 시작 / 행 끝 / 열 끝 

grid-area: 1 / span 2 / 3 / -1

grid-area

*span이 끝에 있으면 + 개념으로 번호를 더해주고

앞에 있으면 끝에서 - 개념으로 번호를 빼준다. ex) (span 2 / -1) >(-3 / -1)

grid-template: 

    /* row 너비 */

    "header header header" 80px 

    "main .  aside" 350px

    "footer footer footer" 130px

	/* column너비 */
    
    / 2fr 100px 1fr;

grid-template(단축 속성) : grid-template-area / grid-template-rows,columns

repeat(횟수, 크기)

minmax(크기)

fit-content(크기)

grid function

content의 띄어쓰기를 적용하고 싶으면

min-content를 적용하면 item의 크기가 조절됨

(반대는 max-content)

*한글은 min-content의 경우 한글자마다 줄바뀜이 발생함

(word-break: keep-all;을 추가)

position

Zester; — Wed, 8 Apr 2020 19:44:05 +0900

position : 요소 배치의 기준을 설정(실제 배치는 아님)

position의 속성들

①relative : 자신의 원래 위치를 기준으로 배치

(margin처럼 밀려나는 것)

> 실제로 이동한 것이 아니라, 보이는 것만 옮겨진 것(홀로그램)

> 실제로 배치하는 것은 다른 요소가 변경되면 유동적이므로 위험(absolute를 권장)

②absolute : 부모요소를 기준으로 뜬 상태라고 생각하면 됨(기존 위치에서 위에 떠 있는 상황)

> 다른 자식요소에게 영향을 주지 않음(본인은 의식함 - 순서에 영향을 받음)

> 부모요소(position이 부여된 부모 - position: relative; 권장 / static은 안됨)를

기준으로 배치(top, left, right, bottom등으로 실제 배치)

> 부모요소에 position정보를 탐색하고 없으면 viewport를 기준으로 함

③fixed : viewport(브라우저 전체) 기준으로 배치 / 고정배너

> background-attachment: fixed 로 배경을 고정하면, 이미지가 흐르는 듯한 효과를 줄 수 있음

④sticky : 스크롤 영역 전체의 특정한 영역에 위치

 position: sticky;
 top: 0;

상단에 고정되어서 밀려나는 방식이 됨

flex

Zester; — Wed, 8 Apr 2020 19:30:31 +0900

Before(flex이전에 수평을 만드는 방식)

float: left;을 해당 요소에 주고

이를 담은 container요소에 clearfix를 추가

>수평을 위한 방식은 아니었음

.clearfix::after {

content: "";

display: block;

clear: both;

}

After(flex 이후에 수평을 만드는 방식)

container요소에 display: flex; 하나만 추가해주면 끝!

출처 : https://heropy.blog/2018/11/24/css-flexible-box/

display: flex

(item은 inline으로 수평이나, container는 그대로 block으로 쌓임)

display: inline-flex

(container자체도 수평으로 나열됨)

flex-wrap: wrap

(container에 선언해주면 요소의 크기를 그대로 유지할 수 있음 - 대신 줄 바꿈이 일어남)

justify-content: center/space-between(좌우여백 없음)/space-around(좌우여백을 요소간 공백으로);

>x축

align-content: center/stretch(기본값으로 height를 선언하지 않으면, auto가 기본값이라 item이 늘어남)

>y축 (item들이 여러줄이고, height에 여백이 있을 때 적용됨)

align-items: baseline(아이템들의 문자열을 기준으로 정렬)

>y축 (한줄이 기준, 여러줄이면 align-content가 우선 적용)

order: 0이 기본값 (앞으로 하고 싶으면 음수를 넣으면 됨)

flex-grow: 지정한 숫자들의 합만큼을 분모로 하는 비율의 공간을 차지(단독 1이면 전체-가변)

float

Zester; — Wed, 8 Apr 2020 19:08:42 +0900

<div class="clearfix">
	<div class="box">1</div>                                                                                                                                                                                                                                        
    <div class="box">2</div>                                                                                                                                                                                                                                        
    <div class="box">3</div>                                                                                                                                                                                                                                        
</div>                                                                                                                                                                                                                                        
 
<div class="box4">4</div>

  .box {
        width: 100px;
        height: 100px;
        margin :10px;
        background: tomato;
        float: left;
    }
    
    .box4 {
        width: 100px;
        height: 100px;
        margin: 10px;
        background: blue;
    }
    
    .clearfix::after {
        content: "";
        clear: both;
        display: block;
    }

float라는 개념은 display: flex가 등장하면서 밀려나는 추세

float에 영향을 받지 않으려는 해당 요소에 clear: left/right/both(권장)를 사용

기본적으로 떠 있는 개념이기 때문에 아래에 다른 요소가 깔릴수가 있음

(다른 속성들을 해제하는 것이 중요)

float를 넣어주면 display: block값이 들어가는 것과 같음

display: flex가 적용된 값들은 block값이 들어가지 않음

부모요소에 clearfix 클래스를 사용하는 것을 추천

(clearfix가 있는 부모요소에는 float 요소가 있는 자식요소들만을 포함하도록 지정)

ETC( border / none,opacity / overflow / line-height )

Zester; — Wed, 8 Apr 2020 18:58:18 +0900

border: 두께 종류 색상 (종류만 지정해도 보여짐 - solid)

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

    .box {

        width: 200px;

        height: 200px;

        background: orange;

        padding: 10px;

        border: 10px solid red;

        box-sizing: border-box;

    }

box-sizing: border-box;

(border/padding 모두를 포함한 크기 200/200)

(padding/border등을 사용할 때 계산할 필요없이 본래 크기(w/h)를 유지)

display: none(아예 존재하지 않음 - 삭제)과

opacity: 0(단순히 보이지 않음 - 투명)은 다른 의미

* opacity 0~1(0투명/1불투명)

.hide {

        display: none;

    }

class="hide" 를 JS로 줘서 지워줄 수도 있다.

overflow: visable(기본값) / hidden / scroll / ***auto(박스를 넘어가면 스크롤이 나옴)

line-height : 따로 지정하지 않으면 글자와 동일(한줄의 두께와 동일)

숫자만 쓰면 글자 크기의 배수(수정할 필요를 줄임 - 1.4 ~1.7 권장)

Size( pixel / % / em / rem / vw / vh / vmax / vmin )

Zester; — Wed, 8 Apr 2020 18:23:43 +0900

pixel과 %

.parent {
    width: 100px;
}

.child { 
	/* 50px */
    width: 50%;
}

부모요소가 100px

자식요소의 50% > 50px

%는 부모요소를 기준으로 한 비율

.parent {
    font-size: 10px;
}

.child { 
  /* 20px */
  font-size: 2em;
}

부모요소의 font-size를 기준으로 하여 선택요소의 font-size를 결정

(중간 단계의 font-size에 영향을 받아 관리하기가 어려울 수 있음)

rem

html {
    font-size: 100px;
}

/* 나머지 Text들은 기본 값인 16px로 */
body {
    font-size: 16px;
}

.parent {
    font-size: 10px;
}

.independent {
    /* 200px */
    font-size: 2rem;
}

최상위 요소인 html에 설정한 font-size를 기준으로 선택요소의 font-size를 결정

(부모요소에 독립적)

vw와 vh(viewport width/height), vmax와 vmin

<div class="container"></div>

.container {
    
    width: 50vw;
    height: 50vh;
    background : red;
}

vw/vh : 100을 기준으로 전체화면의 크기(viewport)에 얼마만큼인지를 지정 가능

vmax/vmin : viewport의 더 긴쪽(vmax)/더 짦은 쪽(vmin)을 기준(100)으로 크기를 지정

(max/min-width/heigh도 있음)

Emmet

Zester; — Wed, 8 Apr 2020 18:02:03 +0900

width: 100px;

w:100 + tab

height: 100px;

h:100 + tab

width: 100%;

w:100% + tab

margin: 10px;

m:10 + tab

padding: 10px;

p:10 + tab

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

.box + tab

<div id="box"></div>

#box + tab

<ul class="list"></ul>

ul.list + tab

<div class="container">

<ul class="list">

<li class="list-item"><a href="">list1</a></li>

<li class="list-item"><a href="">list2</a></li>

<li class="list-item"><a href="">list3</a></li>

<li class="list-item"><a href="">list4</a></li>

<li class="list-item"><a href="">list5</a></li>

</ul>

</div>

.container>ul.list>li.list-item*5>a{list$} + tab

VSCode 기준(tab)으로

더 다양한 emmet은

https://emmet.io/

우선순위와 상속 / 초기화

Zester; — Wed, 8 Apr 2020 17:53:20 +0900

우선순위

<div id="red" class="blue" style="color: yellow;">color</div>

div {
    color: black;
}

#red { 
    color: red;
}

.blue {
    color: blue;
}

* { 
    color: white;
}

body {
    color: turquoise;
}

결론은 인라인으로 style 속성을 추가한 yellow가 적용

이유는 CSS 명시도 점수에 따라 우선순위가 결정되기 때문이다

!important > inline 방식(1000점) > id(100점) > class(10점) > tag(1점) > *(0점) > 상속(-)

명시도 점수의 기준은 위와 같음

명시도 점수가 총합이 높은 경우가 먼저 적용되고, 점수가 같은 경우 뒤에 선언된 경우가 적용

(선택자들의 점수를 더함 - 내장방식과 링크 방식 둘 다 계산)

상속

<p>부모내용<bold>자식내용</bold></p>

p {
	color: red;
}

p태그에 적용한 스타일이 bold내의 내용에도 되어 글자색이 red로 출력(상속됨)

부모요소에 적용한 CSS가 자식요소에도 적용됨

(text를 다루는 속성들이 주로 상속됨 - color, font....)

(padding과 같은 속성들은 상속되지 않음)

상속이 적용 되지 않은 경우엔 강제 상속을 지정

(position: inherit; - 자식요소 css에 적어줌)

초기화

body {
    margin: 0;
    padding: 0;
}

브라우저 별로 style 초기값이 다를 수 있으므로

css상단에 위와 같은 초기화가 필요

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

보통은 직접 초기화 코드를 작성하는 것이 아니라

reset.css라는 파일을 cdn방식으로 추가

(https://www.jsdelivr.com/package/npm/reset-css)

nth-child() / nth-of-type()

Zester; — Tue, 10 Mar 2020 23:00:12 +0900

<ul class="fruits">
    <li>딸기</li>
    <li>사과</li>
    <li>오렌지</li>
    <li>망고</li>
</ul>

.fruits li:first-child {
    color: red;
}

.fruits li:last-child {
    color: red;
}

/* n번째 요소를 선택 */
.fruits li:nth-child(n) {
    color: red;
}

/* 2번째 요소 이상을 모두 선택 */
.fruits li:nth-child(n+2) {
    color: red;
}

/* 짝수 요소들을 선택  */
.fruits li:nth-child(2n) {
    color: red;
}

*해석할때 오른쪽(몇번째 자식)에서 왼쪽(어떤 요소)으로 해야 정확

(조건의 몇번째 자식요소가 어떤 요소다 이런식으로)

<div class="box">
    <div>1</div> /* 선택 */ 
    <div>2</div>
    <div>3
        <div>3-1</div>
        <div>3-2</div>
        <div>3-3</div>
        <div>3-4</div>
    </div>
    <div>4</div>
</div>

.box div:first-child{
    color: red;
}

.box :first-child{
    color: red;
}

위와 같이 CSS를 작성 하면 3-1도 선택됨

(후손 요소중 첫번째는 다 선택되므로)

.box > div:first-child{
    color: red;
}

이럴 때는 후손요소가 아니라 자식요소로 정확하게 선택하는 것이 좋음

(후손요소는 모호 할 수 있음)

<div class="num">
    <div>1</div>
    <p>2</p> /* 선택 */
    <p>3</p>
    <span>4</span>
</div>

.num p:nth-of-type(1) {
    color: red;
}

타입(tag를 의미, 클래스x)이 p인 것 중에 첫번째

선택자2(가상요소 / 속성)

Zester; — Tue, 10 Mar 2020 22:54:55 +0900

가상 요소 선택자(선택요소::before/after)

선택요소 내부 내용의 앞/뒤에 content(text/url/image)를 삽입

/* ul>li{$}*5 + tab */
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

/* content 뿐아니라 스타일도 적용가능 */
ul li::before {
    /* content라는 속성 필수(content: ""라도 적어줘야 함) */
    content: "Num : ";
    font-weight: bold;
    color: royalblue;
}

ul li::after {
    content: url("https://heropy.blog/css/images/logo.png");
}

속성 선택자(해당하는 속성을 가진 요소를 선택)

이름을 따로 짓는 수고를 덜 수 있음- class를 부여 할 필요 X

<input type="text" value="dev">
<input type="text" value="disabled text" disabled> 
<button class="btn-success">success</button>
<button class="btn-danger">danger</button>

/* html 속성에 :disabled가 있으면 선택하겠다*/
[disabled] {
    opacity: 0.1;
}

/* 속성의 값에 따라 선택도 가능 */
[value="dev"] {
    color: red;
}

/* btn-으로 시작하는 속성값 요소 선택 */
[class^="btn-"] {
    color: royalblue;
}

/* btn-으로 끝나는 속성값 요소 선택 */
[class$="-danger"] {
    color: red;
}