HTML 기본 문법과 기본 태그
HTML(HyperText Markup Language)
hypertext: 문서와 문서가 링크로 연결되어있다.
보여주고자 하는 정보의 의미를 잘 전달되도록 Semantic Markup을 해야한다!
태그(tag)와 속성 : <시작태그 속성...=""></ 닫는 태그>
<strong> </strong> : 강조 표시
<em> </em>: 강조 표시
<h1> </h1> : 제목(heading) 태그(줄바꿈 포함), 레벨에 따라서 h1, h2, …, h6까지.
<p> </p>: 단락(paragraph)(줄바꿈 두번)
<br/>: 줄바꿈(break) 태그(열리는 태그만 있으면 됨) 브라우저는 줄바꿈을 그냥 무시함.
<a href="" target=" " title=" "> </a> : 앵커(anchor) - 링크로 연결할 노드
- href속성은 이동하고자 하는 문서의 위치 지정(반드시 지정)
- href에 올수 있는 것: 파일이름, URL주소, 같은 문서내에서
#id, 메일보내기 시mailto:메일주소, 모바일에서 바로 전화걸기tel:전화번호 - title속성은 하이퍼링크에 대한 설명 추가
- target속성은 _blank(새 창에 띄우기), _self(현재 프레임에), _parent(부모 프레임에), _top(현재 창의 가장 상위 프레임에) 등이 들어갈 수 있다.
<ul> : 순서없는 리스트(unorderd list)그룹핑
<li> </li> : 아이템 list들
<li> </li>
</ul>
<ol>: 순서있는 리스트(orderd list)그룹핑
<li> </li> : 아이템 list들
<li> </li>
</ol>
-> ul과 ol의 자식요소는 무조건 li만 가능하다. 따라서 각 <li>들에 <a>태그를 걸 때 <li>안에 <a>태그를 써줘야 한다.
정의 리스트(description list)그룹핑(용어 정의할 때, {key:value}로 정보를 제공할 때 사용)
사전적으로 좀더 구체적인 정의를 내리고 싶을 때 <dt>태그 안에 <dfn> </dfn> 사용가능(definition약자)
<dl> //description list
<dt> </dt> //description term(key값에 해당)
<dd> </dd> // description data(value값에 해당)
<dd> </dd>
</dl>
-> dt와 dd가 다대다(N:M)개 올 수도 있음.
<dl>
<div>
<dt>1</dt>
<dd>1에 대한 설명</dd>
</div>
<div>
<dt>2 </dt>
<dd>2에 대한 설명</dd>
</div>
</dl>
-> 다음과 같이 사용도 가능하다. dl태그의 직계자식으로 올 수 있는 태그는 div, dt, dd이다.
<blockquote cite="출처의 url있다면 써준다."> </blockquote>: 내용 전체가 하나의 인용문일 때 사용
<cite> </cite>: blockquote태그 안에 인용의 출처를 남길 때
<q> </q>: 어떤 문단내에서 특정 한 부분을 인용할 때 사용, “ “가 생긴다.
<div> </div>, <span> </span>
아무 의미가 없지만 스타일 적용할 때 요소를 묶을 때 그룹핑하려고 사용. 되도록 사용하지 않되 정 적용할 태그 없을 때 사용.
기타 태그들
<abbr title="약자에 해당되는 풀네임"> </abbr>: 약자(abbreviation)
<address>연락처</address>: 연락망(믈리적 주소, URL, email주소, 전화번호, SNS 등)
<pre> </pre>: 내가 작성한 대로 보여짐.(preformatted text)
<code> </code>: pre안에 code작성하면 내가 작성한대로 코드가 보여짐.
미디어 파일 태그들 Media
<img src="소스파일" width="" height="" title="마우스 올릴 때 설명" alt="파일 표시 안 될때 alternative text"/>: 이미지 삽입 태그 (src와 alt는 반드시 지정해주기)
<audio src="소스파일" controls autoplay loop> </audio>: 오디오 사용(controls: 오디오 컨트롤 표시, autoplay: 자동재생, loop: 반복재생)
혹은
<audio controls autoplay loop>
<source src="소스파일" type="파일 타입"/>
<source src="소스파일" type="파일 타입"/>
<source src="소스파일" type="파일 타입"/>
<p> 브라우저에서 지원하지 않는 파일 타입입니다. </p>
</audio>
-> 브라우저에 따라 지원하지 않는 형식이 있기 때문에 여러 형식의 파일을 넣어놓을 수 있다.
<video src="소스파일" controls autoplay loop> </video>: 비디오 사용
혹은
<video controls autoplay loop>
<source src="소스파일" type="파일 타입"/>
<source src="소스파일" type="파일 타입"/>
<source src="소스파일" type="파일 타입"/>
<p> 브라우저에서 지원하지 않는 파일 타입입니다. </p>
</video>
-> 브라우저에 따라 지원하지 않는 형식이 있기 때문에 여러 형식의 파일을 넣어놓을 수 있다.
<iframe src="소스파일"> </iframe> : 또 다른 html 문서나 컨텐츠를 embed하고 싶을 때 사용
문서의 구조
<!DOCTYPE html> //Document type declaration: HTML5로 작성된 문서라고 브라우저에게 알림.
<html> //가장 바깥 태그(root tag)
<head> //웹 문서에 관한 메타 데이터(부가적 정보를 나타내는 부분)
<title></title> //문서의 대제목
<link rel="stylesheet" href="style.css"> //CSS 스타일시트 첨부, font적용(link:css +tab ->자동완성)
<style></style> //html문서내에 CSS코드 작성할 때(사용 비추)
<meta charset="utf-8">
</head>
<body> //본문에 나타나는 부분
<script></script>//html문서내에 JavaScript 파일 첨부할 때, 혹은 직접 JS코드 작성할 때
</body>
</html>
script태그는 body안 가장 마지막에 작성(다른 서버에서 파일을 가져오는 경우 다 가져올 때까지 기다리기 때문)
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 반응형 웹을 위한 메타태그
개발도구(Editor)
VSC로 편집 시
ol>li*4 하면
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
이렇게 만들어짐
- 에디터에서 주석처리 ctrl+/
참고
이미지 무료 사이트 - https://www.pixabay.com
댓글남기기