01.HTML - 기본 태그 설명 및 예제

 

나중에 웹 에디터로 작성할 수 있지만 태그의 기능을 눈으로 읽을 수는 있어야 하기 때문에 기초 지식은 필요하다.

 

<h1> ~ <h6> </h6>~</h6>

h의 의미는 웹 문서의 제목을 나타낼때 사용하는 요소이다.

h는 블럭요소이며 인라인이나 텍스트는 포함가능하지만 블럭 요소는 포함 할 수 없다.

 

<p></p>

단락을 정의하는 블럭 요소이므로 줄 바꿈이 일어난다.

블럭 요소이기 때문에 h와 마찬가지로 텍스트와 인라인 요소만 포함 가능하다.

 

<a href="상대경로,절대경로"></a>

a태그는 링크를 걸때 사용한다.

 

<img src="주소" alt = "name"/>

이미지를 붙이는 태그로 주소값은 절대,상대 둘다 가능하지만 웹서버는 상대경로는 사용하는게 보안에 좋고 제정신이라면 그렇게 사용한다. alt는 꼭 써야한다.

 

<blockquote cite="인용문 출처" title="제목"></blockquote>

인용문을 붙이는 태그

 

<hr/>

구분선을 긋는 태그이다.

 

<address></address>

주소를 지정하는 태그이다.

 

<em></em>

<strong></strong>

인라인 요소를 강조하는 태그로 em은 italic strong은 bold체이다.

 

<abbr title="Long Term Evolution">LTE</abbr>

<acronym title="United Nations Children's Fund">UNICEF</acronym>

abbr은 생략어로 www나 LTE같이 한 문자씩 발음하는 단어에 사용하고

acronym은 두문자어로 유니세프, 나토 처럼 한 단어로 발음하는 단어에 사용한다. 기능상의 차이는 없고 영어권에서 개발된 html특성상 사용자에 이해를 돕기위해 구분되어 있다.

 

<del>삭제글</del>

<ins>수정글</ins>

del은 삭제글처럼 글자 중간에 선을 그을때 사용하고 ins는 밑줄을 그을때 사용한다.

 

리스트(목록) 출력하는 방법

 

리스트는 3가지 방법으로 표현하는데 ol(순차형 리스트),ul(비순차적 리스트),dl(정의형 리스트) 가 있다.

 

markup 예제와 예제가 어떤식으로 보이는지 아래에 올려 놓았다.

 

 

 

단락을 정의하는 p는 블럭요소이므로 줄바꿈이 일어납니다.

제목

p요소는 텍스트와 인라인 요소를 포함할 수 있지만 같은 블럭 요소는 포함하지 못합니다.

예) ceo인사말 페이지 처럼 문장으로 구성된 내용을 문단으로 구분하기 위해 사용한다.

제목

제목

제목

제목

제목

테스팅

---

서울시 당산동 태일빌딩 COPYRIGHT © 한국산업융합협회 All Rights Reserved

텍스트요소

강조

이제는반응형웹이 대세이다.
인라인요소로 일반 강조할때 사용, 기울림체로 표현한다.
ex)회원가입텍스트 구성시, 아이디는 4-8글자입니다.

이제는반응형웹이 대세이다.
인라인요소 볼드체로 나타낸다. ex)필수입력사항

생략어와 두문자어

LTE UNICEF(유니세프)

추가글과 삭제글

정기세일 : 8.30-09.15

정기세일 변경 9.1~9.15

정기세일

윗첨자와 아랫첨자

o²co₂

ol요소의 활용

채용절차

1. 서류전형
2. 면접전형 : 기술면접
3. 최종 : 임원면접

ul요소의 활용

채용절차

• 웹강사 소개
• 강좌목록
• 구인구직소개

dl요소의 활용

즐겨찾는 메뉴

웹강사 소개

강좌목록

구인구직소개

상대경로 :sub상대경로

절대경로 :sub절대경로