[CSS]CSS 꿀팁 정리! - CodeHan의 코딩공부

독후감인데 유용한 팁들을 적었다. 책에서 본 내용을 간략하게 요약해놨으니 유용하게 사용하길 바란다.

책에서 알게된 새로운 내용들을 많이 옮겨놨다.!

 

img width와 max-width 차이

- width속성이 사용되면 자신의 크기에 상관없이 지정된
width로 표시된다. 따라서 이미지를 포함하는 컨테이너가 이미지보다 클 경우 이미지를 본래 크기보다 더 크게 확대시킨다는 점이 있다.

브레이크 포인트는 인기있는 디스플레이에 맞추기보다
콘텐츠와 디자인에 따라 적당한 브레이크 포인트를 결정하자.

 

flex : 0 0 auto

첫번째 숫자는 flexbox사이에서 비율을 의미한다 1 1이면 같은 비율
2 1이면 첫번째 박스가 2번째 박스보다 2배로 크다.
두번째 숫자는 shrink로 여유 공간이 없을때 항목이 수축하는 정도를 지정한다.
세번째 숫자는 flex항목의 기준 크기이다.

body의 min-height를 100%로 설정하고 content에 flex:1을, 주면
footer는 본문의 내용이 충분하지 않더라도 항상 하단에 위치한다.

flex에서 order는 배치 순서를 나타내며 -1은 가장 앞에 위치한다.

이미지 배치시 sreset과 sizes로 고급지게 표현할 수 있다.
더 정밀하게 표현하고싶다면 <picture>을 공부할 것.

details와 summary / text를 요약해서 보여줄 수 있고 클릭 시 
detail에 문구가 표시된다.

CSS다중 열 layout
열을 구분 짓고 싶을때 column-width를 사용하면 긴 문장을 여러개의 열로 나눌 수 있다.

작은 칸에 txt가 넘어가면 word-wrap : break-word로 칸 안에 넣을 수 있다.
txt가 길다면 text-overflow: ellipsis를 사용하여 ...으로 축약할 수 있다.

 

가로스크롤
overflow-x를 auto로 하고 white-space: nowrap을 사용하여 공간이 충분하면 이 엘리먼트를 래핑하지 않도록 지시한다.
그다음 자식요를 inline-flex나 inline-block, table로 인라인하여 구성하면 된다.
웹킷 브라우저용과 IE브라우저용 코드도 추가하면 보다 깔끔하고 여러 브라우저를 호환할 수 있다.

:empty선택자는 동적으로 data가 삽입되는 엘리먼트에 padding이 존재할때 empty속성으로 display none을 명령하여
제거할 수 있다.

p::firtst-line 마크업의 변경 없이 첫 라인의 텍스트를 다르게 표시하는 데 유용하다.

css filter : drop-shadow로 원하는 도형에 맞게 gradient를 줄 수 있다.

svg icon을 사용하면 해상도 측면엣 ㅓ좋다.

CSS인접형제 선택자로 +가 있는데 참고하면 좋을 것.

트랜지션은 원래 상태에 적용됨을 주의해라.

반응형

CSS 3D 플리핑효과

keyframe으로 애니메이션을 제작하고 이를 효과로 적용하면 애니메이션이 끝나는 시점에 적용된
효과가 사라질 수 있는데 이를 animation-fill-mode : forwards로 값을 유지할 수 있다.

input에 require속성을 입력하면 반드시 입력해야합니다 라는 msg가 나온다.

autofocus속성은 페이지가 로드될 때 해당 필드가 포커스를 얻게 되는데, 사용에 주의해야한다.

 

list와 비슷한datalist는 필드를 입력할 때 사용자에게 선택할 수 있는 목록을 보여준다. > 옵션목록은 반드시 selelct를 써야하는 것은 아니지만 구형 브라우저 폴리필에 도움이 된다.
웹심 라이브러리로 폴리필을 처리할 수 있지만 성능에 주의해야한다.

type="number"는 스피너 컨트롤을 기본으로 제공하며 mix과 max값을 설정할 수 있다. step속성으로 증가단위도 변경할 수 있다.

뷰포트에 따라 다른 js함수를 호출하고 싶다면 body::after엘리먼트에 content속성을 사용하여
각각 뷰포트에 맞는 이름을 붙인다. 그리고 JS에서 window.getComputedStyle(document.body,':afer')로
select할 수 있다

 

링크를 버튼으로 활용하는 것도 꽤 유용할 때가 있다.
작은 뷰포트 스크린에 필요 없는 것은 큰 뷰포트 스크린에도 필요없다.