웹 기초 공부 #2

이전 글에서 웹의 기초 지식과 더해 HTML이 무엇인지와

HTML의 핵심 문법인 태그(tag)에 대하여 알아보았다.

 

이번 글에서는 웹과 HTML, CSS 등이 무엇인지 설명하는 간단한 웹 페이지를 만들것이다.

 

우선 index.html 즉, 사용자가 처음 해당 웹 서버에 접속할때 만나는 페이지를 만들어주자.

<h1>WEB</h1>
<p><h3>웹이란?</h3>월드 와이드 웹<strong>(World Wide Web)</strong>, 통칭 <u>웹</u>이나 <u>WWW</u>, <u>W3</u>라고 불리는 것은 인터넷을 사용하는 사용자들이 서로의 정보를 공유 할 수 있는 공간을 의미한다. 
<br>이는 주로 인터넷과 같은 의미로 사용되는 경우가 대부분이지만
웹의 경우 인터넷에 존재하는 수많은 서비스 중 하나일 뿐이다. 
<br>다만 앞서 말했듯 인터넷과 웹의 의미가 혼용되어 사용될 만큼 인터넷의 가장 큰 부분을 차지하는 서비스이다.</p>

<p><h3>웹의 특징</h3>웹은 인터넷 상에서 텍스트나 그림, 영상등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결하여 제공한다.
<br><u>하이퍼텍스트<strong>(Hypertext)</strong></u>란 문서 내부에 또 다른 문서로 연결되는 참조를 넣어 웹 상에 존재하는 여러 문서끼리 서로 참조 할 수 있는 기술을 말한다.
이때 문서 내부에서 다른 문서로 연결되는 참조를 <u>하이퍼링크<strong>(HyperLink)</strong></u>라고 한다. 
<br>이러한 하이퍼 텍스트 문서를 제작하는 가장 보편적인 언어를 HTML이라고 하며 누구나 사용가능하다. 또한 이렇게 작성된 웹 상의 문서에는 HTTP라는 프로토콜을 사용하여 접근 가능하다.</p>

<p><h3>웹의 구성</h3>웹에서는 위에서 언급한 HTML이라는 언어로 작성한 하이퍼텍스트 문서를 <u>웹 페이지<strong>(Web Page)</strong></u>라고 부른다.
<br>이러한 웹 페이지의 집합을 <u>웹 사이트<strong>(Web Site)</strong></u>라고 정의한다. 웹은 이렇게 하이퍼링크를 통해 연결되어있다.
<br>사용자가 웹 페이지에 참조된 하이퍼링크로 다른 웹 페이지에 이동하는 행위를 <u>웹 서핑<strong>(Web surfing)</strong></u>이라고 부르며, 
<br>이때 사용자가 웹 페이지를 이용할때는 Chrome, Microsoft Edge, FireFox 등등의 <u>웹 브라우저<strong>(Web Browser)</strong></u>를 사용한다.</p>

 

위와 같은 HTML 코드의 결과 물은 아래와 같다.

태그를 이용하여 밑줄을 긋거나 강조를 하는 등의 행위를 해보았는데 이렇게 보면 무엇인가 어색해 보인다.

그래서 다음 중요 문법인 속성을 설명할 겸 사진을 넣는 태그인 <img>를 사용해 볼것이다.

 

우선 샘플로 사용할 사진을 하나 구한다. 이는 public domain image로 검색하면 찾기 쉽다.

출처 :&nbsp;https://unsplash.com/ko/%EC%82%AC%EC%A7%84/u2Ru4QBXA5Q

해당 사진을 웹 페이지에 적용 시켜 보려한다.

 

우선 이전 글에서 이미지를 넣는 태그가 <img>임을 알아보았다.

우선 <img> 태그를 사용해보자.

<h1>WEB</h1>
<img>
<p><h3>웹이란?</h3>월드 와이드 웹<strong>(World Wide Web)</strong>, 통칭 <u>웹</u>이나 <u>WWW</u>, <u>W3</u>라고 불리는 것은 인터넷을 사용하는 사용자들이 서로의 정보를 공유 할 수 있는 공간을 의미한다. 
<br>이는 주로 인터넷과 같은 의미로 사용되는 경우가 대부분이지만
웹의 경우 인터넷에 존재하는 수많은 서비스 중 하나일 뿐이다. 
<br>다만 앞서 말했듯 인터넷과 웹의 의미가 혼용되어 사용될 만큼 인터넷의 가장 큰 부분을 차지하는 서비스이다.</p>

<p><h3>웹의 특징</h3>웹은 인터넷 상에서 텍스트나 그림, 영상등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결하여 제공한다.
<br><u>하이퍼텍스트<strong>(Hypertext)</strong></u>란 문서 내부에 또 다른 문서로 연결되는 참조를 넣어 웹 상에 존재하는 여러 문서끼리 서로 참조 할 수 있는 기술을 말한다.
이때 문서 내부에서 다른 문서로 연결되는 참조를 <u>하이퍼링크<strong>(HyperLink)</strong></u>라고 한다. 
<br>이러한 하이퍼 텍스트 문서를 제작하는 가장 보편적인 언어를 HTML이라고 하며 누구나 사용가능하다. 또한 이렇게 작성된 웹 상의 문서에는 HTTP라는 프로토콜을 사용하여 접근 가능하다.</p>

