HTML 태그와 기본 구조
태그
태그는 열린 태그 <h1>와 닫힌 태그 </h1>로 이루어져 있음
태그에 HTML 고유의 기능을 넣을 수도 있음
속성 - HTML 태그가 가지고 있는 추가 정보
속성값 - 어떤 명령을 수행할지 구체적인 명령 지정
<열린태그 속성="속성값">내용입력</닫힌태그>
예시)
<h1 style="color:green">텍스트입력</h1>
텍스트입력 이 페이지에 뜸
HTML 문서 기본 구조
<!DOCTYPE html> HTML5라는 신조어로 문서를 선언하는 태그
<html> </html> HTML 문서의 시작과 끝
<head> </head> 웹사이트의 간단한 요약 정보를 담는 구역 (노출x)
ex) 언어, 제목
<body> </body> 웹사이트에서 눈에 보이는 정보를 담는 구역 (출력 o)
ex) 이미지, 텍스트
head에서 자주 사용하는 태그
<meta charset="UTF-8"> character setting의 약자를 나타내는 문자 코드
모든 문자를 웹 브라우저에서 깨짐 없이 표시함
<title> </title> 웹사이트 상단 탭에 나타나는 제목을 적는 태그
예시)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글:수정</title>
</head>
<body>
</body>
</html>
body에서 자주 사용하는 태그
<a> </a> 글자나 이미지 클릭시 다른 사이트로 이동시키는 태그
href 속성 Hypertext Reference의 약자 HTML 연결할 페이지의 주소 지정 (=하이퍼링크)
target 속성 어떤 방식으로 페이지로 이동할지 결정 (새탭 이동 또는 바로 이동)
"_blank" 새창 또는 새탭으로 열림
"_self" 현재 탭에서 웹 사이트로 바로 이동
예시) <a href = "https://kaorouhaochi.blogspot.com" target = "_blank"> 구운고기</a>
이렇게 쓰면 구운고기 블로그가 새 탭으로 열리는 하이퍼링크가 생김
* 주소 대신에 #을 사용하면 페이지 안뜸 a href = "#"
<a href = "#"> <img src="7월21일 오이.jpg" alt="오이"></a>
<img> 태그 이미지를 삽입 *닫힌 태그 없음
src 속성 source의 약자로 삽입할 이미지 파일 경로 (=출처표시)
alt 속성 웹사이트가 이미지를 출력하지 못했을 때 텍스트 정보로 대체 (=대체텍스트)
예시) <img src="A.png" alt="알파벳A">
A.png 이미지가 표시되고, 이미지가 뜨지 않았을 때에는 알파벳A로 표시가 됨
<h>태그 heading의 약자로 제목이나 부제목을 표현
숫자 값이 클수록 폰트 사이즈가 작다. 숫자가 작을수록 중요함
<h1>태그는 가장 중요한 정보를 담아서 하나의 html문서에서 한 번만 사용함
입력) 출력)
<h1>제목입니다</h1> 제목입니다
<h2>제목입니다</h2> 제목입니다
<p>태그 paragraph의 약자, 본문 내용을 표현
예시) <p>본문입니다</p>
<ol>태그 ordered list의 약자, 순서가 있는 리스트 생성
<ul>태그 unordered list의 약자, 순서가 없는 리스트 생성, 메뉴 버튼 만들떄 주로 사용
<li>태그 <ol>과 <ul>의 각 항목을 나열할 때 사용
입력) <ol> 출력)
<li>강아지</li> 1. 강아지
<li>고양이</li> 2. 고양이
</ol>
입력) <ul> 출력)
<li>강아지</li> ㆍ 강아지
<li>고양이</li> ㆍ 고양이
</ul>
구조 잡을 떄 사용하는 태그
<header>태그 웹사이트의 머리글(목차)을 담는 공간
<nav>태그 메뉴 버튼을 설정하는 공간 <ul><li><a>와 함께 사용
예시)
<header>
<img src="A.png" alt="알파벳A">
<nav>
<ul>
<li>홈</li>
<li>전체 목록</li>
</ul>
</nav>
</header>
출력) A 홈 전체 목록 이렇게 메뉴바 생성됨
<main> 태그 문서의 주요 내용을 담는 태그
<article> 태그 주요 이미지, 택스트 등의 정보를 담고 구역을 설정
태그내에 구역을 대표하는 <h>태그가 들어가야함
IE(익스플로어)는 지원하지 않아서 role="main"속성 필수로 입력해야함
예시)
<main role="main">
<article>
</article>
</main>
<footer> 태그 가장 하단에 들어가는 정보 표기할 때 사용
예시) 사업자등록번호
<div> 태그 임의의 공간을 만들 때 사용
HTML 태그 (Block 요소, Inline 요소)
두 요소를 구분짓는 세가지 주요 특징 = 줄바꿈현상, 가로세로, 상하 배치
Block 요소 y축 정렬 형태로 출력 (줄바꿈)
공간을 만들 수 있고 상하 배치 작업 가능
예시) <p> 블럭입니다 </p> 출력) 블럭입니다
<p> 블럭입니다 </p> 블럭입니다
<p> 블럭입니다 </p> 블럭입니다
Inline 요소 x축 정렬 형태로 출력 (한줄로)
공간을 만들수 없고 상하 배치 불가능
예시) <a> 인라인입니다 </a> 출력) 인라인입니다 인라인입니다
<a> 인라인입니다 </a>
총 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>타이틀을 입력하세요</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header class="intro">
<ul>
<li>메뉴바 내용 입력하세요</li>
</ul>
</header>
<main class="main">
<div>
<h2>메인에 뜨는 내용을 입력하세요</h2>
<a href="#"> <img src="#" alt="오이"> </a>
</div>
</main>
</body>
</html>
