HTML:
Hyper Text Markup Language로 웹사이트에서 정보와 구역등을 설정할 수 있다.
현재는 HTML5의 버전을 사용하고 특징은 semantic한 언어이다.
기본적인 태그:
HTML의 문법 형태는 아래와 같다!
<OPENING 태그 속성 = "속성값">컨텐츠(정보 내용)</CLOSING 태그>#EX
<!DOCTYPE html> # HTML5를 선언하틑 태그!
<html> #HTML문서의 시작
<head> #head 태그, 간단한 요약정보
<meta charset="UTF-8"> # 모든문자를 깨짐없이 표시하기 위한 코드
<title>Document</title> # 브라우저의 탭의 제목을 나타내는 타이틀 태그
</head>
<body> #바디 태그, 웹사이트의 내용을 포함
</body>
</html> #HTML문서의 끝!<img> 태그 :
<img src ="https://cdn.pixabay.com/photo/2019/08/07/14/10/golden-retriever-4390884__340.jpg" alt="강아지">이미지를 삽입하는 태그! <img> 태그는 닫아주는 태그 없이 사용~!
src 속성은 source 로써 파일 경로를 불러옴
alt 속성은 이미지가 어떤이유로 출력되지 않을 경우, 이미지의 설명 텍스트가 대체되어 출력됨!
<h> 태그 : 블록 요소
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
Heading 즉 제목이나 부제목 표현할때 쓰임!
<h1> 태그는 가장 큰 제목이기 때문에 하나의 문서에서 반드시 하나만 사용!
<p> 태그 : 블록 요소
<p>I love you</p>
본문의 내용을 쓸 때 사용한다! 주요 텍스트 단락을 표현!
<ul> 태그 :
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
unordered list의 약자로, 순서가 상관없는 리스트를 생성할 때 쓴다. 자식 태그로 <li> 태그를 달고 다닌다! 보통 메뉴버튼을 만들 때 사용한다.
<a> 태그 : 인라인 요소
<a href="https://www.naver.com/" target="_blank">네이버</a><a> 태그는 택스트나 이미지를 클릭했을 때, 다른 웹페이지로 이동시키는 기능을 가지고 있는 태그!
(하이퍼링크 기능) href속성은 연결할 웹페이지의 주소를 불러오고, target속성은 연결 방식을 결정!
구조를 잡아주는 태그 :
우리가 글을 작성하거나 에세이를 쓸 때 구조가 있는 것처럼 웹사이트도 구조화시켜 볼 수 있다!
. <header> : 웹사이트의 머리글 표현 (상단에 위치, 웹사이트의 시작)
. <nav> : 메뉴버튼들을 담는 공간 표현(navigation) 보통 <ul>, <li>, <a>와 함께 사용한다!
<main>, <article> : 웹사이트의 중요 정보 메인 몸통 역할
<footer> : 웹사이트 하단에 들어가는 정보 표시 (보통 주소 전화번호 연락처 등등)
<div> : 정보, 내용 사이사이 공간을 만들어 주는 태그
#ex
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리스 :: elice</title>
</head>
<body>
<header>
<h1>
<img src="elice_logo.png" alt="엘리스 로고">
</h1>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">회사 소개</a></li>
<li><a href="#">연락처</a></li>
</ul>
</nav>
</header>
<main role="main"> # main태그를 쓸때 항상 role 속성을 불러와 main을 적어주자!
<article>
<h2>회사소개</h2>
<p>회사 소개와 관련된 본문 내용</p>
</article>
</main>
<footer>
<div>
<p>서울시 서초구</p>
</div>
<div>
<p>010-111-222</p>
</div>
</footer>
</body>
</html>
