HTML 시작

1 minute read


HTML

HyperText : 문서와 문서가 링크로 연결되어 있다.

M : Markup 형식을 가지며 태그로 이루어져 있다.

L : Language 프로그래밍 언어이다.

웹페이지를 만들기 위한 언어로 웹브라우저에서 동작하는 언어이다. 즉 HTML은 웹브라우저에 정보를 표현하는데 효율적으로 만들어진 프로그래밍 언어이다.

Web?

웹이라는 단어는 일반적으로 인터넷 브라우저를 떠올리게 되고 웹이란 단순히 인터넷을 사용하기 위한 도구라고 생각하게된다.

1990년 팀 버너스리는 인터넷을 효율적으로 사용하기 위해서 웹 서버와 웹 브라우저를 개발하고 이 둘 사이의 통신을 위한 http라는 통신규약을 정의한다. 그리고 웹 브라우저에 어떤 정보를 표현할 수 있는 html을 개발하게 된다.

팀 버너스리는 이 모든 기술을 저작권이 자유로운 public domain으로 선언하고 이에 따라서 전세계적으로 널리 사용되어지면서 발전하게 된다.


태그

태그(tag)는 정보를 정의하는 형식이다.

태그의 형식

일반적으로 태그는 아래의 형식으로 정의된다.

<태그명 속성명1 = "속성값1" 속성명2="속성값2">컨텐츠</태그명>

예제

<a href = "https://bakcoding.github.io">Bakcoding blog</a>

위 소스코드를 브라우저에서 읽으면

Bakcoding blog

위 링크가 생성된다.

소스코드에서 <a href = ~ > ~ </a> 이 부분이 태그에 해당하며 태그 사이의 Bakcoding blog 이 텍스트가 컨텐츠 이다.

컨텐츠를 기준으로 앞에 있는 태그를 열리는 태그, 뒤에 있는 태크를 닫히는 태크로 구분된다.

  • 태그명

    열리는 태그는 태그명 <a>으로 시작하고, 닫히는 태그는 슬래시 태그명 </a> 으로 끝난다. 태그는 이렇게 쌍으로 존재하여 그 사이에 있는 컨텐츠의 성격과 타입을 기술하는 역할이다.

    태그명은 항상 쌍으로 존재하는 것은 아니다. 컨텐츠에 대한 기술이 필요없는 경우는 <태그명 />의 형식으로 쓰인다.

    <br />  <!-- 줄바꿈 -->
    <input type="button" value="버튼"/> <!-- 버튼생성 -->
    
  • 속성명

    컨텐츠의 부가적인 정보를 기술하는 곳으로 여러개의 정보를 정할 수 있다.

    사용할 속성명=내용 이렇게 속성명과 내용을 등호로 연결하며 여러개를 쓰는 경우 띄워쓰기로 구분한다.

    <a href=~ target=~> ~ </a>