Notice
Recent Posts
Recent Comments
Link
Tags
more
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archives
Today
Total
관리 메뉴

JongDDA의 한걸음 한걸음씩

[HTML] HTML 소개 및 기초문법 본문

개발/프론트엔드

[HTML] HTML 소개 및 기초문법

종따 2021. 2. 11. 20:39
728x90

HTML이란?

- 웹 문서를 작성하기 위해 사용하는 고유한 형식.
이를 사용해 작성한 문서는 *.html 확장자가 붙는다.

-HTML은 텍스트 외에도 이미지, 링크, 미디어 요소 등 여러가지 요소를 다루고 
표시할 수 있는 형식이다.
-HTML은 에디터를 통해서 작성할 떄 형태와 그것을 브라우저로 조회할 때의 
형태가 달라진다.
-HyperText Markup Language 의 줄임말이다.

 

HTML 태그의 종류

디스플레이 특성별
- 블록 태그 : 태그가 공간 전체를 차지한다.
- 인라인 태그 : 자기에게 필요한 공간 만큼만 차지한다.

표시하는 콘텐츠별
- 텍스트 태그 
- 이미지 태그
- 하이퍼 링크
- 폼관련 태그 : form... 입력양식

 

HTML 문서 작성의 기본, 태그(<>)

-HTML은 웹문서에서 어디가 어떤 부분인지를 표시하기 위해 태그(tag) 라는 표기법을 사용해
마크업 하는 언어이다.
-태그는 정확하게 사용하지 않으면 제 기능을 수행하지 못한다.
조금의 오타라도 발생하면 문서가 기대대로 나타나지 않는다.
-태그는 '여는 태그'와 '닫는 태그'가 한 쌍으로 작성되는 경우가 대부분이며, 여는 태그부터
닫는 태그까지가 어떤 콘텐츠를 의미한다,
-각 태그에는 추가적인 '속성'을 부여할 수 있다.
(속성은 언제나 여는 태그에 추가)

 

텍스트 관련 태그 특이사항

-<h1~6> 태그 : 제목 표시용 태그

제목을 표시할 떄 사용하는 태그이나, 꼭 제목을 위해서만 사용해야하는 것은 아니다. 단지 일반 텍스트에 비해 크고 굵은 텍스트일 뿐이며, 제목이라는 의미를 가질 뿐이다.
h 뒤에 붙은 숫자는 1일 때 가장 크고, 6일 때 가장 작다!

 

-<p> 태그 : 문단 표시용 태그
텍스트를 표시할 떄 가장 많이 사용되는 태그이다. 하나의 p 태그가 하나의 단락을 의미하므로, p 태그가 시작되면 새로운 줄에서 새롭게 시작이 된다.

--텍스트 관련 태그에 대한 추가사항
HTML 문서에서 텍스트를 작성할 때는 엔터를 통한 줄 바꿈표시가 진행되지 않는다!

-<br> 태그 : 다음 줄로 넘어가기 태그
텍스트 단락에서는 엔터를 눌러도 줄바꿈이 되지 않는데. 이는 <br> 태그를 사용해 대체할 수 있다! <br> 태그는 줄바꿈 기능외에 내용 표시 등의 다른 기능은 수행하지 않으므로, 닫는 태그를 생략한다!

-<hr> 태그 : 수평 줄 넣기 태그
수평 줄 넣을 때 사용하는 태그. 이 또한 특정 기능을 수행하는 것 외에 기능이 없으므로, 닫는 태그가 필요없다.
주로 내용의 주제가 바뀌거나 할 때 많이 사용한다.

 

기본 틀

<!DOCTYPE html> 
<html>
      <head>
          <meta charset = "utf-8">
          <title>HTML 문서 템플릿</title>
    </head>
    <body>
        <!--여기에 작성하는 내용이 웹페이지에 표시되는 내용
        추가내용
        -->
</body>
</html>

 

ex)

 

ex2)

 

 

 

728x90
반응형

'개발 > 프론트엔드' 카테고리의 다른 글

[HTML] 전역속성  (0) 2021.02.25
[HTML] 입력  (0) 2021.02.24
[HTML] 링크 이동(하이퍼링크)  (0) 2021.02.24
[HTML] 표 및 이미지 표시하기  (0) 2021.02.24
[HTML] 문자 꾸미기 및 리스트, 테이블  (0) 2021.02.24
Comments