HTML 태그 정리

2017.01.13 15:22|

나리보스|

추천19|

조회수1,436|

댓글10

HTML이란? 

 

HTML은 하이퍼텍스트 마크업 언어

(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. 

[출처 : 위키백과] 

 

HTML 태그

 

자주 사용하는 태그들의 간단한 정리입니다.

참고용으로 봐주세요 :)

 

<html></html>

 

<head></head>

 

<meta> : 정보

 

<title> : 제목

 

<body> : 본문

 

<div></div> : division 문서영역 등의 분할

 

<p></p> : paragraph 단락, 문단

 

<span></span> : 인라인요소들의 그룹화에 사용

 

<h1></h1>~<h6></h6> : 제목, 본문의 헤드 요소

 

<hr> : 단락 구분, 문서의 구분선

 

<!-- 주석 --> : 주석

 

<br> : break 줄바꿈

 

<table></table> : 표

 

<thead></thead> : 표의 헤더 행 그룹

 

<tbody></tbody> : 표의 내용 행 그룹

 

<tfoot></tfoot> : 표의 푸터 행 그룹

 

<th></th> : 셀 제목

 

<tr></tr> : 행

 

<td></td> : 셀

 

<ol></ol> : ordered list 순서가 붙는 리스트 형태

 

<ul></ul> : unordered list 순서가 붙지 않는 리스트 형태 (기호가 붙는다)

 

<li></li> : 리스트

 

<dl></dl> : definition list 정의 리스트

 

<dt></dt> : definition term 항목

 

<dd></dd> : definition description 설명

 

<a href="#" target=""></a> : anchor 링크

 

<img src="" alt=""> : 이미지

 

<form name="" action="" method=""></form> : 폼

 

<input type=""> : 입력상자

 

<textarea></textarea> : 텍스트 박스

 

<select>

<option value="1">one</option>  : 선택메뉴 

</select>

 

<button></button> : 버튼

 

HTML 문서의 기본 형태


​<html> 

<head>

<title></title>

</head>

<body>

</body>

</html>

 

태그를 이용한 예제


​자주 묻는 질문 1. 링크 변경 

 

요청사항

 

<a href="http://www.i-boss.co.kr/">아이보스</a> 

 

링크변경 : http://web.i-boss.co.kr/ 

텍스트변경 : 아이보스 > 아이보스 웹에이전시

 

수정완료

 

<a href="http://web.i-boss.co.kr/">아이보스 웹에이전시</a> 

 

자주 묻는 질문 2. 색상 변경

 

요청사항

 

<div>오늘은 기분 좋은 불금!</div>

 

색상변경 : '불금' 텍스트를 빨간색으로 변경

 

수정완료

 

<div>오늘은 기분 좋은 <span style="color:#ff0000;">불금!</span></div> 

 

오늘은 기분 좋은 불금!

----------

참 쉽쥬 :)
보스님들 하루 마무리 잘하시고 모두 불금 보내세요!

하트 아이콘하늘섬님 외 18명이 추천했습니다.

댓글 10
아이보스 알림

지금 이 글은 나리보스 보스님의 아이보스 인기 게시글입니다.

SNS에 공유하여 정보를 나누어 보세요. 페이스북 트위터 카카오스토리
하루동안 보지 않기
소셜로그인
번호제목작성자등록일추천조회
149판촉사이트 운영중입니다. 네이버 쇼핑 연동관련[1] 

다연맘

17.07.19164
148쇼핑몰 스토리보드 샘플 혹시 구할수있을까요? 

나스민

17.07.19061
147직영몰 제작 준비중입니다. 그런데...[4] 

툴홀릭

17.07.140145
145카페24에서 상품후기 에디터문의드립니다.[9] 

클림트가구

17.06.290248
144무점포 소자본창업을 꿈꾸고있습니다[1] 

택배왕김착불

17.06.190159
143고도몰, 카페24 쇼핑몰제작시 기본 구매해야할 것?[4] 

달슈

17.06.130214
141고도몰VS카페24VS메이크샵 어떤게 좋은가요?[8] 

환희씨

17.06.021354
139스토어팜 폰트사이즈 조절[2] 

수성이

17.05.300277
138개인방송국 솔루션 제작[4] 

택배왕김착불

17.05.260371
136오픈마켓 크롤링 하시는 업체 있나요?[2] 

쇼핑왕

17.05.190325
135자사몰 운영하시는 분들의 비율이 어느정도될까요?[5] 

두둠칫두둠칫

17.05.120348
134안녕하세요, 쇼핑몰 솔루션을 환불해 보신 분이 계실까..[3] 

코스모스플랜

17.04.260289
133안녕하세요. 사이트 운영에 도움이 필요해 의견 여쭤봐..[2] 

스텝어라운드

17.04.180286
BEST(html코딩)마케터를 위한 바로가기 버튼 생성법 [8] 

권용범

17.04.11191,373
130기존 쇼핑몰 리뉴얼 관련 질문입니다.[4] 

ajlfdsjl

17.04.030335
129쇼핑몰 홈페이지 자체개발 vs 메이크샵 어떤게?[2] 

무슨상관

17.03.291481
127동영상강좌 1강[4] 

바나로이

17.02.282492
126쇼핑몰제작 추천좀해주세요.[4] 

바나로이

17.02.272472
125[IOS]하이브리드앱 , 웹뷰에 관하여. 

바나로이

17.02.272712
1241.쇼핑몰 솔루션의 선택 !![9] 

바나로이

17.02.2512814
123쇼핑몰 제작 강좌를 진행해보려 합니다[13] 

바나로이

17.02.257421
119다수엑셀파일을 하나로 합치기(무료프로그램)[6] 

전옥철

17.02.165675
118기존 임대몰에서 몰인몰로의 이전 문의드립니다.[5] 

라임엘프

17.02.132367
117모바일에 HTML5 적용하면 문제가 될까요?[2] 

보스톡4

17.02.053328
116파비콘(Favicon) : 웹페이지 상단 탭 아이콘 

나리보스

17.02.014391
BEST카페24 SNS 로그인 연동! 가능합니다![10] 

나리보스

17.01.16142,214
114자사몰 SNS 연동 로그인 기능 문의드립니다.[3] 

CHLOE_SK

17.01.161387
113카페24로 쇼핑몰제작시 페이스북 픽셀[5] 

디스트

17.01.142714
BESTHTML 태그 정리[10] 

나리보스

17.01.13191,437
110크롬 개발자 도구를 사용하여 홈페이지 수정요청하기[4] 

나리보스

17.01.060666
12345 다음 페이지로 이동 마지막 페이지로 이동
top

로그인 후 더욱 많은 기능을 이용하세요!

네이버 계정으로 로그인
페이스북 계정으로 로그인
구글 계정으로 로그인
카카오톡 계정으로 로그인
이메일 또는 아이디로 로그인
X
회원가입ID/PW 찾기 소셜 계정 로그인

전체 알림

모두 읽음 표시 알림함

내 댓글

전체보기

받은 쪽지함

모두 읽음 표시 쪽지함

새로운 쪽지가 없습니다.

쪽지함

스크랩함

전체보기

스크랩한 게시글이 없습니다.

아이보스 추천 게시글을 스크랩 해보세요! 스크랩하기
아이보스 배너광고 영역