코딩기록

리액트)스터디3- css 참고 및 사이트 본문

프론트/리액트

리액트)스터디3- css 참고 및 사이트

뽀짝코딩 2024. 5. 9. 12:47
728x90

*훅의 이름은 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 사이트 

https://caniuse.com/

 

*폰텔로닷컴 ( 백터이미지- 이미지가 커도 절대 깨지지 않는다 ) 아이콘사용, 폰트만들기

fontello.com

*백터 이미지 사이트

thenounproject.com

*유니코드테이블

unicode-table.com

 

 

 

 

참고

생활코딩 css수업: https://opentutorials.org/course/2418/13340

 

반응형
저작자표시 비영리 변경금지

'프론트 > 리액트' 카테고리의 다른 글

리액트)1주차 학습 - html, CSS 문법  (0) 2024.06.04
리액트)스터디6- 웹퍼블리셔-css메모장 선택자, css로 화살표, 삼각형 화살표 만들기... /업뎃중  (0) 2024.05.16
VSCode 자주 쓰는 필수 플러그인, 확장 프로그램, 익스텐션  (0) 2024.05.10
리액트)스터디2- 개발자 도구 ( 생활코딩,제주코딩베이스캠프-칠리 )  (0) 2024.05.08
리액트)스터디1- 문법 리스트 & 개인메모장  (0) 2024.05.06
'프론트/리액트' Related Articles more
Comments