주요 서식(Texts) 태그
<h1> ~ <h6> 태그 heading : 제목
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
</ head >
< body >
< h1 > 안녕하세요 </ h1 >
< h2 > 안녕하세요 </ h2 >
< h3 > 안녕하세요 </ h3 >
< h4 > 안녕하세요 </ h4 >
< h5 > 안녕하세요 </ h5 >
< h6 > 안녕하세요 </ h6 >
</ body >
</ html >
<p> paragraph : 문단
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
</ head >
< body >
< h1 > 제목 태그 테스트입니다. </ h1 >
< p > 문단 태그 테스트입니다. </ p >
< p > 문단 태그 테스트입니다. </ p >
</ body >
</ html >
<br> break : 줄바꿈
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
</ head >
< body >
< p > 줄바꿈은 < br > br태그를 이용하여 줄바꿈 한다. </ p >
</ body >
</ html >
<hr> horizontal rule : 가로줄
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
</ head >
< body >
< p > 줄바꿈은 < br > br태그를 이용하여 줄바꿈 한다. </ p >
< hr >
< p > 가로줄 아래에 쓰는 글 </ p >
</ body >
</ html >
<pre> preformatted text : 정의된 형식
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
</ head >
< body >
< pre >
pre 태그를 테스트하는 중
pre 요소 내 텍스트는
고정폭 글꼴(fixed-width font)을 사용하여 표현
띄어쓰기
줄바꿈이 모두 그대로
나오게 됩니다.
</ pre >
</ body >
</ html >
<div> division : 그룹(블록)
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< div id = "black1" > 블록 구역 1 </ div >
< br />
< div id = "black2" > 블록 구역 2 </ div >
</ body >
</ html >
<span> 그룹, 인라인 특성을 가짐
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< span style = " background-color: red;" > 안녕 </ span >
< span style = " background-color: yellow;" > 반가워 </ span >
< span style = " background-color: blue;" > 하이 </ span >
</ body >
</ html >
<strong> (b) strong : 강조, bold : 굵은 글씨
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< p >
< strong > ipsum dolor sit, amet </ strong > consectetur adipisicing elit. Iste ipsa
asperiores officiis beatae, exercitationem consequatur repellat vel quo
repudiandae culpa a repellendus ducimus fugiat deserunt commodi
necessitatibus nulla consequuntur illum.
</ p >
</ body >
</ html >
<em> (i) emphasized text : 강조, itallic : 기울임체
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< p >
< strong > ipsum dolor sit, amet </ strong > consectetur adipisicing elit. Iste ipsa
asperiores officiis beatae, < em > consequatur repellat vel quo </ em >
repudiandae culpa a repellendus ducimus fugiat deserunt commodi
necessitatibus nulla consequuntur illum.
</ p >
</ body >
</ html >
<mark> marked, highlighted : 형광펜
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< p >
< strong > ipsum dolor sit, amet </ strong > consectetur adipisicing elit. Iste ipsa
asperiores officiis beatae, < em > consequatur repellat vel quo </ em >
repudiandae culpa a repellendus ducimus fugiat deserunt commodi
< mark > necessitatibus nulla consequuntur illum. </ mark >
</ p >
</ body >
</ html >
<small> 덧 붙이는 글, 저작권, 법률 표기 등...
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< p >
< strong > ipsum dolor sit, amet </ strong > consectetur adipisicing elit. Iste ipsa
asperiores officiis beatae, < em > consequatur repellat vel quo </ em >
repudiandae culpa a repellendus ducimus fugiat deserunt commodi
< mark > necessitatibus nulla consequuntur illum. </ mark >
</ p >
< hr >
< small > 이 글의 저작권은 주녘에게 있습니다. </ small >
</ body >
</ html >
<del> 제거된 텍스트, 취소선
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< p >
주녘은 개발자가 되기 위해 < strong > 자바, HTML, </ strong > < del > CSS를 </ del > 열심히 공부하였습니다.
</ p >
</ body >
</ html >
<ins> inserted : 밑줄
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< p >
주녘은 개발자가 되기 위해 < ins > 자바, HTML, </ ins > < del > CSS를 </ del > 열심히 공부하였습니다.
</ p >
</ body >
</ html >
<sub> subscript : 아래 첨자
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< p >
log < sub > 2 </ sub > 2
</ p >
</ body >
</ html >
<sup> superscript : 윗 첨자
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< p >
2 < sup > 2 </ sup > = 4
</ p >
</ body >
</ html >
<blockquote> 인용구(블록)
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< h3 > 태극기 </ h3 >
우리나라의 국기.
우리나라에서 국기제정에 대한 논의가 처음 있었던 것은 1876년(고종 13) 1월이었다. 운양호사건을 계기로 한 · 일 사이에 강화도조약 체결이 논의되는 동안, 일본 측은 「운양호에는 엄연히 일본국기가 게양되어 있었는데, 왜 포격했느냐?」면서 트집을 잡았지만, 조선 측에서는 < 국기 > 가 무엇을 뜻하는지 알 수 없었다.
이 일이 계기가 되어 조정에서 비로소 국기제정의 필요성이 활발히 논의되었고, 82년 8월 9일 수신사 박영효 등 일행이 인천에서 일본 배를 타고 도일할 때 당장 게양해야 할 국기가 있어야겠다고 생각한 나머지, 그전에 이미 조정에서 대체적으로 정해진 국기 도안내용을 약간 고쳐 태극사괘의 도안이 그려진 기를 만들었다. 이들 일행은 8월 14일 고베(神戶)에 도착하여 숙소건물 지붕 위에 이 기를 게양했는데, 이것이 태극기의 효시다. 이것을 조정에서 83년 정식으로 국기로 채택, 공포했고, 대한민국이 수립된 후 1949년 문교부에 심의위원회를 설치, 음양과 사괘의 배치안을 결정, 오늘에 이르렀다.
< br >< cite > [네이버 지식백과] 태극기 [太極旗] (한국근현대사사전, 2005. 9. 10., 한국사사전편찬회) </ cite >
</ blockquote >
</ body >
</ html >
<q> quotation : 인용구, 인라인 속성 q태그를 쓰면 q태그 안에 텍스트를 큰 따옴표를 표시해줍니다.
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< p > 주녘에 따르면,
< q> HTML을 마스터하고 싶다고 합니다. </ q >
</ p >
</ body >
</ html >
<abbr> abbreviation/acronym : 줄임말 abbr 태그를 사용하면 마우스 커서를 가져다 놓으면 줄임말의 설명을 보여줍니다.
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< p > 주녘에 따르면,
< q >< abbr title = "Hyper Text Markup Language" > HTML </ abbr > 을 마스터하고 싶다고 합니다. </ q >
</ p >
</ body >
</ html >
목록(Lists) 태그
1. 순서가 있는 목록(Ordered Lists)
<ol>, <li>
<ol type=" "> type에 종류에 따라 순서의 표시가 달라집니다.
유형
설명
type="1"
숫자 목록(기본값)
type="A"
알파벳 대문자
type="a"
알파벳 소문자
type="I"
로마숫자 대문자
type="i"
로마숫자 소문자
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< h3 > 주녘이 개발자가 되기 위해 배우고 있는 언어들 </ h3 >
< ol >
< li > 자바 </ li >
< li > HTML </ li >
< li > CSS </ li >
< li > 스프링 </ li >
</ ol >
</ body >
</ html >
2. 순서가 없는 목록(Unordered Lists)
<ul> <li>
순서가 없는 목록의 스타일에는 4종류가 있습니다.
유형
설명
disc
불릿형(기본값)
circle
작은원형
square
작은 사각형
none
마크 생략
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< h3 > 주녘이 개발자가 되기 위해 배우고 있는 언어들 </ h3 >
< ul style = " list-style-type: disc" >
< li > 자바 </ li >
< li > HTML </ li >
< li > CSS </ li >
< li > 스프링 </ li >
</ ul >
< h3 > 주녘이 개발자가 되기 위해 배우고 있는 언어들 </ h3 >
< ul style = " list-style-type: circle" >
< li > 자바 </ li >
< li > HTML </ li >
< li > CSS </ li >
< li > 스프링 </ li >
</ ul >
< h3 > 주녘이 개발자가 되기 위해 배우고 있는 언어들 </ h3 >
< ul style = " list-style-type: square" >
< li > 자바 </ li >
< li > HTML </ li >
< li > CSS </ li >
< li > 스프링 </ li >
</ ul >
< h3 > 주녘이 개발자가 되기 위해 배우고 있는 언어들 </ h3 >
< ul style = " list-style-type: none" >
< li > 자바 </ li >
< li > HTML </ li >
< li > CSS </ li >
< li > 스프링 </ li >
</ ul >
</ body >
</ html >
설명목록(Description Lists) <dl> <dt> <dd>
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > heading tag test </ title >
< link rel = "stylesheet" href = "./css/test.css" />
</ head >
< body >
< h3 > 주녘의 카페 메뉴 </ h3 >
< dl >
< dt > 커피 </ dt >
< dd > - 아메리카노 HOT </ dd >
< dd > - 아메리카노 ICE </ dd >
< dt > 논 커피 </ dt >
< dd > - 딸기쉐이크 </ dd >
< dd > - 초코쉐이크 </ dd >
</ dl >
</ body >
</ html >