<p><h3>웹의 구성</h3>웹에서는 위에서 언급한 HTML이라는 언어로 작성한 하이퍼텍스트 문서를 <u>웹 페이지<strong>(Web Page)</strong></u>라고 부른다.
<br>이러한 웹 페이지의 집합을 <u>웹 사이트<strong>(Web Site)</strong></u>라고 정의한다. 웹은 이렇게 하이퍼링크를 통해 연결되어있다.
<br>사용자가 웹 페이지에 참조된 하이퍼링크로 다른 웹 페이지에 이동하는 행위를 <u>웹 서핑<strong>(Web surfing)</strong></u>이라고 부르며, 
<br>이때 사용자가 웹 페이지를 이용할때는 Chrome, Microsoft Edge, FireFox 등등의 <u>웹 브라우저<strong>(Web Browser)</strong></u>를 사용한다.</p>

<img> 태그를 삽입한후 웹 페이지를 다시 켜보면

사진이 추가되거나 달라진 부분이 없어보인다.

이유는 간단하다.

단순한 <img> 태그만으로는 어떤 이미지를 불러와서 출력할지에 대한 정보가 부족하기 때문이다.

때문에 "속성(Attribute)"을 이용햐여 추가적인 정보를 제공해야 한다.

 

img태그 내부에 src(source)라는 속성을 추가해보자.

<img src="sample.jpg">

이전 다운받은 이미지가 컴퓨터 내부에 있다면 src의 값을 해당 이미지 파일의 주소,

웹상의 이미지라면 웹주소를 넣어 사용하면된다.

 

사진의 크기가 안맞는다면 "html image size attribute"나 "html 이미지 크기 속성"등을 검색하여 손수 조절해보자.

(아마 width이라는 태그가 나올 것이다.)

 

따라서 사진을 추가한 웹 사이트는 다음과 같다.

<h1>WEB</h1>
<img src="sample.jpg" width="500">
<p><h3>웹이란?</h3>월드 와이드 웹<strong>(World Wide Web)</strong>, 통칭 <u>웹</u>이나 <u>WWW</u>, <u>W3</u>라고 불리는 것은 인터넷을 사용하는 사용자들이 서로의 정보를 공유 할 수 있는 공간을 의미한다. 
<br>이는 주로 인터넷과 같은 의미로 사용되는 경우가 대부분이지만
웹의 경우 인터넷에 존재하는 수많은 서비스 중 하나일 뿐이다. 
<br>다만 앞서 말했듯 인터넷과 웹의 의미가 혼용되어 사용될 만큼 인터넷의 가장 큰 부분을 차지하는 서비스이다.</p>

<p><h3>웹의 특징</h3>웹은 인터넷 상에서 텍스트나 그림, 영상등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결하여 제공한다.
<br><u>하이퍼텍스트<strong>(Hypertext)</strong></u>란 문서 내부에 또 다른 문서로 연결되는 참조를 넣어 웹 상에 존재하는 여러 문서끼리 서로 참조 할 수 있는 기술을 말한다.
이때 문서 내부에서 다른 문서로 연결되는 참조를 <u>하이퍼링크<strong>(HyperLink)</strong></u>라고 한다. 
<br>이러한 하이퍼 텍스트 문서를 제작하는 가장 보편적인 언어를 HTML이라고 하며 누구나 사용가능하다. 또한 이렇게 작성된 웹 상의 문서에는 HTTP라는 프로토콜을 사용하여 접근 가능하다.</p>

<p><h3>웹의 구성</h3>웹에서는 위에서 언급한 HTML이라는 언어로 작성한 하이퍼텍스트 문서를 <u>웹 페이지<strong>(Web Page)</strong></u>라고 부른다.
<br>이러한 웹 페이지의 집합을 <u>웹 사이트<strong>(Web Site)</strong></u>라고 정의한다. 웹은 이렇게 하이퍼링크를 통해 연결되어있다.
<br>사용자가 웹 페이지에 참조된 하이퍼링크로 다른 웹 페이지에 이동하는 행위를 <u>웹 서핑<strong>(Web surfing)</strong></u>이라고 부르며, 
<br>이때 사용자가 웹 페이지를 이용할때는 Chrome, Microsoft Edge, FireFox 등등의 <u>웹 브라우저<strong>(Web Browser)</strong></u>를 사용한다.</p>

 

이제 전체적으로 속성이라는 문법이 왜 필요한지 알아보았다.

태그만 사용하기에는 정보 제공이 어렵기 때문에 우리는 속성이라는 문법을 같이 사용한다.

또한 속성 또한 태그와 같이 컴퓨터만 있다면 검색을 통해 쉽게쉽게 찾을 수 있다.

 

이렇게 HTML의 중요한 문법인 태그와 속성에 대해 전부 알아보았다.

 

다음글은 부모&자식 관계의 설명과 HTML 문서 구조에 대한 글이 작성될 예정이다.

 

긴글 읽어주셔서 감사합니다.

 

<정보 출처>

생활코딩_WEB_WEB1:최후의 문법 속성과 img

https://opentutorials.org/course/3084/18407