비주얼 스튜디오 첫 사용
※ HTML, CSS, JS 차이
HTML: 골격
CSS: 외형
JS: 동작
- 전세계적으로 브라우저 마켓 비율 연도별로 알아 봄. (StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share)
- 사용하는 브라우저에서 html5가 얼마나 잘 작동하는 지 점수로 보여주는 사이트(HTML5test - How well does your browser support HTML5?)
01장.
1. 태그는 <>로 구분
2. 태그 이름은 소문자 기입
3. 여는 태그, 닫는 태그 정확히 입력
4. 들여쓰기 잘하자.
<!DOCTYPE html>: 이 문서가 html5로 쓰여 있다.
선언문이 없으면 브라우저는 해당 html문서를 버전을 분류하지 않고 쿼크모드로 동작하게 함.
<head>: 실제 문서의 정보에 관련된 태그, 일반적으로 화면에 드러나지 않음.
탭에 뜨는 이름이나 아이콘
<body>: 화면에 보이는 내용이 담기는 태그
특수문자 (예- ★): 2byte를 사용하는 전각 문자
특수기호: < ! ? &등을 사용하는 반각 문자
- 특수기호를 화면에 표현하려면?
< : < (less than)
> : > (greater than)
& : &
그 외 기호들- (Character Entity Reference Chart (w3.org))
02장.
2-1. 텍스트를 덩어리로 묶어주는 태그 > block
<hn> : 제목 표시하는 태그
1~6 (1이 가장 크고 6이 가장 작음.)
<p> : 문단(단락)을 정의하는 태그. paragraph
<br> : 줄 바꾸기 break
<blockquote> : 인용문 넣기
<div>: 블럭 속성으로 영역묶기
<pre> : 입력하는 대로 화면에 표시※ <code> : 프로그램 코드 입력할 때<samp> , <kbd>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'
<title>Page Title</title>
</head>
<body>
<h3>구구단을 화면에 표시하는 자바 예제</h3>
<pre>
for(int i = 2 ; i <= 9 ; i++) {
for(int j = 1 ; j <= 9 ; j++) {
system.out.println(i + "*" + j + "=" + i*j)
}
}
</pre>
</body>
</html>2.2. 텍스트를 한 줄로 표시하는 태그 > inline
<strong><b> : 굵게 표시하기
strong- 의미적 강조, b- 형태만
<em><i> : 이탤릭체로 표시하기
<q> : 인용 내용 표시하기 속성- cite
<mark> : 형관펜 효과 내기
<span> : 줄바꿈 없이 영역붂기
<ruby> : 위첨자 표시
2-3. 목록을 만드는 태그 **
<ul>, <ol>, <li>
<ul> : unordered list 순번 없는 목록
<ol> : ordered list 순번 있는 목록
<li> : list item 위 목록에 들어갈 실제 목록들
<dl>, <dt>, <dd>
<dl> : description list 설명 목록
<dt> : description title 설명 제목
<dd> : description data 설명 자료
2-4. 표를 만드는 태그
<table>, <tr>, <td>, <th>
row : 행, column : 열
<table> 표 하나를 가리키는 태그
<tr> 행
<td> 셀
<colspan> : 열 병합
<rowspan> : 행 병합
<caption> : 표에 제목 붙이기
<thead> : 표의 제목
<tbody> : 표의 본문
<tfoot> : 표의 요약
<col> <colgroup>
<col> : 열에 일관된 스타일 적용 caption과 tr 사이
태그 열고 닫기를 완벽하게 하지 않아도 화면 출력이 실행되지만 문법적으로 옳지 못 함.
유효성 검사 해야함. - (The W3C Markup Validation Service)
'HTML5' 카테고리의 다른 글
| 21. 02. 01. 06장- 텍스트·문단·목록 관련 스타일, (0) | 2021.02.01 |
|---|---|
| 21. 01. 29. 05장- CSS의 기초, 6장. 글꼴 관련 스타일 (0) | 2021.02.01 |
| 21. 01. 28. 4장. 폼 (0) | 2021.01.29 |
| 21. 01. 27. 3장. 이미지 아이프레임, 링크 (0) | 2021.01.27 |
| 21. 01. 26. 목록, 표 만들기. (0) | 2021.01.26 |
