Fresh life: 신선한 인생

streamlit 라이브러리에 html&css코드 적용시키기 1. 쌍따옴표 3개 안에 원하는 html&css코드를 넣어준 뒤, [html_css]라고 정의해준다. 2. streamlit의 markdown 함수로 [html_css]를 실행한다. html_css = """ Header 1 Header 2 Header 3 Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 4, Cell 1 Row 4, Cell 2 Row 4, Cell 3 """ st.markdown(html_css)

HTML 삽입 미리보기할 수 없는 소스 사용방법: - 반경 생성 : 원하는 반경(km) 버튼을 클릭한 후 원하는 곳을 클릭한다. - 원 삭제 : 지우고 싶은 원을 우클릭한다. - 모두 삭제: clear all 클릭한다.

아래 이미지처럼 동일한 폴더에 있는 파일을 import 할 때는 ./를 입력하고 파일명.js를 해주면 됩니다. import age from './data.js' 만약에 같은 폴더가 아닌 상위 폴더 즉 cart의 상위 폴더인 app폴더에 있는 파일을 import 하려면 어떻게 해야 할까요? ../ 를 입력하고 파일명.js를 해주면 됩니다. import age from '../data.js' 아주 쉽죠?! 아래처럼 같은 폴더에 data.js 파일을 생성하고 let age = 20; export default age 변수를 지정해주고, 내보내줍니다. 그리고 기존 page.js 파일에서 import age from './data.js' age 변수를 임포트 한 뒤에 변수를 {}에 넣어주면 끝입니다. 그러면 아래..

component에 앞서 우선 기존 프로젝트에 [cart]폴더를 새로 생성해줍니다. 그리고 page.js라는 이름의 파일을 생성 합니다. 더보기 /cart 페이지 레이아웃 export default function Cart() { return ( Cart 상품명 $40 1개 상품명 $40 1개 ) } 더보기 global.css .cart-item { padding: 10px; display: flex; justify-content: space-around; border-bottom: 1px solid grey; line-height: 0px; } 그리고 위 두 코드를 추가해줍니다. 다시 한 번 설명하자면 첫번째는 페이지를 생성하는 코드이고, global.css코드는 페이지를 꾸미는 코드입니다. css코드..

Next.js와 Node.js는 모두 JavaScript로 만들어진 웹 개발 프레임워크와 런타임입니다. 하지만 둘은 목적과 사용 방법이 다릅니다. Node.js: JavaScript 런타임 환경입니다. 브라우저 밖에서 JavaScript 코드를 실행할 수 있도록 합니다. 서버사이드 렌더링(SSR)을 구현할 수 있도록 해주며, 데이터베이스, 파일 시스템 등의 I/O 작업을 처리할 수 있는 기능이 있습니다. 주로 서버 사이드 애플리케이션 개발에 사용됩니다. node js 기초 문법 강의 node js 기초 문법 강의&필수 모듈(ex:express) 이용 방법 안녕하세요! 조신선입니다. 오늘은 Node.js에 대해서 알아보도록 하겠습니다. node.js의 기초 개념과 문법 그리고 이를 사용하기 위해 대부분 사..

nextjs 포스팅 프로젝트는 처음부터 계속 동일할 예정입니다. 이미지는 링크를 넣을 수도 있지만, 링크의 이미지는 해당 링크에서 제공하는 이미지가 삭제되면 내 페이지의 이미지도 삭제되기 때문에, 따로 이미지를 받아서 넣는 방법을 채택했습니다. 1. public 폴더안에 내가 원하는 이미지를 추가합니다. 이미지 파일은 반복문으로 사용할 수 있게 동일한 파일명 + 숫자로 저장해 줍니다. ex) food0.jpg food1.jpg 무료 이미지는 아래 페이지에서 다운받을 수 있습니다. https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash 어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니..

export default function List() { let 상품 = ['tomatoes','pasta','coconut'] return ( 상품목록 {상품[0]} $40 {상품[1]} $50 {상품[2]} $50 ) } 위 코드는 List 컴포넌트를 정의하고, 해당 컴포넌트 내부에서 let 상품 = ['tomatoes','pasta','coconut'] 문장을 통해 상품 리스트를 배열로 선언합니다. 이후 JSX 코드 내부에서 상품 리스트를 출력하기 위해 map 함수를 사용하는 대신, 각각의 상품을 배열의 인덱스를 이용하여 출력합니다. 이 때, {상품[0]} $40, {상품[1]} $50, {상품[2]} $50과 같이 상품의 이름과 가격을 하드코딩하여 출력합니다. 이 방식은 상품 리스트가 변경되거나..

안녕하세요! 조신선입니다. 오늘은 일전에 포스팅했던 '오늘의 운세보기' 웹페이지 개발 코드 공유를 드리도록 하겠습니다. 유투버 조코딩님 교육자료를 보고 배워서 따라 만든 코드인데, 제가 css를 조금 더 변경했습니다. 초보자분들은 사실 이 코드만 보면 바로 이해가 안 되시겠지만, 저도 보고 배운거라 교육자료를 따로 올리기 보다는 코드만 공유하는 쪽으로 방향을 정했습니다. 아직 광고 승인은 안 났지만, 구글애드센스 신청을 해놓은 상태입니다. 완성코드에 보면 위와 같은 광고 애드센스 코드가 추가되어 있습니다. 우선 프론트엔드 코드 먼저 공유드릴께요. 코드 실행 화면 HTML 삽입 미리보기할 수 없는 소스 아래 코드를 실행하면 첫번째 페이지에 아래 이미지와 같은 웹페이지가 노출됩니다. 그리고 생년월일과 태어난..

안녕하세요. 조신선입니다. 오늘은 HTML 기초 문법에 대한 포스팅을 하도록 하겠습니다. HTML (Hypertext Markup Language)은 웹 페이지의 구조와 내용을 정의하는 마크업 언어입니다. HTML은 웹 브라우저에게 어떤 내용을 표시하고 어떻게 구조화할지를 알려줍니다. 아래는 HTML의 기초적인 문법을 설명해드리겠습니다. 1. 태그 (Tags): HTML은 태그를 사용하여 요소를 정의합니다. 예를 들어, 태그는 단락을 정의하고, 태그는 제목을 정의합니다. 이것은 단락입니다. 이것은 제목입니다. 2. 속성 (Attributes): 태그에는 속성을 추가하여 추가적인 정보를 제공할 수 있습니다. 예를 들어, 태그에는 src 속성을 사용하여 이미지의 파일 경로를 지정합니다. 이곳을 클릭하세요 3..