[HTML] 06장, 기본 문법과 태그

우리가 만들고자 하는 예제의 기획서이다. 한 번에 작성하기에는 어렵기 때문에 여러 조각으로 나눠서 하나씩 완성시킬 것이다. 먼저 화면에 표시할 부분은 'Hypertext Markup language ~' 부분이다. 화면에 있는 텍스트를 웹 브라우저에 표시할 것이다.

Hypertext Markup language (HTML) is the standard markup language for creating web pages and web applications.

이 문장을 '1.html'이라는 파일에 붙여넣는다.

윈도우에서는 [Ctrl + S]를 누르면 변경사항이 저장되고, 브라우저를 새로고침하면 에디터에 작성한 내용이 원인으로 작동해서 브라우저의 웹 페이지가 만들어지는 것이다. 에디터에 작성된 내용은 코드나 소스, 좀 더 구체적으로 설명하면 HTML이라는 프로그래밍 언어의 문법에 맞게 작성된 코드나 소스인 것이다. 그 결과인 웹 페이지가 브라우저에 표시된다.

 

[ Strong : 강조 ]

웹 페이지를 작성하는 중에 강조하고 싶은 부분이 있을 것이다. 예를들어 여기에서는 'creating web pages'를 강조하고 싶다. 강조하고 싶은 부분이 있을 때 진하게 표시하고 싶을 것이다.

 

에디터에서 <strong>creating web pages </strong>으로 파일을 수정한 뒤 파일을 저장하고 웹 페이지를 새로고침하면 'creating web pages'라는 부분이 진하게 표시된다.

강조하고 싶었던 부분이 진한 글씨로 강조된 것을 확인할 수 있다.

 

[ u: 밑줄 ]

강조하고 싶었던 문장인 'creating web pages'에서 'web'이 더 중요해 보일 때 우리는 밑줄을 치고 싶을 것이다. 밑줄이 영어로 무엇인가? 바로 underline이다. underline의 첫 글자는 u이다.

더 강조하고 싶었던 u에만 밑줄이 쳐진 것을 확인할 수 있다.

 

[ tag: 태그 ]

태그는 웹을 지배하는 가장 중요한 문법이다. 웹을 지배한다는 것은 인터넷을 지배한다는 것이라고 볼 수 있을 만큼 태그는 정말 중요하다.

지금까지 <strong>과 <u>라는 태그 두 가지를 배웠다. 이쯤에서 문법을 정리해 보자. 'creating web pages'를 <strong>creating web pages</strong>으로 수정했는데, 앞에 있는 <strong>과 뒤에 있는 </strong>을 태그라 한다. 더 구체적으로 앞에 있는 태그를 열리는 태그, 뒤에 있는 태그를 닫히는 태그라 하며, 닫히는 태그를 열리는 태그와 구분하기 위해 '/'를 붙이는 것을 알 수 있다.

 

 

 

 

---

출처: 생활코딩! HTML+CSS+자바스크립트, 이고잉 지음