반응형
Notice
Recent Posts
Recent Comments
Link
«   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
Tags more
Archives
Today
Total
관리 메뉴

NineTwo meet you

HTML 기초 문법 본문

웹/HTML

HTML 기초 문법

NineTwo 2021. 6. 10. 01:05
반응형

문서의 범위

<!DOCTYPE html>
<html>
<head>
    정보 범위
</head>
<body>
    구조 범위
</body>
</html>

.html 파일에서 문서를 나타내는 여러 태그들이 있다.

우선 <DOCTYPE> 의 경우 문서의 형식을 정의한다. 어떤 html 버전으로 구조화 되는지를 나타낸다.

<html> </html>태그의 경우 html 문서의 전체 범위를 지정한다.

<head> </head>태그의 경우 html에서 웹 페이지 정보, 인코딩 방식등 문서의 정보를 지정한다.

<body> </body>태그의 경우 화면을 통해서 실제로 볼 수 있는 내용의 형태등을 지정한다.

 

태그 Tag

태그는 열리고 닫히는 형태로 되어 있으며 한쌍으로 이루어져있다.

닫히는 태그 앞에는 /가 붙는다.

이때 태그의 기능을 추가하기 위해 속성=값을 사용할 수 있다.

<TAG>내용</TAG>
<TAG 속성 ='값'>내용</TAG>
<TAG 속성1 ='값' 속성2 = '값'>내용</TAG>

 

빈 태그 Empty Tag

태그 중에서 이미지를 열리고 닫히는 한쌍의 구조가 아닌 닫히는 개녕이 없는 태그를 빈 태그라고 한다.

빈 태그 중에 img는 이미지를 삽입할 때 사용하는 태그다.

이때 src 속성을 이용해 삽입할 이미지를 지정해 줄 수 있고 alt 속성을 이용해 해당 이미지를 출력하지 못할때 대신 보여줄 텍스트를 지정할 수 있다.

<img />
<img src = './picture.jpg' alt = '기본 사진' />

 

문서의 정보

<head></head>안에 사용하는 테그로 문서의 정보를 지정한다.

 

TITLE

문서의 제목으로 웹 브라우져의 사이트 탭의 이름을 나타낸다.

<head>
  <title>글쓰기</title>
</head>

 

META

문서의 내용(표시 방식, 제작자, 내용, 키워드 등)에 대한 정보를 지정한다.

<head>
  <meta charset="문자 인코딩 방식">
  <meta name="author" content="제작자이름">
  <meta name="description" content="사이트설명내용">
</head>

 

LINK

외부문서를 연결할 때 사용하는 빈 태그다.

<head>
  <link rel="stylesheet" href="./css/main.css">
  <link rel="icon" href="./대표아이콘.png">
</head>

문서의 구조

<body></body>안에 사용하는 테그로 문서의 구조를 지정한다.

 

DIV

division의 약자로 문서의 부분이나 섹션을 정의하는 태그다.

<body>
  <div>
    <p></p>
  </div>
  <div>
    <div>
      <h1></h1>
    </div>
  </div>
</body>

IMG

이미지를 넣을때 사용하는 빈태그다.

<body>  
  <img src = './picture.jpg' alt = '기본 사진' />
</body>
반응형

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

특수 문자 용어 정리  (0) 2021.06.01
'웹/HTML' Related Articles more
Comments