1. <태그>내용</태그> => 이 전체를 요소 element라고 한다
-태그는 각자의 의미를 가지고 있다.
-<열리는 태그>태그의 범위</ 닫히는 태그>가 한쌍
-태그와 요소는 다르지만 거의 같은 거다
<h1></h1> : 제목
<p></p> : 문단
2. 속성과 값
태그(요소)의 기능을 확장하기 위해 속성을 사용할 수 있다
태그의 의미에 속성을 넣어서 사용할 수 있다
<태그 속성 = "값"></태그>
ex. <img src = "경로" alt = "대체 텍스트(이미지가 들어가지 못했을 경우 대신 나타나는 글자)"/>
어떤 이미지를 사용할지, 어디에 쓸지 등을 속성으로 넣는다
img는 닫히는 태그 없는 빈태그다
ex. <div class = "">내용</div>
div는 의미를 가지지 않는 태그. 분할을 위한 태그
그때 사용되는 내용의 이름, 의미를 넣기 위해 class = ""이라는 속성과 값을 준다
3. 부모와 자식 요소
태그 A가 태그B의 콘텐츠로 사용되면 태그 B: 태그 A의 부모 요소, 태그 A: 태그 B의 자식 요소
<parent>
<child></child>
</parent>
=> 물론 이런 이름의 태그가 있는 건 아니다
=> contents로 포함하고 있으면 부모, 포함되고 있으면 자식
ex. <section class = "fruits">
<h1> 과일 목록 </h1>
<ul>
<li> 사과 </li>
<li> 딸기 </li>
<ul>
</section>
자식의 자식이면 후손, 자손, 하위 요소라고 부른다
부모의 부모면 조상, 상위 요소
4. 빈 태그
html에는 닫히는 개념이 없는 태그들이 있다
1)뒤에 슬래시가 있는 태그 2)뒤에 슬래시가 없는 태그
=> html5에서는 뒤에 슬래시 유무 상관 없이 둘다 쓸 수 있다
=> XHTML에서는 슬래시를 붙여야 한다
가장 중요한 것은 일관적이어야 한다. 혼용하지 않고 계속 슬래시를 쓰거나
계속 쓰지 않으면 된다
빈태그들은 범위가 없다. 그러므로 태그 자체의 의미로만 사용할 수 없고 태그가 위치하고 있는
그 부분에서 바로 사용되어야 한다. 그러므로 대부분 속성과 값을 사용해야 한다.
ex. <img/>
5. html 문서의 범위
idex.html 같은 html 파일을 우리는 html 문서라고 표현할 수 있다.
html 문서의 범위를 나타나는 태그들을 알아봅시다.
<!DOCTYPE html>
<html>
<head>
문서의 정보 : 화면에 출력되는 것이 목적이 아니라 브라우저에게 html의 정보를 알려주는 것
<meta> : 정보 - 인코딩되는 방법
제작자, 설명, 탭의 제목
</head>
<body>
문서의 구조: 실제로 출력될 내용
</body>
1)DOCTYPE
: DTD (Document Type Definition) - html도 버전이 1~4, XHTML 다음에 html5가 있다
그러므로 html5 등의 버전으로 사용한다고 명시를 해줘야 한다
html5은 <!DOCTYPE html>로 선언하면 된다
XHTML은 더 복잡하게 선언해야 한다
6.html 문서의 정보 태그
1)title
: 웹 페이지의 제목, 아이콘에 관여하지 않음
ex. <title> </title>
2)meta
:html 문서에 관한 정보 (link, script에서 표현할 수 없는 기타 모든 정보)
그러므로 다양하게 활용해야 한다.
빈 태그다(닫는 태그가 없다)
<meta charset = ""> character set : 문자 인코딩하는 방법 렌더링하는방식 - UTF-8은 중국, 일본, 한국어 많이 사용
<meta name = "author" content = "홍길동"> 정보 정보종류 = "사이트 제작자" 정보값
<meta name = "description"content = "우리 사이트가 최고 "> 정보 정보종류 = "사이트 설명"
charset 의미: 문자인코딩 방식 값: UTF-8 등
name 의미: 검색엔진 등에 제공하기 위한 정보의 종류(메타 데이터) 값: author, description 등등
content 정보의 종류에 맞게 나타내는 것
3)link (css 불러오기)
외부 문서 연결할 때 사용
css를 불러오거나 아이콘을 불러올 때 사용
빈 태그
<head>
<link rel = "stylesheet" href = "./css">
<link rel = "icon" href = "./favicon">
rel(ationship) : (필수) 가져오려는 파일과 이 파일 사이의 관계 값: stylesheet, icon 등
href : hypertest reference의 약어, 필수는 아니다 값: 경로
4) style 태그 (css 작성하기)
css를 외부 문서에서 작성하여 연결하는 것이 아니고 html 문서 내부에서 작성할 때 사용한다
<style>
img {
width : 100px;
height : 200px;
}
</style>
5) script (JS 불러오거나 작성하기)
-JS 불러오기
<script src = "경로"></script>
=> 외부에서 JS를 불러와서 사용할거다, 라는 선언
-JS 내부에서 작성하기
<script>
function windowOnClickHandler(event) {
}
</script>
7. html 문서의 구조 태그
1)div (막 쓰는 태그)
: division의 약자, 분할을 뜻하고, 문서의 부분이나 섹션을 정의
명확한 의미를 가지지 않기 때문에 특정 범위를 묶는(wrap) 용도로 사용한다
2)img
html에 이미지를 삽입할 때 사용한다
빈 태그
-이미지 삽입을 하는 다른 방법 : css에 background로 삽입
<img src = "경로" alt = "대체 텍스트">
이미지 태그를 쓸때는 src, alt를 꼭 필수로 사용해야 한다
8. 웹 표준 검사하기
html문서가 표준에 부합하는지 테스트해볼 수 있다
W3C validator에 접속하여 작성한 html 문서를 업로드하고 테스트를 시작할 수 있다
입문자일수록 자주하면 좋다
9. html 예제
- 화면의 중앙에 몰려 있다 : header 태그로 활용
- 왼쪽/ 오른쪽으로 나누어져 있다 : container태그 아래 container-left태그 활용
- 왼쪽 : 로고, 네개의 메뉴 : logo태그 아래 img태그, menu태그 아래 menu-item태그 만들고 정렬
10. 모든 파일 저장하는 방법
방법 1)ctrl + K하고 ctrl + s
방법 2)file의 save all
'패캠 네카라쿠배 도전: HTML CSS' 카테고리의 다른 글
| [패캠 네카라쿠배 2기 도전] 4.HTML/ 개요, 요소 - 주요범위, 메타데이터 (1) | 2021.05.21 |
|---|---|
| [패스트캠퍼스 네카라쿠배 2기 도전] CSS (0) | 2021.05.14 |
| [패스트캠퍼스 네카라쿠배 2기 도전] 웹에서 사용하는 이미지, 기호, 라이선스 (0) | 2021.05.14 |
| [패스트캠퍼스 네카라쿠배 2기 도전] VS코드 활용 방법 (1) | 2021.05.14 |
| [패스트캠퍼스 네카라쿠배 2기 도전] 입문자에게 추천하는 HTML, CSS 첫걸음 (0) | 2021.05.14 |