URL이란.

이전 포스트에서 다른 웹문서로 이동하기 위하여 href 속성을 URL 형식으로 작성한다고 하였다. URL의 개념은 중요한 부분이기 때문에 이번 포스트에서 어떤 개념인지 조금 살펴보고 진행 하도록 하겠다.

Recap

  • img 태그를 이용하여 이미지 표시
  • img 태그의 height, width 속성을 이용하여 이미지 크기 조정.
  • img 태그의 alt 속성을 이용하여 정보유지.
  • a 태그의 href 속성을 이용하여 링크
  • a 태그의 target 속성을 이용하여 링크 페이지가 뜨는 위치 조정.

URL 정의

굳이 약자와 정의를 알아야 하나 싶겠지만, 어떤 의미의 약자인지 알아 두는 것이 기억에 오래 남고, 언제 어떤 방식으로 쓰일지 상상이 되기 때문에 왠만하면 알아두는 것을 추천한다.
URL 은 Universial Resource Location 의 약자로서 인터넷 초창기 네트워크 상에 흩어져 있는 정보(자원)가 어디 있는지 표현하기 위하여 규정되었다. 여기에서 규정 되었다 라고 하는 것은 이것이 어떤 문제를 해결하기 위한 정답이 아니라 규칙으로 정했다는 의미이다. 웹의 세계에서는 이러한 표준에 대한 이야기가 앞으로 많이 될 수 있으므로, 규칙 즉 사람들 사이에서 정한것으로 이해하는 것이 어떤 표준이 비효율적인데 왜 사용하느냐 등의 질문에서 쉽게 빠져 나올수 있을것이다.

모양새

일반적으로 url의 모양새는 아래와 같다. 모양새부터 보고 알아볼 예제와 같이 생략이 가능하므로 유의해야 한다.

 

프로토콜 :// 호스트명 . 도메인명 : 포트번호 / 디렉터리 / 파일명 ? 옵션
https :// www . google.com : 80 / root / index.html ? p=1

 

위의 URL은 실제로는 없는 URL이지만 간략히 그 구조를 살펴보겠다.

  • 프로토콜 : 통신을 하는 규격을 의미 웹에서는 일반적으로 https 와 http를 사용한다.
  • 호스트명 : 통신의 요청을 받는 컴퓨터 또는 서버를 의미
  • 도메인명 : 통신을 요청 받는 회사의 이름
  • 포트번호 : 웹 통신에서는 주로 80번 포트가 사용되고, 생략 가능하다.
  • 디렉터리 : 통신을 제공해주는 컴퓨터 또는 서버의 파일 위치 중 디렉터리 부분.
  • 파일명 : 디렉터리 안의 html 파일명 생략하는 경우 서버에 따라서 index.html을 자동으로 사용한다.
  • 옵션 : 파일에 정보를 전달하기 위한 옵션을 URL에 포함 시켜 보낼 수 있다.

파일 이름으로 이용하기

파일을 이용한 링크를 사용하기 위하여 vscode 의 우측 탐색기 부분에서 새로운 파일을 만들고 이름을 "target.html" 로 지정하도록 하자. 먼저 target.html을 편집한다.

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
    </head>
    <body>
        <h1>URL 연습 (URL exercise)</h1>
        <p>이것은 url 연습 페이지 입니다.</p>
    </body>
</html>

이제 기존에 연습을 진행하던 파일 열고 링크 부분을 새로운 파일로 수정하도록 한다.

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
    </head>
    <body>
        <h1>a 태그 연습 (a tag)</h1>
        <a href="target.html">target page</a>
        <a href="https://www.google.com/">구글</a>
        <a href="https://www.naver.com/">네이버</a>
        <a href="https://www.daum.net/">다음</a>
    </body>
</html>

이렇게 같은 위치 (같은 컴퓨터 또는 서버의 서비스)의 경우 파일 이름만 사용하더라도 링크가 가능하다.

디렉터리를 포함하기

디렉터리를 포함하는 URL를 표현하기 위하여 vscode의 우측 탐색기 창에서 새로운 폴더를 만든 후, 이름을 "sub"로 만들고, 그 폴더 안에 "target.html" 라는 이름을 가진 새로운 html 파일을 만들고 우선 연습중인 파일부터 수정하도록 한다.

