2023/03/03__HTML/CSS__2

- emmet cheat sheet - 구글검색 (docs.emmet.io)

*속성의 특징

1.태그와 속성,속성과 속성은 공백으로 구분
ex) 

  <a href="#"> ---> O
  <ahref="#"> ---> X

2. 여러 개의 속성을 사용할 수 있지만(A)
    ex)

A :<img src="/" width="길이" height="높이"> --> O

같은 속성을 두번 이상 사용 불가(B)
B :<img src="/" width="300" width="340"> --> X

3. 하나의 속성에는 값을 한 개만 지정
    ex)

<img src="/" width="300,400"> --> X

4. 속성값은 원래의 이름이 한글인 경우를 제외하고 한글사용불가
    ex)

<img width="300"> --> O
<img width="삼백"> --> X

예외 태그 : meta
<meta name="keyword" content="영화, 한국영화, 외국영화">
메타 속성에서는 요소들이 짝을 이루는 것들이 반드시 있다.

5. 속성값에는 "" 생략가능
    (xhtml에서는 생략 불가)

* 주요 태그
1. meta
- 문서의 속성 정의
- head 태그 내에 작성

2.title
- 문서의 제목 정의
- head 태그 내에 작성

3. h(Heading)
- 제목 표시
- h1(큰 제목) ~ h6(작은 제목)
- 줄 바꿈 + 볼드체 적용
- h1은 상징성이 가장 큰 곳에 하나만 사용
- 
4. p(paragraph)
- 문단 구분

5. br(break)
- 줄 바꿈

6.목록태그
Group
- ul(Unordered List : 비순차목록)
- ol(Ordered List : 순차목록)
-** dl(Definition List : 정의목록)

- li(List Item : ol, ul의 항목)

-** dt(Definition Term: 목록에 대한 정의)
-** dd(Definition Description: 정의 목록의 항목)
7. a(Anchor)
- 링크 생성
- 외부 링크로 갈땐 "http://" + 주소
- 내부 파일도 갈 수 있음 "/" + 폴더명 or 파일명.확장자
8. img(Image)
- 웹 페이지에 이미지 불러오기
- src에는 그림의 위치지정 
- alt는 사진 대한 내용이 없을 때 ""로 남겨둔다. (따옴표사이에는 공간이 없음) )
9. div
- 여러 개의 요소를 그룹화

*웹 페이지 개발 방법
1. 분리해서 코딩
- 구조(Structure) : html
- 표현(Presentation) : css
- 동장(Behavior) : javascript