나다이_꾸준히걷기

상대 경로 그리고 절대 경로 ./ (생략 가능) : 현재 폴더(주변에서 찾기) ../ : 상위 폴더 http (https) : 완성된 주소 / (//) : 최상위 경로(root) 예) http://localhost:5500 (단, 뒤의 포트번호는 변경 가능하고 포트번호마다 다른 프로젝트 일 수 있음) 의 파일 및 폴더 구조 : project - images - logo.png - css - main.css - index.html 경로 index.html에서 나타내는 logo.png의 경로 상대 경로 : ./images/logo.png 또는 images/logo.png 절대 경로 : /images/logo.png 또는 https://sample.Website.Address/images/logo.png ma..

화면에 이미지 출력 태그 src: 표시 할 이미지의 경로 alt: (Alternate) 이미지 출력 안될 경우의 대체 텍스트 로고 출처: 패스트 캠퍼스 온라인강의 프론트엔드 개발 초격차 패키지 & https://heropy.blog/ HEROPY 웹디자인과 웹개발 기술을 공유하는 HEROPY 온라인 블로그입니다. 오프라인 지식 공유도 매회 진행합니다. 감사합니다. heropy.blog 웹상의 경로를 이용하여도 다음과 같이 이미지 출력이 가능함

정보를 의미하는 태그들 태그 : 스타일(CSS)를 HTML 문서 안에서 작성하는 경우에 사용 다음과 같은 결과를 얻을 수 있다. 태그 : HTML 문서의 제목(title)을 정의 브라우저의 메인 제목 표시줄에 다음과 같이 표기된다. 태그 : 외부 문서를 가져와 연결할 떄 사용.(대부분 CSS 파일) rel: 가져올 문서와 관계 (필수속성) href: 가져올 문서의 경로 태그 : 자바스크립트(JS) 파일 가져오는 경우 console.log('Hello MAKZUIN!!') : 자바스크립트(JS)를 HTML 문서 안에서 작성하는 경우 태그 : HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은, 여러 정보를 검색엔진이나 브러우저에 제공한다. initial-scale=1.0 : 기본 크기는 1.0 배수로 ..

CSS, JS 연결 : ~.html 이라는 파일이 어떤 내용을 가져와서 사용할 것인지 또한 정보이다. : 그렇다면? 정보는 태그 안에 명시된다. 태그 : link태그가 head 태그 안에 작성되어 main.css의 내용을 index.html이 사용한다 태그 : script태그가 head 태그 안에 작성되어 main.js의 내용을 index.html이 사용한다. : 지금과 같은 경우엔 크롬브라우저에서 F12를 누르면 나오는 개발자도구의 Console 창에서 'MAKZUIN!' 글자를 확인 가능하다. lang(language) : 지정할 문서의 언어(ISO 639-1)를 명시하는 HTML속성 : 지정 가능한 언어목록 링크 https://ko.wikipedia.org/wiki/ISO_639-1_코드_목록 IS..

Doctype(DTD), HTML, HEAD, BODY DOCTYPE html> : 문서(페이지)의 HTML 버전을 지정 : DOCTYPE(Document Type Definition) 마크업 언어에서 문서 형식을 정의 : 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려준다 : HTML1~4, XHTML, HTML5(표준) : html 시작태그 : head 시작 태그 : head 종료 태그 : body 시작 태그 : body 종료태그 : html 종료태그 html 태그 : 문서의 '전체' 범위 HTML문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할 head 태그 : 문서의 '정보'를 나타내는 범위 웹 브라우저가 해석해야할 웹 페이지의 제목,설명, 사용할 파일 ..

VS Code 의 단축키와 공백 2로 만들기 -사이드바 열기 or 닫기 Ctrl + B 윈도우 Cmd + B 맥 -이름으로 파일 검색(파일이나 기호 탐색) Ctrl + P 윈도우 Cmd + P 맥 - 현재 탭 닫기 Ctrl + W 윈도우 Cmd + W 맥 - 찾기 Ctrl + F 윈도우 Cmd + F 맥 화살표 키를 누르면 - 찾기/바꾸기(대체) Ctrl + H 윈도우 Cmd + Alt(Opt) + F 맥 - 줄 위로 이동 Alt + UpArrow(윗화살표) 윈도우 Alt(Opt) + UpArrow(윗화살표) 맥 - 줄 아래로 이동 Alt + DownArrow(아래화살표) 윈도우 Alt(Opt) + DownArrow(아래화살표) 맥 - 위에 줄 복사 Alt + Shift + UpArrow(윗화살표) 윈도..

VS Code에서 브라우저에 출력하기 Live Server VS Code의 확장 기능중 하나인 Live Server. Live Server를 설치하고 .html 파일에서 우측 버튼을 눌러 Open with Live Server 버튼을 클릭하면 실행 가능하다. (※html 파일이 아닌 경우엔 동작하지 않으니 확인!!) 버튼 클릭 후 자동으로 브라우저가 실행되며, 태그 안에 작성한 내용들이 화면에 보이게 된다.

VS Code 에서 태그 이름 한 번에 변경하는 추가 기능 Auto Rename Tag 좌측 사이드바의 확장에서 Auto Rename Tag를 설치하고 이용한다. Auto Rename Tag를 설치하여 사용하면 VS Code에서 앞 혹은 뒤의 태그를 변경할떄 짝꿍 태그도 동시에 같이 변경이 된다. html 태그를 변경할때 유용한 기능.

VS Code에 설정해 놓은 정리된 코드 만들기 Beautify 사이드바의 확장에서 Beautify 검색하면 나온다. 설치 후 단축키를 Ctrl + Alt + l(알파벳 소문자 엘) 설정하고 입력하면 코드 자동 정리 실행