WEB 1주차 (HTML 1~16장)

6장. 기본 문법과 태그

1. <strong> : 강조 

Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications.

2. <u> : underline

<strong>creating <u>web</u> pages</strong>

7장. 혁명적인 변화

3. <h1>~<h6> : 제목을 나타내는 태그

<h1>This is heading.</h1>
<h2>This is heading.</h2>
<h3>This is heading.</h3>
<h4>This is heading.</h4>
<h5>This is heading.</h5>
<h6>This is heading.</h6>

이를 이용해 페이지의 제목 만들기

<h1>HTML</h1>
Hypertext Markup Language (HTML) is the standard markup language 
for <strong>creating <u>web</u> pages</strong> and web applications.

실행 결과

 

9장. 줄바꿈: <br> vs. <p>

4. <br> 태그

새로운 줄을 표현할 때 사용한다. html new line tag 

닫지 않는 태그이다. 시각적인 의미만 가지고 있기 때문 <br> 만을 사용 

<h1>HTML</h1>
Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. 
Web browsers recieve HTML documents from a web server or from local storage and render them into multimedia web pages. 
<br><br>HTML describes the structure of a web page semantically and originally included cuse for the appearance of the document. 
HTML elements are building blocks of HTML pages.

5. <p> 태그 : 단락 태그

 줄바굼이 아닌 단락을 표현할 때 사용하는 태그.

<br> 태그와 달리 열리는 지점과 닫히는 지점이 있으므로 열리는 태그와 닫히는 태그 둘 다 존재한다.  

<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. 
Web browsers recieve HTML documents from a web server or from local storage and render them into multimedia web pages.</p>
<p>HTML describes the structure of a web page semantically and originally included cuse for the appearance of the document. 
HTML elements are building blocks of HTML pages.</p>

<p> 태그를 사용했을 때는 한 단락의 의미가 강하고, <br>을 사용하는 것은 단순 시각적 줄바꿈이다. 따라서 위와 같은 경우에는 <p> 태그를 사용하는 것이 더 적절하다. 

 

<p> 를 사용할 경우 단락을 넓게 띄우지 못한다는 단점이 존재하지만, CSS를 이용해 이를 구현할 수 있다. 

<p style="margin-top: 40px;">

이렇게 CSS를 적용하면, 아래와 같이 페이지가 변화한다. 

해당하는 <p> 태그 위쪽에 여백이 40px만큼 생긴 것을 확인할 수 있다. 

 

10. HTML이 중요한 이유

제목이 coding인 사이트 (h3 태그를 썼을 때) vs 그냥 제목으로 보이기만 하는 coding (글자 크기 키운 것)

당연히 전자가 더 좋은 코딩이다. HTML 태그의 의미에 맞게 정확한 정보를 작성하는 것은 중요하다.  

HTML 코드는 그 자체로 정보를 줄 수 있다. (정보를 생산한다.)

 

<h3>coding</h3>

<p><strong><span style="font-size: 22px;">coding</span></strong></p>

11. 최후의 문법 속성과 <img> 태그

<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
<img>
</p><p style="margin-top:40px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.</p>

중간에 <img> 태그만 추가했다. 아직 사진은 보이지 않는 상태이다.

태그에 속성을 추가하여 이미지를 띄웠다. 

<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80">

아래와 같이 너비도 조절할 수 있다. 

<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" width="100%">

src, width와 같은 부분은 속성이라고 부른다. 아무 위치에나 쓸 수 있다. 부가적인 정보를 이를 통해 나타낼 수 있다.

 

12. 부모 자식과 목록

태그 두 개가 서로 포함 관계에 있을 때, 포함하는 태그를 부모 태그, 포함된 태그를 자식 태그라고 한다. 

<parent>
	<child></child>
</parent>

<parent> : 부모 노드 

<child> : 자식 노드 

 

목록 만들기 : <li>, <ui>, <ol>

 

<li>1. HTML</li>
<li>2. CSS</li>
<li>3. Javascript</li>

실행 결과 아래와 같다.

<li> 태그의 부모에 해당하는 <ui> 태그를 사용하면, 두 개 이상의 목록이 있을 때 이를 구분할 수 있다. 아래와 같은 코드를 실행시켜 보았다. 

 

<ul>
    <li>1. HTML</li>
    <li>2. CSS</li>
    <li>3. Javascript</li>
