2 분 소요

🖥 HTML / CSS 이전 글 보기

안녕하세요. Nerd Lee 입니다.

HTML을 공부했던 내용 중, HTML의 간단한 기본 문법에 대해 알아보도록 하겠습니다!

HTML 기본 문법

1. HTML의 사용 방법

1.1) element

  • 위의 코드처럼 HTML은 <> 태그로 감싸져있고, 끝을 표현할 때엔 </> 이렇게 사용합니다. 만약에 <>value</> 라면, 브라우저에 문자열을 표현하기도 하고 태그 안에 다른 자식 element나 또는 value가 필요 없다면 로 사용할 수 있습니다. 그리고 이것들을 element라고 부릅니다.

1.2) attribute ( 속성 )

  • attribute는 태그에 대한 더 구체적인 설명을 제공하는 역할로 대표적으로 class와 id와 같이 해당 태그에 대한 속성을 지정해서 태그의 기능들을 추가해주기도 합니다.

1.3 ) 주석

  • html에서 주석은 <!-- --> 이렇게 표현합니다.

2. 각 태그에 대한 내용들

2.1) 텍스트 관련 태그

  • <h1>~<h6> 태그는 Headings라고 하며, 문서의 제목 작성에 필요한 태그이며
    숫자가 크면 클수록 글씨의 크기가 작아집니다.
  • <p> 태그는 paragraph라고 하며, 본문 또는 한 단락에 대한 글을 작성하기 좋은 태그입니다.
  • <br> 태그는 한 줄 띄어쓰기로 C언어나 JAVA에서의 \n과 같다고 생각하면 됩니다.

2.2 ) Anchor 태그 및 속성

  • <a> 태그는 Anchor, 한국말로 닻인데, 왜 Anchor인지는 모르겠지만 앵커 태그라고 합니다.
    자주 쓰이는 속성은 href, target, title 정도입니다.
    “href” 속성은 이동하려는 링크를 값으로 주면 클릭 시 해당 홈페이지로 이동합니다.
    “target” 속성은, 현재 페이지에서 홈페이지로 이동할 지 아니면
    새로운 탭을 추가해서 홈페이지로 이동할 지를 결정하는 속성입니다.
    default값으로, _self이며 _self는 현재 페이지에서 홈페이지 이동, _blank는 다른 탭에서의 홈페이지 이동입니다.
    “title” 속성은 링크에 마우스를 가져다 대고 있으면 구글로 이동합니다. 라는 글이 뜨게 됩니다.

2.3 ) 리스트

  • <li> 태그는 list를 ㄹ뜻합니다.
  • <ul> 태그는 unordered list라고 하며, 순서가 정해지지 않은 리스트를 말합니다.

  • <ol> 태그는 ordered list라고 하며, 순서가 정해진 리스트를 말합니다.

  • 아래 코드의 실행 결과입니다.

See the Pen hello by nerd-lee (@nerd-lee) on CodePen.

  • ul 태그는 순서는 올바르게 출력하지만, ol 태그처럼 앞에 순서를 적어서 정렬하지 않는 반면에
    ol 태그는 순서에 맞게 1. 2. 3. 을 앞에 붙여주게 됩니다.

  • 또한 ol 태그에서는 type이란 속성을 사용할 수 있는데, type에는 “a”, “A”, “1”, “I”, “i” 라는 값을 넣어줄 수 있습니다. 해당 값에 따른 출력값은 다음과 같습니다.

See the Pen hello by nerd-lee (@nerd-lee) on CodePen.

2.4 ) 이미지 태그

  • img 태그는, 이미지를 나타내는 태그이고 src 속성은, source의 줄임말로써 해당 프로젝트 폴더에 있는 경로를 넣어주거나 다른 웹페이지에 있는 이미지 url을 넣어 사용할 수 있습니다.

2.5 ) input 태그

  • input 태그는 쓰이는 속성도 많고 그만큼 사용하는 값도 많기 때문에 링크를 따로 남기겠습니다.

Input 속성이 궁금하다면 클릭!

2.6 ) strong과 i 태그

  • strong 태그는 bold 처리, i 태그는 이탤릭체(italic)를 만들 때 사용합니다.

See the Pen hello by nerd-lee (@nerd-lee) on CodePen.


이 글이 도움이 되셨다면 댓글 부탁드립니다^^
다음 글로 찾아오겠습니다!

참고