tag

tag

코드	설명
background	배경색상 & 속성 ex) background:blue url("~") no-repeat;
background-color	배경색상만 지정
background-image	배경사진
background-size	배경사이즈
background-position	배경위치 설정
width	가로 사이즈
height	세로 사이즈
margin	간격(바깥)
margin: auto	가운데로 가져오기
padding	간격(안)
border-radius	모서리 둥글게
onmouseover show()	마우스 올리면 나타남
onmouseover hide()	마우스 올리면 사라남
align: center;	가운데 정렬
align="left"	그림을 왼쪽, 텍스트를 오른쪽으로 정렬
text-align: left;	img태그에 해당 수식을 입력하면 그림은 왼쪽, 글은 오른쪽 정렬
border: dotted grey;	회색 점선
pre	개발자 포맷 그대로 나옴
link	CSS파일을 따로 만들어 놓으면 해당하는 HTML파일의 CSS꾸미기가 전체로 적용됨
form	입력받은 값을 server로 전송
form action="~"	입력받은 값을 ~의 server로 전송
form method="get/post"	전송방식 2개, 입력받은 값을 server로 전송
img src="~"	이미지 삽입
a href="~"	하이퍼링크
a href="~" download	입력한 데이터 다운로드
iframe src="iframe1.html"	연결된 html 내용을 보여줌
form	입력받은 값을 server로 전송
textarea rows="~"	~에 행 갯수 설정
textarea cols="~"	~에 열 갯수 설정
select	선택 창 생성
option	선택 창 옵션 생성(select 안에 작성)
option selected="selected"~	화면에 해당 text(~) 고정
disabled="disabled"	요소를 사용할 수 없도록 비활성화(회색창)
readonly="readonly"	입력된 내용을 수정할 수 없도록 만들어 주는 속성
vw(viewpoint width)	브라우저 가로길이의 1/100
vh(viewpoint height)	브라우저 세로길이의 1/100

table

코드	설명
border-collapse: collapse;	td의 위, 아래, 좌, 우 테두리선을 하나의 선으로 병합
border: 1px solid #000	td에 1px 테두리선을 표현
caption	타이틀
tr	행(tr*11+tab하면 tr이 11개가 생성됨)
td	데이터 입력
th	진하게
align="center"	table안의 데이터를 가운데 정렬
colspan="~"	가로 병합
rowspan="~"	세로 병합
colgroup	세로 그룹(col class="~"로 주면 됨)

type

코드	설명
text	한 줄 글 입력 상자(maxlength로 최대 글자 수 제한 가능)
password	비밀번호 입력 상자(입력된 내용은 *로 표시)
search	검색 입력 상자
email	이메일 입력 상자
tel	전화번호 입력 상자
color	컬러 입력 상자
number	숫자 입력 상자(숫자의 최솟값(min), 최댓값(max) 속성으로 지정 가능)
range	슬라이드 바(최솟값(min), 최댓값(max) 속성으로 지정 가능)
radio	여러 개의 radio 중 하나만 선택 가능
checkbox	다중 선택 가능
submit	전송 버튼(value) 속성으로 버튼에 표시되는 텍스트를 지정

글자 관련 tag

코드	설명
em	강조하고 싶은 텍스트 표시하는 태그로 기울임체로 표시
strong	중요한 텍스트 정의하는 태그로 굵은체로 표시
b	의미를 가지지 않는 단순한 텍스트로 굵은체로 표시
mark	글자를 형광펜처럼 표시
small	주의사항, 법적제한, 저작권 등을 표시할때 사용
em	강조
i	이탤릭으로 강조
b>	진하게 이탤릭으로 강조
보통 문자	한 단계 작은 문자
del	삭제
ins	밑줄
u	밑줄
보통문자의	윗첨자
보통문자의	아래첨자
mark	하이라이팅
font-size	글자 사이즈
th	글자굵게
font-weight:bold	글자굵게(700)
font-weight:normal	글자표준(400)
font-style: italic	기울임
font-style: normal	기울어지지 않음
font-variant: small-caps	크기가 작은 대문자로 설정
font-variant: normal	크기가 작은 대문자를 원래대로 되돌림
font-famliy	글꼴설정
color	글자 색
text-align: center;	가운데 정렬
line-height: 1.4	줄간격 140%
letter-spacing	글자 간의 간격
word-spacing	단어 간의 간격
text-shadow	그림자

글자 속성(text-decoration)

속성 값	설명
underline	밑줄
overline	윗줄
line-through	가운데줄
none	줄 없음

글자 속성(text-transform)

속성 값	설명
uppercase	대문자
liwercase	소문자
capitalize	첫글자만 대문자

문단(paragraph) 관련 스타일

속성 값	설명
text-indent	문단의 첫머리를 들여쓰기 해줌(블록 요소에만 적용 가능)
word-wrap	가로 폭에 맞추어 적당히 잘라 다음 줄로 내려가게 함
text-overflow	긴 텍스트에 말줄임 기호를 사용할 때(...)
opacity	투명도(0~1로 표현)

text-align

속성 값	설명
left	왼쪽 정렬
center	중앙 정렬
right	오른쪽 정렬
justify	양쪽 정렬

vertical-align(수직 정렬)

속성 값	설명
top	위쪽 정렬
middle	세로 중앙 정렬
bottom	아래쪽 정렬

word-break

속성 값	설명
nomal	기본값
break-all	글자가 넘치면 줄바꿈
keep-all	단어를 끊어 줄바꿈하지 않음

word-space

속성 값	설명
nomal	연속되는 공백을 하나의 공백으로 처리 / 길면 자동 줄바꿈
nowrap	연속되는 공백을 하나의 공백으로 처리 / 자동 줄바꿈 X
pre	공백의 갯수가 그대로 표시 / 자동 줄바꿈 X
pre-wrap	pre와 같은 속성을 가지지만, 자동 줄바꿈이 가능함
pre-line	연속되는 공백을 하나의 공백으로 처리 / 줄바꿈은 그대로 표현되나 길면 줄바꿈 일어남

dispalay

속성 값	설명
block	block 요소로 변경 / 줄바꿈 일어남
inline	inline 요소로 변경 / 줄바꿈 X
inline-block	inline가 block 요소도 가지게 되고 블록 요소에 사용할 수 있는 속성 사용 가능 / 줄바꿈 X
none	요소를 보이지 않게 숨기고 흔적도 숨김

visivility

속성 값	설명
visible	요소를 보임
hidden	요소 숨김(내용이 있던 자리는 남아 있음)

overflow(요소 안의 내용이 요소의 크기보다 많을 경우 넘치는 부분을 처리)

속성 값	설명
hidden	넘치는 콘텐츠를 숨김
auto	넘칠 경우 스크롤바 생성
scroll	넘치지 않아도 스크롤바 생성
scroll-x	가로 스크롤바 생성
scroll-y	세로 스크롤바 생성
visible	넘치는 콘텐츠가 그대로 노출