본문 바로가기
WEB/HTML

[HTML] 기본 문법과 태그_(2) (<li>, <title>, <meta>, <head>, <body>, <html>, <a>) - 짱우의 코딩일기 - 티스토리

DoongDev 2020. 1. 14. 20:08
반응형

  HTML 기본 문법과 태그에 대해서 글을 남겨보려는데 생각보다 글이 길어져서 두 개로 나눠서 작성해보았다.

  HTML 공부는 '생활코딩! HTML+CSS+자바스크립트' 책을 보면서 공부하고 있다. 다음 글의 예제들도 모두 책에 있는 내용을 바탕으로 작성한 글이다.

  원래 밑에 링크를 걸어놓으려 했지만 해당 링크의 제목에 태그가 들어가기 때문에 게시글이 이쁘지 않게 작성이된다.

링크

  따라서 위의 글씨에 링크를 걸어놓았다.

부모 자식과 목록

<li> 태그를 이용해 목차 만들기

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

<h1>HTML</h1>

<p><strong>Hypertext Markup Language <u>(HTML)</u></strong> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. </p>

<img src="image1.jpg" width="100%">

<p style="margin-top: 40px;"> HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.</p>

< li 태그를 이용해 목차를 만든 출력 화면 >

  <br> 태그를 이용해서 목차를 만들어도 되지만 목차를 만들어주는 <li> 태그가 있기 때문에 <li>태그를 사용하면 된다.

  <li> 태그의 li는 List에서 앞의 두 글자를 의미한다.

<li> 태그의 부모 태그인 <ul> 태그 추가

<ul>
    <li>1. HTML</li>
    <li>2. CSS</li>
    <li>3. JavaScript</li>
</ul>
<ul>
    <li>4. Java</li>
    <li>5. C#</li>
    <li>6. Python</li>
</ul>

<h1>HTML</h1>

<p><strong>Hypertext Markup Language <u>(HTML)</u></strong> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. </p>

<img src="image1.jpg" width="100%">

<p style="margin-top: 40px;"> HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.</p>

< ul 태그 사용 후 출력 화면 >

  위와 같이 여러 목차를 구분해서 쓰고싶을 경우에는 <li>태그의 부모인 <ul>태그를 감싸서 사용하면 된다.

<ul> 태그를 <ol> 태그로 변경

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

<h1>HTML</h1>

<p><strong>Hypertext Markup Language <u>(HTML)</u></strong> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. </p>

<img src="image1.jpg" width="100%">

<p style="margin-top: 40px;"> HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.</p>

< ol 태그로 감싼 후 출력 화면 >

  만약 목차로 만들어야 항목 개수가 많을 경우에는 개발자가 일일이 1,2,3~10000000 까지 번호를 붙여줄 수는 없다. 그렇기 때문에 <ul> 태그를 <ol> 태그로 바꿔주게 되면 자동으로 안에 있는 <li> 태그 내용에 번호를 붙여준다.

  <ol> 태그의 ol은 'Ordered List'의 약자이고 <ul> 태그의 ul은 'Unordered List'의 약자다.

 

웹 페이지의 제목 태그

< 웹 페이지의 제목 >

  아무런 태그도 지정하지 않으면 위의 표시된 부분에는 html 파일의 이름이 보이게 된다. 이를 바꾸기 위해서 <title> 태그를 사용한다.

<title> 태그를 이용해 제목 설정

<title>제목 바꿈</title>

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

... 생략 ...

< 제목 설정 후 출력 화면 >

 

인코딩을 위한 태그

<meta> 태그 추가

<title>제목 바꿈</title>
<meta charset="UTF-8">

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

... 생략 ...

  한글이 깨지지 않게 출력하기 위해서는 위와 같이 UTF-8로 인코딩해주는 태그를 추가해주는 것이 좋다.

 

문서의 구조

<head>, <body> 구조

<head>
    <title>제목 바꿈</title>
    <meta charset="UTF-8">
</head>
<body>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>

    <h1>HTML</h1>
    
		... 생략 ...

</body>

  HTML에서 본문은 <body>라는 태그로 묶기로 약속이 되어있고 본문을 설명하는 코드는 <head> 묶기로 약속이 되어있다.

  위의 <head> 태그와 <body> 태그를 감싸는 최고위층 태그가 있는데, 바로 <html>이라는 태그다.

