강의자료-문디자인

2025.11.04 22:34

HTML 태그

  • 관리자 오래 전 2025.11.04 22:34
  • 29
    0

1) 문서 기본 구조

태그설명
<!DOCTYPE html>HTML5 선언
<html>문서 전체
<head>정보(제목, CSS, JS, 메타)
<body>화면에 보여지는 부분

2) 글 관련 태그

태그설명
<h1>~<h6>제목
<p>문단
<span>짧은 문장 조각
<br>줄바꿈
<a>링크

3) 목록

태그설명
<ul>순서 없는 목록
<ol>번호 목록
<li>목록 아이템

4) 이미지 / 미디어

태그설명
<img>이미지
<video>비디오
<audio>오디오

5) 입력

태그설명
<input>입력 박스
<button>버튼
<textarea>여러 줄 입력

6) 레이아웃용

태그설명
<div>큰 박스
<section>구역
<header>상단
<footer>하단
<nav>메뉴
<article>글 단위

7) 표

태그설명
<table>표
<tr>행
<td>칸
<th>제목 칸






HTML 필수 기본 태그

<!DOCTYPE html>

이 문서가 HTML5 라고 브라우저에게 알려준다.

<html></html>

HTML 문서 전체를 감싸는 가장 큰 태그.
모든 내용이 이 안에 들어간다.

<html>
</html>





<head></head>


사람 눈에 직접 보이지 않는 정보 구역.

여기에 제목, 인코딩, CSS, JS 링크 등이 들어간다.


<head>
  <title>페이지 제목</title>
  <meta charset="UTF-8">
</head>





<body></body>


우리 눈에 실제로 보이는 화면 영역.

글, 사진, 버튼, 박스 등이 모두 이 안에 들어간다.


<body>
  <h1>이 글은 화면에 보입니다</h1>
</body>





글 관련 태그


<h1></h1> ~ <h6></h6>


제목(Heading). 숫자가 낮을수록 더 큰/중요한 제목


<h1>대제목</h1>
<h2>중제목</h2>





<p></p>


문단 단위 텍스트


<p>여기는 한 문단 입니다.</p>





<span></span>


짧은 글 조각

한 줄 안에서 색/스타일 주고 싶을 때 많이 쓴다.


<p>나는 <span style="color:red">빨강색 글자</span>을 좋아한다.</p>





<a></a>


링크 (다른 페이지로 이동)


<a href="https://naver.com">네이버</a>





이미지 / 멀티미디어


<img>


닫는태그 없다. 이미지를 보여준다.


<img src="사진주소.jpg" alt="설명문">





박스 / 레이아웃


<div></div>


가장 기본 블록 박스

웹페이지 레이아웃 구성할 때 가장 많이 사용한다.


<div style="background:#eee">회색박스</div>
    

    
    
    

        	        	
    
                
  • 
                    
                       공유링크 복사
                    
        	    
    • 
        	            	    
        	    
        	


    

    
    
        
    
    
        
        
    
    
    
    
    
    
        
    
    
                
    
            
  • 이전글index2025.11.07
    •             
  • 다음글HTML, CSS, 자바스크립트란?2025.11.04
    •         
    
        
        







    
    
    댓글목록
    
        
    등록된 댓글이 없습니다.