URL(Uniform Resource Locator)은 인터넷의 리소스를 가리키는 표준이름이다. URL은 전자정보 일부를 가리키고 그것이 어디에 있고 어떻게 접근할 수 있는지 알려준다.

 

인터넷의 리소스 탐색하기

URL은 브라우저가 정보를 찾는데 필요한 리소스의 위치를 가리키며, URL을 이용해 사람과 애플리케이션이 인터넷상의 수십억 개의 리소스를 찾고 사용하며 공유할 수 있다. 그리고 URL을 통해 사람이 HTTP 및 다른 프로토콜을 통해 접근할 수 있다. 사용자는 브라우저에 URL을 입력하고 브라우저는 화면 뒤에서 사용자가 원하는 리소스를 얻기 위해 적잘한 프로토콜을 사용하여 메시지를 전달한다.

 

예를들어

 

http://www.joes-hardware.com/seasonal/index-fall.html 이라는 URL을 불러오고 싶다고 가정해보자.

 

  • URL의 첫 부분인 http는 URL의 스킴이다. 스킴은 웹 클라이언트가 리소스에 어떻게 접근하는지 알려준다. 이 경우에, URL이 HTTP프로토콜을 사용한다.
  • URL의 두 번째 부분인 www.joes-hardware.com은 서버의 위치이다. 이는 웹 클라이언트가 리소스가 어디에 호스팅 되어 있는지 알려준다.
  • URL의 세 번째 부분인 /seasonal/index-fall.html은 리소스의 경로이다. 경로는  서버에 존재하는 로컬 리소스들 중에서 요청받은 리소스가 무엇인지 알려준다.

URL이 브라우저, 컴퓨터, 서버, 서버 파일 시스템의 어디에 위치하고 어떻게 연결되는지 보여준다.

 

URL은 HTTP 프로토콜이 아닌 다른 가용한 프로토콜을 사용할 수도 있다. 

  • mailto:president@withehouse.gov

는 이메일 주소를 가리키며,

  • ftp://ftp.lots-o-books.com/pub/complete-price-list.xls

는 FTP(File Transfer Protocol) 서버에 올라가 있는 파일을 가리키고 

  • rstp://www.joes-hardware.com:554/interview/cto_video

는 스트리밍을 제공하기 위해 비디오 서버에 호스팅하고 있는 영화를 가리킨다. 이렇게 URL은 인터넷에 있는 어떤 리소스든지 가리킬 수 있다.

 

 

URL 문법

URL로 인터넷상의 모든 리소스를 찾을 수 있지만, 그 리소스들은 다른 스킴(예들들어 HTTP, FTP, SMTP)을 통해 접근할 수 있으며, URL문법은 스킴에 따라서 달라진다. 

 

다른 URL 스킴을 사용한다는 것이 전혀 다른 문법을 사용한다는 뜻일까? 사실을 그렇지 않다.


대부분의 URL 스킴의 문법은 일반적으로 9개의 부분으로 나뉜다.

URL 문법

 

이 모든 컴포넌트를 가지는 URL은 거의 없다. URL의 가장 중요한 세 가지 컴포넌트는 스킴, 호스트, 경로다.

일반적인 URL 컴포넌트

 

예들 들어 http://www.joes-hardware.com:80/index.html 이라는 URL이 있다고 가정했을때

 

스킴은 'http'

호스트는 'www.joes-hardware.com'

포트는 '80'

경로는 'index.html'

이 된다.

 

 

스킴 : 사용할 프로토콜

스킴은 주어진 리소스에 어떻게 접근하는지 알려주는 중요한 정보다. 이는 URL을 해석하는 애플리케이션이 어떤 프로콜을 사용하여 리소스를 요청해야 하는지 알려준다. 위에서 예로 사용한 URL의 스킴은 'http' 이다.

 

스킴 컴포넌트는 알파벳으로 시작해야 하고 URL의 나머지 부분들과 첫 번째 ':' 문자로 구분한다. 스킴 명은 대소문자를 가리지 않기 때문에

'http://www.joes-hardware.com'와 HTTP://www.joes-hardware.com' 는 같다.

 

 

호스트와 포트

애플리케이션이 인터넷에 있는 리소스를 찾으려면, 리소스를 호스팅하고 있는 장비와 그 장비 내에서 리소스에 접근할 수 있는 서버가 어디에 있는지 알아야 한다.

 

URL의 호스트와 포트 컴포넌트는 그 두 가지 정보를 제공해준다.

 

