[React] React 스타일링 (SCSS, Styled-Components, Tailwind CSS)

[React] React 스타일링 (SCSS, Styled-Components, Tailwind CSS)

01SCSS (SASS의 최신 버전!)SCSS는 CSS의 확장방식으로, 더 편리하게 적용할 수 있고 강력한 기능을 제공합니다. 가능성 증가, 재용성 강화, 중차구조 가능, 반복문 및 단어를 사용하여 간단하게 작성할 수 있습니다. ✅  파일 확장자:. scss: .scss1. SCSS 설치 방법npm install sass그리고 확장자가. scss인 파일을 생성해서 사용하면 됩니다!예를 들어 App.scss 파일을 만들고 이렇게 작성할 수 있어요. 3. 기본 문법 1) 변수 사용하기한 번 설정한 변수는 여러 곳에서 재사용할 수 있어서 편합니다!$main-color: #FF6F3C;button { background-color: $main-color; color: white;}  2) 중첩(Nesting..

  • format_list_bulleted React.js
  • · 2025. 2. 17.
  • textsms
[JS] 크리스마스 카운트다운

[JS] 크리스마스 카운트다운

Today's목표1. 실시간으로 날짜, 시간 반영하기2. 현재 시간, 남은 D-day 표기하기추가 목표1. background에 눈내리는 애니메이션 추가2. 크리스마스는 올해 크리스마스를 기준으로 년도 자동으로 받아오기  코드리뷰01. Main Until Christmas Current time Christmas 🎄Christmas D-Day🎄  @import url(https://fonts.googleapis.com/css?family=Press+Start+2P); * { margin: 0; padding: 0; box-sizing: border-box;}html, body { h..

  • format_list_bulleted JavaScript
  • · 2024. 4. 24.
  • textsms
[JS] 간단 회원가입 Form 만들기

[JS] 간단 회원가입 Form 만들기

실행 결과 미리 보기 Today's목표1. 회원가입 완료시 유저에게 보여줄 환영인사 메시지 구현하기2. input 요소에 입력된 value를 다루기추가  목표1. 모든 항목은 필수 입력 항목이어야 한다2. submit 이벤트가 발생했을 때 새로고침이 일어나지 않아야 한다  코드리뷰01. Main 회원가입 이름* 이메일 *로그인 시 아이디로 사용합니다. 생년월일* 성..

  • format_list_bulleted JavaScript
  • · 2024. 4. 24.
  • textsms
[JS] 몬스터 잡기 게임

[JS] 몬스터 잡기 게임

실행 결과 미리 보기 Today's목표1. DOM 메서드를 사용하여 새로운 노드를 생성하고 부모 노드에 포함하기2. 사용자에게 데미지값을 prompt로 입력받아 과정/결과 출력3. 데미지를 양의 정수로 입력 안 할 시, 게임 강제종료 추가 목표1. Player 와 Monster 정보는 객체로 넣기 2. Player 와 Monster의 공격에 명중률을 넣어 공격이 실패하는 조건문 넣기  코드리뷰01. Main 몬스터잡기게임⚔  02. Player,Monster 객체 정보//플레이어 정보 const player={ hp: 100, attackDamage: Number(prompt('1회 공격시 데미지는 얼마 인가요?(양의 정수로 입력하세요)')), //..

  • format_list_bulleted JavaScript
  • · 2024. 4. 23.
  • textsms
[HTML/CSS] 사이트 디자인 클론 코딩

[HTML/CSS] 사이트 디자인 클론 코딩

실행 결과 미리 보기 Today's목표1.  치지직(CHZZK) 웹 UI 클론코딩 치지직 CHZZK지금, 스트리밍이 시작됩니다. 치지직-chzzk.naver.com2. 추가 기능은 다 빼고 HTML과 CSS만 이용해서 똑같이 코딩해보기 기능 정의하기1. 상단 배너/서치 바3구역 으로 구역 나누기아이콘은 Fontawesome에서 무료아이콘 가져오기아이콘, 텍스트 클릭시 마우스포인트 효과 넣기search Bar 클릭 시 border 색상 변경하기2. 사이드 바언더 바를 기준으로 3구역 으로 구역 나누기아이콘, 텍스트 클릭시 마우스포인트 효과 넣기추천 채널의 실시간시청자수(빨강색)으로 표기3. 메인 화면 메인 추천 방송 / 추천 스트리머 / 추천 방송 3구역으로 구역 나누기메일 추천방송화면에 왼쪽에 방송 In..

  • format_list_bulleted HTML & CSS
  • · 2024. 4. 23.
  • textsms