"웹 기술로 앱 개발자 되기" 시리즈 입니다.
스스로 그 동안 사용하던 웹 기반 기술들에 대한 복습을 겸한 강의여서 html -> css -> javascript 의 순으로 먼저 정리하고,
추가로 es6 -> react -> graphql + mongodb -> react native 의 순으로 진행해 볼까 합니다. 기간은 두어달 정도로 예상을 해 봅니다.
웹 개발자 또는 웹 기술을 통해 앱을 개발해 보고 싶은 분들에게 조금이라도 도움이 되었으면 하는 바램으로 차근차근 정리해 보도록 하겠습니다.
이번 포스트는 본격적으로 HTML 의 가장 기본을 이루는 기본 태그들 부터 알아보도록 하겠습니다.
HTML 문서 태그
이전 포스트에서 설명드렸던 것 처럼 모든 HTML 문서는 <!DOCTYPE html> 이라는 문서 형식 선언문으로 시작해야 합니다. 그래야 브라우저 등 HTML 문서를 해석하는 아이들이 정상적으로 문서를 인식합니다.
HTML 문서의 실체는 <html> 태그로 시작하고 </html> 태그로 마무리 됩니다.
HTML 의 모든 태그(거의 모든) 는 시작태그와 종료 태그의 한 쌍으로 작성된다는 거 잊지 않으셨죠?
HTML 문서의 화면에 보여지는 내용 부분은 <body> 태그로 시작하고 </body> 태그로 마무리 됩니다.
그래서 화면에 보여질 필요는 없지만 기타 다른 처리(검색엔진에 문서 정보 요약본 전달, 캐쉬처리 방법, 문서 문자열의 인코딩 다국어 문자셋 정보제공 등)를 위해 필요한 Meta 정보들은 <body> 태그가 시작하기 전에 작성되어서 <html> 내에는 포함되지만 <body> 태그의 밖에 있도록 구성하는 것이 일반적입니다.
HTML 단락 제목 태그
보통 하나의 HTML 페이지에는 한가지 주제에 대한 내용만 담기지 않고 여러 내용을 포함하게 됩니다.
HTML 에서는 이러한 단락(문장이 모여서 한 가지 통일된 주제를 나타내는, 글의 작은 덩어리) 들을 구분하고 새로운 단락이 시작됨을 표시하기 위해 제목을 붙이게 되는데요.
HTML 에서는 Heading tag 즉 <hN> 태그가 이 역할을 담당합니다. (N 의 의미는 숫자를 뜻합니다. <h1>,<h2>,<h3>,<h4>,<h5>,<h6> 까지 여섯가지 <hN> 태그를 지원합니다.
브라우저는 이 <hN> 태그를 만나면 해당 내용을 다른 글자들 보다 크고 굵게 강조해서 출력을 해 줍니다.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
< 숫자가 작을 수록 크게 출력이 됩니다. >
HTML 단락 태그
HTML 을 구성하는 가장 중요한 요소인 글들의 덩어리인 단락은 HTML 에서는 보통 <p> 태그를 이용합니다.
물론 <p> 태그를 이용하지 않더라도 어디에도 속하지 못한 모든 text 들을 브라우저는 단락 즉, Paragraph 로 인식하여 화면에 출력해 주기는 하지만, 이는 출력만 될 뿐이지 실제 해당 내용의 성격(제목인지, 단락인지, 빈줄을 띄우기 위한 특수문자인지, 숨겨진 글인지)을 html문서상에서 구분을 할 수가 없기 때문에 매우 나쁜 습관이라 할 수 있습니다.
반드시 의미를 가진 글은 <p> 태그를 이용하여 Paragraph 임을 명시해 주는 것이 좋습니다.
HTML 링크 태그
다음 기초 태그는 HTML 의 꽃인 Link 입니다.
HTML은 그 이름에서 나타내듯 Hyper Link 를 가진 문서규격이기 때문에 무엇보다 중요하고 되도록 많이 사용되어야 하는 태그입니다.
HTML 에서의 링크는 현재 문서 내부의 특정 위치를 연결하는 내부 링크와 현재 문서 밖의 특정 경로상에 위치하는 다른 문서를 연결하는 외부 링크의 두 가지가 있는데요.
내부 링크와 외부 링크에 대한 실제 사용방법과 상세 구분은 차후에 자세히 보기로 하고 본 포스트에서는 HTML 에서의 링크 태그 역할을 하는 <a> 태그에 대해 설명하도록 하겠습니다.
링크 태그의 형식은 아래와 같습니다.
<a href="연결할 주소">주소에 대한 설명</a>
모든 링크태그 <a> 태그는 href 속성(속성에 대해서도 차후 설명드리겠습니다. 지금 수준에서는 그냥 html 태그에 추가적인 설정이 필요할 경우 추가하는 태그 라고만 이해하시면 될 것 같습니다) 을 가지고 이 href 속성에 대상을 지정하게 됩니다.
브라우저는 이 <a> 태그를 만나면 사용자가 클릭해서 이동할 수 있다는 것을 표시하기 위해 밑줄을 긋고 마우스가 가까이 오면 클릭이 가능하다는 것을 사용자에게 알려주기 위해 커서 모양이 바뀌도록 처리를 해 줍니다.
HTML 이미지 태그
HTML 에는 문자열 말고도 다양한 미디어(이미지, 동영상, 애니메이션, 게임 등등) 들을 포함시킬 수가 있습니다.<img> 태그는 그 중에서도 이미지(jpeg, png, gif 파일등등)를 HTML 에 포함시킬 때 사용하는 태그입니다.
<img> 태그는 실제 이미지 자체를 HTML 문서에 포함시키는 것이 아니라 다른 위치에 있는 이미지 파일의 주소를 현재 HTML 문서의 특정 위치에 출력되도록 브라우저에게 알려주는 역할을 수행합니다.<img> 가 직접 삽입되는 것이 아니라 지정된 위치만을 알려준다는 것이 중요합니다. 브라우저에게 이미지 주소를 알려준 것이고 브라우저가 이 주소의 이미지를 불려와서 페이지의 중간에 출력해 주는 것입니다.
(문서 내용은 잘 출력되는데 이미지만 깨지는 경우가 발생하는 이유가 바로 이 때문! 나중에 보다 상세히 알아보겠습니다)
<img> 태그는
- 실제 이미지 파일의 위치를 지정하는 src
- 지정한 이미지를 출력할 수 없는 경우(이미지 출력이 불가한 텍스트 기반 브라우저 또는 출력은 하지 않고 내용만 검색하고자 하는 검색엔진 로봇 등등)에 이미지 대신 의미를 전달할 수 있는 대체 텍스트를 지정하는 alt
- 이미지의 가로폭을 지정하는 width
- 이미지의 세로폭을 지정하는 height
속성을 기본으로 갖고 있습니다.
<img src="https://steemitimages.com/DQmaHw31oZ8Eitfdu73UigAEAnPMYGuECcw65o841JiPAvB/Screen%20Shot%202018-05-17%20at%2010.38.38%20PM.png" alt="upyourpost bot logo" width="104" height="142">
HTML 버튼 태그
버튼은 가장 대표적인 사용자로 부터 입력을 받아들이기 위한 태그로 사용자가 클릭할 수 있는 Toggle (무언가 누르는 느낌이 나는 그거) 객체를 출력해 줍니다.
<button>Click me</button>
이 버튼에 적당한 이벤트 핸들러(버튼이 눌리면 이벤트가 발생! 이벤트 발생을 시작 조건으로 해서 수행하게 만든 어떤 동작) 를 붙여서 저장, 삭제 등등의 버튼을 출력하고 그 버튼에 실제로 저장, 또는 삭제를 수행하는 프로그램을 붙이게 되는 것이 가장 일반적인 버튼 태그의 활용 방법입니다.
HTML 리스트 태그
리스트라 함은 아래와 같이 일정한 간격을 띄운채로 목록으로 출력되는 것을 의미합니다.
당연히 유사한 성격을 가진 것들을 일목요연하게 출력하고자 하는 경우에 사용합니다.
HTML 에서 리스트는 두 종류가 있는데, 목록에 순서가 있는(숫자로 일련번호가 붙어서 출력됨) Ordered List <ol> 와 순서가 없는(일련번호 없이 구분문자만이 붙어서 출력됨) Unordered List <ul> 태그로 나뉘어 집니다.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>아침</li>
<li>점심</li>
<li>저녁</li>
</ol>
본 포스트에서는 HTML 의 가장 기본이 되는 태그들에 대해 정리해 보았습니다.
추가 태그들이 몇 가지 있지만 기본적으로 HTML 은 위의 태그들로 페이지를 구성한 후 CSS (차차 알게될 스타일 지정자) 를 통해 정말 무한한 모양으로 화면에 아름답게(?) 출력되도록 조정을 하게 됩니다.
그때 까지 열심히 진도를 달려보도록 하겠습니다.
'Programming JavaScript > HTML' 카테고리의 다른 글
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 제목 태그 (0) | 2018.05.28 |
|---|---|
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 태그 속성 (0) | 2018.05.26 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 기본구성요소 (0) | 2018.05.25 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 편집도구 준비 (1) | 2018.05.23 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 이란? (0) | 2018.05.23 |