본문 바로가기
728x90
반응형

전체 글136

Netlify 웹배포 웹배포를 도와주는 클라우드 서비스 간단한 프로젝트는 무료로 사용 가능 https://www.netlify.com/ Develop and deploy websites and apps in record time | Netlify Accelerate the time to deploy your websites and apps. Bring your integrations and APIs together on one powerful serverless platform. Get started for free! www.netlify.com 먼저 작업한 파일을 폴더안에 넣어놓는다 1. 회원가입 및 로그인 2. 회원가입 후 Sites 클릭 작업한 파일을 밑에 이미지처럼 클릭후 폴더를 올려주고 기다려주면~!! 3. 아래 이.. 2023. 9. 5.
2. Figma 기능 I 보호되어 있는 글 입니다. 2023. 9. 4.
1. UI/UX 디자인 tool - Figma 장점 1. 웹을 기반으로 사용 2. 작업하던 링크만 있으면 어디서든 수정가능 3. 웹으로 작업하다보니 작업한 것들이 실시간으로 저장 가능 4. 무료로 사용 가능 피그마 사용 1. 피그마 홈페이지(웹 작업용) https://www.figma.com/ Figma: The Collaborative Interface Design Tool Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform. www.figma.com 2. 피그마 홈페이지(데스크탑 / 모바일 작업용) https:/.. 2023. 9. 4.
[css]css 선택자 css선택자 {속성: 속성값;} ​ 1. 태그 선택자 ex) div {background: red;} ​ 2.아이디선택자 (tagname)#idname ex> #header {font-size:14px;} div#header ​ 3.클래스 선택자 (tagname).classname ex> .large {font-size: 24px;} p.large ​ 4.모든 선택자 * ex> * {padding:0; margin:0;} (*복합 선택자) ​ 5. 하위 선택자 ex> #header li { width:25%;} (선택자 선택자) ​ 6. 자식 선택자 ex> #header > p {width:200px;} (선택자 > 선택자) ​ 7.형제 선택자 1)인접 형제 선택자 선택자 A+선택자B ex) h2 + p.. 2023. 5. 22.
[html]시멘틱 태그 의미있는 요소 장점은 1. 검색 최적화 (seo) 사이트 최적화 (head 태그안에 meta태그 & 시멘틱태그 꼼꼼하게 작성) 네이버에 검색했을 때 상단에 사이트가 검색되게끔하는것 2 웹 접근성(A11y) 스크린리더를 사용하여 시각장애인이 사용할 수 있게 도와줌 장벽없는 인터넷을 만드는데 중요함 1. header html문서의 헤더를 정의하는 요소(로고, 네비게이션바 등등 포함) ex> ​ 2. section html 문서의 sction을 정의하는 요소 section이란 제목이 있으면 html문서의 전체적인 내용과 관련이 있는 콘텐츠의 집합(li처럼 목록으로 묶여있는?) ex) ​ 3.footer html문서의 푸터부분을 정의하는 요소 ex) ​ 4.main html요소의 주요 컨텐츠 부분을 정의하는 요.. 2023. 5. 22.
[css]css속성 css 기본구문 선택자 {속성: 속성값;} ​ 1. 태그선택자 h1 2. 아이디 선택자 #title 3. 클래스 선택자 .left ​ ex) ​ text속성 color 글자색상 색상명 red, green, yellow, 16진수 #000000~#ffffff, 컬러함수 rgb(r, g, b) 0~255, rgba(r, g, b, a) 0~1 font-size 글자 크기 단위: px / 기본 14px line-height 줄높이 20px, 1.6 font-weight 글자 두껍게 normal / bold 100~300 가늘게 400~600 중간 그뒤는 두껍게 letter-spacing 글자와 글자사이 간격 px text-decoration 글자 꾸미기 underline(아래라인) none line-throu.. 2023. 5. 22.
[html]Html 기초 Visual Studio code 다운로드 방법은 구글이나 네이버에 Visual Studio code 후 윈도우용 설치 한글로 변경하는 방법 extensions선택 후 ko검색 맨첫번째꺼 install live sever 플러그인: 수정하거나 작성할시 실시간으로 브라우저에 바로 적용 해주는 가상 서버 ​ display: block p, div, h1~h6, ol, ul, li, dl, dt, dd *한 행을 다 차지함. *너비와 높이를 지정할 수 있음. ​ display: inline-block, inline img, span, input, select, mark, sup, sub, ins, del, a ​ inline: 컨텐츠 크기가 너비가 됨 너비와 높이를 지정할 수 없음 공간이 있으면 가로로 쌓임 .. 2023. 5. 21.
10/11 Html 기초 보호되어 있는 글 입니다. 2023. 5. 21.
github로 웹 배포하기 깃허브로 웹배포하기 그 전에 최종 결과물 깃허브에 올리기!!!!!!!!!!!!! 중요!!!!!!!!!! 터미널에 입력! npm i gh-pages (결과물을 깃허브페이지에 업로드 할 수 있게 해줒는 패키지. html,css,javascript 만든 결과물을 도메인을 가진 웹을 배포해줌) 터미널에 입력(시간 쫌 걸림 20~30초정도?) npm run build 이 스크립트를 실행하면 웹사이트의 production ready code 생성 production ready는 코드가 압축되고 모든게 최적화된다는 의미 실행하면 파일안에 build라는 폴더가 생성됨(안에 우리가 작성한것들이 압축되있음) package.json 파일로 다시 이동!!!! 맨밑에서 위 }(중괄호 위에다가) 입력해줘야함 },----- 여기서.. 2023. 5. 17.
기출변형문제 보호되어 있는 글 입니다. 2023. 3. 25.
스켈레톤 사용법 보호되어 있는 글 입니다. 2023. 3. 23.
[react]react-Heroku 서버 배포하기/vercel 웹 배포하기 HEROKU에 가서 회원가입하기 https://www.heroku.com/home Cloud Application Platform | Heroku Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. www.heroku.com 로그인 후 create new app 클릭 나는 movie-server라고 app을 만들었다 Deploy 클릭 Heroku CL. 클릭해서 다운로드 (설치) https://devcenter.heroku.com/articles/heroku-cli The Heroku CLI | Heroku Dev Center L.. 2023. 3. 7.
728x90
반응형