CSS 정리 1 에 다 넣고 싶었는데, CSS는 HTML보다 양이 많아서 글을 나누기로 결정했다.

1. layout

1-1. Float

1. float 개념

/* 둥둥 띄워서 왼쪽으로 정렬 */
img {
    float: left;
}

둥둥 띄우는 것. 사진 옆에 줄글이 들어가는 기사 형식을 만들기 위해서 나온 것이다. 그래서 글자들은 float 된 것을 인식함!!!

2. float 특성 (문제점)

다른 태그들이 block으로 인식하지 못함.

inline 요소처럼 넓이나 높이를 주지 않으면 content 영역의 넓이만 가져가게 된다.

3. float 특성 해결

border를 씌우지 못한다거나, 다음 요소와 겹치는 문제가 발생한다.

1. 부모 요소에 overflow 추가 : 부모가 overflow 된 자식을 인식하게 해준다. 자식이 모두 float라서 부모가 높이를 인식하지 못할 때 사용.

부모 {
    overflow: hidden;
    display: inline-block; /* 이걸로도 해결 가능. */
}

2. 부모 요소 높이 직접 지정
3. 형제에 clear: both; 사용 : 앞에 float 형제가 있다고 알려주는 것
4. clear-fix

/* clear-fix : 부모 요소에 마지막으로 가상의 block 형태 마지막 자식을 하나 줌. */
부모::after {
    contet: '';
    display: block;
    clear:both;
}

1-2. Flex

1-2-1. flex-direction

컨텐츠 정렬, 공간을 나누는 속성.

/* 적용하면 가로로 배열되고 세로로 넓이 전체를 잡는 block 형태로 */
.container {
    /* container가 block 형태, inline 형태 */
    display: flex, inline-flex;
    /* 배열 방향 변경 : 수평 수직 수평반대(오른쪽부터 1 2 3 붙음...) 수직반대(아래부터) */
    flex-direction: row, column, row-reverse, column-reverse; 
}

기본적으로 display: flex 주면 flex-item 높이에 container 높이가 맞춰짐. container 높이가 있는 경우에는, item이 stretch 되어 높이가 맞춰짐

1-2-2. Axis

flex는 하나의 축(main-Axis)을 가지고 flex-start, center, flex-end 순으로 아이템이 정렬된다. (default : 왼쪽 중간 오른쪽)

1-2-3. justify-content

flex에 관련된 여러 정렬 관련 세부사항을 조정할 수 있다.

.container {
   display: flex;
    /* 배열 위치 변경 */
    justify-content: flex-start; /* flex- start 위치부터 시작 */
    justify-content: center; /* center에 center가 오게 */
    justify-content: flex-end; /* flex-end 위치에서 끝나게 */
    /* 정렬 위치 변경 */
    justify-content: space-between; /* 양쪽 끝에 맞게 간격 생김 */
    justify-content: space-around;  /* 아이템 개수로 container 나눴을 때 각 영역과 item 사이의 좌우 간격 같음. */
    justify-content: space-evenly;  /* 각 아이템 사이의 간격이 같아짐 */
}

1-2-4. cross-Axis, align-items, align-content

보조(교차) 축. axis가 row면 colum, axis가 colum이면 row

.container {
    display: flex;
    /* 보조축 기준 정렬 : (cross-Axis 방향) 쭉 늘어남, 중간, 시작, 끝, 문자 밑의 라인 */
    align-items: stretch(default), center, flex-start, flex-end, baseline;
    /* cross-Axis 의 item이 여러줄일때 사용. */
    align-content: center, flex-start, flex-end; 

stretch는 element 의 높이를 살리지 않는다!! Flex 완벽 정리

1-2-5. flex-wrap

flex는 자식이 자기보다 크다고 자식 크기를 조절하지 않는다. flex-wrap으로 감싸줘야 자신의 넓이만큼 적용되어서 내려감.

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 자식을 감싸주는 기능 : width가 줄면 내려감, nowrap(default), 위로 올림.*/
    flex-wrap: wrap, nowrap, wrap-reverse;
}

1-2-6. flex-basis, flex-grow, flex-shrink, ...

flex-basis : flex-item 크기 결정. 축의 위치에 따라 달라진다. flex-basis가 적용되면 width, height는 무시
flex-grow : flex-basis 에서 크기가 늘어나도 되는지 지정. 하나라도 주게되면 화면 전체 width에 맞춰서 늘어남.
flex-shrink : flex-basis 에서 크기가 줄어들어도 되는지 지정.

.child {
    flex-basis: auto(default) 100px;
    flex-grow: 1, 2, 3; /* flex-grow 1을 준 다른 child와 같은 크기, 2배, 3배 */
    flex-shrink: 1, 2, 0; /* default(줄어든다) 2배 빨리줄어듬 고정 */
    flex: 1; /* grow 1 shrink 1 basis 0(자동으로 맞춰짐) */
    flex: 1 1 300px; 
}

