jinseon's log

[HTML] 기본 태그 본문

HTML & CSS/HTML

[HTML] 기본 태그

J_SEON 2022. 11. 22. 14:36

✔ HTML (Hyper Text Markup Language)

- 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어

 

✔ HTML 태그 구성 요소

<열린태그 속성 = "속성값"> 컨텐츠 </닫힌태그>
  • 태그명
    • HTML이 갖고 있는 고유의 기능
    • <열린태그></닫힌태그> 형태로 입력
  • 속성
    • HTML 태그가 갖고 있는 추가 정보
    • 열린태그 안에 작성
  • 속성값
    • 어떤 역할을 수행할지 구체적인 명령
  • 컨텐츠
    • 열린 태그와 닫힌 태그 사이에 있는 내용물

 

✔ HTML 문서의 기본 구조

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>웹프로그래밍</title>
</head>
<body>
</body>
</html>
  • <!DOCTYPE html>
    • 문서를 선언하는 태그
    • 열린태그만 사용
  • <html> ··· </html>
    • HTML 문서의 시작과 끝
    • 모든 태그들을 <html> 안쪽에 입력
  • <head> ··· </head>
    • 웹사이트의 요약 정보를 담는 영역 (언어, 제목 등)
    • 웹사이트에서 노출되지 않음 
      • <meta charset="UTF-8">
        • UTF-8 : 유니코드
        • character setting의 약자를 나타내는 문자 코드
        • 모든 문자를 웹 브라우저로 깨짐 없이 표시하겠다는 의미
      • <title> ··· </title>
        • 웹사이트 탭에 나타나는 제목
  • <body> ··· </body>
    • 웹사이트에서 보이는 정보를 담는 영역
    • 이미지나 텍스트처럼 출력되는 정보
<a href = "https://www.naver.com" target = "_blank"> 네이버 </a>
  • <a> ··· </a>
    • 글자나 이미지 클릭 시 다른 사이트로 이동
    • 열린 태그와 닫힌 태그 사이에 컨텐츠 입력
      • href 속성
        • 연결할 페이지의 주소 지정
      • target 속성
        • 페이지 이동 방식 지정
        • "_blank" : 새 탭을 띄워서 웹사이트 전환
        • "_self" : 현재 탭에서 웹사이트 전환 (default)
<img src="logo.png" alt="회사로고">
  • <img>
    • 이미지 삽입
    • 열린태그만 사용
      • src 속성
        • 삽입할 이미지 파일 경로
      • alt 속성
        • 웹사이트가 이미지를 출력하지 못했을 경우, 텍스트 정보로 대체
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
  • <h>
    • Heading의 약자
    • 제목이나 부제목을 표현
    • 숫자 값이 클수록 폰트 사이즈가 작음 (숫자 == 정보의 중요도)
    • <h1>태그는 가장 중요한 정보를 담으므로, 하나의 문서에서 한 번만 사용됨
<p>Nice to meet you</p>
  • <p>
    • Paragraph의 약자
    • 본문의 내용을 표현
    • 웹사이트의 중요 정보를 담는 태그
    • 나타내고자 하는 내용을 열린 태그와 닫힌 태그 사이에 입력

 

(좌) ol - li         /         (우) ul - li

<ol>
    <li>메뉴1</li>
    <li>메뉴2</li>
    <li>메뉴3</li>
</ol>
  • <ol>
    • Ordered list의 약자
    • 순서가 있는 리스트 생성
      • <li>
        • <ol>과 <ul>의 각 항목을 나열할 때 사용
<ul>
    <li>메뉴1</li>
    <li>메뉴2</li>
    <li>메뉴3</li>
</ul>
  • <ul>
    • Unordered list의 약자
    • 순서가 없는 리스트 생성
    • 메뉴 버튼을 만들 때 사용되는 태그

 

저작자표시

'HTML & CSS > HTML' 카테고리의 다른 글

[HTML] 태그의 두 가지 성격  (0) 2022.11.22
[HTML] 구조를 잡을 때 사용하는 태그  (0) 2022.11.22
'HTML & CSS/HTML' Related Articles more
Comments