[TeamH4C_HTML] 기본 문법과 소개

안녕하세여~ Hak2입니다.

이번에는 생활코딩에서 수업한 HTML에 대한 공부를 해볼 것입니다.

주소는 https://opentutorials.org/course/2039입니다.

 

HTML의 소개

HTML은 HyperText Markup Language의 약자로서 링크를 제공하는 기능을 가지고 있으며, 마크업이라는 문법적인 특성을 가지고 있는 웹 페이지 개발언어입니다.

프로그래밍 언어는 컴퓨터를 제어하기 위해 필요한 것이며, 웹 브라우저에 표시되는 웹 페이지를 만들 때 컴퓨터가 이해할 수 있도록 요청하는 언어가 HTML입니다.

일반적으로 페이지 소스에 보이는 개발자 도구에서 확인할 수 있을 것입니다. 아래의 소스코드들이 해석되면서 우리가 보는 페이지로 만들어집니다.

 

기본 문법

HTML에서 중요한 문법은 태그(Tag)를 사용하는 것입니다. 여기서 태그는 마크업 언어(Markup Language)와 관련이 있습니다.

우선, HTML 코드를 작성하여 웹페이지를 간단히 만들어 보겠습니다.

•  메모장을 켜 문자를 아무렇게 입력하여 저장합니다.

• 저장 시, html확장자로 저장합니다. (파일 이름.확장자)

• 저장한 내용을 웹 브라우저로 실행하면 입력한 문자들이 출력되어 있습니다.

이렇게 실행이 되어 웹 페이지에 출력되는 것을 볼 수 있습니다.

여기서 태그를 사용하여 웹 페이지를 더욱 문서답게 표현할 수 있는데 예로 특정 문자를 강조하는 형식의 페이지를 표현할 수 있습니다.

<strong> 문자 </strong>을 사용하였는데, 안의 문자가 굵게 표시된 것을 볼 수 있을 것입니다. <>를 사용한 것이 태그라 하며, 슬래시(/)가 없는 태그가 시작 태그이고, 있는 태그는 닫히는 태그라 합니다. 이 두 태크는 함께 사용되어야 하며, 시작 태그만 존재하여 하나의 태그만 사용되는 태그는 빈 요소로서 Void element 또는 Empty element 태그라고 불립니다.

태그의 구성은 <> 안에 태그 이름을 넣어 사용하며, 태그 이외에도 속성과 값이 함께 사용될 수 있습니다.

 

줄 바꿈이 되지 않은 것을 확인할 수 있는데 편집기에서 아무리 줄 바꿈을 하더라도 프로그래밍 언어의 규칙에 부합하여 특정 태그를 사용하지 않으면 줄 바꿈이 되지 않습니다.

여기서 줄 바꿈을 하기 위해 <h1></h1>이라는 태그를 이용하여 줄 바꿈을 이용한 것을 볼 수 있을 것입니다. h1은 heading1의 약자로 제목이라는 뜻을 가지고 있어 줄 바꿈과 큰 문자로 변환되어 출력이 된 것입니다. 

제목의 문자 크기를 줄이고자 한다면 뒤에 붙은 숫자를 높이면 됩니다. 또한, 태그의 이름은 약속되어 있어 약속에 따라 코드를 작성해 브라우저에 제공해야만 원하는 형태로 페이지를 만들어 출력할 수 있습니다.

 

하이퍼텍스트 and 속성

하이퍼 텍스트는 문자와 링크를 연결한 것으로, HTML에서 특정 문자가 링크인 것을 브라우저에게 알려주는 <a></a> 태그를 이용하여 사용합니다.

<a>특정 문자</a> 여기서, 특정 문자가 링크라는 것을 알려주었지만, 어느 url로 연결되는 정보가 없기에 변화가 없이 출력될 것입니다. a태그는 anchor의 약자로 정박지라는 뜻으로 사용됩니다.

정보를 주기 위해 설정하는 것이 속성이고 속성에 값을 지정하여 정보에 대한 값을 설정합니다. a태그에 링크를 알려주기 위한 속성은 href 속성이며, 값으로 url을 넣어 지정하면 정상적으로 원하던 링크가 생성됩니다.

위처럼 링크는 문자가 링크라는 것을 알려주는 a태그가 있어야 하고, a태그로 어떤 웹 페이지에 연결되는지 알려주는 href 속성이 필요합니다. href는 hypertext reference의 약자로 연결할 주소를 지정하는 속성입니다.

링크를 클릭하였을 때, 새로운 탭에 연결되도록 만들 수 있는데, target속성을 이용하여 _blank값을 지정해주면 새로운 탭에서 링크가 실행될 것입니다.

title속성을 사용할 수도 있는데, title속성은 해당 내용을 값에 지정된 문자로 미리 표시하는 속성입니다.

이렇듯 속성은 태그 이름 자체가 포함할 수 없는 기능을 추가할 수 있습니다.

---

다음은 태그와 구조에 대해 정리하겠습니다.

감사합니다~