[HTML/CSS] 문서작성 기본태그!!

TIP/Blog 2017. 6. 6. 21:46

[HTML/CSS] 문서작성 기본태그!!

글을 쓸때 강조하기 위해 글씨를 굵게 하거나, 글자 색, 크기 등을 변경하죠? 흔히 블로그나, 카페 등에서는 문서작성의 편의를 위해 상단에 아이콘으로 제공하는 경우가 많아요.

그럼 상단의 메뉴에 대한 태그를 알아보도록 해요~

본문에는 사용방법에 대한 예시만 적어놨어요. 결과값들은 위에있는 html연습하는 링크를 타고 직접 작성해 보면 태그에 대한 이해가 훨씬 빠를거에요.

<Hn></Hn> 제목태그

태그	속성	속성값	비고
Hn	align	left	왼쪽 정렬
		right	오른쪽 정렬
		center	가운데 정렬

Hn에서 n에는 1~6까지의 숫자가 들어가요. <h1>부터 큰 제목이며 <h6>는 가장 작은 제목이에요. Hn은 속성, 속성값을 생략하고 사용할 수 있습니다.

예) <h1>이렇게 제목을 넣으면되요.</h1>

글씨태그

태그	속성	속성값	비고
font	face	Font이름	돋움, 바탕, 굴림 등의 글씨체를 지정
	size	1~7	글씨의 크기
	color	색상코드	글씨의 색

예) 글씨체 '바탕'

예) 빨간글씨 4의 크기에요.

강조 태그

태그	속성	속성값	비고
strong			굵은 글씨, 볼드체
u			밑줄
em			기울임, 이탤릭체
strike			취소선

예) 굵은 글씨

예) 밑줄

예) 기울임

예) <strike>취소선</strike>

흔히 볼드체는 태그를 사용하며, 이탤릭체는 를 사용하기도 하죠? , 태그의 경우 글자를 강조해주는 반면 , 은 의미를 강조해주는 태그에요. 이게 무슨 소리냐면 검색엔진의 키워드를 수집하거나, 텍스트를 음성으로 읽어주는 프로그램 등을 사용할때 해당 부분을 강조해서 읽어주게 되어있어 왠만하면 , 을 사용해주는게 활용도가 더 뛰어나요.

줄바꿈 없이 효과 주기

태그	속성	속성값	비고
span	style	color:색상코드	줄바꿈 없이 색상변경
		background-color	줄바꿈 없이 배경색변경
		font-size	줄바꿈 없이 글씨 크기 변경

위에 에서 글씨 크기나, 색상을 바꾸는 법에 대해 알아봤는데요. 태그를 사용하면 조금 더 다양한 효과를 줄 수 있어요. 글자의 배경색을 주거나, 글자의 크기도 pt, px단위로 원하는데로 사용 가능해요.

태그 자체는 기본적으로 대상을 감싸주는것 이외에 아무런 효과가 없기 때문에 CSS를 통해 별도의 효과를 줘야해요. 속성에 style로 표현된 태그들은 모두 CSS효과를 부여했다고 생각하시면 쉬워요. 폰트는 태그보다 이렇게 CSS로 효과를 주는 경우가 더 많아요.

위에 와있는 속성값 이외에도 font-weight나 font-family 등의 다양한 속성값들이 더 있어요.

예) 글자를 빨간색으로 자유롭게 바꿀 수도 있어요.

예) 글자의 배경색을 파란색으로 할수도 있죠.

예) 이렇게 글씨크기를 자유롭게 바꿀수도 있어요.

▶관련 포스팅◀

[TIP/Blog] - [HTML/CSS] 폰트 사이즈 단위

[TIP/Blog] - [HTML/CSS] CSS란? CSS의 작성법

문단을 나누는 태그

태그	속성	속성값	비고
p	align	left	왼쪽 정렬
		center	가운데 정렬
		right	오른쪽 정렬
		justify	양쪽 맞춤 정렬

태그는 문단을 나누어 주며 문단과 문단 사이에 줄간격을 두고 있어요. 태그도 속성과 속성값을 생략하고 사용 가능한데, 속성과 속성값을 지정해주지 않으면 왼쪽 정렬이 기본이에요.

예) 왼쪽 정렬

예) 가운데 정렬

예) 오른쪽 정렬

예) 양쪽 맞춤 정렬

태그	속성	속성값	비고
p	style	text-indent	들여쓰기
		text-indent padding-left	내어쓰기는 2가지 속성값을 동시에 적용해요.
		margin-left	전체 들여쓰기 및 내어쓰기
blockquote			전체 들여쓰기 및 내어쓰기