자기소개 홈 페이지 만들기 전, Codecademy How to make a Website HTML 파트 이다.
HTML 태그
HTML은 태그들의 집합이다.
다양한 태그들로 코드를 작성하면, 브라우저가 이를 인식해 내용을 표현한다.
<h1>Hello, HTML</h1>태그를 사용하는 기본적인 방식이며, 대부분의 태그는 시작 태그와 종료 태그로 이루어져 있다.
속성이란?
속성은 태그에 추가적인 정보를 제공하거나 태그의 출력을 제어할 수 있는 설정값 이다.
<h1 id="Apple" class="Banana">Hello, HTML</h1><h1> 태그에 id 속성과 class 속성을 선언한 코드이다.
예시와 같이 id, class 속성을 모두 사용한다면 id에 적용한 규칙은 class 규칙보다 우선적이다.
빈 태그란?
태그는 보통 시작 태그와 종료 태그로 이루어져 있으나 그렇지 않은 일부 경우가 존재한다.
이를 빈 태그 라고 한다.
<br>
<img src="">
<input type="">이러한 빈 태그의 경우 내용이 존재하지 않아 종료 태그가 필요하지 않다.
내용이 존재하지 않지만 다른 용도로 사용되는 경우 대체되는 태그라고 한다.
공백
HTML은 두 칸 이상의 공백과 줄바꿈을 무시한다.
줄바꿈을 하고 싶다면 빈 태그에서 언급된 <br> 태그를 사용한다.
HTML 태그의 종류
<H1>...<H6> : Heading 태그, 문서 내 제목 표시
<H1> 태그의 경우 페이지 당 하나가 규칙이나 더 사용할 수 있다. 하지만 글쓰기 규칙에 어긋나는 점은 참고하자.
<P> : Paragraph 태그, 새로운 단락이며 제목이 없는 내용
<br> : 줄바꿈 태그
<b> : bold, 글자를 굵게
<i> : italic, 글자를 기울여서 HTML5 버전에서 단순 표현용 태그에서 의미를 가지는 태그로 변경되었다.
<u> : underline, 글자에 밑줄
<s> : strike, 글자에 중간선
<div> : 의미가 없는 컨테이너 요소, 페이지를 나누기 위한 목적이며 그 나눠진 부분은 서로 독립적이며 각각의 구성, 이동, 스타일을 지정 할수 있다. 블록 레벨 태그
<span> : 의미가 없는 컨테이너 요소, 요소들을 묶기 위해 사용한다. 인라인 레벨 태그
HTML 앵커 요소
<a>는 a태그, 앵커 등으로 부른다.
링크를 만들기 위해 <a> 태그는 반드시 href (hypertext reference) 속성을 가져야 한다.
<a href="http://www.naver.com/" target="_blank">네이버 홈페이지</a>href 속성값은 링크의 목적지가 되는 URL 이며, href 속성을 사용하여 사용자를 웹 사이트에 연결한다.
target="_blank" 를 사용하면 연결된 URL이 별도의 창에서 열린다.
내부 링크로 사용하기
<a>를 통해 페이지 내부의 특정 요소로 이동할 수 있어 이를 내부 링크라고 한다.
<a href="#page-bottom">홈페이지 맨 아래로 이동하기</a>
.......
<h1 id="page-bottom">홈페이지 맨 아래</h1>내부 링크로 사용할 때는 href 속성값에 #을 쓰고 페이지 내에서 이동할 요소의 id 속성값을 적는다.
HTML 리스트 요소
<ul> 순서가 없는, 정렬되지 않는 리스트를 표현할 때 사용한다.
<ol> 순서가 있는 리스트를 표현할 때 사용한다. (요리)
각 태그를 정의 한 후 <li> 를 사용하여 각 항목을 나타낸다.
<dl> 용어와 그에 대한 정의를 표현할 때 사용
<dl>
<dt>사자</dt>
<dd>사자는 식육목 고양이과 표범속으로 분류되는 포유류다.</dd>
<dt>호랑이</dt>
<dd>호랑이 또는 칡범, 갈범은 고양이과에 속하는 맹수다.</dd>
</dl><dt> 는 용어를 나타내는 태그, <dd> 는 용어에 대한 정의 및 설명을 표현하는 태그
HTML 이미지 요소
<img> 는 이미지를 삽입하는 태그이며 빈 태그 이다.
<img src="chicken.png" alt="치킨">
상대경로와 절대경로
<!-- 상대경로 -->
<img src="./images/chicken.png" alt="치킨">
<!-- 절대경로 -->
<img src="C:/users/document/images/chicken.png" alt="치킨">
<img src="http://www.naver.com/chicken.png" alt="치킨">상대경로 : 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로
상대경로의 ./는 페이지가 있는 폴더
절대경로 : 실제 그 이미지가 위치한 곳의 전체 경로
<video> 는 동영상을 삽입하는 태그이며 닫는 태그가 필요하다.
문서의 기본 구조
<!DOCTYPE html> 웹 브라우저에 HTML 문서를 요청
<html> ... </html> 모든 HTML 요소의 부모
<head> ... </head> 제목과 같이 사이트에 대한 데이터를 포함
<title> ... </title> 검색엔진에서 찾았을 때 뜨는 사이트의 제목
<meta charset="utf-8"/> 사용할 문자 집합 이 경우 utf-8 임
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>