odada

퍼블리싱(Publishing) HTML과 CSS를 사용하여 디자인된 웹사이트의 구조와 스타일을 구현하는 과정 HTML5와 CSS3를 공부해면 무엇을 할 수 있을까? 웹 사이트를 만들 수 있다. 최신 웹 표준에 맞는 웹 사이트 제작 (반응형 디자인) 가능하다. HTML5의 API를 사용해 ‘웹앱’을 만들 수도 있다. 카페24, 고도몰, 워드프레스, 그누보드 등을 사용해 웹 사이트, 블로그 소스를 이해할 수 있고 사이트를 원하는 모습으로 바꿀 수 있다. HTML 웹 페이지의 구조를 정의하는 언어 https://www.w3schools.com/html/default.asp 웹 페이지의 기본적인 뼈대를 만들며, 텍스트, 이미지, 링크 등의 콘텐츠를 웹에서 어떻게 표시할지 정의합니다. 태그(tag) 기반으로 되어..

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

텍스트 관련 태그 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 태그 태그 문단을 나타내는 태그 문단입니다. 태그 줄바꿈을 나타내는 태그로 단일 태그 문단입니다. 문단입니다. 태그 인용문을 나타내는 태그로 다른 텍스트보다 들여쓰기가 되어있음 인용문입니다. 태그 수평선을 나타내는 태그로 단일 태그 태그 소스에 작성한 그대로 표현하는 태그 미리 서식을 지정한 텍스트입니다. 미리 서식을 지정한 텍스트..

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

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

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 로 설정..

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

API 통신1. API란?API는 application programming interface의 약자로, 프로그램과 프로그램 사이의 통신을 위한 규약이다.API는 서버와 클라이언트 사이에서 데이터를 주고 받는 방식을 의미한다.- 비동기 처리비동기 기본 : https://odada.me/337비동기 예제 : https://odada.me/309async/await를 사용한 코드async function fetchData() { // API 요청을 보내는 함수 (async : 비동기 함수) try { // try 블록 안에서 예외가 발생하면 catch 블록이 실행된다. const response = await fetch('https://API.example.com/data'); // fetch..

Automator 열기 현재 수신하는 작업흐름 : 파일 또는 폴더 선택 항목 위치 : Finder 이미지 : 동작 셀 스크립트 실행 셀 : /bin/zsh 통과 입력 : 변수 open -na "IntelliJ IDEA CE.app" --args "$@" open -na "IntelliJ IDEA.app" --args "$@" open -n -b "com.microsoft.VSCode" --args "$*" 환경설정 > 키보드 단축키 > 앱 단축키 > Finder 에 추가

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..