채아의 코딩 노트

React를 실행 하기 전 먼저 node.js를 설치합니다.https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  다운로드를 받은 후 명령 프롬포트를 실행시켜 줍니다. 명령 프롬포트를 열고 나서 속성에 들어가서 글꼴 크기 및 클꼴을 설정합니다.그 후 명령프롬포트에서 하단 영역들을 작성해 줍니다. dir : 화면 목록을 확인 후 cd Desktop : 배경화면폴더로 이동mkdir 파일명 : 폴더를 생성cd 파일명 : 폴더로 이동npx create-react-app . : 리액트 앱 설치영역을 작성해줍니다. 그 ..

scss 기본 설정에 관해 포스팅하겠습니다. 먼저, vscode의 확장에 들어가서 "Live Sass Compiler"를 작성 후 설치 합니다. Live Sass Compiler를 설치 후 기본으로 세팅을 진행합니다.톱니바퀴를 눌러 설정에 들어갑니다.맨 상단에 있는 Live Sass Compile > Settings: Auto Prefix에 있는 settings.json에서 편집을 들어갑니다.settings.json에서 상단 내용을 입력하여 줍니다.상단에 작성된 내용에 대한 세팅 설명은 하단 이미지를 참고 바랍니다. 세팅 후 scss에서 스타일을 작성하면 css파일이 자동으로 생성된다. 이후 수정을 할때 css에서 작성하여 저장을 하면 브라우저 화면에서 변경된 걸 확인 할 수 있지만, scss에서 다시 ..

폼이란 아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소입니다. • 폼을 만드는 태그- 폼을 만드는 가장 기본적인 태그로 과 태그 사이에 여러가지 폼 요소를 넣습니다.- 태그는 몇 가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지를 지정합니다.기본형여러 폼 요소종류설명method사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정합니다.method에서 사용할 수 있는 속성값은 get과 post입니다.name자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정합니다.action태그 안의 내용을 처리해 줄 서버 프로그램을 지정합니다.targetaction속성을 ..

• 링크를 삽입하는 태그와  href속성- 링크는 태그로 만드는데 이때 텍스트를 사용하면 텍스트 링크가 되고 이미지를 사용하면 이미지 링크가 됩니다.- 태그의 기본형은 다음과 같이 href속성을 이용해 연결할 파일이나 링크할 주소를 니다.기본형텍스트 또는 이미지 • 텍스트 링크- 텍스트 링크는 와 태그 사이에 링크로 만들 텍스트를 입력하고, href속성에는 텍스트를 클릭했을 떄 연결할 문서의 경로와 파일명을 넣으면 됩니다. • 이미지 링크- 텍스트 링크를 만드는 것과 같은 방법으로 태그를 사용해 이미지에 링크를 추가할 수 있습니다.- 와 태그 사이에 태그를 넣으면 링크가 있는 이미지를 만들 수 있습니다. • 링크를 새 탭에서 열어 주는 target속성- 링크를 클릭하면 현재 열려 있는 웹 브라우저 창에서..

• 다양한 멀티미디어 파일을 삽입하는 , 태그- 태그는오디오 파일뿐만 아니라 비디오, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용합니다.- 웹 문서 안에 다른 문서를 삽입할 때도 사용할 수 있습니다.기본형/object>- data 속성에 보여줄 파일을 지정하고 width, height 속성을 사용해 플레이어의 크기를 지정합니다.- 태그를 사용하여 웹 문서에 PDF파일을 삽입하면 PDF 리더가 자동으로 포함되어 보여줍니다.- 태그는 HTML 초기 버전부터 사용해 왔으므로 오래된 브라우저까지 고려할 때 사용하기 좋습니다.- 태그는 src속성을 사용해 삽입할 멀티미디어 파일을 지정합니다. 태그는 닫는 태그가 없습니다.기본형- 태그는 오디오, 비디오, 이미지 등 다양한 멀티미디어 파일을 삽입할 수 있습니..

