<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introduce</title>
</head>
<body>
<ul>
<li>1. hobby</li>
<li>2. career</li>
</ul>
<ol>
<li>hobby</li>
<li>career</li>
</ol>
<br>
<a href="https://www.instagram.com/gonkang_jeondosa/" target="_blank" title="인스타그램">인스타링크</a>
<img src="../introduce/img/surf.jpg" width="100%">
<P style="margin-top:45px;">세번째 단락</P>
</body>
</html>html 코드는 크게 두 덩어리로 나눌 수 있다.
메타데이터(주:데이터에 대한 데이터)를 담고 있는 head부분과 본문내용이 담긴 body부분이다. 이 두 부분은 html 태그로 감싼다.
1. Head
1) Doctype
<!DOXTYPE html>Doctype은 본문이 html5를 따른다는 선언이다. 코드의 가장 위에 위치한다.
2) head
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introduce</title>
</head>head 안에는 데이터를 설명하는 데이터인 메타데이터가 담긴다.
한줄 한줄 뜯어보자
<meta charset="UTF-8">본문에 작성한 한글을 웹페이지에 깨지지 않고 표기되도록 UTF-8임을 명시한다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">윈도우 익스플로러에서만 적용되는 코드다.
과거 웹표준에 맞지 않게 작성된 페이지를 볼 때 호환성 보기를 꺼준다.
최신의 렌더링 엔진으로 강제함으로써 화면이 깨지지 않도록 한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">-
viewport : 메타 태그는 브라우저에서 웹 페이지를 표기할 때 크기를 설명한다.
-
width=device-width : 반응형 디자인을 위한 최선의 방법.
웹페이지의 가로폭을 사용중인 장치의 화면사이즈에 맞춰서 보여준다. -
initial-scale=1.0 : 첫 방문시 페이지 배율을 설정한다. 기본값은 1이다.
minimum-scale, maximum-scale, user-scalable=no를 통해 확대/축소를 못하게 할 수 있다.
3) title
<title>Introduce</title>아래와 같이 페이지의 제목을 지정할 수 있다.
2. Body
<body>
<ul>
<li>1. hobby</li>
<li>2. career</li>
</ul>
<ol>
<li>hobby</li>
<li>career</li>
</ol>
<br>
<a href="https://www.instagram.com/gonkang_jeondosa/" target="_blank" title="인스타그램">인스타링크</a>
<img src="../introduce/img/surf.jpg" width="100%">
<P style="margin-top:45px;">세번째 단락</P>
</body>body는 사용자가 페이지에서 확인할 수 있는 컨텐츠가 담긴다.
1) 목차를 표기하는 두 가지 방법(ol, ul)
목차를 표기할 때에는 순서가 있는 경우, 그렇지 않은 경우가 있을 것이다.
<ul>
<li>hobby</li>
<li>career</li>
</ul>순서가 필요없는 경우에는 ul(unordered list)로 li(list tag)목록을 감싸준다.아래와 같이 확인할 수 있다.
hobby
career
<ol>
<li>hobby</li>
<li>career</li>
</ol>순서가 필요한 경우에는 ol(orderd list로 li(list tag)목록을 감
싸준다. <ul>태그와의 차이점은 앞 단에 숫자로 순서를 확인할 수 있다는 점이다.
1.hobby
2.career
2) 줄바꾸는 두 가지 방법(br, p)
코드 안에서 엔터는 웹페이지에 표시되지 않는다. 태그를 활용하여 줄을 바꿀 수 있다. <br>태그를 확용하여 줄을 바꿀 수 있다.
그러나, 문단의 나뉨을 위한 줄바꿈이 필요할 때에는 <p>태그를 활용하여 특정 문단을 감싸줄 것을 권장한다. 이를 통해 '문단'이라는 글쓴이의 의도를 코드로 확인할 수 있다.
<P style="margin-top:45px;">문단내용</P>문단 사이의 간격을 45픽셀로 지정했다.
3) 이미지 올리기(img src)
<img src="../introduce/img/surf.jpg" width="100%">introduce의 img폴더 내의 surf.jpg라는 이미지를 표시한다.
width를 100%로 설정하여 원본 사이즈로 표시한다.
4) 링크(a href)
<a href="https://www.instagram.com/gonkang_jeondosa/"
target="_blank" title="인스타그램">인스타링크</a>a태그는 anchor(닻)의 약자이다. 네트워크 사이에서 사용자가 정박할 수 있도록 좌표를 나타내는 역할을 한다.
href은 Hypertext Reference의 약자로 a태그가 감싸고 있는 텍스트를 클릭할 시 사용자를 보낼 URL을 입력할 수 있다.
target링크된 페이지를 표시할 방법을 나타낸다
_blank: 브라우저의 새 탭을 열어 연결된 URL을 보여준다._self: 브라우저의 현재 탭을 연결된 URL로 이동시킨다.- 그 밖에
_parent,_top태그도 있다.
title은 해당 링크의 제목이다.
a태그가 감싸고 있는 텍스트에 마우스 오버하면 제목을 확인할 수 있다.
