CSS
1.styled component에서 global variables
react native에선 .css 파일이 지원이 안된다고 해서최근 진행중인 react 개인 프로젝트의 styling을 styled-components로 작업하고 있다.기존에 만들어둔 .css 파일을 옮기려고 하는데global 변수를 기존 css와 같이 사용 할 수 있
2.styled component에서 media query
기존 css 파일의 media querystyled component에서 media querycss파일은 각각 media query를 따로 작성을 하고media query의 조건 안에 변화할 클래스들을 넣는 방식이라면styled component는 미디어 쿼리를 작성하
3.CSS : text-indent
css => text-indent들여쓰기, 내어쓰기 만드는 속성양수면 들여쓰기, 음수면 내어쓰기
4.CSS and, or
참고 문헌https://stackoverflow.com/questions/2797091/css-and-and-or
5.Display element on hovering over a tag using CSS
어떤 icon을 마우스가 카드 위에 올라갔을 때만 보여주고 싶다면javascript로 mouseenter event에서 감추거나 숨겨도 되지만css로 간단하게 할 수 있는 방법이 있다.css hover 조건에서 icon을 표시하게 하면 된다.https://ww
6.반응형 웹 가로 픽셀 기준
최근 모니터의 발전으로 해상도, 한 화면안에 픽셀의 개수가 많아졌다.웹을 반응형으로 만들 때 미디어쿼리를 사용하여 구분을 하거나 화면의 최대 가로 길이를 제한하는 기준은 어떻게 설정해야 하고왜 그런 기준점들이 생겨났는지 생각해보자.화면의 정밀도를 나타내는 지표가로 픽셀
7.css 표에 대각선 넣기
https://www.python2.net/questions-1185625.htm
8.CSS user-select
특성 텍스트 등을 복사하기 쉽게 하기 위해 설정할 수 있다.한번 클릭으로 더블클릭한 효과를 주어서 복사를 쉽게 할 수 있다.https://www.w3schools.com/cssref/css3_pr_user-select.asp
9.css div 가로길이 비례해서 높이 지정
div태그의 배경으로 이미지를 넣으려는 경우padding-bottom을 이용해서 가로 길이에 비례한 높이를 줄 수 있다.padding은 부모의 가로를 기준으로 그 크기가 잡히기 때문이다.https://stackoverflow.com/questions/88945
10.사파리 브라우저 줄변경 오류
크롬, 안드로이드에선 문제가 되지 않았던 문구가 사파리 브라우저에서 어색하게 줄변경이 되는 문제가 있어서 찾아보았다.word-break : unset;참고https://m.blog.naver.com/PostView.naver?isHttpsRedirect=tru
11.UI, UX Design 참고 사이트
https://material.io/design참고드림코딩
12.css list style 변경
li 태그의 기본 스타일은 점이 붙지만 아래 속성을 통해 변경할 수 있다.disc : 검은 원circle : 공백 원square 사각형decimal : 십진수lower-alpha : 알파벳 소문자lower-roman : 로마자 소문자upper-alpha : 알파벳 대
13.css x방향(가로) scroll
width : 최대 크기를 정하고 넘어가면 스크롤 되게할 넓이white-space : 공백, 줄바꿈을 하지 않음overflow-x : x방향으로 넘어가는 것에 대한 처리참고https://m.blog.naver.com/PostView.naver?isHttpsRe
14.sticky 주의 사항
부모엘리먼트들의 overflow가 default로 설정되어야만 적용 된다.
15.CSS clamp
CSS에 반응형 웹을 만들 때 좋은 함수이다
16.print css
인쇄 페이지용 미디어 쿼리프린트(cmd + p) 화면에서 적용할 CSS를 @media print로 설정할 수 있다페이지에서 숨겨야하는 부분은 display 또는 visible로 제어할 수 있다https://eunyoe.tistory.com/15https
17.css 나머지 영역 채우기(flex-grow)
css에서 특정 컨텐츠 영역을 제외한 나머지 영역을 채우고 싶을 때 flex-grow를 사용해서 채울 수 있다참고https://developer-ping9.tistory.com/147
18.스크롤 스타일링
::-webkit-scrollbar : 스크롤 바 전체 ::-webkit-scrollbar-thumb : 스크롤 막대 ::-webkit-scrollbar-track : 스크롤 막대 외부
19.touch-action
CSS의 touch-action 옵션으로 터치 이벤트를 제한할 수 있다
20.flex basis
얼마전 강의를 듣다가 flex-basis라는 것을 알게 되었다flex-basis는 flex의 자식에 부여하는 속성으로 길이를 지정하는데 width와 min-width를 섞어 놓은 듯 유연한 모습을 보여준다위와 같이 구성했을 땐 차이가 없다여기에서 몇 가지 변화를 줘보자
21.CSS aspect-ratio
aspect-ratio는 요소의 크기를 비율대로 조정할 수 있는 css이다