22.04.18 - part01-05, 06
HTML 개요
기본 문법
<태그>내용</태그> - 가장 기본적인 문법
<태그> - 시작(열린)태그(Tag)
</태그> - 종료(닫힌)태그
내용 - 요소의 내용(Contents)
<h1>Hello HTML~</h1>
부모와 자식 관계의 이해
<태그><태그>내용</태그></태그>
<태그>내용</태그> - 자식 요소
<태그><태그>내용</태그></태그> - 부모 요소
<body>
<div> 부모 요소
<div></div> 자식 요소
</div>
</body>빈태그
<태그> - 빈(Empty)태그, 종료(닫힌)태그 X
<img src="", alt="">, <link rel="" href="">, <input type="text">
<태그 속성="값">내용</태그>
속성="값" - 기능의 확장
<태그> - 편리합니다. HTML 1/2/3/4/5
<태그/> - 안전합니다. XHTML/ HTML5
글자와 상자
요소가 화면에 출력되는 특성, 크게 2가지로 구분합니다.
인라인(Inline) 요소: 글자를 만들기 위한 요소들 입니다.
블록(Block) 요소: 상자(레이아웃)를 만들기 위한 요소들 입니다.
인라인(Inline) 요소
<span>내용</span> - 대표적인 인라인 요소이고, 본질적으로 아무것도 나타내지 않는
콘텐츠 영역을 설정하는 용도입니다.
<span>Hello</span> - 요소가 수평으로 쌓임
<span>World</span>
<span style="width=100px;">Hello</span> - 반응 없음
<span style="height=100px;">World</span> - 반응 없음
width - 요소의 가로 너비를 지정하는 CSS 속성
height - 요소의 세로 너비를 지정하는 CSS 속성
<span style="margin:20px 20px;">Hello</span> - 위, 아래 외부 여백 사용 불가
<span style="padding:20px 20px;">World</span> - 내부 여백 사용 가능
margin - 요소의 외부여백을 지정하는 CSS 속성
padding - 요소의 내부여백을 지정하는 CSS 속성
<span><div></div></span> - <div> 사용 불가, 블록 요소
<span><span></span></span> - <span> 사용 가능, 인라인 요소블록(Block) 요소
<div>내용</div> - 대표적인 블록 요소이고, 본질적으로 아무것도 나타내지 않는
콘텐츠 영역을 설정하는 용도입니다.
<div>Hello</div> - 요소기 수직으로 쌓임
<div>World</div>
<div style="width=100px;">Hello</div> - 사용 가능
<div style="height=40px;">World</div> - 사용 가능
<div style="margin:10px;">Hello</div> - 외부 여백 사용 가능
<div style="padding:10px;">World</div> - 내부 여백 사용 가능
<div><div></div></div> - <div> 사용 가능, 블록 요소
<div><span></span></div> - <span> 사용 가능, 인라인 요소
HTML 핵심 정리
01. 핵심 요소 정리
<div></div> - 블록(상자) 요소 - 특별한 의미가 없는 구분을 위한 요소
<h1></h1> ~ <h6></h6> - 블록(상자) 요소 - 제목을 의미하는 요소, 숫자가 작을 수록 더 중요한
제목을 정의
<p></p> - 블록(상자) 요소 - 문장을 의미하는 요소
<img src="" alt=""> - 인라인(글자) 요소 - 이미지를 삽입하는 요소
<ul></ul> - 블록(상자) 요소 - 순서가 필요 없는 목록의 집합을 의미
<li></li> - 블록(상자) 요소 - 목록 내 각 항목
<a href=""></a> - 인라인(글자) 요소 - 다른/갗은 페이지로 이동하는 하이퍼링크를 지정하는 요소
- target="" 링크 URL의 표시(브라우저 탭) 위치
<span></span> - 인라인(글자) 요소 - 특별한 의미가 없는 구분을 위한 요소
<br> - 인라인(글자) 요소 - 줄바꿈 요소input 태그
<input type="text"> - 블록(상자) 요소, 인라인(글자) 요소 - 사용자가 데이터를 입력하는 요소
type="text" - 입력받을 데이터의 타입 , value="" - 미리 입력된 값(데이터),
placeholder="" - 사용자가 입력할 값(데이터)의 힌트
disabled - 입력 요소 비활성화
type="checkbox" -사용자에게 체크 여부를 입력 받음
checked - 체크박스 입력 요소 체크됨
type="radio" - 사용자에게 체크 여부를 그룹에서 1개만 입력 받음
name="fruits" - 'fruits'란 이름의 그룹
<label> - 인라인(글자) 요소 - 라벨 가능 요소의 제목
<input type="checkbox">
</label>table 태그
<table> - 테이블 요소 - 표 요소, 행과 열의 집합
<tr>
<td></td> - 테이블 요소 - 열을 지정하는 요소
</tr> - 테이블 요소 - 행을 지정하는 요소
</table>02. 핵심 요소 출력 연습
'01 핵심 요소 정리' 를 보면서 브라우저에서 어떻게 보이는 지 보면서 연습하기02. 주석
<!-- Comment --> - 수정사항이나 설명 등을 작성(주석)
브라우저는 이 태그를 해석하지 않기 때문에 화면에 내용이 표시되지 않음03. 전역 속성
<태그 title="설명"></태그> - 요소의 정보나 설명을 지정
<태그 style="설명"></태그> - 요소의 적용할 스타일(CSS)을 지정
<태그 class="이름"></태그> - 요소의 칭하는 중복 가능한 이름
<태그 id="이름"></태그> - 요소를 지칭하는 고유한 이름
<태그 data-이름="데이터"></태그> - 요소에 데이터를 지정
