Skip to content

Latest commit

 

History

History
347 lines (308 loc) · 19.5 KB

2.web_tag.md

File metadata and controls

347 lines (308 loc) · 19.5 KB
Raw

2. 웹페이지

2.1 웹페이지

2.1.1 웹페이지란?

우리가 보는 웹페이지는 어떻게 만들어질까요?
바로 프론트엔드와 백엔드, 이렇게 두가지로 나눌 수 있습니다.
자세히 살펴보려면 복잡하겠지만, 일단은 프론트엔드는 말 그대로 앞에서 보이는 부분이고, 백엔드는 뒤에서 일하는 부분이라고 생각합시다.
그중에서도 앞으로 저희가 배울 것은 바로 프론트엔드 부분입니다.
우리가 네이버에 접속하면 네이버 로고와 검색, 뉴스 등이 보입니다. 이렇게 보이는 것들을 구성하는 것이 바로 프론트엔드입니다.
웹 프론트엔드를 개발하기 위해서는 기본적으로 HTML과 CSS를 배워볼 것 입니다. HTML이란 웹페이지의 뼈대를 잡을때 사용하는 언어이고, CSS는 HTML로 구성된 뼈대를 예쁘게 꾸며주는 언어입니다.
예를 들어, HTML을 이용해서 검색창과 글, 사진등을 웹페이지에 넣었다면, CSS를 통해 글과 사진의 위치, 색깔등을 바꿔서 더 예쁘게 만드는 것이죠.

2.2 HTML의 태그(tag)

위에서 말했듯이 HTML은 웹페이지의 뼈대를 구성하는 언어입니다.
HTML은 글을 꾸며주는 여러개의 태그들로 이루어져 있습니다. 현재는 150종이 넘는 태그들이 존재하고 있습니다.
150개가 넘는다니 외울게 많아 보이지만, 걱정마세요! 구글이 분석한 정보에 따르면 한 웹페이지에 평균적으로 28종류의 태그들이 사용되었다고 합니다.
이 강의를 하는 저도 지금 생각하는게 열 몇개 정도밖에 없네요 하하
그럼 지금부터 이 수많은 태그들 중 가장 자주 사용 되는 태그들을 알아보겠습니다. 파이참을 켜봅시다!

2.2.1 <head>태그와 <body>태그

새로운 프로젝트에서 1.html파일을 만들어 봅시다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

이렇게 나왔나요? 와 가 보이시나요?
<head>태그는 페이지의 정보를 저장하는 태그입니다. 화면에는 나타나지 않지만, 웹페이지를 구성하고 표현하는데 필요한 정보들을 적어놓는 공간입니다.
무엇을 적을지는 강의를 진행하면서 차차 알아가봅시다. :) 필요한 정보들을 다 넣었으면 반드시 </head>태그를 사용해 닫아줍니다.

다음은 <body>태그입니다. 지금은 내용이 없지만 이곳에 적혀질 코드가 우리가 보는 화면에 나타나게 됩니다.
자 그럼 지금부터 <body>안에 채워넣을 코드들을 공부해 봅시다!

2.2.2 <h>태그

먼저 제목을 나타내는 <h>태그입니다. <h1>부터 <h6>까지 있고, 숫자가 커질수록 제목의 글자는 작아집니다.
직접 코드를 넣어서 확인해보겠습니다.

<h1>제목을 입력하세요.</h1>
<h2>제목을 입력하세요.</h2>
<h3>제목을 입력하세요.</h3>
<h4>제목을 입력하세요.</h4>
<h5>제목을 입력하세요.</h5>
<h6>제목을 입력하세요.</h6>

heading_tag


2.2.3 <p>태그와 <br>태그

제목을 넣었으니 이제 글을 넣어봅시다! 글을 그냥 넣게 되면 HTML코드 안에서 Enter키를 눌러서는 개행이 안됩니다.
따라서 개행을 위해서 넣는 코드를 따로 사용해야 하는데요, 바로 <br>태그 입니다. 코드로 한번 볼까요?


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

위 코드를 보시면 <br>태그를 세번 연속으로 적은 것이 보이는데요, Enter키를 세번 누른것과 같은 효과가 있습니다!
그리고 </br>과 같이 닫는 태그를 사용하지 않는데, 개행을 하는데는 열고 닫아줄 필요가 없기 때문에 쓰지 않습니다.

그럼 이번에는 <p>태그를 한번 볼까요? <p>태그는 문단을 정할 때 사용합니다. 바로 예시를 보면서 배워보겠습니다.

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

위 코드를 보시면 각 문단들을 <p> </p> 사이에 넣어줌으로써, 문단끼리 나누어졌습니다!

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

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

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

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

2.2.4 이미지태그<img>와 태그의 속성

제목과 글을 넣었으니 그림도 넣어봅시다! 바로 <img>태그입니다. 위의 코드에서 맨 마지막에 이미지를 넣어 볼까요?
코드를 쓰기 전에 넣을 이미지를 준비해서 1.html이 있는 폴더에 넣어줍니다.

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

<img src="headal.png">가 보이시나요? 여기서 src는 source의 줄임말입니다.
즉, 넣을 이미지의 주소나 파일 이름을 넣는 공간입니다. 여기서는 haedal.png라는 파일을 이미지의 소스로 사용했습니다.
자 이미지를 넣어봤는데 이미지의 크기가 너무 큽니다. 이를 조절하기 위해 태그의 속성을 사용해 봅시다.
사람들이 HTML을 만들 때, 태그의 이름만으로는 많은 정보를 넣을 수 없었습니다. 그래서 태그의 속성이 생겼습니다!
이미지 코드에 크기를 조절하는 속성을 추가해 봅시다.

