📗
HTML의 기초
말씀드렸다시피, HTML이란 웹을 구성하는 가장 기본적인 요소입니다. HTML에 대해 조금 더 구체적으로 살펴보겠습니다.
HTML을 구성하는 기본 단위는 태그 입니다. 웹 개발자들은 태그를 이용하여 브라우저에게 "이 글귀를 헤드라인으로 사용하자." 혹은 "사진을 이 곳에 넣자." 등의 명령을 내릴 수 있습니다. 태그는 다음과 같이 생긴 것들입니다.
<태그>
태그란 단지
< 와 > 사이에 어떤 단어(태그 이름)을 적는 것입니다. < 혹은 > 는 한글로 "꺽쇠"라고 읽습니다. HTML에서 사용할 수 있는 태그는 정해져있습니다. 여러분은 사용 가능한 태그들을 이용하여 작업을 하게 됩니다.가장 단순한 태그 중, "break" 태그가 있습니다. HTML로는
<br>로 적용할 수 있고, "break" 태그는 브라우저에서 새로운 줄을 만들도록 되어있습니다.다음 예제 링크에 들어가셔서 여러 개의
<br>을 추가하거나 삭제해보세요.br 태그도 물론 유용하지만, 우리가 프로필 웹페이지를 만들때 가장 먼저 필요한 것은 웹페이지의 제목입니다. HTML에는 h1이라는 태그가 있습니다. 이 태그를 이용하면, 웹페이지에서 글씨가 더욱 크고 두껍게 표현되고 웹페이지에서 굉장히 중요한 문구라는 것을 명확하게 표시하게 됩니다. 당연한 말이지만, 웹페이지의 모든 문구가 웹페이지의 제목처럼 보이기를 원하지는 않습니다. 정확히 어떤 문구가 웹페이지의 제목인지 알려주기 위해서 우리는 닫는 태그를 사용합니다. 닫는 태그란 앞에서 보셨던 태그와 동일하게 생겼지만 / 기호가 추가로 들어갑니다. <h1>의 닫는 태그는 </h1>입니다.예제 링크에서
h1 태그 사이에 넣은 문구가 웹페이지의 제목처럼 표현되는 것을 확인하셨나요?대부분의 HTML은 위에서 보신 것처럼 사용됩니다.
- 1.여는 태그: 어떤 태그를 사용하는지 명시
- 2.해당 태그가 적용되기를 바라는 텍스트 문구
- 3.닫는 태그: 해당 태그가 적용되는 끝 지점을 명시
우리는 정해진 태그를 사용하여 HTML 페이지를 작성해야 합니다. 태그의 종류에는 굉장히 많은 것들이 있습니다. 절대 외우려고 하지 마세요. 그 누구도 태그의 종류들을 외우고 있지 않습니다. 단지 많은 연습을 통해 자주 쓰이는 태그들을 자연스레 기억하게 될 것입니다.
또 다른 유용한 태그에는
p 태그가 있습니다. 영어로는 paragraph를 의미합니다. 한국어로는 "단락"이라는 뜻입니다. 단어의 뜻이 의미하는 것처럼 어떤 텍스트 단락을 표현하고 싶을때 사용하시면 됩니다. 브라우저는 p 태그를 표현할때, 단락처럼 보이도록 p 태그의 텍스트 아래에 빈 줄을 자동으로 추가해주기도 합니다.여는 태그와 텍스트 문구 그리고 닫는 태그를 이용하여 만든 것들을 하나의
element(엘레먼트 혹은 요소)라고 부릅니다.대부분의 HTML 작업은 위에서 보신 것처럼 이루어지지만, 몇몇 태그의 경우에는 브라우저에서 조금 다른 방식으로 사용됩니다. 일반 사용자에게 보여지지 않지만, 해당 웹페이지가 외부 소스가 필요하다는 정보를 알려주기도 합니다.
위 예제 링크에 보시면 지금까지 보지 못한 새로운 태그들이 사용되었습니다.
<html>, <head>, 그리고 <body>입니다. 지난번에 바닐라코딩 홈페이지의 소스를 보셨을때 보신 기억도 있을겁니다. 이 세 가지 태그는 모든 웹페이지에서 사용됩니다.<html>: 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려줍니다.<head>: 아직 여러분이 사용하지는 않겠지만, 주로 외부 소스를 참조해야할때 사용하곤 합니다.<body>: 브라우저는 이 태그에 포함되어 있는 내용들을 화면에 보여주게 됩니다.
편의를 위해 앞으로 보여드릴 예제에서는
<html>과 <head> 그리고 <body> 태그를 생략하고 보여드릴 예정입니다. 하지만 여러분이 웹페이지를 만드실떄는 반드시 사용하셔야 합니다. 명심하세요.축하드립니다! 여러분은 이제 HTML을 어떻게 만들어야 하는지 배우셨습니다. 모든 HTML 코드는 태그를 이용하여 구성하고, 대부분의 태그는 여는 태그와 닫는 태그를 이용하여 표현합니다. 웹페이지에는 우리가 사용할 수 있는 수많은 태그들이 존재합니다. 한쌍의 태그로 이루어진 것을
element라고 부릅니다. 그리고 <html>, <head>, <body>는 HTML 문서의 전반적인 구조를 정의하기 위해 사용됩니다.- HTML 태그
- HTML element (요소)
이제 웹페이지에 이미지를 추가하는 방법을 알아보겠습니다.
Last modified 1yr ago