230302 - React - CSS 적용하기

오늘 내가 배운 것 1. React CSS 적용하기 2. 방법 1. inline-style 이용하기 3. 방법 2. CSS파일 import 해서 이용하기 4. 방법 3. CSS Module 이용하기 5. 방법 4. Styled-components ( CSS-in-JS ) 라이브러리 이용하기 1. React CSS 적용하기 SPA의 특성상 URL이 바뀌지 않은 상태로 컴포넌트만 바뀌면서 페이지를 보여주는데, 이를 특성을 이용하면 CSS파일을 한 개만 만들어서 bundle.js 해서 이용하는 것이 정상이다. 하지만 이 과정에서 많은 문제점이 있다. 한 파일을 이용해서 관리를 하기 때문에 많은 내용의 CSS가 한 파일에 있어야 하고, 그러면 나중에 관리가 힘들어진다. 중복되는 CSS가 발생될 수 있고, 정말 ..

• format_list_bulleted TIL(Today I Learned)
• · 2023. 3. 3.
• textsms

230220 - 프로젝트 발표 및 회고

3주간 진행했던 프로젝트가 마무리 됐다. 목차 1. 시연 내용 1-1. 메인페이지 1-2. 로그인 페이지 1-3. 채팅 기능 1-4. 인기 게시글, 인기 멤버 ( 랭킹 기능 ) 1-5. 알림 기능 1-6. 게시판 CRUD 1-7. 댓글 기능 1-8. 좋아요 기능 1-9. 리스트 페이지 1-10. 검색기능 1-11. 나의 반응 페이지 1-12. 에러 처리 1-13. 배포 2. 회고 1. 시연 1-1. 메인 페이지 메인 페이지 진입 시 게시판 데이터를 랜덤으로 불러와서 카드에 하나씩 보여준다. 각 카드의 사진이나 제목을 통해서 view 페이지로 이동 가능하다. 카드의 하단부 클릭 시 게시글의 정보를 간단하게 볼 수 있다. 1-2. 로그인 페이지 회원가입 시 ID와 Nickname을 input 이벤트를 통해 ..

• format_list_bulleted TIL(Today I Learned)
• · 2023. 2. 21.
• textsms

CSS - animation (애니메이션)

최근 github 개인 페이지를 만들면서 가장 기억에 남는 CSS효과였던 애니메이션 속성에 대해서 활용도가 많을 것 같아서 정리해봤다. 쉽게 애니메이션 효과를 줄 수 있기 때문에 알아두면 좋을 것 같다. CSS3 애니메이션 애니메이션을 나타내는 CSS와 중간 상태를 나타내는 키프레임으로 이루어져 있다. CSS 애니메이션의 장점 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링 된다. 보이지 않는 엘리먼트에 대한 애니메이션은 업데이트를 줄여 부하를 최소화할 수 있다. 애니메이션 적용하기 animation 속성과 이 속성의 하위 속성을 지정해야 한다. 애니메이션의 총 시간과 반복 여부를 지정할 수 있..

• format_list_bulleted HTML & CSS
• · 2022. 12. 19.
• textsms

221201 - Github 개인페이지 만들기

2022년 12월 1일 내용 : 추후 포트폴리오를 위한 개인 페이지 만들기 4일차 커밋이름 : 221201 커밋내용 : feat : Project 상세페이지 및 템플릿 만들기 feat : back to top 버튼 만들기 feat : 웹, 모바일버전 contact 레이아웃 구성하기 fix : project item 클릭이벤트 범위 수정하기 fix : about me 컨텐츠 채우기

• format_list_bulleted TIL(Today I Learned)
• · 2022. 12. 2.
• textsms

221025 HTML/CSS 를 이용한 애니메이션 효과-학원 홈페이지 클론코딩

오늘 내가 배운 것 1. HTML - label, CSS - '+' 결합자 2. HTML 속성과 속성 값 3. CSS 속성과 속성 값 4. CSS 선택자 1. HTML-label, CSS- '+' 결합자 HTML- 태그 label에 for 속성, input의 id를 속성 값으로 준다면 label의 데이터를 선택했을 때 input을 선택해 주는 방법이 있다. CSS - “+” 결합자 ex) label + #user 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택하는 결합자 아이디 2. HTML 속성과 속성 값 input 태그의 type="radio" 속성 name=”” 을 이용해서 이름을 정해주고 이름이 같은 radio 끼리 중복 선택이 불가능하다. 보통 성별을 선택하는 항..

• format_list_bulleted TIL(Today I Learned)
• · 2022. 10. 25.
• textsms

221022 네이버 회원가입 클론코딩

1. 네이버 회원가입 클론코딩 어제 했던 수업을 다시 처음부터 복습해봤다. https://baekspace.tistory.com/31 221021 CSS와 네이버 클론코딩 오늘 내가 배운 것 1. HTML element 2. CSS 3. CSS 적용시키는 3가지 방법 4. CSS 선택자, 속성, 속성값 1. HTML element 웹사이트 브라우저를 구성을 확인하다 보면 address, section, article, aside 태그를 볼.. baekspace.tistory.com 아쉬운 점으로 밑에 내용이 있었는데 1. 처음에 레이아웃을 짤 때 input 안에 블록을 더 세분화해서 넣었어야 했는데, 세분화하지 못해서 위치를 세세하게 이동시킬 수 없었다. 조금 진행된 상태에서 파악을 한 부분이라 코드 전..

• format_list_bulleted TIL(Today I Learned)
• · 2022. 10. 23.
• textsms