[수업 세번째 시간] 웹린이의 두번째 html 수업 시간

*HTML
1. "<"와">"사이에 명령어(tag, element) 작성

2. 시작태그<element>와 종료태그</element>로 구성

3. 종료태그가 없는 태그 - br, img, hr, meta, input

ex) <a><img></a>    (O)          <a><img></img></a>     (X)

4. 태그는 중첩 가능하며 종료태그는 나중에 작성한 태그먼저 작성 (겹치지 않게 해라)
<div><p><a></a></p></div> (O)
<div><p><a></div></p></a> (x)

5. 디버깅을 하지 않음 (그렇기 때문에 정확하게 알고 써야함)

  (벌레잡는일, 오류를 해결하는 일 -> 디버그)

6. 가급적 모든 태그와 속성은  소문자로 작성

 

 

*웹 페이지 개발 방법

1. 분리해서 코딩 

  - 구조(Structure) : html (웹페이지에 담아야 하는 정보)

html로만 끝냈을때의 네이버 화면

 

  - 표현(Presentation) : css (디자인, 꾸미기)

  - 동작(Behavior) : javascript (움직임)

 

☆최소 3개의 언어는 알아야 함☆

 ☆에디터에 적용되는 스페이스바(띄어쓰기)는 한 번 밖에 적용 안됨

but 띄어쓰기를 많이 하고 싶은 경우? 

 & (ampersand) <- entity type은 이걸로 시작해서 이거로 끝남

& 이 기호를 나타내려면 &amp;로 나타내주면 됨

&nbsp; (줄을 바꾸다라는 의미, NonBreakingSpace, 줄 바꾸지 말고 공간 만들어 라는 의미)

;은 띄어쓰기 한 칸과 같음(= space bar * 1)

 

이 기호를 나타내려면 &copy; 으로 입력하면 됨 (특수문자)

 

<a> 클릭한다는 명령어

 

 

명령어의 종료 시점을 알려줘야함

 

명령어 사용시 옵션과 그걸 불러와야하는 값이 필요함

<img src(위치)="images/logo.jpg"

         alt()="네이버"

         width(길이)="400"

         height()=""

그래서 이럴경우 ↓

* 태그의 형식

<   명령어        속성          =       "속성값"    >

<   tag           property        =       "value"    >

<   element      attribute      =       "value"    >

 

<   img              src             =       "logo.jpg"    >

 

 

 

* 속성의 특징

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

 ex) <a href="#">   ->  O,        <ahref="#">    ->  X

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

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

   같은 속성을 두 번 이상 사용 불가(B)

 ex) B : <img src="/" width="300" width="400">    ->   X

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

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

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

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

☆예외태그 : meta(metadata)

<meta name="keywords"  content="영화, 한국영화, 외국영화>

meta tag 앞에 사용할 수 있는 언어들은 다양함, 앞쪽 속성과 뒷쪽 속성이 세트로 이루어져야 함

meta name="keywords"  -> 어떤 화면 검색했을때 내 화면엔 이렇게 뜨게 할거야(실제 키워드를 적으면 됨)

naver, daum에는 홈페이지를 등록해야하고 이 때 키워드를 등록해야하는데 개수 제한이 있음(ㅜㅜ), 구글은 등록 안해도됨

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

잘못된 예시

 

"<" 사용 후 ">" 닫을때까지 한 줄에서 끝내야함

 

 

 

*head 안에 들어갈주요 태그

1. meta

 - 문서의 속성 정의(생각을 만드는 태그)

 - head(생각을 담아두는 태그) 태그 내에 작성

 

2. title

 - 문서의 제목 정의

 - head 태그 내에 작성

 

*body 안에 들어갈 주요 태그

1.h (heading)

 - 제목 표시

 - h1(큰 제목) ~ h6(작은 제목) -> 실무상으로는 '이런 태그라서 이렇게 사용한다'가 정확함

   · 모든 섹션의 첫 제목을 h1으로 사용해도 된다 (html5에서 규칙상 아무 문제 없음 but 실무에서 이렇게 작업 x)

   · 보통 로고를 h1로 사용하고 그 외에 나머지를 h2부터 사용한다＊

 - 줄 바꿈 + 볼드체 적용

  - 제목과 내용으로 구성되게 해라 (사용자들에게 정확한 정보 전달을 위해)

예시

ex) h1.우정사업본부

       h2.알림마당

          h3.공지사항

          h3.보도자료

          h3.채용정보

 

       h2.우체국누리소통망

          h3.유튜브

          h3.인스타그램

          h3.페이스북

          h3.블로그

 

2. p (paragraph)

 - 문단 구분

 

3. br (break)

 - 줄 바꿈

 

 

☆ 시멘틱 :  기계끼리 대화를 주고받는 것 (Semantic Element)