04. HTML 기초문법

각 대학과 학과마다 차이는 있겠지만

우리 학과 같은 경우, 1학년 수업의 대부분이 전공에 대한 전문적인 과목보다는

앞으로 대학생활을 하면서 필요한 기본적인 소양을 다루는 교양과목이 주요 구성내용이었다.

 

 

나는 그런 수업들에 대해서 필요성을 크게 느끼지 못했고,

동시에 학교 공부를 매우 게을리하며 매우 저조한 학점을 받았다.

 

 

군대를 다녀온 뒤에는 조금 생각이 바뀌어서

이번 학기는 대학에 들어와서 처음으로 과제와 공부에도 조금씩 신경을 썼다.

 

 

물론 성적은 여전히 아쉽지만, 그래도 뒤늦게나마 조금씩

대학 공부에 적응을 해나가는 느낌이다.

 

 

다소 변명같지만 1학기 내내 블로그에 글을 올리지 못한 이유도

이러한 부분이 어느 정도 영향을 미쳤다.

 

그럼에도 불구하고, 웹프로그래밍 공부에 아예 손을 뗀 것은 아니다.

정말 감사하게도 이렇게 게으르고 나를 챙겨서 같이 공부해주시는 

선배가 한 명 계셨고, 덕분에 시험기간 1주일 정도를 제외하고는 무사히

웹프로그래밍 독학 진도가 진행되고 있었다.

 

 

1학기 동안 공부한 내용들을 복습하고자 다시 한 번 블로그에

HTML부터 CSS, Java Script를 거쳐 Git까지 배운 내용들을 정리할 예정이다.

 

 

 

 

위 사진은 빨간색으로 강조된 "Hello"라는 글자를 웹페이지에 띄우는 HTML 코드이다.\

매우 간단한 형태로 작성되어 있는 코드지만, 이 짧은 코드에 HTML의 기초 문법이 정확하게 나와 있다.

 

 

우리가 외국인과 대화하기 위해서 영어나 일본어를 공부하듯이

컴퓨터와 대화를 나누기 위해서는 컴퓨터 언어를 공부해야 한다.

(컴퓨터 언어와 프로그래밍 언어는 다른 것이다.)

 

 

그리고 컴퓨터 언어도 나름대로 문법이라는 것이 존재한다.

하지만, 영어나 한국어가 그렇듯 문법이라는 것은 그저 규칙일 뿐

그러한 형태를 갖게 된 합리적인 이유가 존재하는 것은 아니다.

(한국어가 주어+목적어+서술어 순서인 것에 이유는 없다.)

 

 

따라서, 컴퓨터 언어도 "왜 이렇게 되지?"에 집중하기보다는

컴퓨터 언어의 문법 자체에 익숙해지는 것이 훨씬 중요하고 많은 훈련이 필요하다.

 

 

1. HTML의 시작과 끝

 

 

HTML의 문법은 딱 한 가지, 태그(tag)만 기억하면 된다.

태그는 HTML 코드에서 정보(콘텐츠)를 정의하는 형식이다.

 

 

이러한 태그의 사용 형태는

"<태그명>콘텐츠가 표시되는 부분</태그명>"

으로 활용된다.

 

 

위 사진에서 "<p>Hello</p>"가 바로

가장 기본적인 HTML의 문법을보여주는 사례이다.

 

 

2. 단일 태그

 

 

일반적으로 태그는 <>과 </> 기호를 사용해 콘텐츠의 시작과 끝을 표시한다.

그러나, 경우에 따라 시작과 끝을 구분할 필요가 없는 태그도 존재한다. 이를 단일 태그라고 한다.

 

 

<태그명/> or <태그명>

 

 

위 사진에서 2번째 열을 보면 <br>과 <br /> 나열되어 있다.

가독성을 높이기 위해서 <br/>을 표시했지만, 원래 <br>은 단일 태그로 활용할 수 있다.

 

 

3. 속성

 

 

속성은 태그의 부가적인 기능을 정의하는 것으로 선택사항이다.

속성은 시작 태그의 내부에 정의하며, 속성의 갯수에는 특별한 제한이 없다.

 

 

<태그명 속성명="속성값">표시할 내용</태그명>

or

<태그명 속성명 "속성값" />

 

 

태그명과 속성 정의는 공백으로 구분하며, 큰 따옴표를 사용한다.

 

 

4. 주석

 

 

주석은 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드이다.

주로 코드가 어떤 기능을 하는지 표시하기 위한 용도로 사용된다. 주석의 활용 형태는 아래와 같다.

 

 

<!-- 주석 표시된 코드는 컴퓨터에 인식되지 않는다 -->

 

 

형식에 차이가 있긴 하지만, 주석 또한 기호를 통해 시작과 끝을 구분한다.

다만, 주석 기호는 총 7개의 기호를 쳐야 하는만큼 활용할 때 번거로움이 존재한다.

 

 

그래서 VS code에서 활용할 수 있는 주석 표시 단축키도 같이 정리하겠다.

Ctrl+K+C를 통해 내용에 주석을 표시할 수 있으며,

Ctrl+K+U로 표시된 주석을 원래대로 되돌릴 수 있다.