인프런 생활코딩 Section3

 

3-1.

150의 tag가 존재하지만 그중에 실제로 하나의 웹사이트에 쓰이는 태그는 평균 26개에 불과하다.

 

웹사이트를 못 찾아서 동영상 복붙 ..

위로 갈수록 자주 쓰이는 태그다.

 

 

3-2.

 

다음과 같이 한 줄을 더 입력했고, 한 줄 띄어 적었지만 웹페이지에는 한 문단으로 출력이 된다.

 

* <br></br>

한 줄을 띄어 출력하려면 <br></br>이라는 태그를 붙이면 된다. 끝에 </br>은 붙여도, 안 붙여도 된다.

 

<br>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.</br>

 

 

* <p></p>

하지만 단락을 나누기 위한 태그가 따로 존재한다.

다음과 같이 <p></p> 를 사용하면 단락을 나눈다는 뜻이다.

<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.</p><p>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>

 

 

사실 다음과 같이 css 문법으로 더 정교하게 단락 간격을 조정할 수 있지만 이건 다음에 더 자세히.

<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.</p><p style="margin-top:45px;">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>

 

이런 식으로 필요한 기능의 태그를 하나하나 찾아가면서 익히면 된다..

 

3-3.

 

오늘날 검색엔진이라는 개념이 중요해지면서 html 태그로 어떤 걸 쓰느냐도 중요해졌다.

예컨대 다음 두 html 코드를 비교해보자. 검색엔진에 coding이라고 입력했다고 하면

<span style="font-size:24px">
        coding
</span>

<h3>coding</h3>

 

위의 코드는 시각적으로만 coding이라는 제목을 가지고 있는 웹사이트, 아래의 코드는 coding이라는 제목을 가진 웹사이트다.

따라서 전자보다 후자가 검색 엔진에 더욱 유리하다.

두 코드가 겉으로 보기에는 같게 보일 수 있지만 사실 너무 다른 의미를 가진다는 것이다.

html의 tag를 의미에 맞게 정확하게 사용하는 것이 비즈니스적으로, 휴머니즘적으로(접근성 높도록) 중요하다.

 

 

3-4. 속성

 

* <img src="(이미지 주소)">: 속성

이미지를 웹페이지에 포함시킬 때 필요

 

web 파일에 아무 이미지나 다운받고 

 

 

<img src = ~~~> 라는 속성코드 추가했더니

<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="coding.jpg" width="100%"></p><p style="margin-top:45px;">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>

 

 

문단 사이에 "coding.jpg"이미지가 100%의 크기로 첨부된다.

 

태그의 이름만으로 정보가 부족할 때 추가하면 되고 아무 데나 넣으면 된다.

 

 

3-5.

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

 

다음과 같이 <br> 써도 되지만

 

목차를 위한 태그가 따로 있다.

 

*<li></li>

<li>1. HTML</li>

<li>2. CSS</li>

<li>3. JavaScript</li>

<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="coding.jpg" width="100%"></p><p style="margin-top:45px;">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>

 

여기에 하위 목차를 두고싶지만 똑같이 <li></li> 쓰면 상위 목차와 급이 같아지기 때문에 

 

<li>1. HTML</li>

<li>2. CSS</li>

<li>3. JavaScript</li>

<li>park</li>

<li>yeonsu</li>

<li>2276131</li>

<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="coding.jpg" width="100%"></p><p style="margin-top:45px;">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>

 

 

* <ul></ul> : Unordered List

<li></li>의 부모 태그인 <ul></ul> 사용

<ul>

<li>1. HTML</li>

<li>2. CSS</li>

<li>3. JavaScript</li>

</ul>

<ul>

<li>park</li>

<li>yeonsu</li>

<li>2276131</li>

</ul>

<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="coding.jpg" width="100%"></p><p style="margin-top:45px;">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>

 

 

* <ol></ol> : Ordered List

자동으로 numbering

<ol>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</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="coding.jpg" width="100%"></p><p style="margin-top:45px;">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>

 

 

3-6. 문서의 구조와 슈퍼스타들

 

* <title></title> : 제목 표시

<title>WEB1 - html</title>

<ol>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</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="coding.jpg" width="100%"></p><p style="margin-top:45px;">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>

 

한글이 깨지면 2번째 줄을 추가하자.

 

*<head></head> & <body></body>

헤드와 바디 부분 구분

 

*<!doctype html> & <html>

가장 위에 붙어 html 파일임을 알려줌

 

그래서 어느정도 완성된 코드는 다음과 같다.

<!doctype html>

<html>

<head>

<title>WEB1 - html</title>

<meta charset="utf-8">

</head>

<body>

<ol>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</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="coding.jpg" width="100%"></p><p style="margin-top:45px;">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>

 

3-7.

 

* <a> : link 걸어주는 태그

검색엔진을 존재하도록 하는 아주 중요한 태그는 <a>

'HTML'에서 HyperText에 해당한다.

 

<a href="원하는 웹페이지의 주소">

<!doctype html>

<html>

<head>

<title>WEB1 - html</title>

<meta charset="utf-8">

</head>

<body>

<ol>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ol>

<h1>HTML</h1>

<p><a href="https://www.w3.org/TR/2011/WD-html5-20110405/">Hypertext Markup Language (HTML)</a> 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="coding.jpg" width="100%"></p><p style="margin-top:45px;">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>

 

링크 클릭해주면 해당 웹페이지로 넘어간다.

 

url로 마우스 두면 툴팁이 뜨게 하려면

target="_blank" title="주고싶은 이름"

추가해주면 된다.

 

 

3-8.

 

페이지들이 링크로 연결되면 웹사이트가 된다.

이렇게 각 부분에 링크를 걸어 다른 페이지와 연결시키는 게 목표다.

 

WEB이 가장 상위 목차이므로 <h1></h1> 태그를 지정

밑의 세 개는 <h2></h2>로 강등

 

<1. html> 파일: HTML에 대해 설명

<!doctype html>

<html>

<head>

<title>WEB1 - 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/" target="_blank" title="html5 specification">Hypertext Markup Language (HTML)</a> 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="coding.jpg" width="100%"></p><p style="margin-top:45px;">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>

 

<2. html> 파일 : CSS에 대해 설명

 

<!doctype html>

<html>

<head>

<title>WEB1 - 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>Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>

</body>

 

<3. html> 파일 : JavaScript에 대해 설명

<!doctype html>

<html>

<head>

<title>WEB1 - 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>JavaScript, often abbreviated as JS, is a programming language and core technology of the Web, alongside HTML and CSS. 99% of websites use JavaScript on the client side for webpage behavior.</p>

</body>

 

<index.html>파일 : web에 대해 설명

 

<!doctype html>

<html>

<head>

<title>WEB1 - Web</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>Web</h2>

<p>The World Wide Web (WWW or simply the Web) is an information system that enables content sharing over the Internet through user-friendly ways meant to appeal to users beyond IT specialists and hobbyists.[1] It allows documents and other web resources to be accessed over the Internet according to specific rules of the Hypertext Transfer Protocol (HTTP).</p>

</body>

 

 

결과