티스토리 뷰
10년전쯤엔 html에 대해 조금 관심을 갖고 공부도 하고 했었는데.. 사용하지 않으니 금방 잊어버리게 되더라구요..
티스토리 블로그를 시작하면서 html에 다시 관심이 생겼답니다.
찾아보니 예전에 메모해 놓았던 태그들도 있고 해서 다시한번 천천히 공부해보려고 합니다.
html 이란?
HTML(Hypertext Markup Language)-웹페이지 문서제작언어이다.
HTML은 Hyper Text Markup Language의 약자로, 우리가 늘 사용하는 인터넷에서 텍스트나 이미지
사운드등을 표현할수 있도록 해주는 언어를 말한다.
HTML의 약자에서 Hyper Text(하이퍼텍스트)란 인터넷이라는 브라우저상에서
공간을 자유롭게 이동할 수 있는 글자나 이미지 등을 포괄적으로 표현하는 말이다.
Markup Language는 문서의 구조와 내용에 추가적인 의미를 부여하는 마크업 규칙들을 규정하는 언어이다.
예를들면.. 이 부분은 이미지가 들어갈 것이고, 이 부분은 링크가 들어갈 것이고, 이부분은 줄바꿈이 되고..등등
이러한 것을 규정하는 것을 'Markup한다' 라고 한다.
파일 확장자는 *.html 또는 *.htm 이다.
html의 구성요소
html은 태그(Tag), 속성(Attributes), 값(Value) 등의 요소로 구성된다.
|
★예시★ |
|
<html>
|
태그는 요소의 일부로서 html을 이루는 개개의 명령어이고, 이러한 태그 명령어들이 모여서 html 문서를 이루는 것이다.
태그는 시작태그에서 영역이 시작되고, 종료태그에서 영역이 끝난다.
위의 예시에서 <html>. <body>, <font>가 시작태그이고, </font>, </body>, </html>가 종료 태그이다.
<font> 태그에서 color="pink" -> 이 부분에서 color를 속성이라 하고, "pink"를 속성값이라고 한다.
즉, 글자의 색상을 핑크색으로 정한다는 것이다.
속성이란 태그에 적용될 사항을 나타내는 것으로 <태그 속성="속성값"> 이러한 형식으로 작성한다.
태그는 대문자와 소문자의 구분이 없다.
html 기본구조
html 문서가 갖추어야 할 기본적인 태그는 <html> <head> <body>이다.
|
<html>
<head>
내용...
</head>
<body>
내용...
</body>
</html> |
1. <html> </html> : 이 문서가 html 문서임을 알려주는 태그다.
2. <head> </head> : 문서의 제목, 문서의 제작자 등등.. 해당 문서의 정보를 표시하는 부분으로 실제 화면에는 보여지지 않는다.
<html>과 </html> 사이에 작성한다.
3. <head>와 </head> 사이에 <title> xxxx </title> -> 이런 내용을 작성하면 xxxx 에 쓴 내용이 브라우저 제목 표시줄에 나타난다.
4. <body> </body> : 실제 웹 화면에 보여질 부분을 작성하는 부분이다.
<html>과 </html> 사이에 작성한다.
위 예를 보면 <title>와 </title> 사이에 "제목 : HTML 공부하기" 라고 작성하였고, <body>와 </body> 부분에
font color을 hotpink로 지정하여 "HTML 공부 열심히 하자!!!" 라는 내용으로 작성하였다.
이 문서를 브라우저 화면에서 보면 아래와 같이 나타난다.
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
'기억하고 싶은 정보 > HTML 공부하기' 카테고리의 다른 글
| html 글자 모양 (제목 표시하기, font 태그, 글자 속성, 특수문자) (0) | 2018.07.02 |
|---|---|
| html 문서 모양 줄바꾸기, 문단바꾸기, 수평선 그리기 (0) | 2018.01.15 |
| html 문서 설정 (배경색 설정하기 / 배경을 이미지로 설정하기 / 문서 기본글자색 설정하기) (0) | 2018.01.05 |