Skip to content

Latest commit

 

History

History
412 lines (337 loc) · 18.3 KB

3.yesterdayWeb.md

File metadata and controls

412 lines (337 loc) · 18.3 KB
Raw

나만의 웹을 구성해 보자

3. 어제 만든 웹페이지

목차
3.1 부모자식과 목록
3.2 문서의 구조와 슈퍼스타들
3.3 HTML 태그의 제왕
3.4 웹사이트 완성
과제 : 사진중심의 웹사이트 만들기

3.1 부모자식과 목록

3.1.1 부모자식

  • 태그 간의 관계를 나타내는 표현인 부모(parent),자식(child)에 대해서 알아보겠습니다.
    아래 태그를 보시죠.(부모자식의 관계를 설명하기 위한 태그이고 실제로 있는 태그는 아닙니다.)
<parent>
    <child></child>
</parent>

parent 태그에 대해서 child 태그를 자식 태그라고 합니다.
(부모가 자식을 품고 있다고 생각하시면 됩니다.)
그리고 child 태그에 대해서는 parent 태그를 부모 태그라고 합니다.

  • 또 다른 예시입니다. 아래의 a 태그에 대해서는 조금 있다가 배울 것입니다.
<p>
   <a href="https://opentutorials.org">opentutorials</a>
</p>

p 태그가 a 태그의 부모 a 태그가 p 태그의 자식입니다.
그런데 a 태그는 꼭 p 태그의 자식이어야 하는 것은 아닙니다.
마찬가지로 p 태그가 꼭 a 태그의 부모일 필요는 없습니다.
직장의 상하관계처럼 필요에 따라서 관계가 달라질 수 있습니다.
그런데 몇몇 태그들은 부모 자식 관계처럼 고정된 관계인 태그들이 있습니다.


3.1.2 목록(list)

  • 이 목록 태그가 부모 자식 관계처럼 고정된 관계인 태그입니다.
    저번 시간에 만들었던 웹페이지에서 아래와 같이 목차를 추가해봅시다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
1. HTML<br>
2. CSS<br>
3. JavaScript<br>

<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" width="100%">
</body>
</html>

img9


목차 비슷하게 나오죠? 그런데 HTML을 고안한 사람들은 목차를 표현할 때 쓰라고 태그를 마련해 두었습니다. 그럼 우리는 그걸 써야 합니다. 그래야 웹페이지가 더 가치있게 됩니다. 목차가 영어로 무엇인가요? list이죠? 앞에 두 글자는요? li입니다.
아래와 같이 태그를 작성해봅시다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>

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

<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" width="100%">
</body>
</html>

img10


참가자의 목록도 추가해보았습니다. 목차와 참가자의 목록이 구분이 가나요? 이렇게 목록은 다른 목록과 구분할 수 있도록 경계가 필요합니다. 이 때 사용하는 태그가 <ul> 태그입니다. 적용해봅시다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>1. HTML</li>
    <li>2. CSS</li>
    <li>3. JavaScript</li>
</ul>
<ul>
    <li>참가자1</li>
    <li>참가자2</li>
    <li>참가자3</li>
</ul>
<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" width="100%">
</body>
</html>

img11


li 태그는 ul 태그를 꼭 필요로 합니다. ul 태그 역시 li 태그가 없다면 존재 가치가 없습니다.
이 둘은 서로 아주 밀접한 관계입니다.


  • 위의 코드에서 수업 목록을 자세히 보시죠. 만약 수업의 목록이 3개가 아니라 1억개라고 생각해 보세요. 1억개의 항목을 간신히 완성했습니다.
    그런데 누군가가 저 중에 첫번째 항목을 지워달라고 하면 여러분 어떻게 해야 하나요?
    일일이 나머지의 번호를 바꿀 필요가 없도록 해주는 친절한 태그가 있습니다.
    바로 <ol> 태그 입니다. 적용해봅시다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

<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" width="100%">
</body>
</html>

img12


ul 태그가 ol 태그로 변경되었습니다.
ul은 unordered list의 약자이고, ol은 ordered list의 약자입니다.

3.2 문서의 구조와 슈퍼스타들

  • 저번 시간에 html 파일을 만들었을 때, 아래와 같이 기본적으로 적혀있던 코드들이 있었죠?
    이것들에 대해서 알아보도록 하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

  • 문장이 모여서 페이지가 되고, 페이지가 모여서 책이 되고, 책에는 표지가 있고, 표지에는 제목과 저자가 표기됩니다. 이처럼 정보가 많아짐에 따라서 정보를 잘 정리정돈하기 위한 체계, 다시 말해서 구조라는 것이 필요합니다.
    그 구조 만드는 법을 살펴보겠습니다.