<img src="haedal.png" width=100%>

width=100%라는 코드가 추가되었습니다. 이미지의 너비를 화면의 100%에 맞춰 주는 코드입니다.
여기서는 width와 100%를 사용했지만, 높이를 height로 조절할 수 있고, 수치도 %가 아닌 px단위로 세밀하게 조절할 수 있습니다.

2.2.5 태그의 제왕 <a>

이번에는 <a>태그에 대해서 배워봅시다. 이 태그의 이름은 anchor의 첫글자 a에서 왔다고 합니다.
앵커는 배가 정박할 때 사용하는 닻을 의미하는데요, 정보의 바다에 정박한다는 멋진 뜻을 가진 a 태그는 어떤 기능을 표현하는 것일까요?
바로 링크와 관련된 기능입니다. 웹페이지를 살펴보면 글씨나 버튼을 클릭했을때, 다음 페이지로 넘어가는 기능들이 있는데요 바로 그 기능을 만들기 위해 사용되는 태그입니다.
a 태그의 속성인 href는 a 태그의 기본 문법입니다. href 속성의 값에는 웹페이지, 이미지, 동영상, 파일 등의 주소를 넣습니다.
웹페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리합니다.
여기서 href는 HyperText Reference의 약자입니다.

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

이렇게 작성한다면 위의 HTML글자가 파란색으로 바뀌고,
클릭하면 https://dev.w3.org/html5/html-author/페이지로 연결됩니다!

2.2.6 태그끼리의 관계

이번에는 태그끼리의 관계에 대해서 알아보겠습니다. 우리가 지금까지 작성한 코드를 한번 볼까요?

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

<body> 태그 안의 코드를 살펴봅시다. 간략하게 태그만 표시하겠습니다.

<body>
	<h1></h1>
	<p>
		<a></a>
	</p>
	<p></p>
	<img src="haedal.png">
</body>

<body>태그 안에 <h>, <p>, <img> 태그들이 있고, <p>태그 안에는 <a>태그가 있습니다.
이렇개 태그끼리는 관계가 형성되는데요, <body>태그가 다른 태그들을 감싸고 있습니다.
이 때, <body>태그를 부모태그, <body>태그 안의 다른 태그들을 자식태그라고 합니다.
그러면 똑같은 이유로 자연스럽게 <p>태그가 부모태그, <a>가 자식 태그가 됩니다.
<p>태그는 <body>태그의 자식이면서 동시에, <a>태그의 부모가 됩니다.
항상 이 부모자식 관계가 고정된 것은 아닙니다. 어떤 태그가 다른 태그를 감싸고 있다면 그것이 바로 부모태그가 됩니다.

하지만 이 관계가 고정된 태그들이 있습니다. 목록(list)태그가 바로 그 중 하나입니다.

2.2.7 <li>태그

목록을 나타내는 태그는 <li>입니다. 우리가 만든 웹에 목차와 참가자들을

  • 태그로 추가해봅시다.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3> 목 차 </h3>

<li> HTML</li>
<li> CSS</li>
<li> JavaScript</li>

<li>참가자1</li>
<li>참가자2</li>
<li>참가자3</li>

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

    목차와 참가자들을 <li>태그를 사용해 추가해 보았습니다. 그런데, 목차와 참가자의 구분이 전혀 가지 않죠?
    <li>태그와 함꼐 다니는 <li>의 부모태그들을 사용해서 구분되게 하겠습니다.

    <ol>
	<li> HTML</li>
	<li> CSS</li>
	<li> JavaScript</li>
</ol>

<ul>
	<li>참가자1</li>
	<li>참가자2</li>
	<li>참가자3</li>
</ul>

    <li>태그를 <ul>태그와 <ol>태그로 감쌌습니다. 이 태그들은 항상 같이 붙어다니는데요, 위에서 말한 다른 태그들과는 달리 <li>태그는 항상 <ul>태그와 <ol>태그의 자식태그입니다.

    2.3 웹사이트

    링크를 통해서 서로 결합되어 있는 웹페이지들의 그룹을 웹에서는 웹사이트(web site)라고 합니다.
    지금까지 배운 내용을 토대로 웹사이트를 만들어 봅시다!
    웹사이트 예시

    준병이가 진행한 실습

    test.html

    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>제목입니다.</title>
</head>
<body>
    <h1>제목1</h1>
    <h6>제목2</h6>
    여기에 내용 채워넣음<br><br>
    <p>가나다라마바사
        아자차카타파하
        <a href="test2.html"> 테스트2 </a>
    </p>

    아야어여오요우유<br>
    <img src="이미지에서 오른쪽 마우스 클릭하고, 이미지 주소 복사해 붙이기">
    <br>
    <a href="https://www.naver.com"> 네이버  </a>
    <br>
    <a href="test2.html"> 테스트2 </a>

    <ul>
        <li> 리스트1 </li>
        <li> 리스트2 </li>
        <li> 리스트3 </li>
    </ul>

    <ol>
        <li> 리스트9 </li>
        <li> 리스트8 </li>
        <li> 리스트7 </li>
    </ol>

</body>
</html>
    •