Skip to content

Latest commit

 

History

History
278 lines (215 loc) · 14.7 KB

2.webWithImg.md

File metadata and controls

278 lines (215 loc) · 14.7 KB
Raw

웹에 대해 알아보자

2. 이미지 있는 웹

목차
2.1 WWW란?
2.2 HTML 태그
과제 : Thumbnail

2.1 WWW란?

2.1.1 WWW의 정의

worldwide web의 줄임말로 HTML로 작성된 홈페이지의 데이터는 인터넷에서 상호 링크하여 복잡한 컴퓨터 네트워크를 형성하고 있다. 마치 거미집처럼 복잡하게 접속되어 있어서 Worldwide(세계적인) Web(거미집)이라고 불리게 되었다.

2.1.2 WWW의 유래

WWW는 유럽의 입자물리학연구소(CERN : the European Laboratory for Particle Physics)에서 얻어지는 엄청난 양의 연구 결과 및 자료의 효율적인 공유를 목적으로 1989년 3월 팀 버너스 리(Tim Berners Lee)의 제안에 의해 연구가 시작되어 개발되었다. 그 결과 인터넷을 통해 거미줄처럼 연결되어 있는 컴퓨터들이 가지고 있는 정보를 모든 사람들이 쉽게 접근할 수 있게 되었다. 이는 WWW가 메뉴 방식으로 서비스를 하던 기존의 인터넷 서비스에 비해, 하이퍼텍스트를 기반으로 이루어져 있어 문서 활용에 엄청난 편리성을 제공하기 때문이다.

2.1.3 WWW의 역할

WWW는 인터넷상에서 제공되는 많은 서비스의 통합된 접속도구의 역할을 하여 기존 프로토콜과 서비스를 제공하며, 인터넷상에서 생겨나는 가상의 조직체나 공동체에서 능동적 참여를 꾀할 수 있게 한다. 또 인터넷에 존재하는 일반 텍스트 형태의 문서, 그림, 음성, 그리고 동화상 등의 각종 자료들을 인터넷 주소(URL)를 이용해서 하나의 문서 형태로 통합적으로 관리ㆍ제공해 주는 역할을 한다. 이 WWW에 관련된 기술은 월드 와이드 웹 컨소시엄(W3C)이 개발하고 있으며, W3C는 HTML, HTTP 등의 표준화 등도 진행하고 있다.

2.2 HTML 태그

2.2.1 태그에 대해 알아봅시다.

  • html 태그는 새 옷에 달린 태그가 옷을 설명해주는 것처럼 html 문서에서 사용되는 중요한 문법이다. 현재 150개가 넘는 태그들이 존재하며, 자주 사용되는 태그들이 있다.

  • 구글에서는 전 세계에 있는 수많은 웹페이지를 분석합니다. 그 분석 결과를 공개했었는데 그 결과를 보기 좋게 잘 정리 정돈한 사이트가 있습니다. https://advancedwebranking.com/html/

2.2.2 강조태그(strong,u 태그)

  • 새로운 프로젝트를 만들고 1.html을 생성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

html 파일 생성하는 방법은 venv 폴더위에 프로젝트이름으로 되어있는 폴더에서 마우스 오른쪽 클릭 후 New -> HTML File하면 됩니다.


  • 표시하고 싶은 정보를 body에 입력합니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 웹 언어의 한 종류이다.
특히 하이퍼텍스트를 작성하기 위해 개발되었으며, 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다.
</body>
</html>

파이참 화면창의 오른쪽 상단에 있는 브라우저들 중 크롬을 클릭하여 현재 웹페이지를 띄워봅시다.


img1


  • 강조하고 싶은 부분을 태그를 이용하여 강조해봅시다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 <u>웹 언어의 한 종류</u>이다.
특히 <strong>하이퍼텍스트를 작성하기 위해 개발</strong>되었으며, 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다.
</body>
</html>

글씨를 진하게 하고 싶을 때 <strong>과 </strong>사이에 강조하고 싶은 부분을 넣고 저장 후 페이지를 새로고침 해봅시다. 또한 밑줄로 강조하고 싶을 때는 <u>,</u>를 이용하여 강조합니다. 여기서 u는 underline의 약자입니다.