연습중.html

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
    </head>
    <body>
        <h1>a 태그 연습 (a tag)</h1>
        <a href="target.html">target page</a>
        <a href="sub/target.html">sub target page</a>
        <a href="https://www.google.com/">구글</a>
        <a href="https://www.naver.com/">네이버</a>
        <a href="https://www.daum.net/">다음</a>
    </body>
</html>

"sub/target.html"을 보면 현재 위치로 부터 / 구분된 sub 디렉터리 밑의 target.html 페이지로 링크 시키는 것을 볼 수 있다.

sub/target.html

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
    </head>
    <body>
        <h1>URL 디렉터리 연습 (URL exercise)</h1>
        <p>
            이것은 url 연습 페이지 입니다.<br>
            <a href="../[연습중.html]">돌아가기</a>
        </p>
    </body>
</html>

돌아가기 위해서 ../ 이라는 주소를 사용하고 있는데 디렉터리가 파일을 품고 있는 형태이므로 ./ 은 현재 디렉터리, ../은 부모 디렉터리 즉 원래 작업을 하고 있던 디렉터리를 의미 하여 알맞게 연습중인 html로 연결 할 수 있을 것이다.

웹에 있는 자원 이용하기

웹에 있는 자원을 이용하기 위해서는 브라우저의 주소창을 참고 한다고 언급하였었다. 네이버 지도를 띄우기 위하여 브라우저를 열고 네이버 지도를 띄우도록 한다. 이후 주소창을 복사하여 연습용 html 파일에 붙여 넣기 해보도록 한다.

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
    </head>
    <body>
        <h1>a 태그 연습 (a tag)</h1>
        <a href="target.html">target page</a>
        <a href="sub/target.html">sub target page</a>
        <a href="https://www.google.com/">구글</a>
        <a href="https://www.naver.com/">네이버</a>
        <a href="https://map.naver.com/p">네이버지도</a>
        <a href="https://www.daum.net/">다음</a>
    </body>
</html>

서버와 클라이언트

서버와 클라이언트의 개념은 네트워크와 관련한 내용이지만 웹 기술을 대면 하다 보면 항상 나오는 문제이므로 언급하도록 한다.

서버

서버는 컴퓨터라고 생각하면 된다. 클라우드나 가상화 및 SaaS라 불리우는 여러가지 서비스로 인하여 혼선이 있기는 하지만 개념상으로 어떠한 서비스나 자원 (우리는 url을 통해 이미 자원이 무엇인지 파악했다.) 제공 하는 편에 있다면, 그것이 무엇이던 (심지어 컴퓨터의 형태가 아니더라도) 서버라도 이야기 한다. 이러한 서버는 url에서 호스트명+도메인명으로 지정하고, IP라는 번호를 부여 하여 인터넷 상에서 구분할 수 있게 된다.

클라이언트

클라이언트 역시 서버와 마찬가지로 정보나 자원의 요청을 하는 편에 있다면 클라이언트라고 할 수 있다. 브라우저가 클라이언트 일까? 맞다. 클라이언트 이다. 그럼 브라우저가 실행되는 나의 pc는? 그렇다 그 역시 클라이언트라고 할 수 있다.
복잡하지 않게 서버와 클라이언트의 구분은 정보의 요청을 누가 하고 정보의 제공을 누가 하는지에 대한 구분이다.

웹

서버와 클라이언트가 통신을 하기 위해서는 무선이던 선이던 네트워크로 연결되어 있어야 하며, 이러한 네트워크를 우리는 "인터넷"이라고 한다. 인터넷에서 하나의 pc형 장비들은 ip라는 번호를 부여 받아 구분된다.
인터넷은 말 그대로 네트워크를 뜻하며 이러한 네트워크를 기반으로 여러가지 서비스를 만들어 내는데. 가장 보편적인 서비스가 바로 "웹"이다. 웹은 웹 브라우저를 통해서 문서, 이미지, 멀티미디어 자원들을 공유하기 편하도록 구현된 서비스이다.
이러한 웹 서비스를 구현하는 기본 재료로서 현재 우리가 언급하는 html이 존재한다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

CSS에서 박스 모델 배열.

