Introduction to html
tag(태그)
<태그이름>내용</태그이름>
- 태그는 <>으로 감싸져있으며 브라우저에서 태그 이름은 보여주지 않고 내용 부분만 보여진다.
- 내용의 왼쪽에 있는 것이 시작 태그이고, 내용의 우측에 있는것이 종료 태그이다.
- 대부분의 태그는 시작하면 꼭 끝맺음을 해야 하지만 img, br 태그와 같이 시작과 동시에
종료되어 종료 태그가 필요하지 않는 태그들도 존재한다.
element(요소)
<h1>content</h1>
<img src="photo.jpeg">- <태그이름>으로 시작하여 </태그 이름>으로 끝나고 태그 사이에 내용이 있는 구조를 요소라고 한다.
- 끝 태그가 필요 없는 것은 태그가 그 자체로 요소가 된다.
attribute(속성)
<div class="title" id="hello>content</div>- 속성은 시작 태그에 위치하며 한 태그에 여러 속성을 지정할 수 있다.
- div는 태그이고, class와 id는 속성
HTML tags
<!DOCTYPE>
- HTML파일이라면 제일 첫줄에 위치해야하는 선언문이며 html 파일이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할을 한다
head
<head>
<meta charset="utf-8">
</head>- html 태그 다음에는 항상 head 태그가 위치한다.
- 사이트의 제목, 설명 , 부가정보, 기술적 내용이 들어간다.
body
- body 태그는 항상 head 태그 다음에 위치한다.
- body 태그 내부에는 화면에 보여져야 할 레이아웃대로 각종 태그들이 존재한다.
h1, h2, h3...
<h1>html</h1>
<h2>tags</h2>- heading의 줄임말로 주로 제목같은 텍스트를 보여줄 때 사용하며 1에서부터 숫자가 커질수록 글씨 크기가 점점 작아진다.
span
- 주로 텍스트를 넣어주며 개행되지 않고, 한줄에 이어서 나온다. (inline-element)
p
- paragraph의 줄임말로 텍스트를 넣어주며 주로 문단을 통채로 넣을 때가 많다.
- span 태그와 달리 줄 바꿈이 일어난다.(block-element)
a
<a href="http://www.google.com" target="_blank">a 태그</a>- a 태그는 클릭하면 화면이 이동한다.
- href 속성에는 이동해야하는 주소를 써주며, target 속성에 "_blank" 값은 클릭하면
새 창으로 뜨게 해주는 값
div
- division의 줄임말로 비슷한 부분끼리 그룹지어 디자인에 맞게 레이아웃을 분리하고, 각 div에 class나 id라는 속성을 부여하여 css 스타일을 입혀줄 수 있다.
div와 span의 차이
- div나 span을 3개씩 만들어 나란히 나열할 때 div는 자동 줄 바꿈이 일어나면서 세로로 나열되지만 span은 줄바꿈이 일어나지 않고 가로로 나열된다.
- 동일한 문장을 감쌌을 때 div는 박스 형태로 영역이 설정되고 그 안에 정렬되지만 span은 줄 단위로 영역이 설정되기 떄문에 박스 형태가 아닌 텍스트가 노출된는 영역만 포함이된다.
- div의 margin은 4방향 모두 적용되며 span은 양옆으로만 적용이된다.
HTML attributes
id
<div id="profile"></div>- 각 태그에 이름을 주는 속성으로 웹페이지에서 해당 id 이름은 오직 하나만 가질 수 있다.
- 해당 요소에만 넣고 싶은 디자인을 적용할 때 사용하며 id 이름으로 요소를 찾아내서 제목을 유동적으로 바꿀수도 있고, 새로운 데이터로 내용을 변셜할 수도 있다.
class
- id와 같이 태그에 이름을 주는 속성이지만 여러 태그에 중복된 이름을 부여할 수 있다.
