[Day 2] Ⅱ. HTML & CSS
1. HTML
- 요소(Element)
1. Opening tag: 요소의 이름, 여닫는 꺽쇠괄호로 표현. 요소/효과가 시작되는 곳.
2. Closing tag: Closing tag의 요소 이름 앞에 슬래시(/)를 더하여 표현. 요소/효과가 끝나는 곳.
3. Content: 요소의 내용
4. Attribute(속성): content로 표시되지 않는 추가 정보를 담고 있음. 하나의 요소에 여러개의 속성 추가 가능.
속성 이름 뒤에는 등호기호(=)와 인용기호(")로 둘러싸인 속성값이 존재.
5. Nesting(중첩): 요소가 다른 요소 안에 위치하는 것.
6. Empty Element(빈 요소): Content를 가지고 있지 않은 요소 (ex: img tag)
- HTML 문서 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, Web World</title>
</head>
<body>
<h1>Hello, Web World</h1>
<img src="images/html5.png" alt="HTML5">
</body>
</html>1. <!DOCTYPE html>: 문서가 HTML이라는 것을 브라우저에게 알려주는 것.
2. <html>: 페이지의 전체를 감싸는 Root Element
3. <head>: 키워드 및 검색결과에 표시되길 원하는 페이지 설명, 컨텐츠를 꾸미기 위한 CSS, 문자집합을 포함
4. <meta charset="utf-8">: 문서가 사용해야 할 문서집합을 "utf-8"로 설정
5. <title>: 페이지의 제목을 설정하는 것, 브라우저 탭의 제목으로 표시됨 (북마크, 즐겨찾기에서도 페이지 설명)
6. <body>: 브라우저에 표시될 모든 컨텐츠를 담고 있음
7. <img>(image): 이미지를 나타나게 하는 태그
- src 속성(source): 이미지 경로를 지정
- alt 속성: 이미지를 볼 수 없는 사용자들을 위한 설명문 지정
(screen reader에 읽힘, 이미지를 표시할 수 없는 경우에도 이미지 대신 alt text가 나타남)
8. <h>(headline): 제목요소. 특정 부분의 제목 또는 내용의 하위 제목임을 구체화할 수 있게 해줌. 6단계로 구성.
9. <p>(paragraph): 문단을 표시하기 위한 요소.
10. <ol>(ordered list): 항목의 순서가 중요한 목록 (ex: 조립법)
11. <ul>(unordered list): 항목의 순서가 관계없는 목록 (ex: 쇼핑목록)
12. <li>(list item): 목록의 각 항목을 나타내는 요소. <ol>, <ul>의 하위항목을 나타내는 태그.
13. <a>(anchor): 연결을 하기 위한 태그. href 속성을 사용하여 경로 연결.
'STUDY > CODING' 카테고리의 다른 글
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 6 (0) | 2019.08.25 |
|---|---|
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 5 (0) | 2019.08.24 |
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 4 (0) | 2019.08.23 |
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 3 (0) | 2019.08.23 |
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 1 (0) | 2019.08.21 |