이미지
css 에서 스타일을 지정할 때 스타일이 화면 상 자리를 차지하고 있는 것을 하나의 박스로 둘러싸고, 이것을 이용하여 배열을 하는 것을 박스 모델 배열이라고 한다. Recap 스타일 요소를 html 에 포함한다. 기본 작성 규칙 선택자를 이용하여 요소, id, class를 이용한 스타일 적용 객체를 선택한다. 배경색, 외각선, 폭과 높이의 스타일 지정 할 수 있다. RGB 값을 이용하여 색상을 숫자로 표현한다. flex 모델 부모 요소에 flex 스타일을 적용 flex 박스 모델을 사용하기 위하여 부모 요소에서 flex 스타일을 지정한다. 우선 flex 모델에 대하여 살펴 보기 위하여 다른 속성들은 설정하지 않고 살펴보도록 한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: #ccc; margin-top: 30px; } #top { background-color: white; border: none; } .rect { border: 1px solid black; width: 250px; height: 250px; } #rec_container { display: flex; } </style> </head> <body> <div id=...
자세한 내용 보기

페이지 레이아웃을 위한 준비

이미지
이제까지 html 파일을 작성하면서 연습용 파일을 이용하였지만, 실제 업무 또는 결과물을 위해서는 페이지 또는 사이트의 기획 부터 시작 하는 것이 맞을 것이다. 현재는 기획은 없지만, 일반적인 회사에서 많이 사용하는 페이지의 구조를 생각하여 참조할 레이아웃을 찾아보았다.   이 페이지를 각각의 구성요소로 분해하고, 이를 배치 하는 것을 레이아웃 이라고 한다. 위의 샘플 이미지를 이용하여 레이아웃을 잡아보면 각 개인마다 다른 의견들이 있겠지만 대부분 아래와 같을것이다.   Recap 표 표시 하기 - table, tr, td 태그 표의 속성 조정하기 - width, height 표의 각 칸 (cell) 의 속성 조정하기. 내용을 구조화 한다. - div 우선 "구조화 한다" 라는 단어가 생소할 듯 하다. 구조화란 "어떠한 대상을 비슷한 성질의 것으로 분류하고 그 분류를 차곡차곡 정리하여 조직적으로 쌓아 올린다." 라는 뜻이다. 이전의 포스트에서 테이블을 이용하여 사각형을 표시할 수 있게 되었으며, 위의 이미지를 보면 사각형의 모음으로 내용을 구조화 시킨 것을 살펴 볼 수 있다. 하지만 표를 이용하여 구조화된 페이지를 구성하게 되면 전체 페지가 표 하나와 같은 형태를 지니게 된다. 즉 html 문서 자체가 표가 되어 버리는 상황이 된다. 이것은 검색엔진이나 그림의 형태가 중요하지 않은 서비스에서 큰 장애가 된다. 따라서 이러한 구조화된 형태를 만들기 위하여 div 태그가 존재 한다. div 태그는 그 자체로는 내용에 영향을 미치지 않는다. <!DOCTYPE html> <html> <head> <title>TITLE</title> </head> <body> <div>top</div> <div>logo</div...
자세한 내용 보기

CSS 의 간략한 설명.

이미지
css란 cascading style sheets의 줄임말로서 스타일시트라고 말하기도 한다. 계단식(cascading:캐스케이딩)이라고 표시된 이유는 앞선 포스트에서 잠시 언급하였던 수직적인 구조화를 나타내기 때문에 붙은 것으로, html 의 요소에 디자인적(표시상) 디테일하고 다양한 제어를 하기 위하여 별도의 문법적인 구조를 가진 문서이다. Recap div를 이용하여 html 문서를 구조화 한다. div를 계층적으로 이용하여 부모 자식 구조를 만든다. div 요소 안에 style 속성을 이용하여 해당 요소의 스타일을 제어 한다. div 요소를 구분하기 위하여 id 와 class 속성을 사용한다. 앞으로 태그라는 용어 대신 요소(element:엘레멘트)를 사용한다. 요소가 보다 알맞은 용어이다. style 요소 css는 여러 방식 중 하나로서 html 문서안에 위치할 수 있다. 브라우저 또는 해석기에 따라 차이는 있지만 2023년 현재 대부분의 브라우저에서는 어느 위치에 style 요소가 존재 하여도 적용이 되지만, 일반적으로 head 요소의 자식 요소로 사용한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: ghostwhite; } </style> </head> <body> <div id="top" style="border: 3px solid red; height:30">top</div> <div id="logo" style="border:...
자세한 내용 보기