호스트 컴포넌트는 접근하려고 하는 리소스를 가지고 있는 인터넷상의 호스트 장비를 가리킨다. 해당 값은 위에서와 같이 ('www.joes-hardware.com') 호스트 명이나 IP주소로 제공한다. 

  • http://www.joes-hardware.com:80/index.html
  • http://125.92.228.48:80/index.html

포트 컴포넌트는 서버가 열어놓은 네트워크 포트를 가리킨다. 내부적으로 TCP 프로토콜을 사용하는 HTTP는 기본 포트로 80을 사용한다.

 

 

경로

URL의 경로 컴포넌트는 리소스가 서버의 어디에 있는지 알려준다. 해당 경로는 아래 예와 같이 계층적 파일 시스템 경로와 유사한 구조를 가진다. 

  • http://www.joes-hardware.com:80/seasonal/index-fall.html

이 URL의 경로는 '/seasonal/index-fall.html'로 유닉스 파일 시스템의 파일 경로와 유사하다. 경로는 서버가 리소스의 위치를 찾는데 사용하는 정보다. HTTP URL에서 경로 컴포넌트는 '/' 문자를 기준으로 경로조각으로 나눈다. 

 

 

웹에서 쓰이는 일번 스킴들의 포맷

일반 스킴 포맷

 

 

'네트워크' 카테고리의 다른 글

HTTP 완벽 가이드 - 커넥션 관리(2)  (0) 2024.07.22
HTTP 완벽 가이드 - 커넥션 관리  (0) 2024.07.21
HTTP 완벽 가이드 - HTTP 메시지  (1) 2024.07.11
HTTP 완벽 가이드 - 웹의 기초(2)  (2) 2023.08.21
HTTP 완벽 가이드 - 웹의 기초(1)  (0) 2023.08.18

절대 길이 단위 px

입문 레벨에서 가장 많이 사용하는 단위인 px(픽셀)은 절대 길이 단위이다. px은 어떤 상황에서도 동일한 값을 유지하므로 가변성이 없다.

픽셀로 인해 글씨가 잘렸다.

 

 

em과 rem

em과 rem은 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위이다. em은 부모 요소의 글꼴 크기를, rem은 루트 요소의 글꼴 크기를 의미한다.

<div style="font-size: 20px;">
	<p>자식 요소의 1em은 20px!</p>
    <p>자식 요소의 2em은 40px!</p>
</div>

 

루트 요소는 <html> 요소를 말하는 것이며 루트 요소 글자 크기 기본값은 16px이다.

 

em으로 내, 외부 여백 크기를 정할 때는 자기 자신의 글자 크기를 기준으로 한다.

 

