HTML이란?
HTML : 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어 (프로그래밍 언어 X)
HTML은 elements로 구성되어있다.
tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다.
HTML요소는 대소문자를 구분하지 않는다.
<title> == <title> == <TITLE> == <TiTle>
하지만 주로 가독성을 위해 소문자로 작성한다.
HTML 요소(Element)의 구조
1. 여는 태그 (Opening tag)
2. 닫는 태그 (Closing tag)
3. 내용 (Content)
4. 요소 (Element) : 여는 태그 + 닫는 태그 + 내용 + 요소
태그가 엇갈리면 안된다!!
<p>My cat is <strong>very grumpy.</p></strong>>> 잘못된 문장!
블럭 레벨 element vs 인라인 element
Block-level element : 줄바꿈
ex) <div> <p> <li>
- 앞뒤 요소 사이에 새로운 줄(Line)을 만들고 나타난다.
- 일반적으로 페이지의 구조적 요소를 나타낼 때 사용된다.
- 인라인 element에 중첩될수 없다. (다른 block-level element에는 可)
inline element : 줄X
ex) <span>
- 항상 블록 레벨 요소내에 포함
- 문장, 단어 같은 작은 부분에 대해서만 적용
- ex) <a> , <em> , <strong>
<em>first</em> <strong>second</strong> <em><strong>third</strong></em>
<p>fourth</p><p><em>fifth</em></p><p><strong>sixth</strong></p><output>
first second third
fourth
fifth
sixth
단일 태그 (empty elements)
ex) : 해당 위치에 이미지를 삽입하기 위한 요소
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">속성 (Atrributes)
>> class 속성 부여
속성은 요소에 실제론 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용한다.
<a>
텍스트를 감싸서 하이퍼링크로 만든다.
-
href: 링크 달기
href="https://www.mozilla.org/" -
title: 링크에 대한 추가 정보
title="hello"링크 위에 마우스 올리면 hello 나타남 -
target: 링크가 어떻게 열릴지 지정
target="_blank"링크 새 탭에서 보여줌 (생략하면 현재 탭에서..)
<p><a href="http://www.naver.com" title="네이버" target="_blank">A link</a> to my favorite website.</p>
불 속성 (Boolean attributes)
값이 없는 속성
일반적으로 그 속성의 이름과 동일한 하나의 값만을 가질 수 있다.
ex) disabled : 사용자가 데이터를 입력할 수 없도록 비활성화
<input type="text" disabled="disabled">
<input type="text" disabled>
속성 값엔 따옴표 붙이자!!
따옴표 없으면 속성 여러개 있을 때 오류남..
큰따옴표 / 작은따옴표 둘 다 가능한데 둘이 섞어 쓰면 안됨
<a href="http://www.example.com">A link to my example.</a> <a href='http://www.example.com'>A link to my example.</a>
텍스트에 한 따옴표 들어가면 다른 따옴표로 감싸주기
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
같은 따옴표 안에 넣고싶으면 HTML entities 사용하자!
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
HTML 문서의 구조
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <p>This is my page</p> </body> </html>
-
<!DOCTYPE html>: 문서 형식 나타냄 -
<html></html> -
<head></head>: 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 스타일, character setdeclaration 등 HTML 페이지의 모든 내용을 담고 있습니다 -
<meta charset="utf=8">: 인코딩 설정 UTF-8 -
<title></title>: 페이지 제목 설정 -
<body></body>: 페이지에 표시되는 모든 콘텐츠가 포함