<html> 태그

<!DOCTYPE html>
<html>
    <head>
        <title>제목 바꿈</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ol>

		... 생략 ...

    </body>
</html>

  <html> 태그 위에 관용적으로 이 문서에는 HTML이 담겨 있다는 뜻에서 <!DOCYTPE HTML>이라고 써주면 된다.

 

링크 걸어주는 태그

<a> 태그를 이용해 링크 만들기

... 생략 ...
        
        <p><a href="https://en.wikipedia.org/wiki/HTML"><strong>Hypertext Markup Language <u>(HTML)</u></strong></a> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. </p>

... 생략 ...

< 링크를 건 후의 출력 화면 >

  위의 표시된 부분을 누르게 되면 HTML에 대해 설명한 위키피디아 링크로 넘어가게 된다.

<a> 태그에 target 속성 추가

<p><a href="https://en.wikipedia.org/wiki/HTML" target="_blank"><strong>Hypertext Markup Language <u>(HTML)</u></strong></a> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. </p>

  위의 링크를 새 탭에서 열고 싶으면 target="_blank" 속성을 추가해주면 된다.

<a> 태그에 title 속성 추가

<p><a href="https://en.wikipedia.org/wiki/HTML" target="_blank" title="HTML 설명"><strong>Hypertext Markup Language <u>(HTML)</u></strong></a> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. </p>

  위와 같이 title 속성을 추가하게 되면 링크에 마우스 커서를 올려놓으면 title에 적어놓은 내용이 화면에 표시가 된다.

  지금까지 배운 태그를 가지고 웹 페이지를 완성시킬거다. 

<!DOCTYPE html>
<html>
    <head>
        <title>제목 바꿈</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>
        
				... 생략 ...

    </body>
</html>

< html 파일 완성 출력 화면 >

1. <h1>태그로 감싸고 링크를 걸어주었다. (index.html을 만들어두었다.)

2. 1.html을 복사해서 2.html, 3.html을 만들어 두었다.

3. 각 페이지가 어떤 페이지인지 알려주는 제목역할을 할거다.

 

2.html (CSS관련 정보) 파일 만들기

<!DOCTYPE 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>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>

        <p style="margin-top: 40px;"> CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.</p>
    </body>
</html>

< 2.html (CSS 정보) 화면 출력 >

 

3.html (JavaScript 관련 정보) 파일 만들기

<!DOCTYPE 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>JavaScript (/ˈdʒɑːvəˌskrɪpt/),[9] often abbreviated as JS, is a high-level, just-in-time compiled, multi-paradigm programming language that conforms to the ECMAScript specification.[10] JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.</p>

        <p style="margin-top: 40px;"> Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web.[11] JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it,[12] and major web browsers have a dedicated JavaScript engine to execute it.</p>

        <p style="margin-top: 40px;"> As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative (including object-oriented and prototype-based) programming styles. It has APIs for working with text, arrays, dates, regular expressions, and the DOM, but the language itself does not include any I/O, such as networking, storage, or graphics facilities. It relies upon the host environment in which it is embedded to provide these features.</p>
    </body>
</html>

< 3.html (JavaScript 정보) 화면 출력 >

 

index.html (메인페이지, WEB에 대한 정보) 파일 만들기

<!DOCTYPE html>
<html>
    <head>
        <title>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), commonly known as the Web, is an information system where documents and other web resources are identified by Uniform Resource Locators (URLs, such as https://www.example.com/), which may be interlinked by hypertext, and are accessible over the Internet.[1] </p>

        <p style="margin-top: 40px;"> The resources of the WWW are transfered via the Hypertext Transfer Protocol (HTTP) and may be accessed by users by a software application called a web browser and are published by a software application called a web server.</p>
    </body>
</html>

< index.html (메인 페이지, WEB에 대한 정보) 화면 출력 >

반응형
저작자표시

'WEB > HTML' 카테고리의 다른 글

[HTML] 기본 문법과 태그_(1) (<strong>, <u>, <h1>, <br>, <p>, <image>) - 짱우의 코딩일기 - 티스토리  (0) 2020.01.13

'WEB/HTML' Related Articles

티스토리툴바