디자이너도, 비개발자도 한 번쯤 들어본 단어 HTML. HTML이 뭘까요?
HTML은 웹 페이지를 만들기 위한 언어입니다.
HTML로 웹페이지의 구조를 잡을 수 있습니다.
HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있습니다.
브라우저(safari, chrome, ie..)는 HTML파일을 가지고 뭘 어떻게 그려주면 되는지 파악한 후에 웹 페이지를 생성합니다.
HTML은 아래와 같이 .html 확장자가 붙은 텍스트 파일입니다. 파일의 이름은 원하는대로 정할 수 있습니다.
index.html
main-page.html
loginPage.html
1.html
브라우저만 있으면 HTML로 작성한 것을 확인할 수 있습니다.
텍스트편집기(Text Editor)같은 간단한 메모작성 앱을 열고,
.html 확장자로 저장한 후에
해당파일을 브라우저(크롬)에 drag & drop 하면 됩니다.
저는 맥북의 텍스트편집기를 열어서 "아무거나 써보자" 라고 텍스트 밖에 작성하지 않았는데 브라우저에 잘 나왔습니다. 심지어 브라우저가 이 파일을 어떻게 인식 했는지 개발자도구를 열어 확인해보니 제가 작성 하지도 않은 , 같은 것들이 추가되었습니다. 브라우저가 파일의 확장자를 보고 "아, 이 파일은 HTML 이구나" 파악하고 텍스트를 보여 줍니다. 그런데 코드를 한 줄, 한 줄 읽어들이려고 했더니 HTML 문법도 제대로 지켜지지 않은 이상한 파일에 텍스트만 적혀있어서 브라우저가 자동으로 위아래에 필요한 태그를 붙여준 것입니다.
위의 그림에 보이는 것 처럼 브라우저가 알아서 붙여주더라도, 개발자는 문법에 맞게 HTML 코드를 작성할 수 있어야 합니다. HTML파일에 필요한 최소한의 태그는 아래와 같습니다.
태그와 관련하여 HTML 기초 용어(tag, content, attribute, element)를 알아보도록 하겠습니다.
HTML에서는 이미지나 텍스트를 그려주려면 그에 맞는 태그가 필요합니다. 그래야 브라우저에서 '아, 이것은 텍스트구나, 저것은 이미지구나'하고 알 수 있습니다. 태그는 아래 사진처럼 <> 으로 감싸져 있습니다.
브라우저에서 태그(tag)(<태그이름>과 </태그이름>)은 보여주지 않습니다.
즉, 내용(content) 부분만 보여줍니다.
내용의 왼쪽에 있는 것이 시작 태그(opening tag)이고, 내용 우측에 있는 것이 종료 태그(closing tag)입니다.
종료태그 괄호를 닫기전에 /(slash)가 있다는 것을 꼭 기억해주세요.
대부분의 태그는 시작하면 꼭 끝맺음을 해야합니다. 즉, 시작태그가 있으면 끝 태그도 꼭 있어야한다는 의미입니다.
아래의 태그는 시작과 끝 태그가 존재합니다.
<p></p>
<h1></h1>
<h2></h2>
<a></a>
반면에 시작과 동시에 종료되는 태그도 존재합니다.
<img>
<br>
위와 같은 태그는, 태그와 태그 사이에 내용부분이 필요 없기 때문입니다. 나중에 직접 써보며 더 자세히 살펴보겠습니다.
속성은 시작 태그에 위치하며 한 태그에 여러 속성을 지정할 수 있습니다.
아래에서 div, a, img는 태그이고 class, href, src, alt는 속성입니다.
<div class="title">시작!</div>
<a href="https://naver.com">네이버로 이동</a>
<img src="./me.png" alt="내사진">
참고자료) https://www.w3schools.com/html/html_attributes.asp
<태그이름> 으로 시작하여 </태그이름> 으로 끝나고 태그 사이에 내용이 있는 구조를 요소라고 합니다. 끝 태그가 필요없는 것은 태그가 그 자체로 요소가 됩니다.
<h1>시작!</h1>
<img src="me.png">