2.2.3 줄바꿈태그(br,p 태그)

  • 줄바꿈 태그를 사용해봅시다.

    • 새로운 정보를 추가해봅시다. 그러면 원래 있던 내용과 그대로 이어져서 구별이 잘 안되죠? 태그를 이용하여 줄바꿈을 해봅시다. 줄바꿈 태그는 한 줄을 띄워주는 <br>과 단락을 표현하는 태그 <p>,</p>가 있습니다. 여기서 p는 paragraph의 약자입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 <u>웹 언어의 한 종류</u>이다.
특히 <strong>하이퍼텍스트를 작성하기 위해 개발</strong>되었으며, 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다.
<br><br><br>
HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다.
HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠괄호"<>"를 사용하여 나타낸다. 일반적으로 태그는 시작과 끝을 표시하는
2개의 쌍으로 이루어져 있으나 "img", "br"등의 태그와 같이 시작태그만으로 그 영향을 나타내는 경우도 있으며,
종료 태그의 이름은 슬래시 문자[/]로 시작된다. 이와같이 HTML로 작성된 문서를 HTML문서라 하며 이 HTML로 작성된 문서를
웹 브라우저가 해석하여 이용자에게 보여주게 된다. HTML에서는 문서가 별도의 코드(code)를 인식하여 완벽한 하이퍼텍스트를
만들 뿐만 아니라 단어 또는 단문을 인터넷의 다른 장소나 파일로 연결시킬 수 있다.
</body>
</html>

img2


<br>은 한 줄만 띄워지므로 단락을 표현하기엔 불편합니다. 이번엔 <p> 태그를 사용해보겠습니다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 <u>웹 언어의 한 종류</u>이다.
특히 <strong>하이퍼텍스트를 작성하기 위해 개발</strong>되었으며, 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다.
</p>
<p style="margin-top : 45px">HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다.
HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠괄호"<>"를 사용하여 나타낸다. 일반적으로 태그는 시작과 끝을 표시하는
2개의 쌍으로 이루어져 있으나 "img", "br"등의 태그와 같이 시작태그만으로 그 영향을 나타내는 경우도 있으며,
종료 태그의 이름은 슬래시 문자[/]로 시작된다. 이와같이 HTML로 작성된 문서를 HTML문서라 하며 이 HTML로 작성된 문서를
웹 브라우저가 해석하여 이용자에게 보여주게 된다. HTML에서는 문서가 별도의 코드(code)를 인식하여 완벽한 하이퍼텍스트를
    만들 뿐만 아니라 단어 또는 단문을 인터넷의 다른 장소나 파일로 연결시킬 수 있다.</p>
</body>
</html>

img3


각 단락마다 <p>와</p>를 달아줍시다. 그러면 단락별로 나눠지는데 여기서 단락 간의 차이가 작아서 구별이 어렵습니다. 이를 해결하기 위해서는 CSS라는 기술이 있습니다. HTML이 정보를 표현하다면 CSS는 정보를 꾸며주는 역할을 합니다. CSS에 대해서는 4주차에 자세하게 배우고 지금은 한번 따라만 해봅시다. style="margin-top : 45px의 의미는 이 단락 위(top)에 여백(margin)을 45px만큼 준다는 것입니다. 실제로 확인해보면 단락 간의 여백이 생긴 것을 확인할 수 있습니다.


  • <br>태그와 <p>태그의 차이점

    • <br>태그는 <p>태그와는 다르게 닫지 않고 있습니다.(</br>이 없다는 의미) HTML의 여러 태그 중에 무엇인가를 설명하지 않는 태그들은 감싸야 하는 컨텐츠가 없기 때문에 태그를 닫지 않는다는 규칙이 있습니다.

    • <p>태그는 단락과 단락이 고정되어 있기 때문에 시각적으로 자유도가 떨어집니다. 반면 <br>태그는 쓰는 만큼 줄바꿈이 되기 때문에 원하는 만큼 간격을 조정할 수 있다는 장점이 있습니다. 하지만 위에서 언급한 CSS라는 기술을 사용하면 <p>태그의 한계를 극복할 수 있습니다.

    • <p>태그는 단락의 경계를 분명히 하면서 CSS를 통해서 <p> 태그의 디자인을 자유롭게 변경할 수 있기 때문에 <br> 태그 보다 <p> 태그가 더 좋은 선택입니다.


