안녕하세요.
첫 번째 시간은 HTML에 대해 알아보는 시간입니다.
HTML은 Hyper Text Markup Language의 준말로, 웹페이지의 뼈대를 구성하는 마크업 언어입니다.
우리가 보는 웹사이트에서 화면의 모든 구성요소는 HTML로 작성 되었다고 볼 수 있습니다.
물론 HTML만 가지고 이런 멋진 웹사이트를 만들 수는 없지만, 그에 대해선 나중에 이야기 하고 HTML의 기본 형태에 대해 먼저 이야기 하겠습니다.
HTML 문서의 기본 형태는 아래와 같습니다.
메모장을 켜고 아래 내용을 복사해서 붙여넣어 보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
</body>
</html>여기서 <!DOCTYPE html>은 현재 HTML 문서가 최신 HTML 버전으로 작성되었음을 브라우저에 알려주는 것입니다.
<html>부터 </html> 까지가 HTML 문서의 내용을 작성하는 영역입니다.
<와 > 기호로 감싸진 것을 태그라고 부르는데, 눈치 빠른 분들은 벌써 눈치챘겠지만 태그는 일반적으로 시작 태그와 끝 태그로 나뉘어 있습니다.
시작 태그는 <태그명>의 형태로 작성되고, 끝 태그는 </태그명>의 형태로 작성됩니다.
그런데 가끔 종료 태그가 없는 것도 존재 합니다.
위에 보이는 <meta/> 태그 처럼요.
이런 경우에는 / 기호를 시작 태그의 > 앞에 넣어줍니다.
정리하자면,
HTML 태그 구조
- 시작 태그
<태그명> - 끝 태그
</태그명> - 끝 태그가 없는 태그
<태그명/>
가 되겠습니다.
다시 HTML 문서의 기본 형태로 돌아가봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
</body>
</html>이 HTML 문서의 구조는 <html></html> 태그 안에 <head></head> 태그와 <body></body> 태그가 있습니다.
<html></html> 태그에 있는 lang="ko" 부분은 태그의 속성Attribute이라고 합니다.
여기서는 lang 속성에 ko라는 값을 준 것으로, 현재 문서의 내용이 한글임을 브라우저에 알려주는 역할을 합니다.
HTML 태그 구조 2
<태그명 속성명="속성값"></태그명>
혹은
<태그명 속성명="속성값"/>
속성명은 반드시 공백을 이용해 태그명과 떨어져야 합니다.
<head></head> 태그는 화면에 직접 보이지 않는 문서의 정보를 담는 부분입니다.
여기서는 <title></title>이라는 태그를 이용해 제목을 표시하고, <meta/> 태그를 이용해 문서가 사용하는 언어셋을 지정하고 있습니다.
<meta/> 태그에 대한 자세한 설명은 다음에 다루겠습니다.
<body></body> 태그는 실제 화면에 표시되는 내용을 정의하는 부분입니다.
간단한 테스트를 위해 문단을 표시하는 <p></p> 태그를 입력해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<p>
안녕하세요, 내용입니다.
</p>
</body>
</html>자, 작성이 완료 됐으면 이제 문서를 index.html이라는 이름으로 저장해보겠습니다.
그럼 아마 자신이 주로 사용하는 인터넷 브라우저의 아이콘이 저장된 문서에 표시될 것입니다.
해당 아이콘을 더블 클릭하면 처음으로 만든 HTML 페이지를 브라우저에서 확인할 수 있습니다.
지금 현재는 브라우저 상단 탭에 '제목'이라는 글자가 적혀있는 것을 볼 수 있습니다.
이걸 바꾸기 위해선 <title></title> 태그의 내용을 변경하면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목을 바꿉니다</title>
<meta charset="utf-8"/>
</head>
<body>
<p>
안녕하세요, 내용입니다.
</p>
</body>
</html>
번외
번외로 개발을 편리하게 해줄 에디터 혹은 IDE(이하 IDE)에 대해 몇 가지 소개하고자 합니다.
이번 포스팅에서는 HTML을 메모장으로 작성한다고 했지만, 메모장은 단순한 텍스트 입력기이기 때문에 생산성이 떨어집니다.
따라서 개발자들은 IDE를 이용해 개발을 하고 있습니다.
IDE의 특징은 간단하게는 코드 자동 완성, 코드 제안부터 크게는 하나 혹은 여러 개의 프로젝트를 똑똑하게 관리할 수 있도록 해주기 때문에 현대 사회의 개발자들에게는 필수라고 할 수 있습니다.
자세한 내용을 설명하기엔 길기 때문에 간략하게 종류를 소개하는 것으로 마무리 하겠습니다.
아래 링크들을 확인해본 후 마음에 드는 에디터를 선택해보세요.
참고로 저는 WebStorm을 사용 중이고 개인적으로 자바스크립트 개발자에겐 WebStorm 만큼 좋은 게 없다고 생각하지만 오래 전에 아톰 에디터나 Brackets도 사용했던 만큼 두 가지도 추천하는 바입니다.
'Frontend 기본' 카테고리의 다른 글
| HTML 주석과 개발자 도구 (0) | 2022.08.05 |
|---|---|
| HTML 태그 - <ol>, <ul>, <dl> (0) | 2022.08.04 |
| HTML 시멘틱 태그 (0) | 2022.08.03 |
| HTML 태그 - <b>, <strong>, <i>, <em> (0) | 2022.08.02 |
| HTML 태그 - <h1>~<h6>, <p>, <br/> (0) | 2022.08.01 |