김숭늉 마음대로

Udemy Section3 (6일차) - 고급 css 본문

IT/웹개발 (100일 도전)

Udemy Section3 (6일차) - 고급 css

김숭늉이 2023. 2. 12. 19:12
728x90

 

1. Live server 확장 사용하기

-> 변경하는 즉시 페이지가 다시 로드되고, 컨텐츠가 변경된다

     ㄴ extention메뉴에서 live server 다운로드 하기 !

 

 라이브로드 기능을 사용하는 로컬개발서버를 이용하게 되는데, 로컬개발서버는 웹서버 같은 서버는 아님. 갑자기 세상에 공개되는건아니고 여전히 나의 환경에서 개발로 파일을 실행하지만 대신 이미 웹서버에 로드된것처럼 시뮬레이션 함

 

 

반영하게 되면 소위 포트라고하는 ip주소가 나오고 파일 경로가 나오게됨 .

 

 

 

2. 개발서버 & 웹사이트 주소 (56번 강의)

 

이전 강의에서는 VS Code를 위한 "Live Server" 확장을 통해 로컬 개발 웹 서버를 시작했습니다.

"개발 웹 서버"란 무엇일까요?

"로컬 개발 웹 서버"입니다. 왜냐하면 우리 컴퓨터에서 웹사이트를 로컬로 제공하는 웹 서버 소프트웨어이기 때문이죠. 이건 우리의 머신이나 웹사이트를 인터넷에 노출시키는 것이 아닙니다. 여러분은 오직 로컬(즉, 여러분의 머신에서)을 방문하고 접근할 수 있습니다.

이 "웹 서버 소프트웨어"(이 경우 "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이 기본값이기 때문에 웹사이트 주소를 입력하면 브라우저가 자동으로 이 포트를 사용합니다

 

 

3. 리스트 이해하기 -> 웹에게 해당 목록들은 관계가 있다는 걸을 알림 

 

  <ol></ol> : order list (순서목록 ex, 요일)

  <ul></ul> : unorder list (비순서목록 ex, 토마토, 사과, 오이)

    ㄴ 의미론적인 관점에서 알림

 

    <ol>
      <li>Monday</li>
      <li>Tuseday</li>
      <li>Wednesday</li>
    </ol>
       -> 앞에 숫자가 붙음

    <ul>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Tomatos</li>
    </ul>
        -> 앞에 점이 붙음

 

4. none 으로 지정하면 앞에 점이 사라짐

 

li {
    list-style: none;
}

 

 

5. keyboard shortcuts에 가서 코드 주석 찾아보기 "comment"로 찾기 

 

   -> Toggle line comment 의 단축키를 사용

 

 

6.  누가 살아남을까?

ol {
    list-style: none;
}

li {
    list-style: square;
    list-style: none;   -> 이친구가 살아남게 됨 
}

 

7.부모, 자식, 컨테이너 등 이해하기 (관계가 중요함)

   ㄴ css 코드가 적용되는데도 영향 미치기 떄문에 중요함

 

컨테이너의 예시 : <head></head>, <body></bod>

 

부모의 속성과 속성값이 자식과 자식의 자손에게도 똑같이 적용됨

 

 

8.

 

color: -webkit-link;

 

-> 브라우저에 의해 추가된 기본 색상

 

9. 2번째 페이지에 새로운 css를 추가해보자
 
h1 {
    font-size: 48px;
    color : rgb(71, 62, 62);
}

a {
   background-color: rgb(167, 1, 78);
   color: white ;
   border-radius: 4px;
   font-size: 24px;
}

a:hover {
    background-color: rgb(180, 12, 90);
    text-decoration: none;
}

ol {
    list-style: none;
}

li {
    background-color: rgb(223, 136, 124);
    border-radius: 6px;
    margin: 32px
}

 

 

 

728x90
반응형

'IT > 웹개발 (100일 도전)' 카테고리의 다른 글

Udemy Section3 (8일차) - 블록, 인라인요소, 마진상쇄, box-shadow, 레이아웃, 스타일링  (0) 2023.02.13
Udemy Section3 (7일차) - CSS박스, 선택자, 결합자, 클라스, HTML레이아웃, 블록/인라인 elements  (0) 2023.02.12
Udemy Section2 (5일차) - 이미지, 배경, 간격  (0) 2023.02.11
Udemy Section2 (4일차) - CSS, 글꼴, Void  (0) 2023.02.11
Udemy Section2 (3일차) - CSS 색상, 단축키 등  (0) 2023.02.10
'IT/웹개발 (100일 도전)' Related Articles more