HTML (HyperText Mark-up Language)
웹페이지에서 콘텐츠의 구조를 표현하기 위해 고안된 텍스트 포맷이다.
컨텐츠의 서로 다른 부분들을 태그를 씌우거나 감싸서, 다른 형식으로 보이게 하거나 특정한 방식으로 동작하도록 함.
보통 HTML은 <head>, <body>로 크게 두 가지로 나뉜다.
<head> tag
<meta>
본 문서의 키워드 or 제목, 요약을 나타내는 태그로써 활용한다.
<title>
html 문서의 제목을 나타내는 태그로써 활용한다.
<link>
ex) <link href="/style.css" rel="stylesheet" type="text/css"/>
<link> 태그는 주로 css 파일을 연결할 때 사용하는 태그다. link 요소의 속성들을 살펴보면, 'href' 에서는 해당 css 파일의 주소를 적게 된다. 'type', 'rel' 에는 각각의 맞게 적어줘야 한다. (css 면 css 타입에 맞춰서!!)
link 요소는 css 말고도 다른 외부요소와 연결할 때에도 쓰이기 때문에 typer과 rel 도 적어준다.
link 요소는 다른 연결에도 쓰지만, 일단 css 만 연결한다고 생각하자.
<style>
ex) <style type="text/css"> *{margin:0 padding:0}</style>
<style> 태그는 html 문서안에 css를 그대로 사용하고 할 때, 적어주는 태그다.
style 태그는 외부 css를 쓰지않고 내부 css를 쓸 때, 보통 사용한다. -> 내가 볼 때는 나의 미적감각으로는 안 쓸듯....
<script>
ex) <script type ="text/javascript" src="http~~.js></script>
<script> 태그는 두 가지 방향으로 사용가능하다. 위와 같이 src 속성을 넣어 외부에 있는 js를 불러와 사용할 수 있거나 src 속성을 사용하지 않고, <script> 태그 사이에 js 코드를 넣어 사용할 수도 있다.
<Body> tag
<h{n}>
<!-- 제목 태그 -->
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>h 들은 Body에서 제목 태그를 말하며, 논리적인 구조를 짤 때, 매우 중요하다.
이런 구조를 잘 짜두면, 나중에 레이아웃, css, javascript를 배치할 때, 매우 편리하다.
<p>, <em>, <strong>
<p>텍스트를 <em>단락</em>으로 정의할 때 사용합니다. 단락은 유사한 주제를 갖는
문자열의 묶음입니다. 단락은 내용을 담는 그릇이므로 빈 여백을 처리하는 용도로는
사용하면 <strong>안 된답니다!</strong></p>
p 요소는 텍스트를 단락으로 정의할 때 사용한다. 단락은 유사한 주제를 갖는 문자열의 묶음입니다.
단락과 단락 사이에는 어느 정도 여백이 존재하는 것을 볼 수 있습니다. 따라서 이를 빈여백으로 처리하는 용도로는 부적합하다.
강조 (strong, em) 를 나타내는 태그가 있다.
렌더링된 결과를 보면, 글씨가 두껍게 보이거나 이탤릭체로 보인다. 나중에 CSS를 통해서 디자인을 쉽게 바꿀 수 있다.
<li>, <ol>, <ul>
<!-- ordered list -->
<ol>
<li>일</li>
<li>이</li>
<li>삼</li>
<li>사
<!-- unordered list -->
<ul>
<li>항목</li>
<li>항목</li>
<li>항목</li>
</ul>
</li>
<li>오</li>
</ol>
<ol> 은 ordered list 에 줄임말로, list에 순서를 매길 수 있다.
<ul> 은 unordered list 에 줄임말로 list에 순서를 매길 수 없는 것을 볼 수 있다.
<li> 은 실제로 <ol>,<ul> 에 들어가는 내용들의 content를 말한다.
<dl>, <dt>, <dd>
<dl>
<dt>HTML</dt>
<dd>웹페이지에서 콘텐츠의 구조를 표현하기 위해 고안된 텍스트 포맷입니다.</dd>
<dt>CSS</dt>
<dd>웹페이지의 스타일링과 디자인을 하는 데 사용되는 스타일시트입니다.</dd>
<dt>HTTP 메서드</dt>
<dd>서버가 수행해야 할 동작을 의미합니다. <code>GET</code>, <code>POST</code>, <code>DELETE</code> 등이 있습니다.</dd>
</dl>
정의목록 dl(definition list), dt(definition term), dd(definition description) 은 앞서 본 목록과는 약간 다르다.
어떤 단어에 의미를 부여하고 정의를 내린다. 주종관계가 성립되는 콘텐츠에 광범위하게 적용할 수 있다.
정의할 단어에 하나 이상의 dd 요소와 연관을 짓는다.
code 를 보여주는 태그 code 가 존재한다. 앞서 배웠던 HTTP 메소드를 code 태그로 둘러 주었다.
<pre> + 예약어
<pre>
<code><html></code>
</pre>HTML 태그를 content로 입력하면 화면에 출력이 되지를 않는다.
그 이유는 HTML에서의 태그들은 HTML 요소로 인식하기 때문이다.
이러한 문자들이 이미 정해져 있는 것이 몇 개 있는데, 이를 예약어라고 부른다.
따라서 아래와 같은 문자로 대체한다.
< <
> >
공백
& 앰퍼샌드
" "
또한 <pre> 태그는 content의 내용은 예약어나, 엔터 그대로 보여주는 태그이다.
<div>, <span>
div와 span은 요즘 html에서 엄청 많이 쓰이는 tag이다.
div와 span은 content을 담는 하나의 container라고 생각하면 된다.
따라서 보통 HTML로 구조를 잡고, div tag로 감싼 후, 이를 나중에 CSS 파일로 꾸밈으로써, div tag를 이용하여, 웹페이지를 구조적으로 완벽하게 구축할 수 있다.
Tag : Description
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
[HTML] 기본 태그 정리
[ HTML 기본 태그 정리 ] html 기본 태그 ' 안에 들어갈 태그 ' 1.태그태그는 본 문서의 키워드 혹은 제목, 요약을 나타내는 태그로서 활용되게 됩니다. meta태그에 대한 자세한 설명은 따..
conol.tistory.com
https://www.w3schools.com/html/html5_intro.asp
HTML5 Introduction
HTML5 Introduction What is New in HTML5? The DOCTYPE declaration for HTML5 is very simple: The character encoding (charset) declaration is also very simple: HTML5 Example:
[HTML] Meta 태그란 무엇인가?!
[ HTML meta 태그란? ] meta 태그?! 이름에서볼 수 있듯이 (x)html 태그 중 하나이고 '메타', 즉, 문서 그 자체를 설명하는 태그를 메타 태그라 합니다. 일반 (x)html 태그는 문서 내용물을 어떻게 보이게 하는지..
conol.tistory.com
https://heropy.blog/2019/05/26/html-elements/
'대학원 공부 > programming language' 카테고리의 다른 글
| CSS : CSS란? (0) | 2019.12.14 |
|---|---|
| HTML : HTML의 정의, 역사 (0) | 2019.12.14 |
| Python : basic : Override vs Overload (0) | 2019.12.01 |
| Python : basic : lambda function(람다함수) (0) | 2019.11.23 |
| Python : basic : 문자열 (re) (0) | 2019.11.22 |
댓글