📗HTML 문법의 기초
HTML 기초
이전에 살펴본 것처럼, 우리는 HTML을 활용해 웹의 구조를 구성할 수 있습니다. 그렇다면 HTML은 구체적으로 어떻게 사용하는지 자세히 살펴볼까요?
💁🏻♂️ HTML 연습장
학습 과정에서 HTML을 간단하게 연습해보고 싶다면, 코드펜 사이트를 이용해보세요.
HTML 코드를 입력하고 화면에 표기되는 결과물을 바로 확인하고 공유할 수 있는 웹사이트 입니다. 🙂
HTML의 기본 단위, "태그"
HTML을 구성하는 기본 단위는 태그 입니다.
웹 개발자들은 태그를 이용하여 브라우저에게 "이 글귀를 헤드라인으로 사용하자." 혹은 "사진을 이 곳에 넣자." 등의 명령을 내릴 수 있습니다. 태그는 다음과 같이 생긴 것들입니다.
태그란 단지 <
와 >
사이에 어떤 단어(태그 이름)을 적는 것입니다. <
혹은 >
는 한글로 "꺽쇠"라고 읽습니다. HTML에서 사용할 수 있는 태그는 정해져있습니다. 여러분은 사용 가능한 태그들을 이용하여 작업을 하게 됩니다.
태그 사용해보기
가장 대표적인 태그 중, h1
태그가 있습니다. HTML 코드에서는 <h1>
로 적용할 수 있고, h1
태그는 브라우저에서 제목을 만들도록 되어있습니다.
코드펜에 들어가셔서 h1
태그를 이용해 다음과 똑같이 작성해보세요.
h1
태그를 이용하면, 웹페이지에서 글씨가 더욱 크고 두껍게 표현되고 웹페이지에서 굉장히 중요한 문구라는 것을 명확하게 표시하게 됩니다. 당연한 이야기지만, 웹페이지의 모든 문구가 웹페이지의 제목처럼 보이기를 원하지는 않습니다.
여는 태그와 닫는 태그
방금 위에서 작성한 코드에서는 여는 태그와 닫는 태그가 사용되었습니다.
대부분의 HTML 문법은 위처럼 사용됩니다.
여는 태그: 태그의 종류와 해당 태그가 시작되는 지점을 명시
컨텐츠: 해당 태그의 기능이 적용되기를 바라는 컨텐츠 내용
닫는 태그: 태그의 종류와 해당 태그가 적용되는 끝 지점을 명시
닫는 태그란 앞에서 보셨던 태그와 동일하게 생겼지만 /
기호가 추가로 들어갑니다. <h1>
의 닫는 태그는 </h1>
입니다.
태그의 종류
코드펜에서 위에 작성한 예시 코드 중 h1
부분을 h2
라고 아래와 같이 변경해보세요.
화면에 표기되는 텍스트가 h1
에 비해 조금 작아진 것을 확인하셨나요?
그렇다면, 이번에는 h3
로 변경해보고 다시 확인해보신 후, 순차적으로 숫자를 증가시키며 화면을 확인해보세요.
특정 숫자 이후에는 더 이상 텍스트가 작아지지 않고, 형식이 적용되지 않는 것을 확인하셨나요? 확인하셨다면, 어떤 숫자부터 형식이 적용되지 않는다고 느끼셨나요?
형식이 적용되지 않는 이유는, 우리가 사용할 수 있는 태그의 종류가 정해져 있기 때문입니다.
어떤 숫자까지 우리는 사용 가능할까요? 구글에 html h1 tag
라고 검색하셔서 한번 정답을 찾아보세요. 😎
우리는 정해진 태그를 사용하여 HTML 페이지를 작성해야 합니다. 태그의 종류에는 굉장히 많은 것들이 있으나, 절대 외우려고 하지 마세요. 그 누구도 모든 태그의 종류들을 외우고 있지 않습니다. 단지 반복적인 연습을 통해 자주 쓰이는 태그들을 자연스레 기억하게 될 것입니다.
닫는 태그가 필요없는 태그
이번에는 또 다른 태그를 한번 살펴보겠습니다.
또 다시 코드펜에 가서 다음과 같이 코드를 작성해보세요.
잘 따라하셨다면, 아마 다음과 같이 화면에 표기되었을 것입니다.
br
태그는 break
의 약자로서, break
라는 단어의 뜻처럼 문서의 흐름을 깨는 역할(줄바꿈)을 하는 태그입니다.
방금 사용한 br
태그는 닫는 태그가 없고, 여는 태그만 사용하여 HTML 문서에 적용하는 방식으로 사용합니다. 줄바꿈을 하는 태그이기 때문에, 태그 내부에 들어갈 컨텐츠가 없기 때문이죠.
모든 태그는 종류에 따라 닫는 태그를 사용해야 하는 경우도 있고, 그렇지 않은 경우도 있습니다. 그리고 태그에 따라 이 규칙은 이미 결정되어 있습니다. 태그를 사용할땐, 여러분께서 사용하는 태그에 닫는 태그가 필요한지 잘 조사해보고 적용하도록 하세요.
다양한 태그들의 종류는 앞으로 학습하며 함께 차근차근 살펴보도록 하겠으니, 태그의 종류에 대해 아직은 너무 걱정하지 마세요.
Last updated