소소한 일상 이야기 RSS 태그 관리 글쓰기 방명록
코코아클론챌린지/html,css (2)
코코아클론챌린지/html,css/ 코코아 클론 졸업작품
2023-05-12 01:47:03

https://hincocoacloneloginpage.hinomi.repl.co/

 

hinnom talk

No Service 18:43 0%

hincocoacloneloginpage.hinomi.repl.co

 

 

 

초반에 replit에서 코드 만들고 수정하고

zip 파일로 저장후

vscode 에서 복붙으로 

github desktop에서  branch로 upload했다.

 

 

branch 할때 

master에서 코드 수정후 commit을 한다.

그다음에 current branch -> gh-pages 변경후 

branch -> update from master

->그럼 push orgin 이 뜨는데 클릭해주면 됨

 

 

 

에러상황

replit ->vscode로 이동시에 이미지 엑박

 

replit 사용때 문제 없었던 img 파일들이

vsc로 넘어오면서 엑박이 떴다.

파일형식 jpeg ->jpg로 변환해서 적용하니 

엑박문제 해결됨.

 

 

 

니코쌤의 히든미션

 

animation에 blur 추가함

 

 

 

 

 

 

 

 

 

 

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

'코코아클론챌린지 > html,css' 카테고리의 다른 글

코코아클론 challenge music  (0) 2023.05.07
코코아클론챌린지/html,css/ 코코아클론 challenge music
2023-05-07 12:52:46

css sketch : body라는 하나의 덩어리 안에 box1,box2 덩어리 둘로 나눠서 작업했다.

 

 

 

 

 

 

 

 

 

 

 

 

 

  • ! + enter    = basic document 생성
  • BEM  = blocck element modifier
  • btn {}  = btn안에는 price 정보가 있다. - 때때로 block 은 modifier을 가지게 되는데 bar 형태가 --중간에 온다.
  • 이 모든 건 하나의 클래스 이름.
  • id보다는 주로 class 사용 많이 하는데 css에 <dot>이 있다면 class인지 빠른 파악이 가능하쥬
  • 아이콘 구하기 
  • heroicons. , fontawesome 

 

 

 

나는 fontawesome에서 무료아이콘을 검색해서 사용했다.

제공되는 것보다 더 많은 아이콘을 원하면 email 가입해서 code kit 구매하면 된다.

code kit 복사한 뒤 body 안에 스크립트 추가할 건데

위치는 항상 맨 아래 

</body> 바로 위에 위치하면 된다.

<script src = "복사한 code kit"></script>

 

 

 

그림자효과 사용된 recipe :

box-shadow: 5px 5px 15px 5px thistle;
    filter:blur(1px);

 

 

 

 

 

 

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

'코코아클론챌린지 > html,css' 카테고리의 다른 글

코코아 클론 졸업작품  (0) 2023.05.12


티스토리툴바