HTML 기초 태그
모든 웹 문서를 시작할때 알아야하는 html 의 기초중의 기초를 알아봅시다.
1일차만 알아도 웹 페이지를 만들 수 있습니다. 다음은 웹 문서를 작성할때 가장 먼저 기초적으로 적어줄 태그 입니다. 웹문서를 디자인할때 예쁘게 정리해주려면 필수적으로 CSS도 익혀야 합니다. 처음에는 HTML 부터 적교 그 다음 CSS로 스타일을 지정해주는 것입니다. 오늘은 먼저, CSS를 적용하기 전에 HTML 기초부터 적어보겠습니다.
|
<!doctype html> ---> 도큐멘트 선언 <html> ---> 웹문서 HTML 시작 <meta charset="utf-8"> --->메타 태그 (문서 정보, 광고 코드 등을 불러준다.) <title>Document title</title> ---> 문서의 큰 제목을 써준다. </head> ---> 머릿말 닫기 <body> ---> 본격적인 문서의 시작 ( 웹 문서를 만드는 데 필요한 모든 태그를 담는다.) </body> </html> ---> 웹문서 HTML 닫기 |
텍스트 스타일 지정 하기
다음은 텍스트 스타일을 지정해 봅시다. 글자의 크기, 스타일들을 지정해줍니다.
|
<h1>제일 큰제목</h1> <p>문장 단락 지정하기--- 웬 만한 문장은 p 태그안에 넣습니다.</p> <blockquote> 문장을 들여쓰기 할때 사용한다. </blockquote> <b> 굵은 서체 지정 <em> 강조(이탤릭) <i> 이탤릭 <mark> 하이라이트 (HTML5 only) <small> 작은크기로 <strong> 강조(굵게) <sub> baseline 아래에 작은타이틀로 <sup> baseline 위에 작은 타이틀로
|
커맨트 태그
웹 문서 작성시 문서를 정리하는 차원에서 자주 사용합니다. 수정할때 커맨트만 보고 찾아서 작업하면 편리합니다.
|
<!-- 웹 사이트 작성시 관리자만 볼 수 있는 코드로 웹 문서에 적어 넣어준다. 웹문서 사용자들에게 직접 안보인다. 수정할때 편리하다. --> |
리스트 (목록) 지정하기
문서 작성시 목록을 정해야 할때 사용합니다. 웹문서 만들때 네비게이션 메뉴바를 만들때 주로 사용합니다.
|
<ul> -- 도형형 리스트(순서 표시 없음) <li>과자</li> <li>가방</li> <li>연필</li> <li>신발</li> </ul> <ol> -- 번호형 리스트(순서대로) <li>학교</li> <li>방학</li> <li>공부</li> <li>프로그램</li> </ol> <dl> --- 설명형 리스트 <dt>딸기</dt> <dd>비타민 C가 많아요!</dd> <dt>사과</dt> <dd>변비에 좋아요!</dd> </dl> |
특수문자 지정하기
웹 문서에서 특수기호 표시할때 사용하는 태그입니다. - 웹 브라우저 마다 잘 보이지 않는 태그도 있습니다. -
| © < > & & |
© < > & nbsp; |
하이퍼링크 만들기
문서를 연결할때 사용합니다. 외부 문서 연결시 문서의 주소를, 내부 문서 연결시 문서의 이름을 적습니다.
|
<a href="http://google.ca”>Google</a> ---> 구글 연결시 <a href=“about.html”>About</a> --> 본인의 파일 연결시 |
이미지 부르기
웹 문서에 부를 수 있는 이미지는 RGB모드의 Jpg, gif, svg, png 파일 확장자를 가진 그림이미지입니다.
| <img src="a.jpg"> <img src="https://images.unsplash.com/photo-1593642632505-1f965e8426e9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=925&q=80"> |
테이블 태그 사용하기
문서를 보기 좋게 정리하려면 테이블 태그를 사용합니다.
|
<table> 테이블 시작할때 • <tr> --> 테이블 줄 만들때 • <td> --> 테이블 각 칸안의 내용 <thead> --> 테이블 머릿말 • <th> --> 테이블 머릿말 과 본문 테이블 나눌때 (옵션) • <tbody>--> 테이블 본문 • <tfoot> --> 테이블 꼬릿말 |
|
<table> |
Span 태그
이 태그는 그 자체로는 아무것도 보이지 않습니다. 하지만 문서의 문장, 컨텐츠 등을 단위별로 묶어주고 거기에 효과를 주기위한 CSS 를 불러 주는 클래스를 작성하기 위해 꼭 필요한 태그입니다.
| <span>이 태그는 그 자체로는 아무것도 보이지 않습니다. 하지만 문서의 문장, 컨텐츠 등을 단위별로 묶어주고 거기에 효과를 주기위한 CSS 를 불러 주는 클래스를 작성하기 위해 꼭 필요한 태그입니다. </span> |
Div 태그
이 태그는 span 태그와 비슷하지만 보다 크게 문서 전체를 묶어주고, 각 섹션을 나눠서 지정해줍니다. 편리함때문에 최근에는 테이블 태그보다 더 많이 사용합니다. 또한 CSS 를 불러 주는 클래스를 작성하기 위해 꼭 필요한 태그 입니다. div태그안에 여러개의 div태그 묶음을 만들수 있습니다.
|
<div> ---------문서 시작 <div>--------내부 문서 시작 <div>ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ</div> <div> ㅎㅎㅎㅎㅎㄹㅎㅎㅎㅎㅎ</div> </div>--------내부 문서 닫기 |
Id 와 Class 속성 지정하기
CSS 와 자바스크립트등을 불러 웹문서에 효과를 주거나, 각 속성에 명령을 주거나, 애니메이션을 만들고자 할때 각 단락의 이름을 만들어주고 그것을 불러서 속성을 지정해 주어야 합니다. 차이점은 클래스와 ID가 모두 동일하게 적용되는 경우, "id"가 먼저 적용됩니다.
그래서, 일반적으로 다음을 사용하는 것이 좋습니다. "class"는 CSS와 연결할때, "id"속성은 자바스크립트에서 부를 때 사용합니다.
|
<p id= “tools”>부엌 정리하는 도구들</p> ---> 웹 문서안에 단일 속성을 지정할 수 있습니다. <p class=“class_name”>교실 이름</p> ----> 웹 문서안에 다양한 속성을 지정할 수 있습니다. |
지금까지 가장 기본적인 HTML 태그를 살펴보았습니다. 다음글에는 이 문서에 CSS 스타일을 적용해 보겠습니다.
'디지털노마드 > HTML과 CSS 강좌' 카테고리의 다른 글
| CSS - 텍스트 꾸미기와 정렬하기 (0) | 2020.07.21 |
|---|---|
| CSS Syntax - CSS 쓰는 방법 (0) | 2020.07.17 |
| CSS - 박스 테두리 모양 둥글게 만들기 (0) | 2020.07.16 |
| CSS로 전체 배경색 바꾸기 (0) | 2020.07.15 |
| CSS 배우기 - CSS 기본설정하기 (0) | 2020.07.14 |
