반응형

전체 글 238

이미지와 하이퍼링크 - html 배우기

이미지와 하이퍼링크 이미지 https://www.w3schools.com/html/html_images.asp 이미지를 삽입하는 태그는 태그이다. 이미지 경로 이미지 경로는 이미지가 저장된 위치를 의미한다. 절대 경로 절대 경로는 이미지가 저장된 위치를 표시하는 경로이다. 절대 경로는 http:// 또는 https://로 시작한다. 상대 경로 상대 경로는 현재 파일이 저장된 위치를 기준으로 이미지가 저장된 위치를 표시하는 경로이다. 하위 폴더 경로 ./는 현재 파일이 저장된 위치를 의미한다. 폴더 구조 root ├── index.html ├── banner1.jpg └── images └── banner2.jpg └── main └── banner3.jpg 상위 폴더 경로 ../는 현재 파일이 저장된 위..

Publishing/HTML 2023.11.18

텍스트 관련 태그 - html 배우기

텍스트 관련 태그 Headings https://www.w3schools.com/html/html_headings.asp 제목을 나타내는 태그 크기 : h1 > h2 > h3 > h4 > h5 > h6 제목1 제목2 제목3 제목4 제목5 제목6 Paragraphs (단락) https://www.w3schools.com/html/html_paragraphs.asp - block 태그 태그 문단을 나타내는 태그 문단입니다. 태그 줄바꿈을 나타내는 태그로 단일 태그 문단입니다. 문단입니다. 태그 인용문을 나타내는 태그로 다른 텍스트보다 들여쓰기가 되어있음 인용문입니다. 태그 수평선을 나타내는 태그로 단일 태그 태그 소스에 작성한 그대로 표현하는 태그 미리 서식을 지정한 텍스트입니다. 미리 서식을 지정한 텍스트..

Publishing/HTML 2023.11.18

html 시작, 기본 구조, head 설정하기 - html 배우기

html 시작하기 네이버 서치어드바이저 : https://searchadvisor.naver.com/guide/markup-content html 기본 구조 HTML 기본 구조 HTML 기본 구조를 알아봅시다. head 태그 - 검색 엔진 최적화, 페이지 정보 문자 인코딩 meta charset="utf-8" 한글을 사용하기 위해서는 반드시 필요한 설정 utf-8은 한글 외에도 다양한 언어를 지원하는 문자 인코딩 방식 title 태그 - 문서의 제목 사이트 메인 페이지의 title 태그는 사이트의 성격을 잘 표현할 수 있는 브랜드명으로 기입해야 한다. 페이지 제목 작성 TIP 사이트 메인 페이지의 title 태그는 사이트의 성격을 잘 표현할 수 있는 브랜드명으로 기입해야 합니다. 사이트의 개설 목적에 맞..

Publishing/HTML 2023.11.18

UI/UX 디자인 & 프론트앤드 배우기

우리가 배울 것들 HTML 웹 페이지의 구조를 정의하는 언어 https://www.w3schools.com/html/default.asp 웹 페이지의 기본적인 뼈대를 만들며, 텍스트, 이미지, 링크 등의 콘텐츠를 웹에서 어떻게 표시할지 정의합니다. 태그(tag) 기반으로 되어 있으며, , HTML 기본 문서 HTML은 웹 문서를 만드는 언어입니다. CSS 란? 웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어 https://www.w3schools.com/css/default.asp HTML 요소의 색상, 폰트, 간격, 크기 등을 설정하여 사용자에게 보여지는 페이지의 시각적인 면을 꾸밉니다. 클래스, ID, 태그 등 다양한 선택자(selector)를 사용하여 특정 HTML 요소를 대상으로 스타일..

카테고리 없음 2023.11.17

vscode 설치하고 github 사용하기

Visual Studio Code 란? MS에서 제공하는 크로스 플랫폼 에디터로 다양한 언어를 서포트 하며, IntelliSense와 Git 기능, 그리고 Extension 을 이용한 확장 기능을 제공하고 있는 IDE 이다. - Visual Studio Code 설치하기 Visual Studio Code 사이트에서 다운로드 받아 설치한다. 설치 시 아래와 같은 페이지에서 기타에 모두 체크한다. - Visual Studio Code 기본 설정 왼쪽 하단 설정 아이콘을 클릭한다. Auto Save 를 onFocusChange 로 설정한다. Font 를 D2Coding 으로 설정한다. Font Size 를 14 로 설정한다. Font Ligatures 를 true 로 설정한다. Tab Size 를 2 로 설정..

TOOL/VSCode 2023.11.17

GitHub 가입, 설치, 업로드하기

1. Git 이란? https://github.com/ GitHub는 버전 제어 및 협업을 위한 코드 호스팅 플랫폼입니다. 그것은 당신과 다른 사람들이 어디서나 프로젝트에 협력 할 수 있습니다. 이 튜토리얼에서는 리포지토리 , 브랜치 , 커밋 및 풀 요청 과 같은 GitHub 필수 사항에 대해 설명 합니다 . 자신 만의 Hello World 리포지토리를 만들고 코드를 만들고 검토하는 일반적인 방법 인 GitHub의 풀 요청 워크 플로를 배우게됩니다. 2. Git 저장소의 간단 구조 1. Git 사이트 회원 가입 후 리포지토리 생성하기 아래 사이트에서 회원가입을 해주세요~ https://github.com/ Build software better, together GitHub is where people ..

TOOL/Github 2023.11.16

API 기본 예제 - react 배우기

axios 라이브러리를 사용한 api 통신 1. api란? api는 application programming interface의 약자로, 프로그램과 프로그램 사이의 통신을 위한 규약이다. api는 서버와 클라이언트 사이에서 데이터를 주고 받는 방식을 의미한다. 2. axios 라이브러리를 사용한 api 통신 axios는 API 요청을 보내는 라이브러리 Axios는 JavaScript에서 사용되는 유명한 HTTP 클라이언트 라이브러리로 웹 브라우저와 Node.js 환경에서 사용될 수 있으며, HTTP 요청을 보내고 받는 기능을 제공합니다. Axios는 Promise 기반의 API를 사용하여 비동기 HTTP 요청을 간편하게 처리할 수 있게 해줍니다. - Axios 설치 npm install axios ya..

Front/React 2023.11.16

React GitHub 배포, Netlify 배포

react build 후 배포하기 1. build 웹브라우저는 html, css, javascript만 이해할 수 있다. react는 jsx로 작성되어 있기 때문에 브라우저가 이해할 수 없다. build란 개발자가 작성한 코드를 브라우저가 이해할 수 있는 번역된 코드로 변환하는 것을 말한다. $ npm run build $ yarn build 2. gh-pages 설치 gh-pages는 GitHub에서 제공하는 호스팅 서비스로 GitHub 저장소에 정적 파일을 업로드하여 배포할 수 있다. $ npm install gh-pages $ yarn add gh-pages package.json 파일 수정 { "homepage": "https://[사용자 이름].github.io/[저장소 이름]", // "hom..

Front/React 2023.11.13
반응형
티스토리 친구하기