• 이미지를 삽입하는 태그- 태그에서 알아야 할 속성은 src와 alt속성입니다.- src속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려주는 역할을 하며 반드시 있어야 합니다.- alt속성은 회면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력합니다.기본형 • 이미지 파일 경로를 나타내는 src속성- 이미지나 음악, 동영상 파일 등 웹 문서에 삽입할 때는 경로를 주의해야 합니다.- 경로란 현재 HTML 문서에서 이미지 파일이 있는 곳까지 어떻게 찾아가야 하는지 알려줍니다.- 이미지 파일의 경로를 정확하게 입력하지 않으면 이미지가 화면에 나타나지 않습니다.- 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해집니다.                     Tip 사이트에서 사용하는 이미..

• 순서를 만드는 , 태그- 순서 목록(ordered list)이란 말 그대로 각 항목을 순서대로 나열한 것입니다.- 순서 목록은과 태그를 사용하여 만듭니다. ol은 ordered list의 줄임말이고, li는 list의 줄임말입니다.- 과 태그를 두고, 그 사이에와 태그를 삽입합니다.기본형 항목1 항목2 • 순서 없는 목록을 만드는 , 태그- 순서 없는 목록(unordered list)은 항목의 순서가 중요하지 않을 때 사용합니다.- 순서 없는 목록은과 태그를 사용하여 만듭니다. ul은  unordered list 의 줄임말이고, li는 list의 줄임말입니다. - 과 태그를 두고, 그 사이에와 태그를 삽입합니다. - 순서 없는 목록은 항목 앞에 작은 원이나 사각형을 붙여서 구분하는데, 이런 작은 ..

• 제목을 나타내는 태그- 웹문서에서 제목은 다른 텍스트보다 크고 진하게 표시합니다.- 자주 사용하는 제목 스타일을 미리 태그 형태로 만든 것이 바로 태그 입니다.- 태그에서 h는 제목을 뜻하는 heading을 줄인 말입니다.- n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있습니다.- 이 가장 큰 제목이고 , , , , 의 순서대로 크기가 작아집니다.기본형제목   • 텍스트 단락을 만드는 태그, 줄을 바꾸는 태그 - 텍스트를 적절하게 단락으로 묶어서 표시하려면 태그를 사용합니다.- 태그와 태그 안에 입력한 내용이 너무 길어서 브라우저 창에 한 줄로 표시할 수 없을 경우 자동으로 줄이 바뀝니다.- 원하는 위치에서 줄을 바꿔서 표시할 때는 태그를 사용합니다.Tip 1. p는 pa..

HTML 태그를 시작하기 전에HTML 태그는 웹 문서에 보여 줄 내용을 전달하는 언어이므로 정확하게 사용해야 합니다. HTML 태그는• 대문자로 표시해도 오류가 생기지는 않지만 HTML 최신 버전에서는 소문자로 작성할 것을 권장하고 있습니다.• 나 처럼 닫는 태그가 없는 것도 있지만 대부분 태그는 여는 태그와 받는 태그가 한 쌍으로 이루어져 있어, 브라우저는 여는 태그에서 닫는 태그까지를 태그의 적용범위로 인식하기에 여는 태그와 닫는 태그를 정확히 입력합니다.• 코드에 공백이 여러 칸 있어도 한 칸으로 인식되기에 적당하게 들여쓰기를 합니다.• 태그에 여러 기능을 추가하는 속성과 함께 사용할 수 있습니다. 즉, 형태로  일부태그는 속성과 함께 사용합니다.웹 문서의 구조를 만드는 시맨틱 태그HTML태그는 이..

HTML이란? HTML은 Hyper Text Markup Language의 줄임말로 간단하게 말하면 웹 문서를 만드는 언어입니다.하이퍼텍스트(HyperText)란 문서를 서로 연결해주는 링크, 마크업(Markup)이란 표시한다는 의미로 웹브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 의미합니다.  HTML의 기본 구조  : 현재 문서가 HTML  언어로 작성한 웹 문서라는 뜻 ~ : 웹 문서의 시작과 끝을 나타내는 태그                                 (웹 브라우저가 태그를 만나면 까지 코드를 읽어 화면에 표시함): 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분 ~ : 실제로 웹 브라우저 화면에 나타나는 내용  • 웹 문서의 유형..