</ul>
<ul>
    <li>egoing</li>
    <li>k8805</li>
    <li>youbin</li>
</ul>

 

실행 결과 아래와 같다, 

 

다른 부모 태그인 <ol> 을 사용하여 숫자, 즉 순서가 있는 리스트로 만들 수 있다. 아래와 같은 코드를 실행시켜 보았다.

 

<ol>
    <li>1. HTML</li>
    <li>2. CSS</li>
    <li>3. Javascript</li>
</ol>
<ol>
    <li>egoing</li>
    <li>k8805</li>
    <li>youbin</li>
</ol>

 

<ol> : ordered list

<ul> : unordered list

<li> : list

 

13장. 문서의 구조와 슈퍼스타들 

이번 장에서는 문서의 구조를 만드는 법에 대해 살펴본다. 

1. 제목 : <title>

페이지의 제목을 html과 같이 내가 설정한 것으로 바꾸고 싶다면, <title> 태그를 이용하면 된다. 

<title>WEB1 - HTML</title>

실행 결과 실제로 페이지 제목이 바뀐 것을 확인할 수 있었다. 

다만, 제목을 한국어로 설정하고 코드를 실행하면 제목이 깨져 표시된다. 컴퓨터는 언어를 어떻게 저장할 것인지에 관한 약속을 하게 되는데, 에디터는 UTF-8이므로 페이지를 열 때도 UTF-8로 열어 주어야 한다. 이를 지시하기 위해서는 아래와 같이 코드를 작성한다. 

<title>HTML이란 무엇인가</title>
<meta charset="utf-8">

실행 결과 정상적으로 한글이 깨지지 않고 표시되었다.

 

2. 본문 : <body>, 이를 설명 : <head>

<html>
    <head>
        <title>HTML이란 무엇인가</title>
        <meta charset="utf-8">
    </head>

    <body>
        <ol>
            <li>1. HTML</li>
            <li>2. CSS</li>
            <li>3. Javascript</li>
        </ol>
        <ol>
            <li>egoing</li>
            <li>k8805</li>
            <li>youbin</li>
        </ol>
        <h1>HTML</h1>
        <p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
        <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" width="100%">
        </p><p style="margin-top:40px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.</p>
    </body>
</html>

맨 위에는 관용적으로 <!DOCTYPE HTML> 을 입력해 준다. 이 문서가 html임을 표시하는 것이다. 

<!DOCTYPE HTML>

 

14장. HTML 태그의 제왕

"링크" <a> 는 Hypertext에 해당하는 태그. 다른 웹 페이지로의 링크를 걸 수 있다.

HTML의 기술 공식 사용 설명서를 링크 걸어 보자. 

사이트 링크 : https://www.w3.org/TR/2011/WD-html5-20110405/

HTML5

 

링크를 걸고 싶은 곳을 a 태그로 감싼다. 

        <h1>HTML이란 무엇인가</h1>
        <p><a>Hypertext Markup Language (HTML)</a></p>

속성을 통해 어디로 연결할 것인지, 이동할 주소를 입력해 준다. 속성은 href에 저장한다. (h :hypertext, ref : reference)

        </ol>
        <h1>HTML이란 무엇인가</h1>
        <p><a href="https://www.w3.org/TR/2011/WD-html5-20110405/">Hypertext Markup Language (HTML)</a></p>

정상적으로 링크가 연결된 것을 확인할 수 있다. 

 

15장. 웹 사이트 완성

<html>
    <head>
        <title>HTML이란 무엇인가</title>
        <meta charset="utf-8">
    </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><a href="https://www.w3.org/TR/2011/WD-html5-20110405/">Hypertext Markup Language (HTML)</a></p>
</html>

1.html 코드

1.html 실행 결과 

<html>
    <head>
        <title>CSS란 무엇인가</title>
        <meta charset="utf-8">
    </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>CSS란 무엇인가</h2>
        <p><a href="https://www.w3.org/Style/CSS/specs.en.html">CSS</a></p>
</html>

2.html 코드

2.html 실행 결괴

 

<html>
    <head>
        <title>Javascript란 무엇인가</title>
        <meta charset="utf-8">
    </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>Javascript란 무엇인가</h2>
        <p><a href="https://aws.amazon.com/ko/what-is/javascript/">자바스크립트</a></p>
</html>

 

3.html 코드

16장까지 마무리