티스토리 뷰
HTML은 사람과 컴퓨터 웹과 소통하는 언어로써 외국어 처럼 문법을 하나하나 익혀 나가야 합니다.
저번 포스팅에 이어서 오늘은 제목 태그와 강조 태그를 배우도록 하겠습니다. 태그 하나하나 모두다 영어로 그 뜻을 표현하니까 외우기 쉽습니다. 그냥 살짝 공부하고 지나쳐도 외워지는 아주 간단한 용어들이니 암기하시면 도움이 많이 됩니다. 간단하게 설명할 태니 따라 하시면 금방 익히실 거에요.
먼저 저번 시간에 빠진 기초태그 몇개를 더 설명해 드릴게요.
- HTML : 인터넷 상에서 여러분들이 보고 계신 웹페이지를 만들어 주는 언어입니다.
- TAG : <head><title>과 같이 <>에 사이에 표시된 문법이라고 할 수 있습니다. 모든 태그는 <head>로 시작하면 </head>로 끝납니다. 그러므로 / (슬러쉬)가 반드시 붙어서 마무리를 지어주어야 웹사이트에서 알아들을 수 있는 것입니다.
- <meta> : 속성값으로 겉으로 나타나지 않습니다.
- <br> : 줄 바꿈 태그입니다. 이것은 /를 통해서 마무리를 짓지 않아도 되므로 우리 워드프로세서에서 엔터와 같다고 보시면 됩니다.
- <p></p> : 문단의 단락을 구분하는 역할을 합니다. 이것은 줄을 바꾸지는 못합니다. 하지만 p태그를 쓰면 1줄이 띄워집니다. (div와 차이점)
- <pre></pre> : 일반 워드프로세스 한글프로그램과 같이 글을 쓰면 띄워쓰기하는대로 엔터치면 엔터치는대로 탭하면 탭하는 대로 우리가 일반적으로 알고 있는 그대로 다 보여줍니다.
- <div></div> : 문단의 구분을 해줍니다. p태그와 다른점은 줄바꿈없이 바로 시작합니다. 아래의 사진을 봐주세요^^
-  는 스페이스 바를 누르는 것과 같은 띄워쓰기입니다.
- <center></center> : 태그 안에 포함 된 모든 것을 가운데 정렬합니다.
- <strong></strong> : 태그 안에 포함 되어 있는 모든 글자를 강조시킵니다.
제가 위에 적어 놓은 문법들을 총 망라한 정보를 모두 적어 놓았습니다. 처음 딱 봤을 때는 헷갈릴 수도 있어요.
HTML의 구성은 html로 시작해서 head와 body로 구성됩니다. 항상 시작과 끝이 존재하는 것은 명심하세요.
여러개 적어 놓았지만 하나하나 때어놓고 보시기 바랍니다. 줄바꿈의 대표적인 태그가 p, br, div가 있는데요. 3가지의 차이점은 p는 위아래 줄바꿈이 있다는 것, br은 우리가 알고 있는 엔터와 같다는 것, div는 줄바꿈 없이 문단을 이어간다는 것. 이렇게 구분 할 수 있겠습니다.
출력화면을 보고 더 공부해 보도록 하겠습니다.
위와 아래를 비교해보면 알기 쉽죠? 1~7까지 하나하나 그 이유에 대해서 생각해보면 쉽습니다. 타이틀은 가장 상단에 위치한 곳에 있으며, 주제는 가운데 정렬, h1크기로 나타냈습니다. p, br, div에 줄바꿈에 대한 것은 위를 보고 확인하시면 되겠습니다. 또 줄바꿈은 pre태그도 있습니다. pre태그는 우리가 일반적으로 사용하는 글쓰기와 마찬가지로 줄바꿈을 하면 줄바꿈 그대로 그대로 띄워쓰기를 하면 띄워쓰기 그대로 보여지는 대로 웹 상에서도 나타납니다.
<strong>에 대한 문법을 깜박했네요. 오늘 너무 광범위하게 적다보니 초보자 분들에게는 너무 복잡하게 보일 수도 있었겠네요. 저도 HTML을 배운지가 얼마 되지 않아서 하나하나 가볍게 알려드려야겠어요. 하루에 많은 것을 습득하려고 하다보니 조금 어렵게 설명한 부분도 있는 것 같습니다.
오늘의 가장 중요한 포인트는 제목 설정태그와 줄바꿈 태그의 차이점이 되겠습니다. 위에 있는 중요 문법 태그들은 상당히 중요하므로 기본적으로 암기하시기 바랍니다.
'Blog > 웹언어' 카테고리의 다른 글
| HTML기초 이미지에 링크 걸기 방법 (3) | 2017.05.16 |
|---|---|
| HTML기초 테이블 태그로 표 만들기 방법 (0) | 2017.04.22 |
| HTML기초, 순서와 목록을 만드는 태그 (0) | 2017.04.20 |
| HTML기초, 이미지 크기 조절 및 정렬 (0) | 2017.04.11 |
| HTML기초, 기초지식과 이미지 삽입하기 (0) | 2017.04.04 |