HTML 은 웹사이트의 뼈대와 같다!
1. 태그
태그는 html의 가장 기본적인 코드이다.
< > 괄호 사이에 태그를 입력하여 사용한다.
태그는 크게 내용이 있는 코드와 내용이 없는 코드로 나뉘어 진다.
내용이 있는 코드!
<div> <p> <span> 내용이 있는 태그는 사용할 때
<시작태그>contents</종료태그> 와 같은형식으로 작성하고 내용(contents)이 사이에 들어가면 된다.
이모든것을 요소(elements) 라고 한다.
*주의
opentag(시작태그) 와 closetag(종료태그)는 같아야 한다.
내용이 없는 코드 !
<br> <img> <meta>내용이 없는 코드는 시작태그, 종료태그와 같은 개념이 없기 때문에 사용할 때에는
태그만 사용하면 된다.
2.기본구조와 속성
html의 기본적인 구조는 다음과 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
</head>
<body>
</body>
</html><!DOCTYPE html> 은 html5를 의미한다.
<html> 은 html의 시작을 알리는 코드이다.
<html lang="ko"> lang을 이용하여 html문서의 언어정보를 나타낸다. (ex ko = 한국어 , en = 영어)
<head> 문서의 정보를 작성하는 영역
<title> 문서의 제목을 작성하는 태그이며 웹브라우저의 탭텍스트에 내용이 입력된다.
<body> 웹브라우저에 표시되는 영역
html태그의 속성
html의 속성이란 태그의 의미가 되거나 기능적으로 보조해주는 역활을 말한다.
<태그명 속성= "속성값">
<lang> <charset> <name> <content> <href> <target> <src> 등이
속성으로 사용되는 태그들이다.3.h(n) 태그
<h1></h1>
<h2></h2>
<h3></h3>
이런식으로 <h6>까지 사용할 수 있으며 숫자가 클수록 글자는 작아진다.
상대적으로 중요한 내용일수록 숫자가 작은 헤드태그를 사용한다.
<h1>headline</h1> 이런 태그를 헤드태그라고 부르며,
글자의 크기가 굵고 크게 출력되기 때문에 주로 콘텐츠의 대제목, 중제목, 소제목과 같은 곳에서 사용된다.
*주의
h1태그는 문서에서 한번만 사용한다!
검색엔진 최적화에서 검색엔진이 문서의 가장 중요한 내용을 파악하기 위해서 헤드태그를 수집하여
해석을 하게 되는데 이때 만약 가장 중요도가 높을 때 사용하는 h1태그가 여러게 사용된다면
검색엔진의 입장에서는 어떤내용이 가장 중요도가 높은지 판단할 수 없기 때문이다.
h1태그 부터 순차적으로 사용하기!
이것도 검색엔진이 html문서의 정보를 수집할 때 h1 부터 h6까지 순차적으로 수집하게 되는데
만약 h2부터 사용하게되면 검색엔진은 h1이 없으면 아예 헤드태그가 없다고 판단하여 헤드태그가 있어도 수집을 중단하기 때문에 헤드태그는 h1부터 h6까지 순차적으로 사용한다
4. 영역태그 , 레이아웃 태그
div태그와 span태그의 차이점
div태그는 분할하다라는 뜻을 가지고 있는 'division'의 준말로,
html문서 내에서 한개의 공간(block)을 만드는 태그이다. 한 단락을 묶는 태그
<div></div>
태그성질: 블록태그
사용목적: 영역태그
span태그는 기간, 폭, 너비와 같은 뜻을 가지고 있는 태그로
자신에게 주어진 공간만을 차지한다. 한줄만 묶은 태그
태그성질: 인라인태그
사용목적: 영역태그
<span></span>
문서구조를 위한 레이아웃 태그
html5부터 추가된 기능으로 홈페이지의 영역을 나눠준다.
<header> 태그 - 머리말 지정하기
사이트 전체의 제목 부분이 될 수도 있고, 본문의 제목 부분이 될 수도 있다.
주로 페이지 맨 위쪽이나 왼쪽에 삽입
<form> 태그를 사용해 검색 창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣음
<nav> 태그 - 네비게이션 링크
같은 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크를 나타냄
네비게이션 메뉴뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 사용됨
<section> 태그 - 주제별 콘텐츠 영역
문서에서 주제별로 콘텐츠를 묶을 때 사용
색션 제몰을 나타내는 <h/n> 태그가 함께 사용됨
<article> 태그 - 콘텐츠 내용
웹 상의 실제 내용
태그 적용 부분을 떼어내 독립적으로 배포하거나 재사용 하더라도 완전히 하나의 콘텐츠
<aside> 태그 - 본문 이외의 내용
본문 내용 외에 주변에 표시되는 기타 내용들
필수 요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때 사용
<footer>태그- 제작 정보와 저작권 정보5. p , br 태그
p태그
<p> 태그는 paragraph 해석하자면 단락이라는 뜻이며,
가독성이 생기도록 내용상으로 매듭을 짓는 태그이다.
<p>내용</p> 이런식으로 사용을 하며,
출력하게 되면 헤드태그와는 다른 기본사이즈의 텍스트가 출력된다.
p태그를 연속해서 출력하게되면 단락사이의 공간이 생긴다.
p태그는 웹사이트의 가로 한줄을 다 사용하기 때문에 한줄에 다 출력이 안되는 길이일때
다음줄로 넘겨 여러줄로 출력된다. 웹브라우저의 크기에 따라서 출력되는 p태그의 줄의 양이 다르다.
에디터에서 공백(spacsbar)을 아무리 사용해도 출력되는 공백은 한칸이다.
만약 공백을 여러개 사용하고 싶을 때 를 사용한다. 한개당 공백 한개로 사용된다.br태그
<br>줄바꿈을 실행하는 태그이다.
에디터에서 줄바꿈을 위해 엔터를 누르고 코드를 실행하여도 출력값은 변하지 않는다.
그때 br태그를 사용하여 줄바꿈을 하면된다.
6.a 태그와 링크
<a>태그는 웹페이지에서 링크를 연결 할 때 사용한다.
a태그는 크게 내부링크방법과 외부링크방법으로 나눠진다.
내부링크방법
a태그를 이용해서 내부에 링크를 연결하는 방법이다. 해당링크를 클릭하게 되면
html문서의 특정위치로 이동하게된다.
<a href="#one">one으로 이동</a> href속성을 사용하여 내가 이동시키고 싶은 요소의
아이디값을 #을 사용해 지정한 후 출력될 내용을 입력한다.외부링크방법
a태그를 이용하여 다른 웹페이지와 연결하는 방법이다.
<a href="http://www.google.com">구글로 이동</a> href속성의 속성값에 외부링크를 넣어 사용이 가능하다.
위와 같이 코드를 출력하고 클릭을 하게 되면 현재페이지에서 구글홈페이지로 이동한다.
만약 새탭에서 외부링크를 열리게 하려면 target 속성을 사용하면 된다.
<a href="http://www.google.com" target="_blank">구글로 이동</a>
<a href="http://www.google.com" target="_self">구글로 이동</a> default 값으로 지정되어 있으며 현재의 탭에서 링크된 문서를 연다.
<a href="http://www.google.com" target="프레임명">구글로 이동</a> 지정된 프레임명을 사용할 수 있다.
7. img 태그
html문서에 이미지를 삽일할 때 사용하는 태그이며, img 태그는 반드시 속성을 입력해야한다.
<img src="파일경로(이미지가 들어있는 파일)/이미지파일이름.jpg">
ex)
<img src="images/dog.jpg">
<img src="./images/dog.jpg"> 여기서 ./는 현재 폴더를 의미하며
../ 는 상위폴더를 의미한다.이미지를 불어오지못할 경우를 대비해서 이미지대신 이미지를 설명하는 텍스트가 출력되도록 설정하는 방법도 있다.
<img src="images/dog.jpg" alt="강아지사진"> alt 속성을 이용하여 대체텍스트를 생성한다,*주의
img태그는 src 와 alt 속성은 필수이다!
그외 img태그의 속성
<img src="images/dog.jpg" alt="강아지사진" width="100"> width속성은 이미지의 너비를 입력할 수 있다.
<img src="images/dog.jpg" alt="강아지사진" height="300"> height은 이미지의 높이를 입력할 수 있다.width와 height은 단독으로 사용하게 되면 비율에 마줘서 높이와 넢이가 설정되지만
같이 사용할 경우에는 원래 이미지의 비율이 손상될 수 있다.
외부리소스 이미지 삽입 방법
외부의 이미지파일 주소를 src 속성을 사용하여 작성하면 된다.
<img src="whttps://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="google logo">이를 응용하여 a코드와 같이 작성하면
<a href="https://www.google.com" target="_blanl">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt='google logo'>
</a>이미지를 클릭하여 이미지가 가지고 있는 링크로 이동할 수 있게 된다.
