Stage2 - HTML과 태그(tag)

지난 스테이지에서 초초초 간단 HTML문서를 만들어 봤습니다. 이번 스테이지에서는 HTML을 구성하고 있는 태그(tag)란 무엇인지 알아보고, 또 직접 태그를 사용해서 HTML을 만들어볼 거에요.

태그(tag)로 구성된 문서 HTML

HTML문서를 자세히 살펴보면 꺽쇠 < >로 감싸져있는 코드가 많은 것을 알 수 있습니다. 바로이 꺾쇠로 감싸져있는 코드를 태그라고 부릅니다.

HTML의 기본 구조는 아래와 같이 태그가 데이터를 감싸고 있는 구조입니다.

<태그>데이터</태그>

데이터 수집은 1. 우리가 원하는 내용을 감싸고있는 태그를 찾아, 2. 태그가 가지고 있는 데이터를 찾는 것입니다.

간단한 텍스트 관련 태그 연습해보기

첫번째 스테이지에서 "Hello World!"를 출력한 것처럼 메모장을 켜고 아래 코드를 따라 써봅시다.

web1.html
<h1>태그를 배워봅시다</h1>
<h3>텍스트편</h3>
html은 <b>태그</b>로 이루어진 문서입니다.
텍스트를 <b>진하게</b> 만들 수도 있고,
<u>밑줄</u>을 칠 수도 있습니다. 참, 띄워쓰기를 하려면 <br>br 태그를 사용해주세요 :)<br>
<a href="https://naver.com">여기</a>를 클릭하면 네이버로 이동합니다!

그리고 이 HTML은 <web1.html>이라고 저장합니다. 웹브라우저를 실행하기 전에 잠시 태그들이 무슨 역할을 하는지 생각해보고, 웹브라우저를 실행해봅니다. * .html로 저장하면 파일을 저장한 위치로 이동해서 아이콘을 더블클릭합니다.

html코드와 실행결과를 비교해봅시다.

텍스트와 관련된 간단한 태그 모음

태그

설명

h1, h2, h3, h4, h5, h6

제목(headlne)으로 만들기

br

한줄 띄워쓰기(break)

b

진하기(bold)

u

밑줄(underline)

a

링크 연결하기(anchor)

각 태그들이 갖는 의미를 쉽게 유추할 수 있습니다. 이 때 태그의 사용법은 두가지로 나눌 수 있는데, 첫번째 가장 일반적인 모양은 태그로 데이터가 둘러쌓여있는 형태입니다. 앞에서 이야기한 것처럼 아래와 같은 형태로 사용할 수 있습니다. 대부분의 태그가 이런 형태로 사용됩니다.

<h1>태그를 배워봅시다</h1>

두번째는 태그가 독립적으로 사용되는 경우입니다. 위의 태그 모음 중 br태그(줄바꿈) 같은 경우는 태그로 데이터를 감쌀 필요없이 독립적으로 사용할 수 있습니다.

참, 띄워쓰기를 하려면 <br>br 태그를 사용해주세요 :)<br>

여러가지 태그 연습

새로운 메모장을 열고 이번엔 조금 더 재미있는 태그들을 연습해볼까요?

<img src="http://bit.ly/구글로고이미지">
<div>
아이디 <input><br>
비밀번호 <input><br>
<textarea>내용을 입력해주세요.</textarea>
</div>

이번에도 마찬가지로 잠시 어떤모양이 될지를 생각해보고 웹브라우저로 코드를 실행해봅시다.

브라우저 실행 결과

태그

설명

img

이미지 넣기(image)

div

무형의 박스 만들기

input

입력창 만들기

textarea

큰 입력창 만들

이번에는 단순한 그림과 텍스트박스가 웹페이지를 만들 수 있었습니다. 사실은 우리가 웹에서 쉽게 볼 수 있는 게시판의 형태도 이와 크게 다르지 않습니다. 이와 같이 태그를 이용하면 텍스트 뿐만 아니라 그림과 입력도구와 같은 여러가지 요소들을 원하는대로 배치할 수 있습니다.

태그와 속성(attribute) 이해하기

앞에서 실습했던 태그들을 잘 살펴보면 특이한 태그가 몇가지 있었습니다.

<a href="https://naver.com">여기</a>를 클릭하면 네이버로 이동합니다!
<img src="http://bit.ly/구글로고이미지">

a태그(링크 연결)와 img태그(이미지 넣기)는 태그를 구성하는 <, > 의 안에 hrefsrc라는 단어가 함께 들어있는 것을 볼 수 있는데 이와 같이 태그의 <, > 의 안에 함께 들어가서 해당하는 태그의 기능이나 모양을 결정하는 것을 속성이라고 부릅니다. 앞에서 만든 예제에 속성을 추가하면 다시 한 번 속성을 살펴볼까요?

<img src="http://bit.ly/구글로고이미지" width="250px">
<div>
아이디 <input type="text" placeholder="아이디"><br>
비밀번호 <input type="password" placeholder="비밀번호"><br>
<textarea rows="15" cols="30">내용을 입력해주세요.</textarea>
</div>

마찬가지로 속성에 어떤기능이 있을지 생각하면서 속성을 추가해봅시다!!

이전보다 꽤 보기좋게 바뀌었다.

태그

속성

설명

img

src

이미지의 위치, 주소(source)

width

이미지의 가로크기

height

이미지의 세로크기

input

type

입력도구의 종류를 선택합니다.(text:일반, password:별표)

value

입력도구의 초기값을 설정합니다.

placeholder

입력도구 안의 안내문을 설정합니다.

textarea

rows

입력영역의 행 수(세로 길이)

cols

입력영역의 열 수(가로 길이)

a

href

링하고자 하는 페이지의 url

위와 같이 속성을 통해서 태그의 기능이나 모양을 설정할 수 있습니다. 특히 hrefsrc와 같은 속성에 저장되어 있는 값은 데이터 수집의 대상으로도 사용되는 경우가 있기 때문에 알고 있으면 좋습니다.

TIP) <img src=???>

img 태그를 사용할 때는 이미지의 위치, 주소를 결정해주는 src속성을 꼭 사용해야합니다. 이 때 원하는 이미지의 주소를 웹에서 쉽게 가져오는 방법을 가르쳐 드릴게요!! (Chrome 기준)

원하는 이미지(구글로고) 위에서 마우스 오른쪽 클릭!

원하는 이미지를 마우스 오른쪽 클릭한 후 "이미지 주소 복사"를 선택해주면, 실제로 이미지가 저장되어있는 서버의 주소를 복사할 수 있습니다.

https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png

복사한 결과를 붙여넣으면 위와 같은 URL이 나오는데, img태그의 src 속성에 위 URL을 넣어주면 구글로고를 자신의 웹페이지에 쉽게 추가할 수 있습니다.

<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">

웹페이지 만드는 방법이 더 궁금하다면?

이 클래스의 목표는 페이지를 만드는 것이 아니라 데이터를 수집하는 것이기 때문에 더이상 HTML에 대해서는 다루지 않습니다. HTML에 대해서 더 공부하고 싶다면 w3schools(https://www.w3schools.com/)에서 다양한 HTML/CSS에 대해서 공부할 수 있습니다.

실제로 홈페이지를 만든 웹개발이 궁금하다면 코알라 웹개발 스터디를 참고해보세요. 코알라 홈페이지(오프라인/온라인 스터디 신청): https://coalastudy.com/study/파이썬_웹개발_스터디 코알라 인터넷 공개자료: https://book.coalastudy.com/python-django/