그치만, content가 들어있으면 grow, shrink 넓이가 정확히 맞지 않을 수도 있다.

flex 잡을 때 width, flex-basis, flex-grow ... 등 단위를 줄 때는 무조건 하나로 통일하자!!! 여러가지로 주면 우선순위가 달라서 다르게 적용될 수 있다. 축약형도 헷갈리니까 자제하자.

flex-item { algin-self: flex-start }; /* 얘만 flex-start로 감 */
flex-flow: column wrap; /* flex-direction, flex-wrap 같이 쓸 수 있음 */

• align-self : 부모의 align-items를 덮음. 개별적인 align-items 속성 부여. (default - stretch)
• order : flex-item 들의 순서. 수가 작을수록 우선순위 높아서 먼저 배열됨. default 0

flex flog game

1-3. Grid

무한 스크롤 되는 것은 grid로 그리지 말자. grid가 없을때는 플러그인을 가져다 쓰기도 했다고 한다.

1-3-1. template

기본적으로, container의 너비를 꽉 채우는 block 쌓이듯 쌓인다. 3*3 으로 나타내고 싶으면 template 이용해서 row, column 줘야함.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    /* 행 3개 열 3개, width 1fr(비율) (각각 넓이 동일해짐.) */
    gap: 10px 20px; /* gap row, col */
    grid-area: 1/2/4/6; /* grid row start col start row end col end */
}

grid-area 를 이용해서 줄 수도 있다.

.container {
    display: grid;
    gap: 10px;
    grid-template-areas: 'header  header  header'
                         'section section aside'
                         'footer  footer  footer'
}
.header {
    border: 10px solid tomato;
    grid-area: header;
}
.section {
    border: 10px solid darkcyan;
    grid-area: section;
}
.aside {
    border: 10px solid gold;
    grid-area: aside;
}
.footer {
    border: 10px solid pink;
    grid-area: footer;
}

1-3-2. 셀 영역 지정

.item {
   /* 열 2칸 합치는 코드 3가지 */
   grid-column-start: 1;
   grid-column-end: 3;
   grid-column: 1 / 3; /* grid-line 1부터 3까지 */
   grid-column: 1 / span 2; /* grid-line 1부터 2칸 */
}

Grid Garden

2. Move

vendor prefix를 사용해서 여러 브라우저에서 동작할 수 있게 해야 한다.

2-1. Hover, Active, Focus

hover : 마우스 올림
active : 활성화 (ex. 버튼 누르고 있는.)
focus : tap 눌러서 이동할때 선택되어 있는 부분

2-2. transition, transform

2-2-1. transition

CSS 속성 값이 변할 때, 변화가 일정 시간에 걸쳐서 일어나게 하는 것.

/* 빨간색이 파란색으로 바뀌면서 transition */
div {
    background-color: red;
    transition-duration: 3s; /* 3초동안 바뀜 */
    transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, steps(int, start|end), cubic-beizer, initial, inherit
    transition-delay: 2s;
    transition: background-color 3s ease 2s; /* 위의 순서대로 합쳐 쓸 수 있다 */
}
div:hover { /* hover, active, ... 많은 것에 적용 가능 */
    background-color: blue;
}

tag 의 속성(색상, 높이, ...)이 변할 때 변화하는 단계에 애니메이션을 줄 수 있다.

transition: property duration timing-func delay
property - all, none, property, initial, inherit , ...

initial은 초기화.

2-2-2. transform

object를 변형할 때 사용하는 속성.

transform: translate(x, y); /* 이동 */
scale(x, y) /* 크기 */
skew(x,y)   /* 기울기 */
rotate(180deg) /* 회전 */
translateX(x), scaleY(y) /* x축 y축 따로도 가능 */

transform-origin: top right; /* 회전 축 이동. */
transform-origin: 50% 100px; 

2-2-3. translate vs position

Q. 둘 다 물체를 어떤 좌표로 움직이는 속성인데, 언제 어떤걸 사용하는가?
A. 정적인 사이트에서 단순 배치 시엔 position, 동적으로 이동해야하는 경우에는 translate.

Why?

브라우저가 웹 페이지를 읽는 과정
\
1. 파싱 : html -> DOM tree
2. 스타일 계산 : CSS -> CSSOM
3. 레이아웃 : CSSOM 정보를 토대로 DOM을 따라가면서 화면에 보이는 정보만 남겨서 layout tree(render tree) 생성
4. 페인트 : 레이아웃 트리 기반으로 시각적 부분을 그리는 페인트 기록 생성
5. 컴포지팅 : 각 레이어를 픽셀로 표현하여 화면에 그림
\
+1) reflow : 레이아웃 변경 시 영향 받는 노드들의 수치를 다시 계산해서 렌더 트리 재생성
+2) repaint : reflow 끝나고 렌더 트리 다시 그림. 수치와 상관 없이 스타일만 변경되면 reflow 없이 repaint만 수행

