HTML 기본 문법
2021. 10. 5. 11:11ㆍStudy/Publishing
HTML 기본 문법의 특징
1. 폴더와 파일명 : 영문(대/소) + 숫자 + _ + - (시작 문자는 꼭 영문이어야 함 ex. sample_1.html)
2. html/css/javascript 영문 대소문자를 구분한다.
3. html : 무조건 영문 소문자로 마크업한다.
4. 대다수의 태그들은 <태그명></태그명> 열고 닫는 세트로 되어있다. (태그의 계층, DOM, 부모/자식의 관계)
5. 태그들은 계층 (부모/자식)을 표현할 수 있다. (Tab)
6. 모든 웹문서(파일명.html)는 하나의 <html></html>을 최상위부모로 가진다.
<html lang="en"> 주언어 정의
7. <head></head> : 화면에 보여지는 부분 이외의 것을 명시(코드명시/CSS 또는 js파일을 연결)
8. <body></body> : 웹페이지의 본문을 처리하는 태그(화면 UI 구현)
9. <title>사이트제목</title>
10. <meta> : 본문의 코드를 처리하기 전에 미리 브라우저에게 특정의 정보를 알려주는 역할
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
템플릿
- html문서에서 꼭 필수적으로 필요한 코드
- html4.01 / xhtml1.0 / html5 (버전별로 다름 / !DOCTYPE으로 버전 명시)
- html5 템플릿 문서
* 젠코딩
복잡한 코드를 일일히 손으로 치는게 아니라 약식으로 입력 하면 만들어주는 기능
약식 코드로 정식 코드를 만드는 기능
* 사용방법
- html:5 + Tab
- ! + Tab
- div>ul*10>li*3>a>img + Tab
CSS 스타일링 방법 3가지
1. 인라인, 로컬
- 태그에 직접 쓰는 방법
/ 마크업이 지저분해 짐
/ 효율이 떨어짐
2. 임베디드, 페이지
- 문서에 스타일을 포함하는 방법
- head에 style 섹션을 넣어 사용한다.
3. 링크 ★
- 분리되어 있는 css파일을 링크시키는 방법
- 가장 적합한 방법이다.
- 독립적인 css파일을 생성한다.
- 파일의 재사용이 가능하다.
* 상속 시 우선순위
인라인 > 임베디드 > 링크
/* 1. 인라인, 로컬 스타일 */
<div style="color:#006;">인라인 방법</div>
/* 2. 임베디드, 페이지 스타일 */
<head>
<style>
p{color:#006;}
</style>
</head>
/* 3. 링크드 스타일 */
<head>
<link rel="stylesheet" href="main.css">
</head>
'Study > Publishing' 카테고리의 다른 글
| HTML5 시맨틱 태그 (Semantic Tag) (0) | 2021.10.07 |
|---|---|
| Reset.css / Normalize.css (0) | 2021.10.07 |
| HTML Entity (0) | 2021.10.06 |
| 웹표준과 웹접근성 (0) | 2021.09.29 |
| [css] Flexbox (0) | 2021.03.10 |