다음예시를 보자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em과 rem</title>
    <style>
      .inner {
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: tomato;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">고양이</div>
    </div>
  </body>
</html>

 

해당 html 문서를 확인해 보면 '고양이'는 16px로 표시되는 것을 확인할 수 있다.

 

그렇다면 다음의 경우는 어떨까?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em과 rem</title>
    <style>
      .outer {
        font-size: 24px;
      }
      .inner {
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: tomato;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">고양이</div>
    </div>
  </body>
</html>

 

outer 클래스의 글자 크기를 24px로 설정했기 때문에 자식 요소의 글자인 '고양이'도 24px로 표시되는 것을 확인할 수 있다.

 

 

em을 한번 살펴보자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em과 rem</title>
    <style>
      .outer {
        font-size: 24px;
      }
      .inner {
          font-size: 2em; /*글자 크기가 48px로 커진다.*/ 
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: tomato;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">고양이</div>
    </div>
  </body>
</html>

 

자식요소인 inner 클래스에서 글자 크기를 2em으로 설정하게 되면 부모요소인 outer 클래스의 글자 크기가 24px이기 때문에 2배인 48px이 되는 것을 확인할 수 있다.

 

rem은 어떨까

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em과 rem</title>
    <style>
      .outer {
        font-size: 24px;
      }
      .inner {
          font-size: 1rem; /*html 요소의 값을 기준으로 설정된다 기본값인 16px로 설정된다.*/ 
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: tomato;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">고양이</div>
    </div>
  </body>
</html>

 

여기서 html style="font-size: 20px;"로 설정하게 되면 20px로 설정되는 것을 확인할 수 있다.

 

padding 과 margin에 대해서도 확인해보자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em과 rem</title>
    <style>
      .outer {
        font-size: 24px;
      }
      .inner {
          font-size: 1rem; /*html 요소의 값을 기준으로 설정된다 기본값인 16px로 설정된다.*/ 
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: tomato;
        margin: 1rem;
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">고양이</div>
    </div>
  </body>
</html>

 

padding과 margin을 1rem으로 설정한 경우 기본값인 16px인 것을 확인할 수 있다.

 

em은 어떨까?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em과 rem</title>
    <style>
      .outer {
        font-size: 32px;
      }
      .inner {
          font-size: 16px; /*html 요소의 값을 기준으로 설정된다 기본값인 16px로 설정된다.*/ 
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: tomato;
        margin: 1em;
        padding: 1em;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">고양이</div>
    </div>
  </body>
</html>

 

자기 자신에 대한 padding과 margin을 설정한 경우 부모의 글자 크기로 설정하는 것이 아닌 자기 자신을 기준으로 글자 크기를 설정한다.

따라서 위와 같이 설정한 경우 padding과 margin은 16px이 된다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em과 rem</title>
    <style>
      .outer {
        font-size: 32px;
      }
      .inner {
          font-size: 1em; /*html 요소의 값을 기준으로 설정된다 기본값인 16px로 설정된다.*/ 
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: tomato;
        margin: 1em;
        padding: 1em;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">고양이</div>
    </div>
  </body>
</html>

 

위와 같이 font-size: 1em; 으로 변경한 경우 32px로 변경되기 때문에 padding과 margin 또한 32px로 변경된다.

 

정리 

'Front-End > 반응형 웹' 카테고리의 다른 글

반응형 웹(6) - 미디어 쿼리  (0) 2024.07.17
반응형 웹(5) - calc()  (0) 2024.07.15
반응형 웹(4) - 가변형 레이아웃  (2) 2024.07.14
반응형 웹(3) - 다양한 상대 단위  (0) 2024.07.13
반응형 웹(1)  (0) 2024.07.08

오늘날 우리는 다양한 기기와 해상도를 통해 웹문서를 열람하고 있다. 따라서 웹문서를 만드는 사람이라면 누구나 특정 기기나 브라우어제 국한되지 않고 다양한 환경에서 동일한 경험을 제공할 수 있는 웹 문서를 만들어야 한다는 요구를 피해갈 수 없게 되었다.

 

이것을 '반응형 웹' 이라고 부르기로 했다. 반응형 웹이 무엇인지 알아보자.

 

반응형 웹

반응형 웹이란, 다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법을 뜻한다. 스마트 모바일 기기의 등장으로, 데스크톱 화면을 위해 존재했던 웹문서의 설계에도 변화가 요구되기 시작했다. 변화의 초기에는 모바일 전용 URL을 제공하는 방법이 주로 사용되었다.

 

모바일 환경과의 격리가 성공적으로 정착한 사례도 있지만, 기기의 유형이 갈수록 다양해짐에 따라 한계를 들어낼 수밖에 없다. 

 

기기에 최적화된 콘텐츠를 계속해서 생산해내는 것은 현실적으로 어렵기 때문에, 사용하는 기기에 적절하게 맞춰지는 사이트를 개발하는 것이 바람직하다.

 

즉 반응형 웹사이트를 만드는 것이 좋다. 그리고 반응형 웹사이트에서 가장 핵심이 되는 키워드는 바로 '가변성'이다.

 

 

뷰포트 (viewport)

뷰포트란 현재 화면에 보여지고 있는 영역을 의미한다. 기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다. 아래 그림은 HTML 문서를 각각 PC와 모바일로 확인한 결과이다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    // 뷰포트가 존재한다. 
    // width = 기기의 넓이로 하고, 초기 스케일을 잡겠다.
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>
<body>
    
</body>
</html>

 

이렇게 뷰포트가 존재하는데 해당 meta 태그를 삭제하고 모바일 크기로 html 문서를 조회해보자

모바일 화면

 

32px정도 되어야 하는 <h1> 태그의 크기가 작아진 것을 확인할 수 있다. 이런 이유는 모바일과 데스크톱의 화면 비율이 다르기 때문이다. 

 

그렇다면 <meta> 태그가 있으면 어떻게 될까?

 

모바일 화면

 

 

위와 같이 데스크탑과 동일하게 보이는 것을 확인할 수 있다.

따라서 기기에 따라 다른 화면 크기에 대응하기 위해, 웹문서에 viewport 속성에 대한 마크업을 추가해야 한다.

 

'Front-End > 반응형 웹' 카테고리의 다른 글

반응형 웹(6) - 미디어 쿼리  (0) 2024.07.17
반응형 웹(5) - calc()  (0) 2024.07.15
반응형 웹(4) - 가변형 레이아웃  (2) 2024.07.14
반응형 웹(3) - 다양한 상대 단위  (0) 2024.07.13
반응형 웹(2) em & rem  (0) 2024.07.09

+ Recent posts

티스토리툴바