3.2.1 <title>

img13


우리가 만든 웹페이지의 탭을 보면 Title이라고 되어있죠? <title> 태그에 의해서 웹페이지의 제목이 결정됩니다. 특히 이 태그는 검색엔진이 웹페이지를 분석할 때 가장 중요하게 생각하는 태그이기 때문에 title 태그를 쓰지 않으면 정말 큰 손해입니다.
각자 붙이고 싶은 제목으로 바꿔봅시다.


3.2.2 <meta>

  • 우리가 만든 html 파일에서 <meta charset="UTF-8"> 이 부분을 빼고 웹페이지를 실행해보겠습니다. img14

그러면 위와 같이 한글이 깨지는 것을 볼 수 있습니다. 파이참 화면창 왼쪽 하단을 보시면 UTF-8 이라고 적혀있습니다. 저건 이 웹페이지가 UTF-8 방식으로 저장되었다는 뜻입니다. UTF-8이 무엇인지 모르셔도 됩니다. 하지만 이 웹페이지를 UTF-8로 저장했다면 웹페이지를 열 때도 UTF-8 방식으로 해석해서 열어야 한다는 것은 이해할 수 있겠죠?


영어가 아닌 문자가 깨지는 이유는
웹페이지가 저장된 문자 표현 방식과 웹브라우저가 웹페이지를 해석하는 방식이 일치하지 않을 때
웹브라우저는 저렇게 이상한 문자를 표시하게 됩니다.
이럴땐 웹브라우저야~ 이 웹페이지는 UTF-8로 만들어졌기 때문에 UTF-8로 열어야 해~
라는 의미로 <meta charset="UTF-8">을 입력해주면 해결이 됩니다.

3.2.3 <body>,<head>,<html>

  • 본문은 body 태그로 본문을 설명하는 태그는 head 태그를 사용합니다. body 태그와 head 태그를 감싸는 하나의 태그를 두기로 약속했습니다. html 태그 입니다.

  • 이 웹페이지가 HTML로서 만들어졌다는 것을 표현하기 위해서 문서의 시작에 다음과 같은 코드를 추가합니다. <!doctype html>

  • 이렇게 해서 웹페이지의 구조에 대해 알아보았습니다. 자주 방문하는 아무 웹사이트나 방문해 보세요. 오른쪽 클릭을 해서 소스보기를 해 보세요.
    제일 위에 <!doctype html>이 보이시죠? 그 아래에는 html 태그가 있죠? html 태그 아래에는 head, body 태그가 있을 것입니다.

3.3 HTML 태그의 제왕

  • 이 태그의 이름은 anchor의 첫글자 a입니다. 앵커는 배가 정박할 때 사용하는 닻을 의미합니다. 정보의 바다에 정박한다는 의미의 시적인 표현인 a 태그는 어떤 기능을 표현하는 것일까요?
이 태그는 바로 링크입니다.

  • a 태그의 속성인 href는 a 태그의 기본 문법입니다. href 속성의 값에는 웹페이지, 이미지, 동영상, 파일 등의 주소를 넣습니다. 웹페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리합니다.
    href는 HyperText Reference의 약자입니다.

  • 우리가 만든 웹페이지에 링크를 적용시켜 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>해달해달</title>
</head>
<body>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

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

웹페이지에서 링크를 들어가보면 현재의 탭에서 링크가 열린다. 하지만 target="_blank" 이 속성을 추가하면 새 탭에 링크가 열리게 된다.


3.4 웹사이트 완성

  • 링크를 통해서 서로 결합되어 있는 웹페이지들의 그룹을 웹에서는 웹사이트(web site)라고 합니다. 지금부터 웹사이트를 만들어 봅시다.

    https://gwannyung.github.io/Website/


코딩을 시작하기 전에 완성된 결과물을 먼저 봅시다.


  • WEB이라는 큰 제목을 만들어주고 title도 변경해줍니다.
    그리고 아래 코드와 같이 각각 링크를 달아줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WEB1</title>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a> </li>
</ol>

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

html 파일을 링크로 걸어줬으니 html 파일을 만들어줘야겠죠?
화면창 왼쪽에서 1.html을 복사하고 붙여넣기 해줍니다.
각각 이름을 index,1,2,3 으로 바꿔줍니다. 그러면 아래와 같이 나오겠죠?


img15