1. 웹 언어의 역할
| 설명 | 비유 | |
| HTML | 정보의 집합 or 설계도 | 건물의 설계도 |
| CSS | 디자인 or 스타일링 | 인테리어 디자인 |
| JavaScript | 기능과 효과 | 박수를 치면 불이 꺼지는 기능 |
2. 웹 제작 시 고려 사항
- 웹 표준: 웹사이트를 작성할 때 따라야 하는 표준 규약 및 기술 규격
- 웹 접근성: 모두가 웹사이트를 이용할 수 있도록 하는 방식
- 크로스 브라우징: 모든 기기및 브라우저에서 사이트가 제대로 작동하도록 하는 기법
3. HTML 태그
- 태그 구조 -> <tag 속성="속성값">내용</tag>
- 주요 기본 태그(정보를 표현할 때 사용하는 태그)
- <h1>~<h6>: 정보의 중요도를 나타낸다. 제목 등에 사용할 수 있다. <h1> 태그의 경우는 가장 중요한 정보를 포함하므로 html문서 내에서 한 번만 등장한다.
- <a>: 다른 웹 페이지로 링크를 걸어준다.
- <img>: 이미지를 웹페이지에 표시하는 태그이다.
- <p>: 본문 내용, 문단을 표현하는 태그이다.
- <ul>, <ol>, <li>: 리스트를 생성하는 태그이다.
- 구조를 잡을 때 사용하는 태그
- <header>: 웹사이트의 머리글 구역, <nav>, <ul>, <li>, <a> 등을 사용해 사이트의 메뉴 등을 구성할 수 있다.
- <main>: 웹사이트의 본문 구역, <article>을 사용해 주요 이미지, 텍스트 정보, 구역 설정 등에 사용한다. <h#>를 이용해 구역의 타이틀을 지정해준다.
- <footer>: 웹사이트의 하단 구역, 웹사이트의 주소, 저작권, 사업자 등을 적는다.
- <div>: 임의의 공간을 만들 때 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header></header>
<main role="main">
<article></article>
<article></article>
<article></article>
</main>
<footer></footer>
</body>
</html>
4. HTML 태그 성격
| block | inline |
| y축 정렬 | x축 정렬 |
| 공간을 만들수 있음(width, height 속성 사용) | 공간을 만들 수 없음 |
| 상하 배치 작업 가능(margin, padding) | 상하 배치 작업 불가(margin, padding <top, bottom>) |
'HTML' 카테고리의 다른 글
| HTML(1)-20220404 (0) | 2022.04.04 |
|---|
