CSS 팁과 기본 지식

CSS tip

생활코딩 CSS 사전

뭔가를 숨길 때

```css

height: 0px;보다는

display: none;을 사용하는 편이 좋다.

```

줄바꿈

```css

// 한문자 단위로 쪼개려면 

word-break: break-all;

// 스페이스바 나와도 안쪼개고 1자로 쭉 이어 갈거면(스크롤 있는 경우)

white-space: nowrap;

```

css 세로 가운데 정렬

• 다양한 방법이 있지만, flex를 쓰거나 아래 링크에서 저자가 괜찮다고 한 방법이 좋아 보임.
• https://mytory.net/archives/9727

CSS selector

2017/05/24 - [Web/Front-end] - CSS Selector

px과 rem, em

• px   - 절대 크기
• rem - root element(html)의 상대 크기,
• em  - 그 element의 상대 크기.
  단, 보통 각 element의 크기를 직접 지정하는 경우는 거의 없어 크기가 상속되기 때문에 상속을 이용한 크기 지정에 사용하게 된다.

보통 px 보다는 em, rem을 쓰는 것이 좋다.

px는 브라우저 설정에서 글씨 크기를 확대해도 그대로인 반면, html 태그의 font-size가 브라우저에서 설정한 글씨 크기에 영향을 받기 때문에 rem은 글씨 크기를 확대하면 크기가 커진다.

Layout

• margin - 태그와 태그 사이의 여백.
• padding - 태그를 감싸는 border와 태그 사이의 여백.

layout을 다룰 때는 마진 겹침이 일어날 수 있다는 것에 유의한다.

• `` @media``
• media query
• `` flex``
• 전체적인 layout을 잡을 때 주로 사용. (주로 holy grail 형태로 잡는다.)
• `` float``
• float는 주로 이미지와 글을 어울림 설정하는데 사용하지만 layout 잡을 때 사용하기도 한다.
• multi column
• 신문처럼 문단을 컬럼 형태로 나누는 layout을 잡을 때 사용한다.

Effect

• CODEPEN에서 이들을 활용한 예제를 볼 수 있다.
• :hover, translation 등과 함께 사용하면 동적인 느낌을 줄 수 있다. 
• 이를 활용한 예제를 볼 수 있는 사이트 목록
• Hover.css
• magic_animations
• CSShake
• top-9-animation-libraries-use-2016
• Ceaser - translation-timing-function을 이용하여 다양한 translation code를 제공.
• filter
• blur, grayscale 주는데 사용
• CSS Filters Playground
• CSS Filters 예제
• blend
• 엘리먼트-엘리먼트를 블렌드 하는데 사용.
• transform
• 외곡, 회전 등을 줄 수 있다. 
• 이를 사용한 예제가 CSShake 이며 그 밖에도 CSS transform library 로 검색하면 다양한 라이브러리를 검색할 수 있다.
• SVG
• 벡터 이미지 형식을 svg라고 부른다. svg 태그를 이용하면 svg 이미지를 직접 그릴 수 있다.
• 주로 로딩할 때 로딩하고 있음을 나타내는 돌아가는 아이콘이 SVG를 활용한 기술이다.
• CODEPEN에서 SVG로 검색하면 어떻게 활용할 수 있는지 나온다.