Front end

HTML이란?

HTML 문서 작성을 위해 알아야 할 기본 문법

웹 페이지는 head 영역과 body영역으로 구성 된다.

  • Head

    • Page title(웹 페이지의 제목으로 브라우저 탭에 표시된다.)
      • 만약 위의 값이 한글인데 깨지게 된 경우는 console창에서 document.characterSet을 쳐보면 인코딩 방식을 확인 할 수 있으며 meta 태그에 charset=”utf-8” 속성값을 입력해주면된다.
    • CSS Links
    • Other Abstract things

  • Body

    • Headings
    • Paragraph
    • Other things(추상적이지 않고 우리 눈에 볼수 있는 것)

HTML 용어

- element(요소)
- tag
    - open tag
    - close tag
- attribute
- value

기본 문법

HTML 요소는 대소문자를 구분하지 않는다!!! 하지만 대게 가독성과 기타 이유 때문에 소문자로 작성한다.
HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 한다.

  • 만약 문장을 그냥 자체로 표현하고 싶다면?? 다음과 같이

    로 감싸면 된다.

    1
    $ <p>My cat is very grumpy.</p>

  • 여기서

    는 opening tag

  • </p>는 closing tag
  • 안에 감싸져 있는 My cat is very grumpy는 Content
  • 위의 코드 전체를 Element라고 한다.

닫는 태그가 없는 HTML 요소

  • Empty Element는 contents를 감싸지 않아 비어있다는 의미로써 contents를 감싸지 않기 때문에 닫는 태그를 갖지 않는다.

empty element

중첩된 요소(Nesting elements)

요소 안에 다른 요소가 들어갈 수 있다. 그런 요소는 중첩되어 있다고 표현한다. 예를 들어 “고양이가 매우 사납다”라는 문단을 강조하기 위해서 ‘매우’라는 단어를 강조하는 요소를 중첩해서 사용할 수 있다.

1
$ <p>My cat is <strong>very</strong> grumpy.</p>

블럭 레벨 요소 vs 인라인 요소(Block vs inline elements)

HTML의 두 종류의 Element는 Block level element와 Inline element이다.

  • Block-level elements는 웹페이지 상에 Block을 만드는 요소이다. 앞뒤 요소 사이에 새로운 줄(Line)을 만들고 나타난다. 즉 블록 레벨 요소 이전과 이후 요소사이의 줄을 바꾼다. 블록 레벨 요소는 일반적으로 페이지의 구조적 요소를 나타낼 때 사용된다. 예를 들어 개발자는 블록 레벨 요소를 사용하여 Paragraph, list, Navigation Menus(네비게이션 메뉴), Footers(꼬리말)등을 표현할 수 있다. 블록 레벨 요소는 인라인 요소에 중첩될 수 없다. 그러나 블록 레벨 요소는 다른 블록 레벨 요소에 중첩될수 있다.

  • Inline elements는 항상 블록 레벨 요소내에 포함되어 있다. 인라인 요소는 문서의 한 단락같은 큰 범위에는 적용 될 수 없고 문장, 단어 같은 작은 부분에 대해서만 적용될 수 있다. 가장 큰 차이점은 인라인 요소는 새로운 줄을 만들지 않는다.즉 인라인 요소를 작성하면 그것을 작성한 단락내에 나타나게 된다. 예를 들어, 인라인 요소에는 하이퍼링크를 정의하는 요소인 , 텍스트(Text)를 강조하는 요소인 , 등이 있다.

1
2
3
<em>first</em><em>second</em><em>third</em>

<p>forth</p><p>fifth</p><p>sixth</p>

위의 코드를 실행 시켜 보면 알 수 있듯이 은 인라인 요소여서 서로 같은 줄에 공백이 없이 위치 하지만,

는 블록 레벨 요소이어서, 각 요소들은 새로운 줄에 나타나며, 위와 아래에 여백이 있다.(정확히는 여백은 브라우저가 문단에 적용하는 기본 CSS styling 때문에 적용된다.)

빈 요소(Empty elements)

모든 요소가 위에 언급된 Open tag, contents, closed tag의 패턴을 따르는 것은 아니다. 주로 문서에 무언가를 첨부하기 위해 단일 태그(Single tag)를 사용하는 요소도 있다. 예들들어 요소는 해당 위치에 이미지를 삽입하기 위한 요소이다.(빈 요소는 가끔 Void 요소로 불리기도 한다.)

1
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

속성(attributes)

element는 Attribute를 가질 수 있다. Attribute는 element에 실제론 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용한다. 아래의 코드는 나중에 스타일에 관련된 내용이나 기타 내용을 위해 해당 목표를 구분할 수 있는 class attribute를 부여 했다.

  • Attribute를 사용할 때 지켜야 할 점
    • element 이름 다름에 바로오는 attribute는 element이름과 attribute 사이에 공백이 있어야 되고, 하나 이상의 attribute가 있는 경우엔 attribute 사이에 공백이 있어야 한다.
    • attribute 이름 다음엔 등호(=)가 붙는다.
    • attribute 값은 열고 닫는 따옴표로 감싸야 한다.

Share