[HTML] 1. HTML 기본 문법

HTML = HyperText Markup Language

사람도 알아들을 수 있고, 웹 브라우저도 알아 들을 수 있는 언어

하이퍼 텍스트

(링크)

링크로 연결된 거대한 정보 덩어리 = WEB

링크는 HTML의 본질, HTML의 본질은 웹의 본질

Markup Language

- Tag (시작태그, 끝태그)

ex)

<strong>강조</strong>

ex)

<html>
    <head>
            <meta charset = "utf-8" />
    </head>
    <body>
            안녕하세요. <strong> 생활코딩 </strong>입니다.
    </body>
</html>

참고) VS Code에서 open in browser를 깔고 html파일에 우클릭 한 후 open with default browser를 누르면 HTML코드를 브라우저로 열어서 확인할 수 있다.

1) a 태그 = url, 링크

안녕하세요. <a href="http://opentutorials.org/course/1"> 생활코딩 </a>입니다.

href = 속성명, 약속되어 있음. (hypertext reference)

href로 연결할 url 속성 정의

안녕하세요. <a href="http://opentutorials.org/course/1" target="_black"> 생활코딩 </a>입니다.

target="_blank"를 통해 새탭에서 열기 구현

위 코드의 경우 a태그에 두 개의 속성을 가지고 있음. 속성과 속성의 구분은 띄어쓰기

2) li 태그 = list 만들기

<li> 1번 </li>
<li> 2번 </li>
<li> 3번 </li>

ol, ul (ordered list, unordered list)

<html>
    <head>
            <meta charset = "utf-8" />
    </head>
    <body>
        <ol>
            <li>ㅎㅎ</li>
            <li>ㅋㅋ</li>
        </ol>
        <ul> 
            안녕하세요. <a href="http://opentutorials.org/course/1" target="_black"> 생활코딩 </a>입니다.
            <li> 1번 </li>
            <li> 2번 </li>
            <li> 3번 </li>
        </ul>
    </body>
</html>

body 태그 : 본문, 문서의 내용

head 태그 : 문서에 대한 정보를 담고 있음.

ex)

 <meta charset = "utf-8" />
 <title> 생활코딩</title>

html 태그 : 태그 안 쪽의 코드가 html 코드임을 알려줌

- doc type.

<!DOCTYPE html>

HTML 5의 경우엔 저 위의 코드를 맨 앞에 써주는 것이 좋다.

- Tag Reference :

http://dev.w3.org/html5/html-author

HTML5 Reference

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whos

dev.w3.org

http://opentutorials.org/course/1058

HTML 사전 - 생활코딩

본 코스는 HTML의 사용법을 찾아 볼 수 있는 사전 입니다. 본 코스는 리체님의 HTML 5 Tag Dictionary 모듈을 사용하고 있습니다. 좋은 사전을 만들어주신 리체님 감사합니다. ^^

opentutorials.org

'𝓡𝓸𝓸𝓶3:𝐹𝓇𝑜𝓃𝓉𝑒𝓃𝒹 > 𝓡𝟥𝟢𝟣:𝐻𝒯𝑀𝐿&𝒞𝒮𝒮' 카테고리의 다른 글

[CSS] 1. 기본문법 (0)	2021.01.02
[HTML] 2. 의미론적인 웹 (0)	2021.01.01

𝒪𝒹𝑒𝓃𝑔'𝓈 𝒮𝓉𝓊𝒹𝓎𝑅𝑜𝑜𝓂

[HTML] 1. HTML 기본 문법

'𝓡𝓸𝓸𝓶3:𝐹𝓇𝑜𝓃𝓉𝑒𝓃𝒹 > 𝓡𝟥𝟢𝟣:𝐻𝒯𝑀𝐿&𝒞𝒮𝒮' 카테고리의 다른 글

티스토리툴바

[HTML] 1. HTML 기본 문법

'𝓡𝓸𝓸𝓶3:𝐹𝓇𝑜𝓃𝓉𝑒𝓃𝒹 > 𝓡𝟥𝟢𝟣:𝐻𝒯𝑀𝐿&𝒞𝒮𝒮' 카테고리의 다른 글

'𝓡𝓸𝓸𝓶3:𝐹𝓇𝑜𝓃𝓉𝑒𝓃𝒹/𝓡𝟥𝟢𝟣:𝐻𝒯𝑀𝐿&𝒞𝒮𝒮' Related Articles

티스토리툴바