2.2.4 제목태그(h 태그)

  • heading(제목)의 약자인 h를 이용한 태그가 있습니다. h1부터 h6까지 있고 h1이 제일 큰 글자 h6가 제일 작은 글자입니다. 그럼 이제 사용해봅시다
<h1>제목을 입력하세요.</h1>
<h2>제목을 입력하세요.</h2>
<h3>제목을 입력하세요.</h3>
<h4>제목을 입력하세요.</h4>
<h5>제목을 입력하세요.</h5>
<h6>제목을 입력하세요.</h6>

img4


h1부터 h6까지 사용해보았습니다. 저는 h1 태그를 사용하여 제목을 HTML이라고 하겠습니다.


2.2.5 이미지태그(img 태그),속성(attribute)

  • 글만있는 웹페이지는 지루하기 때문에 img라는 태그를 이용하여 이미지를 넣어봅시다. 그리고 태그의 심화 문법인 속성에 대해서도 배워봅시다.
  1. 속성
  • 태그를 만든 사람들은 태그 이름만으로는 정보가 부족하다는 것을 알게 되었습니다. 그래서 고민에 빠집니다. 그리고 새로운 문법을 도입하게 됩니다. 속성(attribute) 입니다. 속성을 적용해 봅시다.
  1. img 태그
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>HTML</h1>
<p>
인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 <u>웹 언어의 한 종류</u>이다.
특히 <strong>하이퍼텍스트를 작성하기 위해 개발</strong>되었으며, 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다.
</p>
<p style="margin-top:45px">
HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다.
HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠괄호"<>"를 사용하여 나타낸다. 일반적으로 태그는 시작과 끝을 표시하는
2개의 쌍으로 이루어져 있으나 "img", "br"등의 태그와 같이 시작태그만으로 그 영향을 나타내는 경우도 있으며,
종료 태그의 이름은 슬래시 문자[/]로 시작된다. 이와같이 HTML로 작성된 문서를 HTML문서라 하며 이 HTML로 작성된 문서를
웹 브라우저가 해석하여 이용자에게 보여주게 된다. HTML에서는 문서가 별도의 코드(code)를 인식하여 완벽한 하이퍼텍스트를
만들 뿐만 아니라 단어 또는 단문을 인터넷의 다른 장소나 파일로 연결시킬 수 있다.</p>
<img src="haedal.png">
</body>
</html>

img6


프로젝트폴더에 본인이 넣고 싶은 사진을 넣어서 위처럼 img 태그의 src(source) 속성을 이용하여 이미지를 넣어줍시다. unsplash.com이미지가 없으면 이 사이트에서 이미지를 자유롭게 선택해보세요.
넣었더니 이미지의 크기가 너무 크죠? 이를 위해서 크기를 조정할 수 있는 width 속성이 있습니다.
src 속성뒤에 width="100%"를 입력해보세요. 숫자나 %를 사용하면 원하는 크기로 조정할 수 있습니다. 100%로 하면 아래와 같이 화면에 딱 맞게 조정됩니다.


img5


이번 시간에는 WWW와 HTML 그리고 몇 가지 태그에 대해서 배웠습니다. 2.2.1에 있는 구글에서 제공한 사이트에는 아래와 같이 웹페이지를 만들 때 얼마나 많은 태그를 사용하는지에 대한 통계가 있습니다. 평균적으로 28개의 태그를 사용한다고 합니다. 이번 시간에 배운 태그들이 몇 개 보이죠? 다음 시간에는 또 다른 자주 쓰이는 태그와 링크에 대해서 배워보도록 하겠습니다.


img7


img8

과제 : Thumbnail