02. HTML & CSS 첫걸음 / HTML

( 02. HTML & CSS 첫걸음 / HTML 01강 ~ 08강 정리 )

 

01. 기본 문법

     태그는 각자의 의미를 가지고 있으며 가음과 같은 형태를 가진다.

     열린태그와 닫힌태그로 구성되어있다.

     EX) <TAG> </TAG> , <TAG> CONTENT </TAG> 태그 = 요소 (같으나 정확히는 다르다.)

     EX) <h1> 토끼와 거북이 </h1> h 태그는 주제를 쓸때 사용. 숫자는 글자의 크기

 

 

02. 속성과 값

      <TAG 속성 = "값"> </TAG> 태그(요소)의 기능을 확장하기 위해 '속성'을 사용할 수 있다.

       <img src = "./my-pjo.jpg" alt="내 프로필 사진" />  src = 경로(source) , alr = 대체텍스트

        img태그는  닫힌 태그가 따로 없으므로 빈태그 라고 불림

 

       <div class="name">홍길동</div> (div태그는 의미가 없는 태그임)

 

03. 부모 요소, 자식 요소

       <PARENT>

            <CHILD> </CHILD> ( 부모 태그 컨텐츠에 자식 태그가 들어있다.) 

        </PARENT>

 

section태그의 자식은 h1, ul 후손or자손은 li. li의 부모는 ul, 조상은 section태그

 

04. 빈 태그

     HTML에는 닫히는 개념이 없는 태그들이 있다. ( img태그 같은 경우 )

     2가지 개념이 있다. -> 1. <TAG>  2.<TAG/> 슬래시가 있고 없고의 차이

     HTML5에서는 2개다 쓸수 있지만 혼란스러울수도 있으니 한개만 쓰는걸 추천. 

     또한 닫히는 태그가 없어서 범위가 없다. -> 그안에서 다 해결해야됨. 

 

05. DOCTYPE

     index.html 같은 HTML 파일을 우리는 HTML 문서라고 표현할 수 있다.

 

 

  크게 3가지

  1. html태그 -> 문서의 범위

 

  2. head태그 -> 문서의 정보 

 

  3. body태그 -> 문서의 구조

 

  DOCTYPE (Document Type Definition) 은 마크업 언어에서 문서 형식을 정의한다.

    ->어떠한 버전으로 해석해서 브라우저에 출력되는지 정의하는 부분. ex)윈도우7,8 버전에 맞게 돌아간다.

       ( HTML은 크게 1, 2, 3, 4, X-, 5 버전이 있다. )

 

06 . HEAD 태그 (TITLE, META, LINK, STYLE, SCRIPT)

  TITLE 태그 -> 웹페이지의 제목 <title> NAVER </title>

  META 태그 -> 기타 모든 정보를 나타내는 태그

charset = 문자를 인코딩 하는 방식(화면에 출력되는 텍스트) name = author(제작자) content로 누군지 이름을 적고 , 설명도 추가가능. 

 

LINK 태그 (CSS 불러오기)

  -외부 문서를 연결할 때 사용한다. (빈태그)

 

STYLE 태그 (CSS 작성하기)

   CSS를 외부 문서에서 작성하여 연걸하는 것이 아니고  HTML 문서 내부에 작성할 때 사용한다.

 

SCRIPT 태그 (JS 불러오거나 작성하기)

    HTML 문서에서 CSS는 작성된 CSS를 <link> 로 불러오거나 <style></style>안에 작성할 수 있다.

    JS는 <script></script> 로 이 2가지 방식을 모두 사용할 수 있다.

 

1. 불러오기 2. 작성하기

 

 

 07. BODY 태그 (div, image), 웹 표준 검사

     div태그 (막 쓰는 태그)

      -division 으로 분학을 뜻하고 문서의 부분이나 섹션을 정의 한다.

       명확한 의미를 가지지 않기 때문에 정말 많은 경우 단순히 범위를 묶는 용도로 사용

       보통 이렇게 묶인 부분들에 CSS나 JS를 적용하게 된다. 

 

     img태그 (이미지를 넣는 태그)

      - <img>는 HTML에 이미지를 삽일할 때 사용한다.

         (웹 페이지에 이미지를 삽입하는 방식은 크게 2가지로, HTML에서 삽입(IMG)과 CSS에서 삽입이 있다.

  필수 속성인데 src 속성을 안썻다? -> 웹 표준에 어긋난다.

  

  웹 표준 검사하기 ( W3C validator )

   표준에 부합하는지 테스트를 해볼 수 있는 사이트