VS Code에서 .vscode는 현재 프로젝트의 VS Code 설정 정보가 들어 있는 폴더이다.
삭제해도 VS Code로 프로젝트를 켜면 다시 생성되므로 그냥 무시해도 된다.
보통 파일이나 폴더의 이름이 .(마침표)로 시작하면 숨김 전용 파일/폴더이다.
Live Server는 개발을 위해 임시로 로컬(개인의 컴퓨터 환경) 서버를 오픈하는 것이고,
제품(웹사이트 등)은 실제 사용자들이 접근 가능한 호스팅 서버에 업로드해야 한다 !
공백: 4라고 기본 세팅되어 있는 값을 바꾸고 싶으면 우측 하단의 그 부분을 클릭하면 위의 창에 나타나는 공백을 사용한 들여쓰기를 클릭해 들여쓰기시 원하는 칸 수만큼 지정할 수 있다.
설정을 바꾼 뒤 코드를 다시 정리(beautify)하고 싶다면 원하는 부분만큼 지정하여 정리된 코드 만드는 단축키를 누르면 일일이 기존 만들어진 공백 칸 수를 변경하지 않아도 된다.
단축키
VS Code에서 여러 파일 한꺼번에 저장하는 단축키 : ctrl + alt + s
브라우저에서 화면 확대/ 축소하는 단축키 : ctrl + +/ ctrl + -
VS Code에서 사이드바 열고 닫는 단축키 : ctrl + B
파일이나 기호 탐색하기 위해 빠르게 검색창을 여는 단축키 : ctrl + P
에디터의 모든 명령에 접근하게 모든 명령을 표시해주는 단축키 : ctrl + shift + P
현재 원하는 편집기 창을 닫는 단축키 : ctrl + W
파일 내부에서 원하는 내용/단어를 찾기 위해 입력창을 여는 단축키 : ctrl + F
그렇게 찾은 부분을 대체해 바꿀 수 있는 입력창을 여는 단축키 : ctrl + H
태그 안의 내용 안에 커서를 두고 있는 줄 자체를 위/ 아래로 이동하는 단축키 : alt + Up/ Down
태그 안의 내용 안에 커서를 두고 있는 줄 위/ 아래에 그 줄과 같은 내용이 복사되게 하는 단축키 : alt + shift + Up/ Down
들여쓰기/ 내어쓰기 단축키 : tab/ shift + tab
정리된 코드 만드는 단축키 : ctrl + alt + L (따로 설정해놓았던 키)
여러개 열려 있는 창 사이에서 왼쪽/ 오른쪽 창으로 이동하는 단축키 : ctrl + PageUp/ PageDown
창을 아예 분할해서 편집기를 여는 단축키 : ctrl + \
# 실습 중 강의와 달리 모두 저장 단축키가 ctrl + K S로 설정되어 있어서
아래 기본 설정으로 들어가 모두 저장으로 검색하여 더블클릭해 원하는 단축키를 누른다.
누를 때 여러 키를 동시에 누르는 관계로 자기가 원하는 키들로 잘 눌려 설정되었는지 확인하고, 엔터를 누르면 된다 !
rel은 Relation의 약어로 가져올(link할) 외부 문서(대부분은 CSS 파일)가 현재의 HTML 파일과 어떤 관계인지 명시하는 HTML 속성이다. cf. 속성은 기능의 확장을 위해 사용된다.
href는 Hyper Text Reference의 약어로 브라우저가 참조할 특정 경로를 지정하는 HTML 속성이다.
tiltle에 대표 아이콘(Favicon, Favorite Icon)도 같이 link 태그로 설정할 수 있다. 이때의 ref는 icon이라고 작성하면 된다.
HTML Favicon을 적용할 때는 이름을 favicon으로 지정하길 권장하고, favicon.ico나 favicon.png 파일이 주로 사용된다.
<meta /> 메타 태그는 HTML 문서의 제작자, 내용, 키워드 같은 정보들을 화면에 보여지지 않게 검색엔진이나 브라우저에게 제공한다.
name 속성으로 그 정보의 종류가 무엇인지 나타내고, content 속성으로 그 정보의 값을 나타낸다.
viewport라는 값은 데스크탑이 아닌 모바일 장치(device)에 해당되는 내용이다.
charset 속성은 문자 인코딩 방식을 지정하는 값을 설정하도록 하며, 웹에서는 UTF-8의 사용을 권장한다 !
index.html 파일은 프로젝트 폴더 내에서 최상위(root) 경로에 존재하도록 한다. 즉, 프로젝트 폴더 내에서 다시 폴더 안에 넣어 관리하면 안 된다 ! 브라우저는 프로젝트 폴더에 들어와 제일 먼저 찾는 파일이다 !
경로를 명시할 때 폴더 이름까지만 작성해도 그 폴더 안의 index.html을 찾아 자동으로 실행해준다.
이미지를 HTML <img> 태그로 삽입할 수 있지만, 위와 같이 CSS에서 div 태그에 배경으로 스타일링 하는 방법으로 이미지를 삽입할 수 있다. ./ 혹은 생략해서 지정하는 이미지의 상대 경로나 /(root, 여기서는 현재 프로젝트의 서버를 의미, ex) port : 5500)를 사용하여 경로를 지정하는 절대 경로나 다 동일하게 이미지가 출력되는 것을 볼 수 있었다.
새로 만들어지는 파일마다 공백이 2가 기본이 되게 설정하려면 파일탭에서 기본설정> 설정으로 들어가 입력창에 tab size로 검색해 변경할 수 있다. 변경 후 창을 그냥 닫으면 새로 설정한 내용이 반영된다.
각 브라우저마다 기본적으로 제공하는 CSS 스타일이 있는데, 브라우저마다 웹페이지의 결과가 조금씩 달라질 수 있기 때문에 제공되는 CSS 스타일을 초기화하고 작업을 시작하는 것이 좋다.
https://www.jsdelivr.com/package/npm/reset-css
jsDelivr - A free, fast, and reliable CDN for Open Source
Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use.
www.jsdelivr.com
사이트에 들어가면,
우리가 가져와 사용하는 플러그인이나 라이브러리 등을 직접 수정할 일은 거의 없기 때문에 원본대신
reset.min.css를 copy HTML로 copy해서 사용한다.
이때 min은 Minify의 약어로 파일이 경량화되었거나 난독화되었다는 의미이다.
내가 지정할 스타일보다 위에다 브라우저 기본 스타일 초기화 링크를 걸어 작성해준다 !
혹은
https://cdnjs.com/libraries/meyer-reset
meyer-reset - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Eric Meyer CSS reset - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and eas
cdnjs.com
요소가 화면에 출력되는 특성에 따라 인라인 요소와 블록 요소로 나뉘는데, 인라인 요소는 글자를 만들기 위한 요소로 수평으로 쌓이는 특성을 가지고 블록 요소는 상자(레이아웃)을 만들기 위한 요소로 수직으로 쌓이는 특성을 가지고 있다.
span 요소는 대표적인 인라인 요소로 컨텐츠 영역을 설정하는 용도로 쓰인다.
span 요소는 연달아 작성하면 화면에 작성 내용이 붙어서 보여지고, 줄 바꿔 span 요소를 작성하면 각 요소 사이에 띄어쓰기와 같은 효과가 나타나게 된다. 인라인 요소로 하나의 글자와 같은 특성을 가진다고 이해하며 외우는게 좋겠다.
span 요소의 너비, 높이는 포함한 컨텐츠 크키만큼 자동으로 줄어든다. 또, style 속성으로 너비와 높이를 지정해도 span 요소는 글자 요소이기때문에 아무런 변화가 없다. 즉, 상자처럼 크기를 조절할 수 있는게 아니라 담고 있는 컨텐츠에 따라 너비와 높이가 결정되는 것이다 ! 외부 여백(margin)과 내부 여백(padding)에 있어서는 좌우 너비에는 적용이 가능하나, 상하 높이에는 적용되지 않는다. 다만, 내부 여백같은 경우에는 적용되는 것 처럼 보이지만, 좌우 너비만큼 적용되는 것이지 설정값으로 상하 내부 여백이 만들어지는 것은 아니다. => span 요소에 국한되는 것이 아니라, 글자 요소들에 특성이다 !
인라인 요소는 블록 요소를 자식 요소로 가질 수 없다. 안에 포함할 수 없다 !
div 요소는 대표적인 블록 요소로 컨텐츠 영역을 설정하는 용도로 쓰인다.
인라인 요소와 달리 블록 요소들은 부모 요소의 크키만큼 너비는 자동으로 늘어나고,
높이는 인라인 요소와 같이 포함한 콘텐츠 크키만큼 자동으로 줄어든다 !
인라인 요소는 너비, 높이, (좌우 제외하고)여백이 기본적으로 지정될 수 없었지만,
블록 요소는 style 속성으로 설정이 가능하다 !
블록 요소는 인라인 요소, 블록 요소 상관없이 자식 요소로 가질 수 없다. 종합적으로 블록 요소는 제약이 크게 없다 !
'KDT TIL Note' 카테고리의 다른 글
| 웹 사이트 클로닝을 통한 HTML과 CSS (실습) (1) | 2022.09.30 |
|---|---|
| HTML과 JS 상호작용 (실습) (0) | 2022.09.30 |
| 자바스크립트의 null과 undefined, console.log와 console.dir (1) | 2022.09.21 |
| [KDT] HTML 요소의 전역 속성 (0) | 2022.09.16 |
| [KDT] 웹앱의 동작원리 (2) | 2022.09.13 |
