블로그에서 Html의 CSS 작성 시 글꼴 문단을 어떻게 지정하는지 font에 관하여 그리고 background, 하이퍼링크에 어떤 방식으로 정의하고 사용되고 표현되는지 정리해 보았다.
CSS sheet에서 font는 어떻게 정의되는가
CSS sheet의 글자 관련 부분은 font 속성이 가장 많이 사용되고 있습니다.
font 속성
color : 색이름, RGB 값 : 글자 색
font-family : 글꼴 이름 : 글꼴 또는 글씨체
font size : 절댓값, 상대 값, 길이, 퍼센트 : 글자 크기
font-style : normal, italic, oblique : 글자 모양
font-variant : normal, smaill-caps : 작은 크기의 대문자로 지정
font-weight : normal, bold, bolde, lighter, 100~900 : 글자의 굵기
<html><head>
text 속성
text-indent : 길이, 퍼센트 : 들여쓰기
text-align : left, right, center : 문자열 정렬
line-height : normal, 숫자, 길이, 퍼센트 : 줄 간격 (행 간격)으로 행의 놀이가 아닙니다.
vertical-align : top, bottom, middle : 수직 정렬
letter-spacing : normal, auto, 길이 : 문자 간격
word-spacing : normal, 길이 : 단어 간격
white-spacing : normal, pre, nowrap : 빈칸 및 줄 바꿈
text-decoration : none, underline, overline, line-through, blink : 문자열 처리
text-transform : none, capitalize, uppercase, lowercase : 문자열 대소문자 변경
background 관련 CSS 속성에는 무엇이 있나
배경에 대한 색 또는 문서 전체의 글자 색, 배경 이미지 지정 등에 사용
background : 대표 속성
background-color : 색이름, RGB 값, transparent : 배경색 지정
background-image : url, none : 배경 이미지 경로/파일 지정
하이퍼링크 관련 CSS에 대하여
앵커 가상 클래스라고 하는데 보통 링크된 부분에 마우스를 대면 색이 바뀌거나 밑줄이 생기는 등 하이퍼링크의 표시, 상태 조절 CSS로 <a>태그에 적용되므로 앞에 a가 붙게 됩니다.
a:link : 하이퍼링크에 대한 모든 설정
a:visited : 방문한 적이 있는 링크 속성 설정
a:active : 링크를 클릭하려는 순간의 속성 설정
a:hover : 마우스가 링크 위에 올라가 있을 때 속성 설정