vscode에서 ! 하나만 눌러주고 엔터를 치면 기본 구조를 자동으로 생성해줌
(웹) 개발에서는 이름 지정에 관한 많은 규칙과 규칙이 있습니다.
예를 들어 기본 HTML 파일의 이름을 index.html로 지정한 경우엔 이건 여러분이 해야 하는 일은 아닙니다 - 이건 단지 일반적인 관례입니다. 그리고 일부 호스팅 제공업체는 파일을 성공적으로 제공하기 위해 해당 이름을 요구할 수 있습니다. 그러나 일반적으로 My First File.html로 이름을 지정할 수도 있습니다. 그럼에도 불구하고 이러한 일반적인 규칙을 따르는 것이 좋습니다.
질문은 다음과 같습니다. 두 번째, 세 번째 등의 HTML 파일 이름을 어떻게 지정합니까? 그리고 CSS 파일의 이름을 어떻게 지정해야 할까요?
HTML 파일의 경우 일반적으로 로드될 페이지의 주요 목적이나 내용을 설명하는 이름을 지정하는 것이 좋습니다.
예를 들어, 사용자의 장바구니 콘텐츠를 표시할 HTML 파일이 있는 경우 cart.html이 적합한 이름일 수 있고 많은 온라인 상점 제품을 표시하는 역할을 하는 HTML 파일의 이름은 products.html일 수 있습니다.
CSS 파일의 경우 일반적으로 특정 HTML 파일에 속하는 파일이 있거나 글로벌 CSS 파일(여러/모든 HTML 파일에서 사용됨)이 있습니다.
● 페이지별 CSS 파일의 경우 HTML 파일 이름을 반복하는 것이 좋습니다.
● 여러 HTML 파일에 속하는 CSS 파일의 경우 base.css와 같은 일반 이름을 선택하거나 cart.html 및 cart.html 모두에 대한 online-shop.css와 같이 CSS 파일이 속한 HTML 파일의 일반 용도를 설명할 수 있습니다. products.html 파일.
또한 이러한 모든 파일 이름에 대해 알아차렸을 수 있는 한 가지 중요한 특성이 있습니다. 모두 소문자란 겁니다.
그리고 이 점은 중요합니다! 엄밀히 말하자면 필수는 아니지만 대시(-)를 제외한 특수 문자를 사용하지 않고 파일 이름을 모두 소문자로 지정하는 건 매우 일반적인 규칙입니다. 파일 이름이 여러 단어로 구성된 경우 공백(공백)으로 구분하지 말고 대시를 사용하세요. 따라서 Online Shop.html 대신 online-shop.html을 사용해 주세요
"개발 웹 서버"란 무엇일까요?
"로컬 개발 웹 서버"입니다. 왜냐하면 우리 컴퓨터에서 웹사이트를 로컬로 제공하는 웹 서버 소프트웨어이기 때문이죠. 이건 우리의 머신이나 웹사이트를 인터넷에 노출시키는 것이 아닙니다. 여러분은 오직 로컬(즉, 여러분의 머신에서)을 방문하고 접근할 수 있습니다.
이 "웹 서버 소프트웨어"(이 경우 "Live Server" 확장)는 실제로 들어오는 HTTP 요청을 수신하고 적절한 응답(예시: HTML 코드 포함)을 다시 보내는 소프트웨어입니다. 첫 번째 과정 섹션을 구성하는 요청 + 응답 이미지를 기억하세요!
과정 후반부에서는 미리 정의된 HTML 코드를 다시 보내는 것보다 더 많은 작업을 수행할 수 있는 자체 웹 서버도 설정할 겁니다. 섹션 16에서 "NodeJS"라는 기술을 사용하여 자체 백엔드와 웹 서버를 만드는 방법에 대해 알아보겠습니다.
이 주소는 무엇일까요: 127.0.0.1?
위에서 언급했듯이 이 개발 웹 서버는 로컬 머신에서 로컬 머신으로 웹사이트를 호스트(= 제공/제공)합니다.
섹션 1에서 사용자가 브라우저 주소 표시줄에 주소(URL)를 입력해서 웹사이트에 접속하고 이러한 요청을 보내는 것을 배웠습니다. 또한 사람이 읽을 수 있는 "도메인"(예: academind.com)이 인터넷에 연결된 시스템의 고유 식별자 역할을 하는 IP 주소로 변환된다는 것도 배웠습니다.
127.0.0.1은 그런 IP입니다 - 특별한 거죠!
127.0.0.1은 로컬 컴퓨터에 예약된 특별한 IP입니다. 그리고 이건 모두를 위한 로컬 머신입니다!
브라우저에 127.0.0.1을 입력하면 저의 로컬 컴퓨터에 연결합니다(로컬 웹 서버를 실행 중인 경우). 여러분은 여러분의 머신에 도달합니다.
월드 와이드 웹의 다른 컴퓨터에 할당되지 않은 IP 주소입니다. - 대신 항상 로컬 컴퓨터를 가리키는 "자리 표시자"로 예약되어 있죠. 여기에 있는 우리의 유스 케이스를 위해 존재합니다. 즉, 아직 전 세계에 노출하지 않고 로컬에서 테스트할 수 있습니다.
127.0.0.1: localhost 대신 로컬에서 사용할 수 있는 별칭(기본적으로 "특수 도메인 이름"과 유사합니다)도 있습니다. 브라우저에 localhost를 입력할 수도 있고 127.0.0.1을 입력한 것과 동일합니다. 따라서 localhost:5500은 127.0.0.1을 대체합니다.
이건 무엇일까요: 5500?
:5500 부분은 소위 "포트"입니다.
포트는 네트워킹 세계의 또 다른 개념입니다. 아이디어는 머신이 다른 포트를 통해 다른 프로세스(예: 다른 웹사이트를 제공하는 다른 웹 서버)를 노출할 수 있다는 거죠.
따라서 단일 시스템은 3개의 다른 포트에서 3개의 다른 웹사이트를 호스팅/제공할 수 있습니다. 로컬 시스템의 IP 주소는 항상 동일하지만(127.0.0.1) 모든 웹사이트에는 자체 포트가 있습니다(예: 5500, 3000, 8080).
웹 사이트를 월드 와이드 웹에 노출된 일부 시스템으로 이동하는 경우(즉, 게시하고 더 이상 로컬 시스템의 개발 웹 서버를 통해 실행하지 않음) 그런 다음 해당 원격 시스템의 IP 주소를 통해 또는 일반적으로 해당 IP 주소를 가리키는 도메인을 통해 웹사이트에 도달합니다.
또한 이 포트 개념도 여전히 존재합니다. 월드 와이드 웹에 노출될 때 웹 사이트는 일반적으로 포트 80(HTTP) 또는 443(HTTPS)에서 제공됩니다. 하지만 지금 당장은 이에 대해 걱정할 필요가 없습니다. 웹사이트를 게시할 때(과정 후반부에 다룹니다) 일반적으로 다른 호스팅 제공업체는 올바른 포트를 자동으로 노출하는 데 주의를 기울입니다.
로컬 컴퓨터에서 작업할 때 웹사이트를 월드 와이드 웹에 노출하지 않기 때문에 이러한 "공통 포트"(80, 443)를 사용하지 않습니다. 대신 일반적으로 다른 프로세스에서 사용하지 않는 모든 포트를 사용할 수 있습니다. 5500, 3000 또는 8080은 일반적으로 다른 프로세스에서 사용되지 않기 때문에 일반적인 선택이죠.
이게 바로 "Live Server" 확장이 웹 사이트를 로컬로 제공하기 위해 포트 5500을 사용하는 이유입니다.
그리고 도메인 또는 IP 주소 뒤에 :<port-number>를 추가해서 특정 포트를 대상으로 합니다. 이것이 127.0.0.1:5500이 로컬에서 제공되는 웹사이트로 확인되는 이유죠. 또는 127.0.0.1이 localhost로 별칭이 지정되어 있으므로 localhost:5500을 입력할 수도 있습니다.
다른 웹사이트에서도 시도해 볼 수 있어요!
academind.com:443 또는 academind.com:80 => 일반 Academind 웹사이트를 볼 수 있습니다. 물론 URL에 추가 포트 정보를 추가할 필요는 없습니다. 80과 443이 기본값이기 때문에 웹사이트 주소를 입력하면 브라우저가 자동으로 이 포트를 사용합니다.
설정 - 바로 가기 키 - comment 입력해서 주석단축키 설정함
li은 ol의 자식으로 들어감. 즉 ol 아래에 있는데
자식에서 정의된게 우선으로 적용이 된다.
이 경우에는 위에있는 none은 무시되고 square가 적용됨
'IT > Udemy 웹 개발 100일 과정' 카테고리의 다른 글
| [Udemy] 웹 개발 과정 7-8 일차 (0) | 2023.07.22 |
|---|---|
| [Udemy] 웹 개발 과정 3-4일차 (0) | 2023.07.20 |
| [Udemy] 웹 개발 과정 1-2 일차 (vscode 커밋 무한로딩 오류) (0) | 2023.07.20 |