만약 css를 통해 레이아웃이 바뀌는 애니메이션을 구현할 경우 브라우저는 매 프레임마다 reflow, repaint 과정을 수행해서, 브라우저에 상당한 부담이 걸림. transform 의 경우 그 부담을 GPU한테 줄 수 있다.

2-3. Animation

transition과 animation의 차이 : animation은 css 속성값의 변화 없이도 사용 가능. 그리고 나중에 JavaScript를 붙일 수 있다.

2-3-1. keyframe

tag { 
    animation-name: name;
    animation-duration: 2s;
    animation-iteration-count: 3, infinite;
    animation-delay: 3s;
    animation-direction: normal, reverse, alternate(순방향->역방향), alternate-reverse;
    animation-timing-function: ease, linear, ease-in, ease-out, ease-in-out;
    animation-play-state: running, posed;
}

@keyframes animation-name {
    /* 0%~100%로 여러개의 Step으로 나눌 수 있다. */
    from { animation 시작 속성 }
    to { animation 끝 속성 }
}

animation-fill-mode: forwards;  /* 애니메이션이 끝나면 처음으로 돌아가지 않고 멈추는 효과 */

• alternate 횟수가 1회이면 그냥 순방향 한번만 재생되고 끝난다.
• 경고창이 흔들리는 효과도 keyframes 로 줄 수 있다.

2-3-2. SVG

이미지 파일은 깨지지 않는 SVG로 사용할 수 있다. 3가지 방법으로 사용 가능. 요즘은 그렇게 많이 쓰이진 않는다. svg path, g tag의 색을 바꾸고 싶다면, color 가 아니라 fill 을 이용하자.

1. img tag
2. background-image
3. svg code

2-3-3. 속도, 최적화

transform 을 이용해서 transition, animation을 줄 때, 줄 요소의 바꿀 속성의 css 값을 미리 주면 속도가 빨라진다 관련 글, 성능 최적화

2-4. perspective

원근법. 나와의 거리라서 값이 작을수록 커보임!!

div {
    perspective: 800px;
}

부모가 자식을 여러개 가지고 있다면 소실점이 부모의 오른쪽 끝에 있다.
perspective-origin: 50% 50% 가 default

+. 카드 만들기

돌아갈때 진짜 카드처럼 양면인 속성을 가지게 하고 싶다면 뒷면을 만들어야함.

/* 핵심 부분 */
.front { transform: rotateY(0deg); }
.back { transform: rotateY(-180deg); }  /* 뒷면은 반대쪽으로 뒤집어져 있는 상태!!! */
/* 올렸을 때 돌아갈 바퀴 수 만큼 설정하면 된다. */
.card:hover .front { transform: rotateY(180deg); } 
.card:hover .back { transform: rotateY(0deg); }

.card {
    width: 500px;
    height: 500px;
    perspective: 400px;
    /* 해당 효과를 transition이 아니라 animation으로 주고 싶다면 붙이자. */
    transform-style: preserve-3d; 
} 
.item {
    width: 500px;
    height: 500px;
    backface-visibility: hidden;
    /* transition을 item에 줘야한다는 사실. */
    transition: all 1.2s; 
}

<div class="card">
    <div class="item front">앞면</div>
    <div class="item back">뒷면</div>
</div>

2-5. media query (반응형 웹)

반응형 웹: 기기별로 css 다르게 묶어서 화면 대응. 보통 모바일 환경이 압도적으로 많기 때문에, 모바일 먼저 만들고 웹 페이지를 만드는 경우가 많다. m. 이나 mobile. 처럼 url을 따로 빼는 경우에는 미디어 쿼리를 사용하지 않을 수도 있다.

<link media="all">
@media all { }
all(전부), aural(음성), braile(점자), handheld(작은 스크린), print(인쇄), projection(프로젝터), screen(컴퓨터 스크린), tv(음성, 영상 동시 출력 장치), embossed(인쇄된 점자 표시 장치)

and not only ,(or과 같음) 연산자 사용 가능

/* 이런식으로 width에 따른 컴퓨터, 태블릿, 폰 화면을 제어. */
@media all and (min-width: 960px)
@media all and (max-width: 959px) and (min-wdth: 760px)
@media all and (max-wdth: 759px)

많이 사용한다. css 1px에 들어가는 디바이스 스크린 픽셀 수의 비율
해상도에 따른 이미지 변화를 줄 때 사용. 같은 이미지를 여러 기기에서 같은 크기로 보여주려면 고해상도 기기에서는 이미지 화질이 떨어지므로, 특정 기기에서 이미지를 교체해준다.

-webkit-min-device-pixel-ratio:
-webkit-max-device-pixel-ratio:
-webkit-device-pixel-ratio:

@media print {
    /* 화면에는 안보이던 축약어가 인쇄 페이지에서는 보인다. */
    abbr::after {
        content: '('attr(title)')';
    }
}