CSS 팁과 기본 지식

CSS tip

생활코딩 CSS 사전

뭔가를 숨길 때

height: 0px;보다는
display: none;을 사용하는 편이 좋다.

줄바꿈

// 한문자 단위로 쪼개려면
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로 검색하면 어떻게 활용할 수 있는지 나온다.