HTML
웹페이지의 틀을 만드는 마크업 언어
tag
html은 tag들의 집합이다.
// 트리구조(tree structure)
<html>
<head>
<title>page title</title>
</head>
<body>
<h1>Hello world</h1>
<div>
contents here
</div>
<span>
here too
</span>
</body>
</html>- self closing tag
태그 내부에 내용이 없다면 <tag.../>와 같이 표현 가능
주요 tag
div vs span
- div는 한줄을 차지
- span은 컨텐츠 크기만큼 (자동 줄바꿈이 되지 않는다.)
img, a
- img는 이미지 삽입, a는 링크 삽입
<img src="http://..."> // 닫는 태그x
<a href="http://...">페이지 이름</a>
<a href="http://..." target="_blank">페이지 이름</a> // 새창으로 연결p, section
- p는 하나의 문단을 표현한다.
-section은 큰 의미 단위가 될 수 있는 어떤 것이든 하나의 구역으로 구분하는데
그 의미 덕분에 비슷한 div는 사용을 지양하고 section을 사용해야한다.
ul, li
<li> //list
<ul> //unordered list 넘버링 x
<ol> //ordered list 넘버링 oinput, textarea
<textbox> 타이핑이 가능한 공간
<checkbox> 다중선택
<radiobutton> 다중선택 x
<textarea> textbox와는 다르게 줄바꿈이 가능
<button> 일반적인 버튼의 역할html & css
- html <= css 적용방법
- 인라인 스타일(Inline Style)
- 내부 스타일 시트(Internal Style)
- 외부 스타일 시트(External Style)
1번과 2번의 경우 html내에서 입력한다.
그에 따라 내용이 길어질수록 유지보수의 어려움이 생기는 단점이 있다.
주로 css 파일을 따로 만들어 3번 외부 스타일 시트를 이용한다.
<link rel="stylesheet" href="Desktop/index.css" />
//rel은 link태그로 연결되는 파일의 역할이나 특징을
//href는 파일의 위치를 입력한다. 같은 폴더에 있다면 이름만 입력한다.
//다른 역할을 하는 css 파일은 얼마든지 추가해도 된다.
<nav style="background: #eee; color: blue">...</nav>
//아주 짧은 내용의 경우 위와 같이 2번을 활용한다.- HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.
- HTML이 Markup language라는 것을 이해할 수 있다.
"구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다. - 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
div, span 태그가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있다.
input type을 설정하여 다양한 종류의 input을 활용할 수 있다. - 동적인 웹 어플리케이션 개발을 위한 HTML 구조를 짤 수 있다.
간단한 웹 페이지 기획안을 HTML 문서로 표현할 수 있다.
id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미있는(Sementic) HTML 문서를 작성할 수 있다.
HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.
