나다이_꾸준히걷기

Codepen.io 소개 https://codepen.io CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io : 기본적인 내용 테스트 하기 좋음 : 테스트는 가입안해도 됨 : 저장하려면 가입해야함

VS Code 모든 파일 공백 크기 설정 매번 파일 생성할 때마다 공백 크기가 4로 설정이 된다. 생성할 때 공백 크기가 2로 설정되도록 하기 위해서는? 설정을 실행후 모든명령표시에서 설정 검색 Ctrl + Shitf + P 윈도우 Cmd + Shift + P 맥 또는 좌측 하단 톱니바퀴 모양 누르고 설정 클릭 2로 변경해주고 새로 만들기 하면 공백이 2로 모두 생성된다.

페이지 나누고 연결(링크)하기 태그 NAVER 네이버 : 태그 내부에 있는 글자에 href의 링크로 이동하도록 버튼이 생성됨 : 경로 '/' 앞에는 접근 가능한 기본 주소가 생략되어있다 About : 루트 폴더 아래의 about폴더 안에 about.html 파일이 존재하면 해당 링크로 이동 가능하다 : http://127.0.0.1:5500/about/about.html : 브라우저는 해당 경로가 폴더까지만 지정되었을 경우, index.html을 자동으로 찾아서 띄워주게된다. 예) About About2 : 두 사례 모두 같은 about 폴더 내의 index.html 화면을 보여주게 된다. Home : 루트 경로에 있는 index.html로 이동하게 된다. ※ 주소의 about이 항상 폴더라고 단정할 수..

상대 경로 그리고 절대 경로 ./ (생략 가능) : 현재 폴더(주변에서 찾기) ../ : 상위 폴더 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에서 브라우저에 출력하기 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 태그를 변경할때 유용한 기능.