리액트)스터디3- css 참고 및 사이트
*훅의 이름은 use~ 로 시작한다.
HTML
*모바일 지원
<meta name="viewport" content="width=device-width, initial-scal=1.0">
CSS
생활코딩 css수업: https://opentutorials.org/course/2418/13340
*css참고 사이트: codepen.io
*아톰에디터- https://github.blog/2022-06-08-sunsetting-atom/
사용법- 생활코딩: https://opentutorials.org/module/1579
*grid-
화면에 나란히 위치시킨다. 150px 고정
display: grid;
grid-template-columns: 150px 1fr;
*반응형
- 스크린의 최소폭이 800이되면 div디스플레이가 사라진다
@media(min-width:800px) {
div{
display:none;
}
}
*반응형 순서 캐스케이딩 영향으로 나중것이 우선시 된다.
~500px:red, 501~600px:green, 601px:blue
@media(max-width:600px) {
body{
background-color:green;
}
}
@media(max-width:500px) {
body{
background-color:red;
}
}
@media(max-width:601px) {
body{
background-color:blue;
}
}
->모바일에서 볼때 추가코드
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
*css 우선순위 (캐스케이딩)
1. inline으로 엘리먼트안에 직접 스타일 css 기술.
2. 아이디
3. 클래스
4. 태그 타입
5. css 선언이 나중에 나올수록 우선순위가 높아진다.
*움직임 ( transition )
*코드 경량화( minify )
미니파이 사이트: http://adamburgess.github.io/clean-css-online/
minify 설치 명령어: npm install -g clean-css
실행 명령어: cleancss -o 파일이름 (확장자명 .css 까지 입력)
확인명령어: cat 파일이름
*프리프로세서 ( preprocesser )
설치 : npm install stylus -g
*포지셔닝 ( position )
relative- https://www.youtube.com/watch?v=qqvypkcN7AE&list=PL19A855560BD98721&index=39
absolute- https://www.youtube.com/watch?v=nJVpd_z9c_s&list=PL19A855560BD98721&index=38
엘리먼트의 기준값이 없으면 부모가 기준이 되고 left:0px; top:0px; 주면 기준 값이 html이 된다.
fixed- https://www.youtube.com/watch?v=yXxzludyyXM&list=PL19A855560BD98721&index=37
스크롤해도 엘리먼트 위치는 고정, 스크롤과 상관없이 ui가 고정되야 할때 사용.
*css- 브라우저에 따라 html, css를 다르게 받아들이게 된다. 그걸 확인하는 사이트이다.
can i use 사이트
*폰텔로닷컴 ( 백터이미지- 이미지가 커도 절대 깨지지 않는다 ) 아이콘사용, 폰트만들기
fontello.com
*백터 이미지 사이트
thenounproject.com
*유니코드테이블
unicode-table.com
참고
생활코딩 css수업: https://opentutorials.org/course/2418/13340