Front-End/HTML_CSS (10) 썸네일형 리스트형 [Typescript, CSS] Circular Progress Bar 만들기 import colors from "@/styles/color"; import React, { ReactElement } from "react"; import styled from "styled-components"; type Props = { progress: number; label?: string; width?: number; imageUrl: string; }; export default function CircularProgressBar({ progress, label = "Progress Bar", width = 100, imageUrl, }: Props): ReactElement { const strokeWidth = 3; const radius = 100 / 2 - strokeWidth *.. [CSS] CSS-Flex Link Archive https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com [CSS] tsx 내의 string에서 줄바꿈이 안되는 문제 해결 const MyComponent = () => {.... return( )} const ChallengeInfo = ({ index, title, content }: IndexTitleContentProps) => { return ( {title} {content} ); }; 대충 요런 구조였다. 원래는 아무리해도 content의 내용에 줄바꿈이 적용이 안됐는데 이렇게 style={{ whiteSpace: "pre-line" }} 을 해주니까 content의 \n이 잘 작동했다. [CSS] position: fixed일 때 상하스크롤이 안되는 문제 해결 const Supply = () => { return ( ... ); }; const Container = styled.div` position: fixed; top: 72%; left: 50%; transform: translate(-50%, -50%); height: 100%; `; port default Supply; Next.js로 만든 Supply 페이지 코드의 일부이다. 여기서 페이지가 상하스크롤이 안되는 문제가 있었다. 상하스크롤이 작동하지 않는 이유: Supply 컴포넌트의 Container가 position: fixed 로 설정되어 있기 때문. position: fixed는 화면에 고정된 위치에 요소를 배치하는 것을 의미함. 요소의 위치는 뷰 포트에 상대적임. 따라서 컨테이너의 높이가 1.. [HTML/CSS] 220318 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. 가상클래스(Pseudo Class),가상 요소(Pseudo Element)에 대해 알아보자. 1. 슈도 코드(pseudocode) 프로그램을 작성할 때 각 모듈이 작동하는 논리를 표현하기 위해 사용하는 언어. 다른 프로그램 개발자나 이용자에게 모듈이 하는 일과 작동원리를 설명하는 데에 쓴다. 2. :hover 가상 클래스 가상 클래스(pseudo class)를 이용하면 요소의 상태에 따른 스타일 지정이 가능. :hover : 마우스가 위에 있을 때 적용. Click Here This is a normal div. This is a normal div에 마우스를 올려놓으면 요로케 바뀜.. [HTML/CSS] 220317 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. 이제 CSS에 대해서 알아보자. 1. CSS: 웹의 전반적인 스타일을 미리 저장해 둔 스타일시트 2. 인라인 스타일(In-line Style) 속성 Heading 1 Heading 2 -거의 대부분의 HTML 태그에 사용할 수 있는 속성 -화면에 보여지는 visual한 상세 설정이 가능함. 웹페이지에는 다음과 같이 표시됨. 더보기 Heading 1 Heading 2 3. CSS -Cascading Style Sheet의 약자 -cascade: 폭포 - 즉 계단식 폭포와 같이 상위요소-> 하위요소로 차례로 스타일 적용 4. 페이지 스타일 Page style Heading 1 Headi.. [HTML/CSS] 230316 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. Form에 대해서 더 알아보자. 1. 자유 텍스트 입력 Textarea Please introduce yourself here - 사용자의 자유로운 텍스트 입력 - rows, cols 속성으로 크기 조절 가능 - 와 사이의 글자가 textarea 안에 표시된다. 웹페이지에는 다음과 같이 표시된다. 더보기 Please introduce yourself here Please introduce yourself here이 textarea 안에 들어있고 이 글자들은 커서를 textarea 안에 갖다 대도 사라지지 않는다. 자기소개를 하려면 저 글자들을 지우고 써주면 된다. 2. 파일 선택 F.. [HTML/CSS]220314 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. 이미지를 다뤄보자. 1. 이미지 주소를 복사해 HTML에 가지고 오면 내 서버가 아니라 다른 서버에서 이미지를 가져올 수 있다. 2. 이미지 Image 원본 width만 지정 height만 지정 -태그는 -src 속성에 이미지 파일의 URL을 지정, 종료태그 없음. 여기서 src는 source의 약자 -width = "xx", height="xx"로 크기를 픽셀(pixel) 단위로 지정 가능 -width, height를 지정해주지 않으면 원본 크기로 -width 속성이나 height 속성 둘 중 하나만 지정하게 되면, 나머지는 원본 크기 비율에 따라 자동 조절됨. -웹 페이지에는 다.. [HTML/CSS] 220313 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. 링크에 대해 알아보자. 1. 앵커 Anchor Visit Google -태그는 , -href 속성을 이용할 때 URL 주소를 사용하여 다른 리소스로 연결 -href는 hyper reference의 약어, URL은 Uniform Resource Locator 의 약어. -href는 내부적으로 클릭했을 때 나오는 사이트. -실제로 사용자 눈에 보이는 것은 와 태그 사이에 있는 것. -웹 페이지에는 다음과 같이 표시된다. 더보기 Visit Google Visit Google이라는 파란색 글씨를 눌러보면 이렇게 구글이 나온다. 2. URL에 대해 더 자세히 알아보자. https://www... [HTML/CSS] 230312 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. HTML은 정말 처음 배워본다. 화이팅하자. 1. 인터넷은 TCP/IP 프로토콜을 이용. 인터넷에서는 사용 목적에 따라 다양한 프로토콜을 이용. 웹은 HTTP 프로토콜 이용. 이메일은 SMTP 같은 프로토콜을 이용. 파일 송수신 서비스에는 FTP 전용 프로토콜을 이용 2. 우리가 웹브라우저의 주소창에 www.google.com을 입력하면 내부적으로 어떤 프로토콜이 www.google.com을 ip주소와 변환해줌. 그러면 이제 어떤 서버에 접속하게 됨. 이 서버가 웹서버. 이 웹서버가 우리가 접속한 결과로서 우리가 보는 화면을 띄워줌. 웹은 웹 브라우저로 웹 서버에 저복하고 결과로 H.. 이전 1 다음
