[React 숙련] 전역 스타일링 | Sass | css reset

1.전역 스타일링 (GlobalStyles) ▶ styled-components : 해당 컴포넌트 내에서만 가능! ▶ 프로젝트 전체를 아우르는 스타일 => createGlobalStyle 사용 [위치] GlobalStye.jsx import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` body { font-family: "Helvetica", "Arial", sans-serif; line-height: 1.5; } `; export default GlobalStyle; [위치] App.jsx ▶ 적용하고 싶은 곳 위에 사용하고 하나로 큰 태그로 묶어주기 import GlobalStyle from..

• format_list_bulleted React
• · 2023. 11. 7.
• textsms

#07 리액트 입문 : css 전체 화면의 가운데로 정렬 외.

1. Working 부분이 Done부분을 넘어서 표현 ▶ 원하는 기능 : 데이터가 늘어나는 만큼 div 부분이 유동적으로 늘어났으면 좋겠음. ▶개선 사항 : css 파일에서 "할일 박스" 부분을 height: auto 로 설정하였음 2. css 설정하였는데 미적용 (1) 완료 버튼을 클릭하면 done 부분으로 이동되는데 여기는 flex 설정이 아닌 'user agent stylesheet'에서 해당 div의 display: block 스타일로 적용이 되었음 * user agent stylesheet : 각 브라우저에서 정해놓은 css 규칙 => 새롭게 만들어서 덮어 씌워서 사용하면 된다함.. 하지만 안되서 콘솔에 나는 오류를 확인한 결과.. ▶ 실수한 부분: className 스펠링 오류였음.. 스펠링 ..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 5.
• textsms

[웹페이지 #01] 3. 메인페이지 상단 공지 & 하단 푸터 (HTML, CSS)

1. 상단 공지 * HTML 코드 [ TMI 공지 ] 추석 전에는 7조였는데,, 쉬고 오니 2조가 되었습니다. 👉 안녕하세요 7ㅏ즈아 2조입니다. 😃 * CSS 코드 .notice-word { /*상단 공지*/ color: #f9f3cc; font-weight: 700; font-family: 'Noto Sans KR', sans-serif !important; font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 30px; background-color: #6b85a0db; } 2. 하단 푸터 HTML & CSS * HTML 코드 리액트 ..

• format_list_bulleted CSS
• · 2023. 10. 7.
• textsms

[웹페이지 #01] 2. <div>태그 여러 개로 소개글 그리기 (HTML, CSS)

1. CSS 코드 /*첫번째 구간*/ .top-layout { display: flex; justify-content: center; /*가운데오게*/ } .top { width: 900px; display: flex; justify-content: center; /*가운데오게*/ padding-bottom: 40px; } .face-img { height: 300px; width: 260px; margin: 30px auto; } .top-word { text-align: left; width: 800px; height: 330px; padding-top: 30px; padding-left: 20px; border-radius: 4px; flex-direction: column; } /*두번째 구간*/..

• format_list_bulleted CSS
• · 2023. 10. 6.
• textsms

[웹페이지 #01] 1.반응형 헤더 (HTML, CSS)

nav태그에 대해 인원1블로그주소 인원2블로그주소 인원3블로그주소 인원4블로그주소 현재 기온 : 태그 * 같은 페이지 / 다른 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션 * 태그를 태그 안에 사용하는 것이 일반적 .navbar a { text-decoration: none; /*태그 밑줄긋기 효과 없애기*/ color : white; } .navbar { display: flex;/*아이템들 가로로 나란히 배치*/ justify-content: space-between;/*같은 중심축 기준: 아이템 사이에 공백 넣기*/ align-items: center; /*수직축 중간 배치*/ background-color: #8EACCD; /*배경 색상*/ padding: 8px 12px; ..

• format_list_bulleted CSS
• · 2023. 10. 6.
• textsms