나다이_꾸준히걷기

Emmet : VS Code의 고유한 기능은 아님 : 간단하게 tag이름만 명시해도, 요소를 자동으로 완성해줌 : 동일하게 codepen.io 에서도 사용 가능 html 에서 div + tab : div.MAKZUIN + tab : img + tab : div>ul>li*4{$} : 1 2 3 4 이하생략... css 에서 w:200 + tab : width: 200px; bc:orange + tab : background-color: orange; 이하생략... 더 자세한 내용은 css 선택자 할떄!

브라우저 스타일 초기화 reset.css cdn 다음과 같이 css 파일을 적용한 후 그런데 내가 설정하지 않은 margin이 들어가있다? 브라우저마다 다른 설정값을 가지고 있을수 있고, 이는 사용자가 보기에도, 브라우저마다 개발 의도와는 다른 화면을 보여주게 될 수도 있다. 크로스브라우징 이슈 방지를 위해 브라우저 스타일 초기화 하는 방법을 살펴보자. reset.css cdn 검색 : 브라우저의 스타일을 초기화하는 css 위처럼 검색해서 reset.css min의 html양식 주소를 복사하여 index.html의 head태그 내부에 추가해준다. 적용되면 다음과 같이 기본적으로 적용된 margin이 사라진 것을 확인할 수 있다. 그렇다면 codepen.io에서는 이를 어떻게 적용할까? css 설정부분에서..

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 : 기본적인 내용 테스트 하기 좋음 : 테스트는 가입안해도 됨 : 저장하려면 가입해야함

개발자 도구 사용하기 구글크롬 실행: F12 버튼 누르기 : html 구조와 css 구조를 분석할 수 있음 : javascript는 디테일한 분석까지는 쉽지 않음 : Elements에서 Styles 로 css가 적용된 내용들을 볼 수 있음 : Computed에서 실제로 적용된 목록으로도 내용을 볼 수 있음

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